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

2019-12-11 10:31:25 浏览数 (3)

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

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

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

代码如下:

代码语言:javascript复制
<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>

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

0 人点赞