选择器

7.4 选择器

通过上下滑动的操作，选择具体参数的弹窗。

使用规则

可用于选择时间、日期、某个参数等。

#导入组件

const picker = weex.requireModule('picker')

选择器

扫码预览

#基础用法

<template>
  <div class="wrapper">
    <dof-minibar
      title="Picker"
      background-color="#267AFF"
      text-color="#ffffff"
      :is-image="true"
      :left-button="leftButton"
    ></dof-minibar>
    <scroller class="scroller">
      <title title="Picker"></title>
      <category title="使用案例"></category>
      <div class="wrapper-main">
        <text class="subTitle">选择城市（单列选择）</text>
        <dof-cell title="城市" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="city ? city : '请选择城市'" 
                  @dofCellClicked="pickCity">
        </dof-cell>

        <text class="subTitle">选择温度（单列选择）</text>
        <dof-cell  title="温度"
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="tempreture ? tempreture + '℃' : '请选择温度'"
                  @dofCellClicked="pickTempreture">
        </dof-cell>

        <text class="subTitle">选择属性（多列选择）</text>
        <dof-cell title="属性" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="attribute" 
                  @dofCellClicked="pickAttribute">
        </dof-cell>

        <text class="subTitle">选择地址（多列选择级联）</text>
        <dof-cell title="属性" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="cascadedDesc" 
                  @dofCellClicked="pickCascade">
        </dof-cell>

        <text class="subTitle">选择日期</text>
        <dof-cell title="日期" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="date ? date : '请选择日期'" 
                  @dofCellClicked="pickDate">
        </dof-cell>
        <text class="subTitle">选择日期</text>
        <dof-cell title="时间" 
                  :has-top-border="true" 
                  :has-bottom-border="true" 
                  :right-text="time ? time : '请选择时间'" 
                  @dofCellClicked="pickTime"> 
        </dof-cell>
      </div>
    </scroller>
  </div>
</template>

<script>
import { DofMinibar, DofCell } from 'dolphin-weex-ui'
import Category from 'src/_mods/catalog'
import Title from 'src/_mods/title.vue'
const modal = weex.requireModule('modal')
const picker = weex.requireModule('picker')

export default {
  components: {
    DofMinibar,
    DofCell,
    Title,
    Category
  },
  data() {
    return {
      leftButton: '/assets/image/header/back_white@2x.png',
      // index: 0,
      city: '', //city
      cityIndex: 0, //cityIndex
      tempreture: '110', //温度
      tempretureIndex: 0, //温度索引
      attribute: '请选择属性', //属性选择结果
      colorIndex: 0, //属性选择索引
      sizeIndex: 0, //属性选择索引
      cascadedDesc: '请选择属性', //地址选择
      cascadedItem: [{ id: '' }, { id: '' }, { id: '' }], //默认值  地址

      date: '', //日期选择
      time: '' //时间选择
    }
  },
  methods: {
    pickCity() {
      const items = ['北京', '上海', '广州', '深圳', 'NewYork', 'Tokyo', 'Paris', 'Milano']
      var that = this
      var pickItem = [
        {
          index: that.cityIndex,
          item: items,
          label: ''
        }
      ]
      picker.pick(
        {
          items: pickItem,
          headTitle: '选择城市', //标题 6.5.1支持
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
        },
        event => {
          if (event.result == 'success') {
            var dataArr = event.data
              .replace('[', '')
              .replace(']', '')
              .split(',')
            that.cityIndex = dataArr[0]
            that.city = items[dataArr[0]]
          }
          modal.toast({
            message: `您选择了第${that.cityIndex}个城市,名字为${that.city}}`
          })
        }
      )
    },

    pickTempreture() {
      const items = ['106', '107', '108', '109', '110', '111', '112', '113', '114', '115']
      var that = this
      var pickItem = [
        {
          index: that.tempretureIndex,
          item: items,
          label: '℃'
        }
      ]
      picker.pick(
        {
          items: pickItem,
          headTitle: '选择温度', //标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
        },
        event => {
          if (event.result == 'success') {
            var dataArr = event.data
              .replace('[', '')
              .replace(']', '')
              .split(',')
            that.tempretureIndex = dataArr[0]
            that.tempreture = items[dataArr[0]]
          }

          modal.toast({
            message: `您选择了第${that.tempretureIndex}个温度,温度为${that.tempreture}}`
          })
        }
      )
    },

    pickAttribute() {
      const itemsColor = ['红色', '白色', '粉色']
      const itemsSize = ['XL', 'L', 'M', 'S']
      var that = this
      var pickItem = [
        {
          index: that.colorIndex,
          item: itemsColor,
          label: '颜色'
        },
        {
          index: that.sizeIndex,
          item: itemsSize,
          label: '尺寸'
        }
      ]
      picker.pick(
        {
          items: pickItem,
          headTitle: '选择颜色和尺寸', //标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
        },
        event => {
          if (event.result == 'success') {
            var data = event.data
            var dataArr = data
              .replace('[', '')
              .replace(']', '')
              .split(',')
            that.colorIndex = dataArr[0]
            that.sizeIndex = dataArr[1]
            that.attribute = itemsColor[dataArr[0]] + ',' + itemsSize[dataArr[1]]
          }
          modal.toast({
            message: `that.colorIndex:${that.colorIndex},that.sizeIndex:${that.sizeIndex},that.attribute:${that.attribute}}`
          })
        }
      )
    },

    pickCascade() {
      let pickCascadeItem = [
        {
          index: this.cascadedItem[0].id || 2,
          label: '省'
        },
        {
          index: this.cascadedItem[1].id || 22,
          label: '市'
        },
        {
          index: this.cascadedItem[2].id || 222,
          // label: "区/县",
          label: ''
        }
      ]
      let pickItemMap = [
        { id: 1, pId: 0, name: '北京' },
        { id: 101, pId: 1, name: '北京' },
        { id: 1011, pId: 101, name: '朝阳区' },
        { id: 1012, pId: 101, name: '密云区' },
        { id: 2, pId: 0, name: '广东' },
        { id: 201, pId: 2, name: '广州' },
        { id: 2011, pId: 201, name: '天河区' },
        { id: 2012, pId: 201, name: '越秀区' },
        { id: 202, pId: 2, name: '深圳' },
        { id: 2021, pId: 202, name: '罗湖区' },
        { id: 2022, pId: 202, name: '福田区' },
        { id: 3, pId: 0, name: '广西' },
        { id: 301, pId: 3, name: '南宁' },
        { id: 3011, pId: 301, name: '宾阳县' },
        { id: 3012, pId: 301, name: '横县' },
        { id: 302, pId: 3, name: '北海' },
        { id: 3021, pId: 302, name: '海城区' },
        { id: 3022, pId: 302, name: '银海区' }
      ]
      picker.pickCascade(
        {
          items: pickCascadeItem,
          itemMaps: pickItemMap,
          headTitle: '选择地址', //取消和确定中间那标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
          columnRatios:[1,2,3]   //各列的比例关系
        },
        event => {
          if (event.result == 'success') {
            this.cascadedItem = JSON.parse(event.data)
            let tempStr = ''
            for (let i = 0; i < this.cascadedItem.length; i++) {
              tempStr += this.cascadedItem[i].name + ','
            }
            this.cascadedDesc = tempStr.substring(0, tempStr.length - 1)
          }

          modal.toast({
            message: `cascadedDesc:${that.cascadedDesc}`
          })
        }
      )
    },

    pickDate() {
      var self = this
      picker.pickDate(
        {
          value: this.date || '2016-11-28',
          max: '2029-11-28',
          min: '2015-11-28',
          headTitle: '选择日期', //标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#000000', //取消颜色
          confirmTxtColor: '#000000', //标题颜色
          columnRatios: [3, 1, 2]
        },
        event => {
          var result = event.result
          if (result == 'success') {
            self.date = event.data
          }
        }
      )
      modal.toast({
        message: `self.date:${self.date}`
      })
    },

    pickTime() {
      picker.pickTime(
        {
          value: this.time,
          headTitle: '选择时间', //标题
          cancelTxt: '取消', //取消按钮文字
          confirmTxt: '确定', //确定按钮文字,
          cancelTxtColor: '#020F13', //取消颜色
          confirmTxtColor: '#020F13', //标题颜色
        },
        event => {
          if (event.result === 'success') {
            this.time = event.data
          }

          modal.toast({
            message: `this.time:${this.time}`
          })
        }
      )
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
}
</style>

#pick Attributes

Prop	Type	Required	Default	Description
`items`	`obejctArray`	`N`	`-`	选择项数组集合(注1)
`headTitle`	`String`	`N`	`-`	标题
`title`	`String`	`N`	`-`	取消和确定中间的标题
`confirmTxt`	`String`	`N`	`-`	确认按钮文字
`cancelTxt`	`String`	`N`	`-`	取消按钮文字
`confirmTxtColor`	`String`	`N`	`#000000`	确认按钮文字颜色
`cancelTxtColor`	`String`	`N`	`#000000`	取消按钮文字颜色
`columnRatios`	`Array`	`N`	`[2, 1, 3]`	各列的比例关系
`isLoop`	`Boolean`	`N`	`false`	支持`picker`首尾循环滑动
`pickerBgColor`	`String`	`N`	`#bed742`	`picker`背景颜色
`unitColor`	`String`	`N`	`#2a5caa`	单位字体颜色
`cancleBgColor`	`String`	`N`	`#2a5caa`	单位字体颜色
`confirmBgColor`	`String`	`N`	`#8c531b`	确认按钮背景色
`cancleHightColor`	`String`	`N`	`#d71345`	取消按钮高亮颜色
`confirmHightColor`	`String`	`N`	`#d71345`	确认按钮高亮颜色
`btnLineColor`	`String`	`N`	`#ffe600`	按钮之间的分割线颜色
`lineColor`	`String`	`N`	`#543044`	picker分割线颜色
`textColor`	`String`	`N`	`#2a5caa`	picker文字颜色
`spaceColor`	`String`	`N`	`#412f1f`	picker和按钮之间间距颜色
`titleColor`	`String`	`N`	`-`	标题栏文字颜色
`titleBgColor`	`String`	`N`	`-`	标题栏背景色
`viewColor`	`String`	`N`	`-`	iOS全面屏手机，底部view颜色
`cornerRadius`	`String`	`N`	`-`	边框圆角, ^8.20支持

#注1 items属性

Prop	Type	Required	Default	Description
`index`	`Number`	`Y`	`0`	数据项的索引坐标
`item`	`Array`	`N`	`[]`	数据项
`label`	`String`	`N`	`-`	数据项单位, `备注：字数超出5个字后显示'5个字+...'`

#pickCascade Attributes

Prop	Type	Required	Default	Description
`items`	`obejctArray`	`N`	`-`	选择项数组集合(注1)
`temMaps`	`obejctArray`	`N`	`注2`	级联关系树集合(~v4.3.0)：第一列的pId为0；每项都有一个唯一的id; 用pId关联前一列的项；
`headTitle`	`String`	`N`	`-`	标题
`confirmTxt`	`String`	`N`	`-`	确认按钮文字
`cancelTxt`	`String`	`N`	`-`	取消按钮文字
`confirmTxtColor`	`String`	`N`	`#000000`	确认按钮文字颜色
`cancelTxtColor`	`String`	`N`	`#000000`	取消按钮文字颜色
`columnRatios`	`Array`	`N`	`[2, 1, 3]`	各列的比例关系

注2 temMaps默认值

[
    { id: 1, pId: 0, name: '北京' },
    { id: 11, pId: 1, name: '北京' },
    { id: 111, pId: 11, name: '朝阳区' },
    { id: 112, pId: 11, name: '密云区' },
    { id: 2, pId: 0, name: '广东' }
]

#pickDate Attributes

Prop	Type	Required	Default	Description
`value`	`String`	`Y`	`-`	date picker 选中的值，date 的字符串格式为yyyy-MM-dd
`max`	`String`	`N`	`-`	date 的最大值，字符串格式为yyyy-MM-dd
`min`	`String`	`N`	`-`	date 的最小值，字符串格式为yyyy-MM-dd
`headTitle`	`String`	`N`	`-`	标题
`confirmTxt`	`String`	`N`	`-`	确认按钮文字
`cancelTxt`	`String`	`N`	`-`	取消按钮文字
`confirmTxtColor`	`String`	`N`	`#000000`	确认按钮文字颜色
`cancelTxtColor`	`String`	`N`	`#000000`	取消按钮文字颜色
`columnRatios`	`Array`	`N`	`[2, 1, 3]`	各列的比例关系
`format`	`String`	`N`	`"yyyy-MM-dd"`	日期顺序和格式

format说明：
yyyy : 代表年(不去区分大小写) 假设年份为 2017
  "y" , "yyy" , "yyyy" 匹配的都是4位完整的年 如 : "2017"；
  "yy" 匹配的是年分的后两位 如 : "15"；
  超过4位,会在年份前面加"0"补位 如 "YYYYY"对应"02017"

MM : 代表月(只能使用大写) 假设月份为 9
  "M" 对应 "9"
  "MM" 对应 "09"
  "MMM" 对应 "Sep"
  "MMMM" 对应 "Sep"
  超出3位,仍然对应 "September"

dd : 代表日(只能使用小写) 假设为13号
  "d" , "dd" 都对应 "13"
  超出2位,会在数字前面加"0"补位. 例如 "dddd" 对应 "0013"

#pickTime Attributes

Prop	Type	Required	Default	Description
`value`	`String`	`Y`	`-`	time picker 选中的值，date 的字符串格式为 HH:mm
`headTitle`	`String`	`N`	`-`	标题
`confirmTxt`	`String`	`N`	`-`	确认按钮文字
`cancelTxt`	`String`	`N`	`-`	取消按钮文字
`confirmTxtColor`	`String`	`N`	`#000000`	确认按钮文字颜色
`cancelTxtColor`	`String`	`N`	`#000000`	取消按钮文字颜色
`columnRatios`	`Array`	`N`	`[2, 1, 3]`	各列的比例关系

#方法回调

callback {function (ret)}：执行完读取操作后的回调函数。ret {Object} 为 callback 函数的参数，有两个属性：

result {string}：结果三种类型 success, cancel, error
data {string}：

TIP

pick单列选择，ret.data 格式如： "[12]"
pick多列选择，ret.data 格式如： "[1,4,5]"
pickDate，ret.data 格式如： "2017-12-28"
pickTime, ret.data格式如： "12:40"

posted on 2024-12-13 09:17 AtlasLapetos 阅读(41) 评论(0) 收藏举报