更新记录

1.2.6(2019-11-26)

部分代码调整优化

1.2.5(2019-11-26)

部分代码调整优化

查看更多

日期时间、省市区选择

  • 温馨提示:

    • 关于对插件有疑问的,先从自身代码找原因,也可先跑下我的示例,如果是示例确实有bug再联系我,谢谢,都挺忙的
    • 本人写插件的初衷是方便各位有同类需求的朋友,并非自找麻烦,别uni-app怎么用,sass怎么用这类问题都来找我,谢谢合作!
    • 别把插件放在其它组件里面去用,放最外层view下就行,已经有一堆奇葩调用方法整出来的错误,有放swiper里面的,有放v-for里面的,等等!~
    • TypeError: Cannot read property 'show' of undefined : 调用的ref与页面的ref命名不一致
    • 调用示例
      <template>
      <view>
          <view></view>
          <view></view>
          <view></view>
          <view></view>
          <w-picker></w-picker>
      </view>
      </template>
  • 引入插件

    import wPicker from "@/components/w-picker/w-picker.vue";
    export default {
        components:{
            wPicker
        }
    }
    
    <w-picker :mode="mode" startYear="2016" endYear="2030" step="1" :defaultVal="defaultVal" :current="true" @confirm="onConfirm" ref="picker" themeColor="#f00" :selectList="selectList"></w-picker>
  • 如需要引入多个相同的mode请使用多个

  • 例如一个页面内可能存在2个相同的 需要选择年月日的, 请按如下调用相同多组件

    <w-picker 
        mode="date" 
        startYear="2016" 
        endYear="2030" 
        :defaultVal="defaultVal1" 
        :current="true" 
        @confirm="onConfirm1" 
        ref="picker1" 
        themeColor="#f00" 
        :selectList="selectList1">
    </w-picker>
    <w-picker 
        mode="date" 
        startYear="2018" 
        endYear="2019" 
        :defaultVal="defaultVal2" 
        :current="true" 
        @confirm="onConfirm2" 
        ref="picker2" 
        themeColor="#f00" 
        :selectList="selectList2">
    </w-picker>
  • mode类型:

    mode 类型对应值 备注
    half 年月日上下午
    date 年月日
    dateTime 年月日时分秒
    yearMonth 年月
    region 省市区
    linkage 动态数据多级联动 支持动态数据二级、三级联动,level参数表示几级联动,默认为2
    selector 单列选择
    limitHour 短期日期上下午时段
    limit 短期日期时间段
    range 日期区间
  • 参数介绍

    参数 参数类型 描述 备注
    startYear Number 开始年份 默认1970,
    对half、date、yearMonth、dateTime、range生效
    endYear Number 结束年份 默认当前年份,,
    对half、date、yearMonth、dateTime、range生效
    step Number 分钟间隔步长 默认为1,仅对dateTime、time生效
    defaultVal Array 选择初始值 defaultVal="['2018','12','31']"
    areaCode Array 省市区三级联动地区代码默认值 :areaCode="['33','3301','330108']",传此参数defaultVal不生效
    hideArea Boolean 隐藏三级联动地区列 仅mode=region省市区三级联动生效,隐藏三级联动地区列
    @confirm Function 点击确认的回调获取picker结果 输出选择的值、对应值的下标、结果
    @cancel Function 点击取消的回调
    timeout Boolean 是否开启点击确定延迟500ms 默认false不开启,当快速滚动picker还未完成滚动,点击确定会出现获取不到最新值的情况
    themeColor String 确认按钮的主题颜色 默认值#f5a200
    current Boolean 是否默认选中当前时间 使用该字段defaultVal不起效,
    仅对mode等于half、date、yearMonth、dateTime、time、range生效
    disabledAfter Boolean 是否禁用当前之后的日期 仅对mode等于half、date、yearMonth3个mode生效
    level Number 表示几级联动 默认为2,仅mode=linkage生效
    linkList Array 多级联动数据源 值格式arr=[{label:"aaa",value:"10",children:[{label:"aaa",value:"10"}]}]
    value Array 动态多级联动默认值 仅mode=linkage生效,,
    例如默认根据id值匹配 :value="['33','3301','330108']",传此参数defaultVal不生效
  • 显示插件

    this.$refs.picker.show()
  • 隐藏

    this.$refs.picker.hide()
  • 点击确定回调@confirm

  • 点击取消回调@cancel


  • mode=linkage(动态数据二级、三级联动)
    <w-picker
        mode="linkage"
        :level="2"
        :value="['10','1012']"
        :defaultVal="['浙江省','宁波市']"
        @confirm="onConfirm"
        ref="linkage"
        :linkList="linkList"
        themeColor="#f00"
    ></w-picker>
    参数 取值 备注
    linkList 数据源 值格式arr=[{label:"aaa",value:"10",children:[{label:"aaa",value:"10"}]}]
    level 表示几级联动 默认值2
    defaultVal 默认值 :defaultVal="['浙江省','杭州市','萧山区']"
    value 动态多级联动默认值id :value="['33','3301','330108']",传此参数defaultVal不生效

  • mode=range(时间段选择例2019-06-08至2019年09-08);默认值defaultVal为7个值的数组,第四位值'-'代表中间的分隔符

    <w-picker 
    mode="range" 
    startYear="2017" 
    endYear="2030"
    :defaultVal="['2017','12','31','-','2019','12','31']"
    :current="false"
    @confirm="onConfirm" 
    ref="range" 
    themeColor="#f00"
    ></w-picker>

  • mode=half(年月日上午下午)

    <w-picker
        mode="half" 
        :startYear="startYear" 
        :endYear="2030"
        :defaultVal="['2021','02','05','下午']" 
        :current="false" 
        @confirm="onConfirm"
        :disabledAfter="true"
        ref="half" 
        themeColor="#f00"
    ></w-picker>

  • mode=date(年月日)

    <w-picker 
        mode="date" 
        startYear="2017" 
        endYear="2019"
        :defaultVal="['2018','12','30']"
        :current="false" 
        @confirm="onConfirm"
        :disabledAfter="true"
        ref="date" 
        themeColor="#f00"
    ></w-picker>

  • mode=yearMonth(年月)

    <w-picker
        mode="yearMonth" 
        startYear="2016"
        endYear="2019"
        :defaultVal="['2018','12']" 
        :current="false" 
        @confirm="onConfirm" 
        ref="yearMonth" 
        themeColor="#f00"
    ></w-picker>

  • mode=dateTime(年月日时分秒)

    <w-picker
        mode="dateTime" 
        startYear="2017" 
        endYear="2030"
        step="1"
        :defaultVal="['2018','09','10','12','48','45']" 
        :current="false" 
        @confirm="onConfirm" 
        ref="dateTime" 
        themeColor="#f00"
    ></w-picker>

  • mode=time(时间选择)

    <w-picker
        mode="time"
        :defaultVal="['02','03','30']" 
        :current="false" 
        @confirm="onConfirm" 
        ref="time"
        step="1"
    ></w-picker>

  • mode=limitHour(短期日期上午下午时选择)

    <w-picker
        mode="limitHour" 
        dayStep="60"
        @confirm="onConfirm"
        :defaultVal="['明天','下午','02']"
        ref="limitHour" 
        themeColor="#f00"
    ></w-picker>
    参数 取值 备注
    defaultVal 例:['今天','下午','01'] 默认为今天,非必传
    dayStep 默认值:7 当前日期向后推移天数
  • mode=limit(短期日期时分选择)

    <w-picker 
        mode="limit" 
        dayStep="60"
        startHour="8"
        endHour="20"
        minuteStep="5"
        afterStep="30"
        @confirm="onConfirm" 
        ref="limit" 
        themeColor="#f00">
    </w-picker>
    参数 取值 备注
    defaultVal 例:['今天','10','50'] 默认为今天,非必传
    dayStep 默认值:7 当前日期向后推移天数
    startHour 默认值:8 小时开始:0-23
    endHour 默认值:20 小时结束:0-23
    minuteStep 默认值:10 分钟步长取值:1-59
    afterStep 默认值:30 当前时间往后推移多少分钟

  • mode=region(省市区三级联动)

    <w-picker 
        mode="region"
        :defaultVal="['浙江省','杭州市','滨江区']"
        :areaCode="['33','3301','330108']"
        :hideArea="true"
        @confirm="onConfirm" 
        ref="region" 
        themeColor="#f00">
    </w-picker>

    参数 取值 备注
    hideArea 是否隐藏第三列地区 默认值false
    defaultVal 默认值 :defaultVal="['浙江省','杭州市','萧山区']"
    areaCode 省市区三级联动地区代码默认值 :areaCode="['33','3301','330108']",传此参数defaultVal不生效
  • mode=selector

    <w-picker
        v-if="selectList.length!=0"
        mode="selector" 
        :defaultVal="['女']" 
        @confirm="onConfirm" 
        ref="selector" 
        themeColor="#f00"
        :selectList="selectList"
    ></w-picker>
    参数 取值 备注
    selectList [{label:"",value:""},{label:"",value:""}]

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问