寫了一個基於vue的移動端picker，能夠設置城市／datetime／自定義選擇，分享給你們～～

時間  2019-11-30
標籤 寫了 一個 基於 vue 移動 picker 能夠 設置 城市 datetime 自定義 選擇 分享 你們 欄目 無線 简体版
原文   原文鏈接

傳送門

npm 傳送門 github 傳送門javascript

使用指南

npm install i-picker --save
複製代碼
import iPicker from 'i-picker';

Vue.use(iPicker);
複製代碼

普通 Picker 代碼演示

基礎用法

經過 values 來設置默認值或改變對應值，注意不要設置列表數據中不存在的value值 非datetime須要設置 columns 列數據css

<button @click="show = true">show</button>
<i-picker v-model="show" :value="values" :columns="columns" @change="onChange" />
複製代碼
export default {
  data() {
    return {
      values: [],
      columns: ['杭州', '寧波', '溫州', '嘉興', '湖州']
    };
  },
  methods: {
    onChange (picker, text, index, disabled) {
      console.log(`當前值：${text}, 當前value：${this.values}, 當前索引：${index}, 當前數據disabled狀態：${disabled}`);
    }
  }
};
複製代碼

禁用選項

選項能夠爲對象結構，經過設置 disabled 來禁用該選項html

若是設置的values中的數據是 disabled 狀態，則默認爲下一個 disabled 不爲true的數據java

若是該列全部的選項都是 disabled 的狀態，默認返回第一個，能夠經過 change 事件最後一個返回參數 disabled 來判斷數據狀態git

<i-picker v-model="show" :value="values" :columns="columns" @confirm="onConfirm" />
複製代碼
let yearTotal = []
for (var i = 2000; i <= 2030; i++) {
  yearTotal.push({
    name: i + '年',
    value: i,
    disabled: i % 5 === 0
  })
}

export default {
  data() {
    return {
      values: [],
      columns: yearTotal
    };
  },
  methods: {
    onConfirm (text, value, index, disabled) {
      this.values = value
    }
  }
};
複製代碼

展現頂部欄

<i-picker v-model="show" :value="values" :columns="columns" @change="onChange" @cancel="onCancel" @confirm="onConfirm" :visibleItemCount="5" toolbar title="iPicker"/>
複製代碼
export default {
  data() {
    return {
      values: [2],
      columns: [
        {name: '杭州', disabled: true},
        {name: '寧波'},
        {name: '溫州', disabled: true},
        {name: '嘉興'},
        {name: '湖州'}
      ]
    }
  },
  methods: {
    onConfirm (text, value, index, disabled) {
      this.values = value
      console.log(`當前值：${text}, 當前索引：${index}`);
    },
    onCancel() {
      console.log('取消');
    }
  }
};
複製代碼

多列異步動態聯動

keys 用於設置多列列表的數據，一個 keys 對應一個列表的數據github

<i-picker v-model="show" :value="values" :columns="columns" @change="onChange" @cancel="onCancel" @confirm="onConfirm" toolbar title="iPicker"/>
複製代碼
export default {
  data() {
    return {
      values: [],
      columns: [
        {keys: ['浙江', '河北']},
        {keys: [{name: '杭州'}, {name: '寧波', disabled: true}, {name: '溫州'}]}
      ]
    };
  },
  methods: {
    onChange (picker, text, value, index, disabled) {
      switch(text[0]) {
        case '浙江':
          picker.setColumnKeys(1, [{name: '杭州'}, {name: '寧波', disabled: true}, {name: '溫州'}]);
          break;
        case '河北':
          picker.setColumnKeys(1, [
            {name:'石家莊市', value: 'shijiazhuang'},
            {name:'唐山市', value: 'tangshan'},
            {name:'秦皇島市', value: 'qinhuangdao'},
            {name:'邯鄲市', value: 'handan'},
            {name:'邢臺市', value: 'xingtai'},
            {name:'保定市', value: 'baoding'}
          ]);
          break;
        default:
          break;
      }
    },
    onConfirm (text, value, index, disabled) {
      this.values = value
    },
    onCancel () {
      console.log('cancle')
    }
  }
};
複製代碼

多列父子聯動

<i-picker v-model="show" :value="values" :columns="columns" @cancel="onCancel" @confirm="onConfirm" toolbar title="iPicker"/>
複製代碼
export default {
  data() {
    return {
      values: ['cn004', 'yuncheng'],
      columns: [
        {
          keys: [
            {name:'北京', value: 'cn001'},
            {name:'天津', value: 'cn002'},
            {name:'河北', value: 'cn003'},
            {name:'山西', value: 'cn004'},
          ],
          className: 'column1'
        },
        {
          keys: {
            'cn001': [
              {name:'北京市', value: 'beijing'}
            ],
            'cn002': [
              {name:'天津市', value: 'tianjing', disabled: true},
            ],
            'cn003': [
              {name:'石家莊市', value: 'shijiazhuang'},
              {name:'唐山市', value: 'tangshan'},
              {name:'秦皇島市', value: 'qinhuangdao'},
              {name:'邯鄲市', value: 'handan'},
              {name:'邢臺市', value: 'xingtai'},
              {name:'保定市', value: 'baoding'},
            ],
            'cn004': [
              {name:'太原市', value: 'taiyuan'},
              {name:'大同市', value: 'datong'},
              {name:'陽泉市', value: 'yangquan'},
              {name:'長治市', value: 'changzhi'},
              {name:'晉城市', value: 'jincheng'},
              {name:'朔州市', value: 'shuozhou'},
              {name:'晉中市', value: 'jinzhong'},
              {name:'運城市', value: 'yuncheng'},
              {name:'臨汾市', value: 'linfen'},
            ]
          },
          className: 'column2'
        },
        {
          keys: {
            'beijing': [
              {name:'東城區', value: 'city001'},
              {name:'西城區', value: 'city002'},
              {name:'朝陽區', value: 'city003'},
              {name:'豐臺區', value: 'city004'},
              {name:'石景山區', value: 'city005'},
              {name:'海淀區', value: 'city006'},
            ],
            'tianjing': [
              {name:'和平區', value: '1city'},
              {name:'河東區', value: '2city'},
              {name:'河西區', value: '3city'},
            ],
            'shijiazhuang': [
              {name:'長安區', value: 'changan'}
            ],
            'tangshan': [
              {name:'路南區', value: '001'},
              {name:'路北區', value: '002'},
              {name:'古冶區', value: '003'},
              {name:'開平區', value: '004'},
              {name:'豐南區', value: '005'},
              {name:'豐潤區', value: '006'},
              {name:'灤縣', value: '007'},
              {name:'灤南縣', value: '008'},
            ],
            'qinhuangdao': ['海港區'],
            'handan': ['邯山區'],
            'xingtai': ['橋東區'],
            'baoding': ['競秀區'],
            'taiyuan': ['小店區'],
            'datong': ['城區'],
            'yangquan': ['礦區'],
            'changzhi': ['長治縣'],
            'jincheng': ['城區'],
            'shuozhou': ['朔城區'],
            'jinzhong': ['榆次區'],
            'yuncheng': ['鹽湖區', '臨猗區', '萬榮區'],
            'linfen': [{name:'城區'}, {name:'古縣', disabled: true}],
          },
          className: 'column2'
        },
      ]
    };
  }
};
複製代碼

列表數據格式

單列數據格式ajax

// data
['杭州', '寧波', '溫州']

// 或者使用 name => value 的形式，不設置value的話默認是數組索引值
[
  { name: '杭州', value: 'city01', disabled: true },
  { name: '寧波', value: 'city02'  },
  { name: '溫州', value: 'city03', disabled: true  },
]
複製代碼

多列數據格式npm

keys 數據對應一個列表數據數組

// ajax異步動態數據
[
  { 
    keys: ['浙江', '天津', '河北', '山西'],
    className: 'column1'
  },
  { 
    keys: [{ name: '杭州' }, { name: '寧波', disabled: true  }, { name: '溫州' }]  
  }
]

// 或者父子聯動數據
[
  {
    keys: [
      {name:'北京', value: 'cn001'},
      {name:'天津', value: 'cn002'},
      {name:'河北', value: 'cn003'},
      {name:'山西', value: 'cn004'},
    ],
    className: 'column1'
  },
  {
    keys: {
      'cn001': [
        {name:'北京市', value: 'beijing'}
      ],
      'cn002': [
        {name:'天津市', value: 'tianjing', disabled: true},
      ],
      'cn003': [
        {name:'石家莊市', value: 'shijiazhuang'},
        {name:'唐山市', value: 'tangshan'},
        {name:'秦皇島市', value: 'qinhuangdao'},
        {name:'邯鄲市', value: 'handan'},
        {name:'邢臺市', value: 'xingtai'},
        {name:'保定市', value: 'baoding'},
      ],
      'cn004': [
        {name:'太原市', value: 'taiyuan'},
        {name:'大同市', value: 'datong'},
        {name:'陽泉市', value: 'yangquan'},
        {name:'長治市', value: 'changzhi'},
        {name:'晉城市', value: 'jincheng'},
        {name:'朔州市', value: 'shuozhou'},
        {name:'晉中市', value: 'jinzhong'},
        {name:'運城市', value: 'yuncheng'},
        {name:'臨汾市', value: 'linfen'},
      ]
    },
    className: 'column2'
  },
  {
    keys: {
      'beijing': [
        {name:'東城區', value: 'city001'},
        {name:'西城區', value: 'city002'},
        {name:'朝陽區', value: 'city003'},
        {name:'豐臺區', value: 'city004'},
        {name:'石景山區', value: 'city005'},
        {name:'海淀區', value: 'city006'},
      ],
      'tianjing': [
        {name:'和平區', value: '1city'},
        {name:'河東區', value: '2city'},
        {name:'河西區', value: '3city'},
      ],
      'shijiazhuang': [
        {name:'長安區', value: 'changan'}
      ],
      'tangshan': [
        {name:'路南區', value: '001'},
        {name:'路北區', value: '002'},
        {name:'古冶區', value: '003'},
        {name:'開平區', value: '004'},
        {name:'豐南區', value: '005'},
        {name:'豐潤區', value: '006'},
        {name:'灤縣', value: '007'},
        {name:'灤南縣', value: '008'},
      ],
      'qinhuangdao': ['海港區'],
      'handan': ['邯山區'],
      'xingtai': ['橋東區'],
      'baoding': ['競秀區'],
      'taiyuan': ['小店區'],
      'datong': ['城區'],
      'yangquan': ['礦區'],
      'changzhi': ['長治縣'],
      'jincheng': ['城區'],
      'shuozhou': ['朔城區'],
      'jinzhong': ['榆次區'],
      'yuncheng': ['鹽湖區', '臨猗區', '萬榮區'],
      'linfen': [{name:'城區'}, {name:'古縣', disabled: true}],
    },
    className: 'column3'
  }
]
複製代碼

加載狀態

當 Picker 數據是經過異步獲取時，能夠經過 loading 屬性顯示加載提示數據結構

<i-picker v-model="show" :value="values" :columns="columns" :loading="loading" />
複製代碼

自定義展現選項

<i-picker v-model="show" :value="values" :columns="columns" @change="onChange" @cancel="onCancel" @confirm="onConfirm" :visibleItemCount="5" toolbar title="iPicker"/>
複製代碼
import icon from './assets/tui.png'

export default {
  data() {
    return {
      values: [1],
      columns: [
        {name: '寧波'},
        {name: `<img src="${icon}" class="y-custom-icon">杭州`},
        {name: '溫州'},
        {name: '嘉興'},
        {name: '湖州'}
      ]
    }
  },
  methods: {
    onConfirm (text, value, index, disabled) {
      this.values = value
      console.log(`當前值：${text}, 當前索引：${index}`);
    },
    onCancel() {
      console.log('取消');
    }
  }
};
複製代碼
<style>
.y-custom-icon {
  width: 22px;
  height: 22px;
  margin: 0 3px 0 0;
  vertical-align: text-bottom;
}
</style>
複製代碼

datetime Picker 代碼演示

基礎用法

須要設置 type 類型

<i-picker v-model="show" :value="currentDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" :min-date="minDate" :max-date="maxDate" @change="onChange" toolbar @cancel="onCancel" @confirm="onConfirm" title="iPicker"/>
複製代碼
export default {
  data() {
    return {
      currentDate: new Date(2018, 0, 1),
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(2019, 10, 1)
    };
  },
  methods: {
    onConfirm (text, value, index, disabled) {
      this.currentDate = value
      console.log(`當前值：${text.join(',')}, 當前value：${value.join(',')}, 當前索引：${index.join(',')}`);
    }
  }
};
複製代碼

選擇年月

經過傳入 formatter 函數對選項文字進行處理

<i-picker v-model="show" :value="currentDate" format="YYYY-MM" type="year-month" :min-date="minDate" :max-date="maxDate" :formatter="formatter" toolbar @cancel="onCancel" @confirm="onConfirm" title="iPicker"/>
複製代碼
export default {
  data() {
    return {
      currentDate: new Date(2018, 8, 1),
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(2019, 10, 1)
    }
  },
  methods: {
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    onConfirm (text, value, index) {
      this.currentDate = value
      console.log(`當前值：${text.join(',')}, 當前value：${value.join(',')}, 當前索引：${index.join(',')}`);
    }
  }
};
複製代碼

選擇時間

<i-picker v-model="show" :value="currentTime" type="time" :min-hour="minHour" :max-hour="maxHour" @change="onChange" toolbar @cancel="onCancel" @confirm="onConfirm" title="iPicker"/>
複製代碼
export default {
  data() {
    return {
      currentTime: '12:30',
      minHour: 10,
      maxHour: 30
    }
  },
  methods: {
    onConfirm (text, value, index) {
      this.currentDate = value
      console.log(`當前值：${text.join(',')}, 當前value：${value.join(',')}, 當前索引：${index.join(',')}`);
    }
  }
};
複製代碼

API

通用API

參數 說明 類型 默認值
show 控制Picker的顯隱
使用 v-model 綁定		 Boolean false
values 默認展現值
能夠經過values設置選中值		 Array | string | Date []
toolbar 是否顯示頂部欄 Boolean false
title 頂部欄標題 String ''
loading 是否顯示加載狀態 Boolean false
item-height 選項高度 Number 44
confirm-button-text 確認按鈕文字 String 確認
cancel-button-text 取消按鈕文字 String 取消
visible-item-count 可見的選項個數 Number 5

普通 Picker API

參數 說明 類型 默認值
columns 對象數組，配置每一列顯示的數據 Array []
value-text 選項對象中，文字對應的 key String name
value-key 選項對象中，value對應的 key String value

datetime Picker API

參數 說明 類型 默認值
format 格式化 datetime 的展現，不支持特殊字符 String ''
type 類型，可選值爲 datetime date time year-month String datetime
formatter 對選項文字進行處理，type 支持 year month day year-month (type, value) => value -
min-date 可選的最小日期 Date 十年前的 1 月 1 日
max-date 可選的最大日期 Date 十年後的 12 月 31 日
min-hour 可選的最小小時，針對 time 類型 Number 0
max-hour 可選的最大小時，針對 time 類型 Number 23
min-minute 可選的最小分鐘，針對 time 類型 Number 0
max-minute 可選的最大分鐘，針對 time 類型 Number 59

Event

事件名 說明 參數
close Picker關閉時觸發 關閉回調
confirm 點擊完成按鈕時觸發 全部列選中值，全部列選中值對應的索引，全部列選中值對應的 disabled 狀態
cancel 點擊取消按鈕時觸發 全部列選中值，全部列選中值對應的索引，全部列選中值對應的 disabled 狀態
change 選項改變時觸發 Picker 實例，全部列選中值，當前列對應的索引，全部列選中值對應的 disabled 狀態

Columns 數據結構

當傳入多列數據時，columns爲一個對象數組，數組中的每個對象配置每一列，每一列有如下key

key 說明
keys 列中對應的備選值
className 爲對應列添加額外的class

方法

經過 ref 能夠獲取到 picker 實例並調用實例方法

方法名 參數 返回值 介紹
getNames - names 獲取全部列選中的值
getValues - values 獲取全部列選中的value
getIndexes - indexes 獲取全部列選中值對應的索引
getDisabled - disableds 獲取全部列選中值對應的 disabled 狀態
getColumnType columnIndex，type ('getName', 'getIndex') value 獲取對應列選中的值/索引
setColumnKeys columnIndex, optionIndex - 設置對應列的備選值

謝謝你們的瀏覽～，首發文章歡迎你們的交流～～

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程