1:将时间插件-timePicker导入到
开发工具HBuilderX
2:导入之后可以看到在我的项目底下多出了一个组件components文件夹
3:根据文档示例:
https://ext.dcloud.net.cn/plugin?id=22
来写页面代码
代码如下:
<template> <view class="content"> <!-- 一般用法 --> <uni-card title="标题文字" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="额外信息" note="Tips"> 内容主体,可自定义内容及样式 </uni-card> <!-- 内容通栏 --> <uni-card is-full="true" title="DCloud" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="2018.12.12" > <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" style="width: 100%;"></image> </uni-card> <!-- 图文卡片模式 --> <uni-card title="标题文字" mode="style" :is-shadow="true" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg" extra="Dcloud 2019-05-20 12:32:19" note="Tips" > 那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园。一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手。我们追着这桂香,走进了清幽的公园。 </uni-card> <!-- 标题卡片模式 --> <uni-card title="Dcloud" mode="title" :is-shadow="true" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" extra="技术没有上限" note="Tips" > 那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园.一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手.我们追着这桂香,走进了清幽的公园. </uni-card> <!-- 自定义底部按钮 --> <uni-card title="Dcloud" note="true"> 默认内容 <template v-slot:footer> <view class="footer-box"> <view>喜欢</view> <view>评论</view> <view>分享</view> </view> </template> </uni-card> </view> </template> <script> import uniCard from '@/components/uni-card/uni-card.vue' export default { components: {uniCard}, data() { return { title: 'Hello' }; }, onLoad() {}, methods: {} }; </script> <style> .content { text-align: center; height: 400upx; margin-top: 200upx; } </style>
效果如下