homeCard 首页卡片

背景

为了实现小程序的首页中card的效果展示

使用

<template>
   	<home-card :title="title" :rightText="rightText" @rightClickChange="rightClickChange">
    <view v-slot="header">
    {"我是头部"}
    </view>
    <view>
    {"我是内容"}
    </view>
	</home-card>
</template>
<script>
  export default{
    data(){
        title:'我是标题',
        rightText:'我是头部右侧内容'
    },
    methods:{
        rightClickChange:()=>{
            console.log('头部右侧被点击了')
        }
    }
  }
</script>

参数说明

属性	描述	类型	可选值	默认值
cardStyle	卡片的样式	Object	——	marginTop: '16rpx
headerStyle	卡片头部的样式	Object	——	——
title	卡片标题	String	——	——
titleColor	卡片标题颜色	String	——	#000000
showHeader	卡片头部是否显示	Boolean	true,false	true
showHeaderRight	卡片头部右侧内容是否显示	Boolean	true,false	true
showHeaderRightIcon	卡片头部右侧右侧箭头图标是否显示	Boolean	true,false	true
rightText	卡片头部右侧内容	String	——	——
rightTextColor	卡片头部右侧内容颜色	String	——	rgba(0, 0, 0, 0.45)
rightIcon	卡片头部右侧图标	String	——	youjiantou
rightIconColor	卡片头部右侧图标颜色	String	——	rgba(0, 0, 0, 0.25)
rightIconSize	卡片头部右侧图标大小	Number	——	16

事件

事件	说明
rightClickChange	头部右侧点击事件

slot

插槽	说明
slot	默认内容插槽
header	头部插槽

组件源码及综合示例参考

组件源码 (opens new window)组件参考 (opens new window)