• 更新记录
  • 1.1.2（2019-07-19）
  • 1.1.1（2019-07-15）
    • Card 卡片
    • 更新日志

    更新记录

    1.1.2（2019-07-19）

    • 修复 依赖组件找不到的问题

    1.1.1（2019-07-15）

    更新 readme 查看更多

    Card 卡片

    卡片视图组件，组件名：uni-card，代码块： uCard。

    使用方式：

    在 script 中引用组件 

    1. import uniCard from "@/components/uni-card/uni-card"
    2. export default {
    3.     components: {uniCard}
    4. }

    一般用法

    1. <uni-card title="标题文字" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="额外信息" note="Tips">
    2.     内容主体，可自定义内容及样式
    3. </uni-card>

    内容通栏

    1. <uni-card is-full="true" title="DCloud" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="2018.12.12" >
    2.     <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" style="width: 100%;"></image>
    3. </uni-card>

    图文卡片模式

    1. <uni-card
    2.     title="标题文字"
    3.     mode="style"
    4.     :is-shadow="true"
    5.     thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg"
    6.     extra="Dcloud 2019-05-20 12:32:19"
    7.     note="Tips"
    8. >
    9.         那是一个秋意盎然、金风送爽的日子，我和父母一起来到了位于上师大旁的康健园。一踏进公园，一股浓郁的桂香扑鼻而来，泌人心脾,让我心旷神怡，只见一朵朵开得正烈的金色桂花，迎风而立，仿佛在向我招手。我们追着这桂香，走进了清幽的公园。
    10. </uni-card>

    标题卡片模式

    1. <uni-card 
    2.     title="Dcloud" 
    3.     mode="title" 
    4.     :is-shadow="true" 
    5.     thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" 
    6.     extra="技术没有上限" 
    7.     note="Tips"
    8. >
    9.     那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园.一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手.我们追着这桂香,走进了清幽的公园.
    10. </uni-card>

    自定义底部按钮

    1. <uni-card title="Dcloud" note="true">
    2.     默认内容
    3.     <template v-slot:footer>
    4.         <view class="footer-box">
    5.             <view>喜欢</view>
    6.             <view>评论</view>
    7.             <view>分享</view>
    8.         </view>
    9.     </template>
    10. </uni-card>

    Tips

    • 自定义底部按钮，必须指定 <template v-slot:footer> </template> 。此时 note 随意指定内容即可。 属性说明：
    属性名类型默认值说明
    titleString-标题文字
    extraString-标题额外信息
    noteString-底部信息
    thumbnailString-标题左侧缩略图
    modeStringbasic卡片模式 ，可选值， basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片
    is-fullBooleanfalse卡片内容是否通栏，为true时将去除padding值
    is-shadowBooleanfalse卡片内容是否开启阴影

    事件说明：

    事件称名说明返回参数
    click点击 Card 触发事件-

    更新日志

    1.1.2

    • 修复 依赖组件找不到的问题 1.1.1

    • 更新 readme 1.1.0

    • 修复 v-for 循环，内容不显示的 bug。（需要 HBuilderX 开启自定义组件模式）

    • 添加图文卡片模式
    • 修复点击事件失效的 bug
    • 优化代码示例显示效果

    • 添加更多自定义模式 1.0.0

    • 初始项目