uni-app学习笔记-引用时间插件-timePicker（四）

王小婷

发布于 2019-12-11 10:31:25

2.2K0

发布于 2019-12-11 10:31:25

文章被收录于专栏：编程微刊编程微刊

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

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

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

代码如下:

<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>

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