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
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值