zPicker

功能描述

本插件是在BetterScroll 2.0的功能API基础上封装而来，提供时日期间选择，地区（省市县）选择等效果。使用vue组件式开发，减少使用者的编写，只需要引入相对应的js文件即可，调用简单方便，不需要写多余的代码。界面样式简洁，如需要可以自行修改zpicker.css文件，或者联系作者。

效果图

地区选择
时间选择
日期选择

依赖的插件

vue.js、moment.js、area_code.js（地区数据）、better-scroll等js

快速使用

相关css引入

<link rel="stylesheet" type="text/css" href="./zpicker.css" />

相关js引入

<!-- 引入vue.js -->
<script type="text/javascript" src="./libs/vue.js"></script>
<!-- 引入better-scroll核心插件和wheel插件 -->
<script type="text/javascript" src="./libs/core.js"></script>
<script type="text/javascript" src="./libs/wheel.js"></script>

<!-- 使用日期组件需要引入 moment.js 和 datepicker/index.js -->
<script type="text/javascript" src="./datepicker/moment.js"></script>
<script type="text/javascript" src="./datepicker/index.js"></script>

<!-- 使用地区选择组件需要引入 areapicker/area_code.js 和 areapicker/index.js -->
<script type="text/javascript" src="./areapicker/area_code.js"></script>
<script type="text/javascript" src="./areapicker/index.js"></script>

相关html 结构

<button  @click="datePicker.open = true">时间选择</button>
<z-date-picker :open.sync="datePicker.open" @confirm="dateConfirm" v-model="datePicker.value"></z-date-picker>

<button  @click="datePicker.open = true">地区选择</button>
<z-area-picker :open.sync="areaPicker.open" @confirm="dateConfirm" v-model="areaPicker.value"></z-area-picker>

关键js接口

    new Vue({
        el:'#app',
        data:function(){
            return{
                datePicker: {
                    open: false,
                    title: '日期选择',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'date', // date / datetime
                    value: ['2020', '09', '18'], // [年, 月, 日] / [年, 月, 日, 时, 分, 秒] 
                },
                areaPicker: {
                    open: false,
                    title: '地区选择',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    value: ['110000', '110100', '110101'], // 这里是地区code 省市县
                },
            }
        },
        methods:{
            areaConfirm: function(e){
                this.areaPicker.value = [e.province.value, e.city.value, e.county.value]
            },
            dateConfirm: function(e){
                this.datePicker.value = [e.year, e.month, e.day]
            }
        }
    })

特别说明

props参数说明

参数 说明 类型 可选值 默认值
open 是否打开 boolean false/true false
title 顶部栏标题 string - ''
confirmButtonText 确定按钮文字 string - 确定
cancelButtonText 取消按钮文字 string - 取消
value 默认值 Array [年, 月, 日] / [年, 月, 日, 时, 分, 秒] / [省, 市, 县] z-date-picker：当前日期（type：date时自定义默认值应为['2020', '09', '18']，type：datetime时自定义默认值应为['2020', '09', '18', '12', '00', '00']）/ z-area-picker：['110000', '110100', '110101']
type 只有z-date-picker组件有效 string date / datetime date
z-date-picker 返回值
// type：date
{
    "year":"2020",
    "month":"09",
    "day":"18"
}

// type：datetime
{
    "year":"2020",
    "month":"09",
    "day":"18",
    "hour":"13",
    "minute":"48",
    "second":"49"
}

z-area-picker 返回值

{
    "province":{"value":"110000","label":"北京市"},
    "city":{"value":"110100","label":"市辖区"},
    "county":{"value":"110101","label":"东城区"}
}

联系人

联系QQ：547857825

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18