uni-app学习笔记-引用时间插件-timePicker(四)

1:将时间插件-timePicker导入到
开发工具HBuilderX

5640239-7523e1a43f36c570.png

2:导入之后可以看到在我的项目底下多出了一个组件components文件夹

5640239-773347e6d7b35c47.png

3:根据文档示例:
https://ext.dcloud.net.cn/plugin?id=700
来写页面代码

5640239-7e5b86425f63e5d4.png

代码如下:

<template>
    <view class="content">
        <hTimePicker sTime="15" cTime="15" interval="1" @changeTime="changeTime">
            <view slot="pCon" class="changeTime">
                点击选择时间
            </view>
        </hTimePicker>
    </view>
</template>
<script>
    import hTimePicker from "@/components/h-timePicker/h-timePicker.vue";
    export default {
        components: {
            hTimePicker
        },
        data() {
            return {
                title: 'Hello'
            };
        },
        onLoad() {},
        methods: {}
    };
</script>
<style>
    .content {
        text-align: center;
        height: 400upx;
        margin-top: 200upx;
    }
</style>

效果如下,点击按钮,底部弹出时间选择框

5640239-b14fead6e9288eb9.png
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值