fix: picker和datepicker组件优化

src/locales/lang/zn-CH.js

@@ -2,8 +2,8 @@ import Vue from 'vue';
 
 const lang = {
   lang: {
-    okBtnTxt: '确 定',
-    cancelBtnTxt: '取 消',
+    okBtnTxt: '确定',
+    cancelBtnTxt: '取消',
     calendar: {
       loadPrevMonth: '加载上一个月',
       noMoreMonth: '没有更早月份~',

src/packages/datepicker/datepicker.vue

@@ -239,8 +239,8 @@ export default {
       month = this.removeChinese(month);
       let days = Array.from(Array(Utils.getMonthDays(year, month)), (v, k) => {
         if (
-          !(year == this.startDateArr[0] && month == this.startDateArr[1] && k + 1 < this.startDateArr[2]) &&
-          !(year == this.endDateArr[0] && month == this.endDateArr[1] && k + 1 > this.endDateArr[2])
+          !(year == this.startDateArr[0] && month == parseInt(this.startDateArr[1]) && (k + 1) <  parseInt(this.startDateArr[2])) &&
+          !(year == this.endDateArr[0] && month == parseInt(this.endDateArr[1]) && (k + 1) > parseInt(this.endDateArr[2]))
         ) {
           return `${k + 1}${this.chinese[2]}`;
         }

src/packages/datepicker/demo.vue

@@ -3,86 +3,34 @@
     <nut-noticebar :closeMode="true" v-if="!isMobile"
       >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar
     >
-    <h4>基本用法</h4>
-    <div>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible')">
-        <span slot="title">
-          <label>日期选择</label>
-        </span>
-        <span slot="sub-title">每列不显示中文~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="show-value">{{ date ? date : '请选择日期' }}</span>
-        </div>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible1')">
-        <span slot="title">
-          <label>日期选择</label>
-        </span>
-        <span slot="sub-title">限制开始结束时间~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="show-value">{{ date1 ? date1 : '请选择日期' }}</span>
-        </div>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
-        <span slot="title">
-          <label>日期时间选择</label>
-        </span>
-        <span slot="sub-title">有默认值，限制开始结束时间~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="show-value">{{ datetime ? datetime : '请选择' }}</span>
-        </div>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible3')">
-        <span slot="title">
-          <label>时间选择</label>
-        </span>
-        <span slot="sub-title">12小时制~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="show-value">{{ time ? `${time} ${amOrPm}` : '请选择时间' }}</span>
-        </div>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible4')">
-        <span slot="title">
-          <label>时间选择</label>
-        </span>
-        <span slot="sub-title">限制开始结束小时~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="show-value">{{ time1 ? time1 : '请选择时间' }}</span>
-        </div>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible5')">
-        <span slot="title">
-          <label>时间选择</label>
-        </span>
-        <span slot="sub-title">分钟数递增步长设置~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="show-value">{{ time2 ? time2 : '请选择时间' }}</span>
-        </div>
-      </nut-cell>
-    </div>
-    <!-- demo-->
+    <h4>选择年月日</h4>
+    <nut-cell 
+      :showIcon="true"  
+      title="每列不显示年/月/日"
+      :desc="date ? date : '请选择'"
+      @click.native="switchPicker('isVisible')">
+    </nut-cell>
     <nut-datepicker
       :is-visible="isVisible"
       type="date"
-      title="请选择日期"
+      title="选择年月日"
       :is-show-chinese="false"
       @close="switchPicker('isVisible')"
       @choose="setChooseValue"
     ></nut-datepicker>
-    <!-- demo1-->
-    <nut-datepicker
-      :is-visible="isVisible1"
-      title="请选择日期"
-      type="date"
-      startDate="1991-11-10"
-      endDate="2019-10-05"
-      @close="switchPicker('isVisible1')"
-      @choose="setChooseValue1"
-    ></nut-datepicker>
-    <!-- demo2-->
+
+    <h4>限制开始结束时间</h4>
+    <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
+      <span slot="title">
+        <label>日期时间选择</label>
+      </span>
+      <div slot="desc" class="selected-option">
+        <span class="show-value">{{ datetime ? datetime : '请选择' }}</span>
+      </div>
+    </nut-cell>
     <nut-datepicker
       :is-visible="isVisible2"
-      title="请选择日期时间"
+      title="选择日期时间"
       type="datetime"
       startDate="2000-11-10 12:08"
       endDate="2030-10-05 10:04"
@@ -90,22 +38,40 @@
       @close="switchPicker('isVisible2')"
       @choose="setChooseValue2"
     ></nut-datepicker>
-    <!-- demo3-->
+
+    <h4>选择时间</h4>
+    <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible3')">
+      <span slot="title">
+        <label>12时间制</label>
+      </span>
+      <div slot="desc" class="selected-option">
+        <span class="show-value">{{ time ? `${time} ${amOrPm}` : '请选择' }}</span>
+      </div>
+    </nut-cell>
     <nut-datepicker
       :is-visible="isVisible3"
       type="time"
-      title="请选择时间"
+      title="选择时间"
       @close="switchPicker('isVisible3')"
       @choose="setChooseValue3"
       :is-use12-hours="true"
       defaultValue="01:07"
       :is-am="false"
     ></nut-datepicker>
-    <!-- demo4-->
+
+    <h4>限制开始结束小时</h4>
+    <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible4')">
+      <span slot="title">
+        <label>选择时间</label>
+      </span>
+      <div slot="desc" class="selected-option">
+        <span class="show-value">{{ time1 ? time1 : '请选择' }}</span>
+      </div>
+    </nut-cell>
     <nut-datepicker
       :is-visible="isVisible4"
       type="time"
-      title="请选择时间"
+      title="选择时间"
       startHour="8"
       endHour="18"
       :default-value="time1"
@@ -113,11 +79,20 @@
       @choose="setChooseValue4"
       :is-set-second="true"
     ></nut-datepicker>
-    <!-- demo4-->
+
+    <h4>分钟数递增步长设置</h4>
+    <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible5')">
+      <span slot="title">
+        <label>分钟数递增步长设置</label>
+      </span>
+      <div slot="desc" class="selected-option">
+        <span class="show-value">{{ time2 ? time2 : '请选择时间' }}</span>
+      </div>
+    </nut-cell>
     <nut-datepicker
       :is-visible="isVisible5"
       type="time"
-      title="请选择时间"
+      title="选择时间"
       :minute-step="5"
       :default-value="time2"
       @close="switchPicker('isVisible5')"
@@ -131,18 +106,16 @@ export default {
   data() {
     return {
       isVisible: false,
-      isVisible1: false,
+      date: null,
       isVisible2: false,
+      time: '01:07',
       isVisible3: false,
-      isVisible4: false,
-      isVisible5: false,
-      date: null,
-      date1: null,
       datetime: '2018-11-02 11:08',
-      time: '01:07',
+      amOrPm: 'PM',
+      isVisible4: false,
       time1: '09:06:02',
-      time2: '10:30',
-      amOrPm: 'PM'
+      isVisible5: false,
+      time2: '10:30'
     };
   },
   methods: {
@@ -152,9 +125,6 @@ export default {
     setChooseValue(param) {
       this.date = param[3];
     },
-    setChooseValue1(param) {
-      this.date1 = param[3];
-    },
     setChooseValue2(param) {
       this.datetime = param[5];
     },
@@ -171,18 +141,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.btn,
-.show-value {
-	display: inline-block;
-	margin-left: 20px;
-}
-
-.btn {
-	padding: 5px;
-	border-radius: $btn-border-radius-small;
-	color: #fff;
-	background-color: $primary-color;
-}
-</style>

src/packages/datepicker/doc.md

@@ -1,162 +1,228 @@
 # DatePicker 日期选择
 
-## 基本用法
+## 选择年月日
 
-日期选择（不显示中文）
+每列不显示中文（年/月/日）
 
 ```html
-<nut-datepicker 
+<nut-cell 
+    :showIcon="true"  
+    title="每列不显示中文（年/月/日）"
+    :desc="date ? date : '请选择'"
+    @click.native="switchPicker('isVisible')">
+</nut-cell>
+<nut-datepicker
     :is-visible="isVisible"
     type="date"
-    title="请选择日期" 
+    title="选择年月日"
     :is-show-chinese="false"
     @close="switchPicker('isVisible')"
     @choose="setChooseValue"
->
-</nut-datepicker>
+></nut-datepicker>
 ```
-
-日期选择（限制开始结束时间）
-
-```html
-<nut-datepicker 
-    :is-visible="isVisible1"
-    title="请选择日期" 
-    type="date"
-    startDate="1991-11-10"
-    endDate="2019-10-05"
-    @close="switchPicker('isVisible1')"
-    @choose="setChooseValue1"
->
-</nut-datepicker>
+```javascript
+export default {
+  data() {
+    return {
+      isVisible: false,
+      date: null
+    };
+  },
+  methods: {
+    switchPicker(param) {
+      this[`${param}`] = !this[`${param}`];
+    },
+    setChooseValue(param) {
+      this.date = param[3];
+    }
+  }
+};
 ```
 
-日期时间选择（有默认值，限制开始结束时间，限制到时分）
+## 限制开始结束时间
 
 ```html
-<nut-datepicker 
+<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
+    <span slot="title">
+    <label>日期时间选择</label>
+    </span>
+    <div slot="desc" class="selected-option">
+    <span class="show-value">{{ datetime ? datetime : '请选择' }}</span>
+    </div>
+</nut-cell>
+<nut-datepicker
     :is-visible="isVisible2"
-    title="请选择日期时间" 
+    title="选择日期时间"
     type="datetime"
     startDate="2000-11-10 12:08"
     endDate="2030-10-05 10:04"
     defaultValue="2018-11-02 11:08"
     @close="switchPicker('isVisible2')"
     @choose="setChooseValue2"
->
-</nut-datepicker>
+></nut-datepicker>
+```
+```javascript
+export default {
+  data() {
+    return {
+      isVisible2: false,
+      time: '01:07'
+    };
+  },
+  methods: {
+    switchPicker(param) {
+      this[`${param}`] = !this[`${param}`];
+    },
+    setChooseValue2(param) {
+      this.datetime = param[5];
+    }
+  }
+};
 ```
 
-时间选择（12小时制）
+## 选择时间
 
 ```html
-<nut-datepicker 
-    :is-visible="isVisible3" 
+<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible3')">
+    <span slot="title">
+    <label>12时间制</label>
+    </span>
+    <div slot="desc" class="selected-option">
+    <span class="show-value">{{ time ? `${time} ${amOrPm}` : '请选择' }}</span>
+    </div>
+</nut-cell>
+<nut-datepicker
+    :is-visible="isVisible3"
     type="time"
-    title="请选择时间" 
+    title="选择时间"
     @close="switchPicker('isVisible3')"
     @choose="setChooseValue3"
     :is-use12-hours="true"
     defaultValue="01:07"
     :is-am="false"
->
-</nut-datepicker>
+></nut-datepicker>
+```
+```javascript
+export default {
+  data() {
+    return {
+      isVisible3: false,
+      datetime: '2018-11-02 11:08',
+      amOrPm: 'PM'
+    };
+  },
+  methods: {
+    switchPicker(param) {
+      this[`${param}`] = !this[`${param}`];
+    },
+    setChooseValue3(param) {
+      this.amOrPm = param[2] == '上午' ? 'AM' : 'PM';
+      this.time = param[3];
+    }
+  }
+};
 ```
 
-时间选择（限制开始结束小时）
+## 限制开始结束小时
 
 ```html
-<nut-datepicker 
+<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible4')">
+    <span slot="title">
+    <label>选择时间</label>
+    </span>
+    <div slot="desc" class="selected-option">
+    <span class="show-value">{{ time1 ? time1 : '请选择' }}</span>
+    </div>
+</nut-cell>
+<nut-datepicker
     :is-visible="isVisible4"
     type="time"
-    title="请选择时间" 
+    title="选择时间"
     startHour="8"
     endHour="18"
-    defaultValue="09:06"
+    :default-value="time1"
     @close="switchPicker('isVisible4')"
     @choose="setChooseValue4"
->
-</nut-datepicker>
+    :is-set-second="true"
+></nut-datepicker>
+```
+```javascript
+export default {
+  data() {
+    return {
+      isVisible4: false,
+      time1: '09:06:02'
+    };
+  },
+  methods: {
+    switchPicker(param) {
+      this[`${param}`] = !this[`${param}`];
+    },
+    setChooseValue4(param) {
+      this.time1 = param[3];
+    }
+  }
+};
 ```
 
-时间选择（分钟数递增步长设置）
+## 分钟数递增步长设置
 
 ```html
-<nut-datepicker 
+<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible5')">
+    <span slot="title">
+    <label>分钟数递增步长设置</label>
+    </span>
+    <div slot="desc" class="selected-option">
+    <span class="show-value">{{ time2 ? time2 : '请选择时间' }}</span>
+    </div>
+</nut-cell>
+<nut-datepicker
     :is-visible="isVisible5"
     type="time"
-    title="请选择时间" 
+    title="选择时间"
     :minute-step="5"
-    defaultValue="10:30"
+    :default-value="time2"
     @close="switchPicker('isVisible5')"
     @choose="setChooseValue5"
->
-</nut-datepicker>
+></nut-datepicker>
 ```
-
 ```javascript
 export default {
-    data() {
-        return {
-            isVisible: false,
-            isVisible1: false,
-            isVisible2: false,
-            isVisible3: false,
-            isVisible4: false,
-            isVisible5: false,
-            date: null,
-            date1: null,
-            datetime: '2018-11-02 11:08',
-            time: '01:07',
-            time1: '09:06',
-            time2: '10:30',
-            amOrPm: 'PM'
-        };
+  data() {
+    return {
+      isVisible5: false,
+      time2: '10:30'
+    };
+  },
+  methods: {
+    switchPicker(param) {
+      this[`${param}`] = !this[`${param}`];
     },
-    methods: {
-        switchPicker(param) {
-            this[`${param}`] = !this[`${param}`];
-        },
-        setChooseValue(param) {
-            this.date = param[3];
-        },
-        setChooseValue1(param) {
-            this.date1 = param[3];
-        },
-        setChooseValue2(param) {
-            this.datetime = param[5];
-        },
-        setChooseValue3(param) {
-            this.amOrPm = param[2] == '上午' ? 'AM' : 'PM';
-            this.time = param[3];
-        },
-        setChooseValue4(param) {
-            this.time1 = param[2];
-        },
-        setChooseValue5(param) {
-            this.time2 = param[2];
-        }
+    setChooseValue5(param) {
+      this.time2 = param[2];
     }
-}
+  }
+};
 ```
 
+
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | type | 类型，日期'date'， 日期时间'datetime'，时间'time' | String | 'date'
-| isVisible | 是否可见 | Boolean | false
-| isUse12Hours | 是否十二小时制度，只限类型为'time'时使用 | Boolean | false
-| isAm | 是否上午 | Boolean | true
-| minuteStep | 分钟步进值 | String | 1
-| isShowChinese | 每列是否展示中文 | Boolean | true
+| is-visible | 是否可见 | Boolean | false
+| is-use12-hours | 是否十二小时制度，只限类型为'time'时使用 | Boolean | false
+| is-am | 是否上午 | Boolean | true
+| minute-step | 分钟步进值 | String | 1
+| is-show-chinese | 每列是否展示中文 | Boolean | true
 | title | 设置标题 | String | null
-| defaultValue | 默认值 | String | null
-| startDate | 开始日期 | String | '2000-01-01'
-| endDate | 结束日期 | String | 今天
-| startHour | 开始小时 | Number | 1
-| endHour | 结束小时 | Number | 23
-|isSetSecond| 是否支持秒，仅限type类型为'time'时支持 | Boolean | false
+| default-value | 默认值 | String | null
+| start-date | 开始日期 | String | '2000-01-01'
+| end-date | 结束日期 | String | 今天
+| start-hour | 开始小时 | Number | 1
+| end-hour | 结束小时 | Number | 23
+|is-set-second| 是否支持秒，仅限type类型为'time'时支持 | Boolean | false
 
 ## Event
 

src/packages/picker/demo.vue

@@ -3,84 +3,84 @@
     <nut-noticebar :closeMode="true" v-if="!isMobile"
       >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar
     >
-    <h4>基本用法</h4>
+    <h4>基础样式</h4>
     <div>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible0')">
-        <span slot="title">
-          <label>年月选择</label>
-        </span>
-        <span slot="sub-title">不联动多列~~~</span>
-        <div slot="desc" class="selected-option">{{ date ? date : '请选择' }}</div>
+      <nut-cell 
+        :show-icon="true" 
+        title="请选择城市" 
+        :desc="option" 
+        @click.native="openSwitch('isVisible')">
       </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible')">
-        <span slot="title">
-          <label>城市选择</label>
-        </span>
-        <span slot="sub-title">联动~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="btn" @click.stop.prevent="modifyCity">修改为指定的城市</span>
-          <span class="show-value">{{ city ? city : '请选择' }}</span>
-        </div>
-      </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible1')">
-        <span slot="title">
-          <label>年选择</label>
-        </span>
-        <span slot="sub-title">单列~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="btn" @click.stop.prevent="modifyYear">修改为指定的年份</span>
-          <span class="show-value">{{ year ? year : '请选择' }}</span>
-        </div>
+    </div>
+    <div>
+      <nut-picker
+        :is-visible="isVisible"
+        :list-data="listData"
+        :default-value-data="defaultValueData"
+        @close="closeSwitch('isVisible')"
+        @confirm="confirm"
+      ></nut-picker>
+    </div>
+
+    <h4>多列样式</h4>
+    <div>
+      <nut-cell 
+        :show-icon="true" 
+        title="请选择时间" 
+        :desc="option1" 
+        @click.native="openSwitch('isVisible1')">
       </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
-        <span slot="title">
-          <label>城市选择自定义数据1</label>
-        </span>
-        <span slot="sub-title">联动~~~</span>
-        <div slot="desc" class="selected-option">
-          <span class="show-value">{{ cityCustmer ? cityCustmer : '请选择' }}</span>
-        </div>
+    </div>
+    <div>  
+      <nut-picker
+        :is-visible="isVisible1"
+        :list-data="listData1"
+        :default-value-data="defaultValueData1"
+        @close="closeSwitch('isVisible1')"
+        @confirm="confirm1"
+      ></nut-picker>
+    </div>
+
+    <h4>多级联动</h4>
+    <div>
+      <nut-cell 
+        :show-icon="true" 
+        title="请选择城市" 
+        :desc="cityCustmer" 
+        @click.native="openSwitch('isVisible2')">
       </nut-cell>
     </div>
-    <!-- demo 年月选择(不联动)-->
-    <nut-picker
-      :is-visible="isVisible0"
-      :list-data="listData0"
-      title="请选择年月"
-      :default-value-data="defaultValueData0"
-      @close="switchPicker('isVisible0')"
-      @confirm="setChooseValue0"
-    ></nut-picker>
-    <!-- demo 城市选择(联动)-->
-    <nut-picker
-      :is-visible="isVisible"
-      title="请选择城市"
-      :list-data="listData"
-      :default-value-data="defaultValueData"
-      @close="switchPicker('isVisible')"
-      @confirm="setChooseValue"
-      @choose="updateChooseValue"
-      @close-update="closeUpdateChooseValue"
-    ></nut-picker>
-    <!-- demo 年选择-->
-    <nut-picker
-      :is-visible="isVisible1"
-      :default-value-data="defaultValueData1"
-      :list-data="listData1"
-      @close="switchPicker('isVisible1')"
-      @confirm="setYearValue"
-    ></nut-picker>
-    <!-- demo 城市选择(联动) 自定义-->
-    <nut-picker
-      :is-visible="isVisible2"
-      title="请选择城市"
-      :default-value-data="defaultValueData"
-      :list-data="custmerCityData"
-      @close="switchPicker('isVisible2')"
-      @confirm="setChooseValueCustmer"
-      @choose="updateChooseValueCustmer"
-      @close-update="closeUpdateChooseValueCustmer"
+    <div> 
+      <nut-picker
+        :is-visible="isVisible2"
+        :default-value-data="defaultValueData"
+        :list-data="custmerCityData"
+        @close="closeSwitch('isVisible2')"
+        @confirm="setChooseValueCustmer"
+        @choose="updateChooseValueCustmer"
+        @close-update="closeUpdateChooseValueCustmer"
     ></nut-picker>
+    </div>
+
+
+    <h4>带标题样式</h4>
+    <div>
+      <nut-cell 
+        :show-icon="true" 
+        title="请选择城市" 
+        :desc="option3" 
+        @click.native="openSwitch('isVisible3')">
+      </nut-cell>
+    </div>
+    <div> 
+      <nut-picker
+        :is-visible="isVisible3"
+        :list-data="listData"
+        title="请选择城市"
+        @close="closeSwitch('isVisible3')"
+        @confirm="confirm3"
+      ></nut-picker>
+    </div>
   </div>
 </template>
 
@@ -90,12 +90,28 @@ const APIData = [
     label: 1,
     array: [
       {
-        label: 3,
+        label: 1,
         value: '朝阳区'
       },
       {
-        label: 4,
+        label: 2,
         value: '海淀区'
+      },
+      {
+        label: 3,
+        value: '大兴区'
+      },
+      {
+        label: 4,
+        value: '东城区'
+      },
+      {
+        label: 5,
+        value: '西城区'
+      },
+      {
+        label: 6,
+        value: '丰台区'
       }
     ]
   },
@@ -103,12 +119,24 @@ const APIData = [
     label: 2,
     array: [
       {
-        label: 5,
-        value: '测试1'
+        label: 1,
+        value: '黄浦区'
       },
       {
-        label: 6,
-        value: '测试2'
+        label: 2,
+        value: '长宁区'
+      },
+      {
+        label: 3,
+        value: '普陀区'
+      },
+      {
+        label: 4,
+        value: '杨浦区'
+      },
+      {
+        label: 5,
+        value: '浦东新区'
       }
     ]
   }
@@ -116,66 +144,48 @@ const APIData = [
 export default {
   data() {
     return {
-      date: null,
-      isVisible0: false,
-      listData0: [
+      option: '请选择',
+      isVisible: false,
+      listData: [
         [
-          '2010',
-          '2011',
-          '2012',
-          '2013',
-          '2014',
-          '2015',
-          '2016',
-          '2017',
-          '2018',
-          '2019',
-          '2020',
-          '2021',
-          '2022',
-          '2023',
-          '2024',
-          '2025',
-          '2026',
-          '2027',
-          '2028',
-          '2029',
-          '2030',
-          '2031',
-          '2032',
-          '2033',
-          '2034',
-          '2035',
-          '2036',
-          '2037',
-          '2038',
-          '2039'
-        ],
-        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+          {
+            label: 1,
+            value: '南京市'
+          },
+          {
+            label: 2,
+            value: '无锡市'
+          },
+          {
+            label: 3,
+            value: '海北藏族自治区'
+          },
+          {
+            label: 4,
+            value: '北京市'
+          },
+          {
+            label: 5,
+            value: '连云港市'
+          },
+          {
+            label: 6,
+            value: '浙江市'
+          }
+        ]
       ],
-      defaultValueData0: ['2012', '2'],
-      city: null,
-      isVisible: false,
-      data: {
-        北京: ['北京'],
-        黑龙江: ['哈尔滨', '绥化', '漠河', '大兴安岭', '牡丹江', '佳木斯', '齐齐哈尔', '大庆', '五大连池'],
-        江西: ['九江', '南昌', '赣州'],
-        上海: ['上海'],
-        重庆: ['重庆'],
-        内蒙古: ['呼和浩特', '呼和浩特1', '呼和浩特2', '呼和浩特3', '呼和浩特4', '呼和浩特5', '呼和浩特6', '呼和浩特7']
-      },
-      dataSub: {
-        上海: ['测试1', '测试2'],
-        北京: ['西城区', '东城区', '大兴区', '朝阳区', '海淀区'],
-        南昌: ['青山湖区', '西湖区', '宏都中路', '梦时代', '八一广场'],
-        绥化: ['明水', '拜泉'],
-        哈尔滨: ['道里区', '道外区']
-      },
-      listData: [['上海', '黑龙江', '北京', '重庆', '江西', '内蒙古']],
       defaultValueData: null,
-      year: null,
+      option1: '请选择',
       isVisible1: false,
-      listData1: [['2018', '2019', '2010']],
+      listData1: [
+        ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        ['上午', '下午', '晚上']
+      ],
+      defaultValueData1: null,
+      option3: '请选择',
+      isVisible3: false,
+      cityCustmer: '请选择',
+      isVisible2: false,
       custmerCityData: [
         [
           {
@@ -187,73 +197,35 @@ export default {
             value: '上海'
           }
         ]
-      ],
-      cityCustmer: null,
-      isVisible2: false,
-      defaultValueData1: null
+      ]
     };
   },
-  created() {
-    this.listData = [...[this.listData[0]], this.data[this.listData[0][0]], this.dataSub[this.data[this.listData[0][0]]]];
+  mounted() {
+    this.defaultValueData = [this.listData[0][3]];
+    this.defaultValueData1 = ['周四', '下午'];
   },
   methods: {
-    switchPicker(param) {
-      this[`${param}`] = !this[`${param}`];
-    },
-
-    setChooseValue0(chooseData) {
-      this.date = `${chooseData[0]}年${chooseData[1]}月`;
+    openSwitch(param) {
+      this[`${param}`] = true;
     },
 
-    setYearValue(chooseData) {
-      this.year = `${chooseData[0]}年`;
+    closeSwitch(param) {
+      this[`${param}`] = false;
     },
 
-    modifyCity() {
-      this.updateLinkage('', '重庆', 1, '重庆');
-      this.defaultValueData = ['重庆', '重庆'];
+    confirm(chooseData) {
+      this.option = `${chooseData[0].value}`;
     },
 
-    modifyYear() {
-      this.defaultValueData1 = ['2018'];
+    confirm1(chooseData) {
+      this.option1 = `${chooseData[0]} ${chooseData[1]}`;
     },
 
-    // demo 城市选择(联动) start
-    setChooseValue(chooseData) {
-      this.city = `${chooseData[0]}-${chooseData[1]}${chooseData[2] ? '-' + chooseData[2] : ''}`;
+    confirm3(chooseData) {
+      this.option3 = `${chooseData[0].value}`;
     },
-
-    updateLinkage(self, value, index, chooseValue, cacheValueData) {
-      if (!value) {
-        return false;
-      }
-      switch (index) {
-        case 1:
-          let i = this.listData[0].indexOf(value);
-          this.listData.splice(index, 1, [...this.data[this.listData[0][i]]]);
-          chooseValue = chooseValue ? chooseValue : this.listData[index][0];
-          self && self.updateChooseValue(self, index, chooseValue);
-          this.updateLinkage(self, chooseValue, 2, cacheValueData && cacheValueData[2] ? cacheValueData[2] : null);
-          break;
-        case 2:
-          let areaData = this.dataSub[value] ? this.dataSub[value] : [];
-          this.listData.splice(index, 1, [...areaData]);
-          chooseValue = chooseValue ? chooseValue : this.listData[index][0];
-          self && self.updateChooseValue(self, index, chooseValue);
-          break;
-      }
-    },
-
-    updateChooseValue(self, index, value, cacheValueData) {
-      index < 2 && this.updateLinkage(self, value, index + 1, null);
-    },
-
-    closeUpdateChooseValue(self, chooseData) {
-      this.updateLinkage(self, chooseData[0], 1, chooseData[1], chooseData);
-    },
-    // demo 城市选择(联动) end
+    
     setChooseValueCustmer(chooseData) {
-      //alert(JSON.stringify(chooseData));
       var str = chooseData.map(item => item.value).join('-');
       this.cityCustmer = str;
     },
@@ -292,17 +264,3 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.btn,
-.show-value {
-	display: inline-block;
-	margin-left: 20px;
-}
-
-.btn {
-	padding: 5px;
-	border-radius: $btn-border-radius-small;
-	color: #fff;
-	background-color: #999;
-}
-</style>

src/packages/picker/doc.md

@@ -2,75 +2,172 @@
 
 提供多个选项集合供用户选择其中一项。
 
-## 基本用法
-
+## 基本样式
 ```html
-<nut-picker 
-    :is-visible="isVisible1" 
-    :default-value-data="defaultValueData1"
-    :list-data="listData1"
-    @close="switchPicker('isVisible1')"
-    @confirm="setYearValue"
->
-</nut-picker>
+<nut-cell 
+  :show-icon="true" 
+  title="请选择城市" 
+  :desc="option" 
+  @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-picker
+  :is-visible="isVisible"
+  :list-data="listData"
+  :default-value-data="defaultValueData"
+  @close="closeSwitch('isVisible')"
+  @confirm="confirm"
+></nut-picker>
 ```
-## 多列用法
+```javascript
+export default {
+  data() {
+    return {
+      option: '请选择',
+      isVisible: false,
+      listData: [
+        [
+          {
+            label: 1,
+            value: '南京市'
+          },
+          {
+            label: 2,
+            value: '无锡市'
+          },
+          {
+            label: 3,
+            value: '海北藏族自治区'
+          },
+          {
+            label: 4,
+            value: '北京市'
+          },
+          {
+            label: 5,
+            value: '连云港市'
+          },
+          {
+            label: 6,
+            value: '浙江市'
+          }
+        ]
+      ],
+      defaultValueData: null
+    }
+  },
+  mounted() {
+    this.defaultValueData = [this.listData[0][3]];
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
 
-```html
-<nut-picker 
-    :is-visible="isVisible0" 
-    :list-data="listData0"
-    title="请选择年月"
-    :default-value-data="defaultValueData0"
-    @close="switchPicker('isVisible0')"
-    @confirm="setChooseValue0"
->
-</nut-picker>
-```
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
 
-## 联动（省市区）
+    confirm(chooseData) {
+      this.option = `${chooseData[0].value}`;
+    }
+  }
+};
+```
 
+## 多列样式
 ```html
-<nut-picker 
-    :is-visible="isVisible" 
-    title="请选择城市"
-    :list-data="listData"
-    :default-value-data="defaultValueData"
-    @close="switchPicker('isVisible')"
-    @confirm="setChooseValue"
-    @choose="updateChooseValue"
-    @close-update="closeUpdateChooseValue"
->
-</nut-picker>
+<nut-cell 
+  :show-icon="true" 
+  title="请选择时间" 
+  :desc="option1" 
+  @click.native="openSwitch('isVisible1')">
+</nut-cell>
+<nut-picker
+  :is-visible="isVisible1"
+  :list-data="listData1"
+  :default-value-data="defaultValueData1"
+  @close="closeSwitch('isVisible1')"
+  @confirm="confirm1"
+></nut-picker>
 ```
+```javascript
+export default {
+  data() {
+    return {
+      option1: '请选择',
+      isVisible1: false,
+      listData1: [
+        ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        ['上午', '下午', '晚上']
+      ],
+      defaultValueData1: null
+    }
+  },
+  mounted() {
+    this.defaultValueData1 = ['周四', '下午'];
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
 
-## 联动（省市区）自定义数据
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
 
+    confirm1(chooseData) {
+      this.option1 = `${chooseData[0]} ${chooseData[1]}`;
+    }
+  }
+};
+```
+
+## 多级联动
 ```html
+<nut-cell 
+  :show-icon="true" 
+  title="请选择城市" 
+  :desc="cityCustmer" 
+  @click.native="openSwitch('isVisible2')">
+</nut-cell>
 <nut-picker
-    :is-visible="isVisible2"
-    title="请选择城市"
-    :default-value-data="defaultValueData"
-    :list-data="custmerCityData"
-    @close="switchPicker('isVisible2')"
-    @confirm="setChooseValueCustmer"
-    @choose="updateChooseValueCustmer"
-    @close-update="closeUpdateChooseValueCustmer"
+  :is-visible="isVisible2"
+  :default-value-data="defaultValueData"
+  :list-data="custmerCityData"
+  @close="closeSwitch('isVisible2')"
+  @confirm="setChooseValueCustmer"
+  @choose="updateChooseValueCustmer"
+  @close-update="closeUpdateChooseValueCustmer"
 ></nut-picker>
 ```
-
 ```javascript
 const APIData = [
   {
     label: 1,
     array: [
       {
+        label: 1,
+        value: '朝阳区'
+      },
+      {
+        label: 2,
+        value: '海淀区'
+      },
+      {
         label: 3,
-        value: "朝阳区"
+        value: '大兴区'
       },
       {
         label: 4,
-        value: "海淀区"
+        value: '东城区'
+      },
+      {
+        label: 5,
+        value: '西城区'
+      },
+      {
+        label: 6,
+        value: '丰台区'
       }
     ]
   },
@@ -78,12 +175,24 @@ const APIData = [
     label: 2,
     array: [
       {
-        label: 5,
-        value: "测试1"
+        label: 1,
+        value: '黄浦区'
       },
       {
-        label: 6,
-        value: "测试2"
+        label: 2,
+        value: '长宁区'
+      },
+      {
+        label: 3,
+        value: '普陀区'
+      },
+      {
+        label: 4,
+        value: '杨浦区'
+      },
+      {
+        label: 5,
+        value: '浦东新区'
       }
     ]
   }
@@ -91,191 +200,93 @@ const APIData = [
 export default {
   data() {
     return {
-      date: null,
-      isVisible0: false,
-      listData0: [
-        [
-          "2010",
-          "2011",
-          "2012",
-          "2013",
-          "2014",
-          "2015",
-          "2016",
-          "2017",
-          "2018",
-          "2019",
-          "2020",
-          "2021",
-          "2022",
-          "2023",
-          "2024",
-          "2025",
-          "2026",
-          "2027",
-          "2028",
-          "2029",
-          "2030",
-          "2031",
-          "2032",
-          "2033",
-          "2034",
-          "2035",
-          "2036",
-          "2037",
-          "2038",
-          "2039"
-        ],
-        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
-      ],
-      defaultValueData0: ["2012", "2"],
-      city: null,
+      option: '请选择',
       isVisible: false,
-      data: {
-        北京: ["北京"],
-        黑龙江: [
-          "哈尔滨",
-          "绥化",
-          "漠河",
-          "大兴安岭",
-          "牡丹江",
-          "佳木斯",
-          "齐齐哈尔",
-          "大庆",
-          "五大连池"
-        ],
-        江西: ["九江", "南昌", "赣州"],
-        上海: ["上海"],
-        重庆: ["重庆"],
-        内蒙古: [
-          "呼和浩特",
-          "呼和浩特1",
-          "呼和浩特2",
-          "呼和浩特3",
-          "呼和浩特4",
-          "呼和浩特5",
-          "呼和浩特6",
-          "呼和浩特7"
+      listData: [
+        [
+          {
+            label: 1,
+            value: '南京市'
+          },
+          {
+            label: 2,
+            value: '无锡市'
+          },
+          {
+            label: 3,
+            value: '海北藏族自治区'
+          },
+          {
+            label: 4,
+            value: '北京市'
+          },
+          {
+            label: 5,
+            value: '连云港市'
+          },
+          {
+            label: 6,
+            value: '浙江市'
+          }
         ]
-      },
-      dataSub: {
-        上海: ["测试1", "测试2"],
-        北京: ["西城区", "东城区", "大兴区", "朝阳区", "海淀区"],
-        南昌: ["青山湖区", "西湖区", "宏都中路", "梦时代", "八一广场"],
-        绥化: ["明水", "拜泉"],
-        哈尔滨: ["道里区", "道外区"]
-      },
-      listData: [["上海", "黑龙江", "北京", "重庆", "江西", "内蒙古"]],
+      ],
       defaultValueData: null,
-      year: null,
+      option1: '请选择',
       isVisible1: false,
-      listData1: [["2018", "2019","2010"]],
+      listData1: [
+        ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        ['上午', '下午', '晚上']
+      ],
+      defaultValueData1: null,
+      option3: '请选择',
+      isVisible3: false,
+      cityCustmer: '请选择',
+      isVisible2: false,
       custmerCityData: [
         [
           {
             label: 1,
-            value: "北京"
+            value: '北京'
           },
           {
             label: 2,
-            value: "上海"
+            value: '上海'
           }
         ]
-      ],
-      cityCustmer: null,
-      isVisible2: false,
-      defaultValueData1: null
+      ]
     };
   },
-  created() {
-    this.listData = [
-      ...[this.listData[0]],
-      this.data[this.listData[0][0]],
-      this.dataSub[this.data[this.listData[0][0]]]
-    ];
+  mounted() {
+    this.defaultValueData = [this.listData[0][3]];
+    this.defaultValueData1 = ['周四', '下午'];
   },
   methods: {
-    switchPicker(param) {
-      this[`${param}`] = !this[`${param}`];
+    openSwitch(param) {
+      this[`${param}`] = true;
     },
 
-    setChooseValue0(chooseData) {
-      this.date = `${chooseData[0]}年${chooseData[1]}月`;
+    closeSwitch(param) {
+      this[`${param}`] = false;
     },
-
-    setYearValue(chooseData) {
-      this.year = `${chooseData[0]}年`;
-    },
-
-    modifyCity() {
-      this.updateLinkage("", "重庆", 1, "重庆");
-      this.defaultValueData = ["重庆", "重庆"];
-    },
-
-    modifyYear() {
-      this.defaultValueData1 = ["2018"];
-    },
-
-    // demo 城市选择(联动) start
-    setChooseValue(chooseData) {
-      this.city = `${chooseData[0]}-${chooseData[1]}${
-        chooseData[2] ? "-" + chooseData[2] : ""
-      }`;
-    },
-
-    updateLinkage(self, value, index, chooseValue, cacheValueData) {
-      if (!value) {
-        return false;
-      }
-      switch (index) {
-        case 1:
-          let i = this.listData[0].indexOf(value);
-          this.listData.splice(index, 1, [...this.data[this.listData[0][i]]]);
-          chooseValue = chooseValue ? chooseValue : this.listData[index][0];
-          self && self.updateChooseValue(self, index, chooseValue);
-          this.updateLinkage(
-            self,
-            chooseValue,
-            2,
-            cacheValueData && cacheValueData[2] ? cacheValueData[2] : null
-          );
-          break;
-        case 2:
-          let areaData = this.dataSub[value] ? this.dataSub[value] : [];
-          this.listData.splice(index, 1, [...areaData]);
-          chooseValue = chooseValue ? chooseValue : this.listData[index][0];
-          self && self.updateChooseValue(self, index, chooseValue);
-          break;
-      }
-    },
-
-    updateChooseValue(self, index, value, cacheValueData) {
-      index < 2 && this.updateLinkage(self, value, index + 1, null);
-    },
-
-    closeUpdateChooseValue(self, chooseData) {
-      this.updateLinkage(self, chooseData[0], 1, chooseData[1], chooseData);
-    },
-    // demo 城市选择(联动) end
+    
     setChooseValueCustmer(chooseData) {
-      //alert(JSON.stringify(chooseData));
-      var str = chooseData.map(item => item.value).join("-");
+      var str = chooseData.map(item => item.value).join('-');
       this.cityCustmer = str;
     },
 
     closeUpdateChooseValueCustmer(self, chooseData) {
-        //此处模拟查询API，如果数据缓存了不需要再重新请求
-        setTimeout(() => {
-          let { label, value } = chooseData[0];
-          var resItems = APIData.find(item => item.label == label);
-          if (resItems && resItems.array.length) {
-            this.$set(this.custmerCityData, 1, resItems.array);
-            
-            // 复原位置
-            self.updateChooseValue(self, 0, chooseData[0]);
-            self.updateChooseValue(self, 1, chooseData[1]);
-          }
-        }, 100);
+      //此处模拟查询API，如果数据缓存了不需要再重新请求
+      setTimeout(() => {
+        let { label, value } = chooseData[0];
+        var resItems = APIData.find(item => item.label == label);
+        if (resItems && resItems.array.length) {
+          this.$set(this.custmerCityData, 1, resItems.array);
+
+          // 复原位置
+          self.updateChooseValue(self, 0, chooseData[0]);
+          self.updateChooseValue(self, 1, chooseData[1]);
+        }
+      }, 100);
     },
 
     updateChooseValueCustmer(self, index, resValue, cacheValueData) {
@@ -297,15 +308,86 @@ export default {
 };
 ```
 
+## 带标题样式
+```html
+<nut-cell 
+  :show-icon="true" 
+  title="请选择城市" 
+  :desc="option3" 
+  @click.native="openSwitch('isVisible3')">
+</nut-cell>
+<nut-picker
+  :is-visible="isVisible3"
+  :list-data="listData"
+  title="请选择城市"
+  @close="closeSwitch('isVisible3')"
+  @confirm="confirm3"
+></nut-picker>
+```
+```javascript
+export default {
+  data() {
+    return {
+      option3: '请选择',
+      isVisible3: false,
+      listData: [
+        [
+          {
+            label: 1,
+            value: '南京市'
+          },
+          {
+            label: 2,
+            value: '无锡市'
+          },
+          {
+            label: 3,
+            value: '海北藏族自治区'
+          },
+          {
+            label: 4,
+            value: '北京市'
+          },
+          {
+            label: 5,
+            value: '连云港市'
+          },
+          {
+            label: 6,
+            value: '浙江市'
+          }
+        ]
+      ]
+    }
+  },
+  mounted() {
+    this.defaultValueData = [this.listData[0][3]];
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    confirm3(chooseData) {
+      this.option3 = `${chooseData[0].value}`;
+    }
+  }
+};
+```
+
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| isVisible | 是否可见 | Boolean | false
-| customClassName | 自定义class | String | null
+| is-visible | 是否可见 | Boolean | false
+| custom-class-name | 自定义class | String | null
 | title | 设置标题 | String | null
-| listData | 列表数据 | Array | []
-| defaultValueData | 默认选中 | Array | []
+| list-data | 列表数据 | Array | []
+| default-value-data | 默认选中 | Array | []
 
 ## Event
 

src/packages/picker/picker-slot.vue

@@ -1,16 +1,5 @@
 <template>
   <div class="nut-picker-list">
-    <div class="nut-picker-roller" ref="roller">
-      <div
-        class="nut-picker-roller-item"
-        :class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
-        v-for="(item, index) in listData"
-        :style="setRollerStyle(index + 1)"
-        :key="item.label ? item.label : index"
-      >
-        {{ item.value ? item.value : item }}
-      </div>
-    </div>
     <div class="nut-picker-content">
       <div class="nut-picker-list-panel" ref="list">
         <div class="nut-picker-item" v-for="(item, index) in listData" :key="item.label ? item.label : index"
@@ -54,8 +43,8 @@ export default {
       currIndex: 1,
       transformY: 0,
       scrollDistance: 0,
-      lineSpacing: 36,
-      rotation: 20,
+      lineSpacing: 50,
+      rotation: 30,
       timer: null
     };
   },
@@ -79,28 +68,13 @@ export default {
       }
     },
 
-    setRollerStyle(index) {
-      return `transform: rotate3d(1, 0, 0, ${-this.rotation * index}deg) translate3d(0px, 0px, 104px)`;
-    },
-
-    isHidden(index) {
-      if (index >= this.currIndex + 8 || index <= this.currIndex - 8) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-
     setTransform(translateY = 0, type, time = 1000, deg) {
       if (type === 'end') {
         this.$refs.list.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
-        this.$refs.roller.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
       } else {
         this.$refs.list.style.webkitTransition = '';
-        this.$refs.roller.style.webkitTransition = '';
       }
       this.$refs.list.style.webkitTransform = `translate3d(0, ${translateY}px, 0)`;
-      this.$refs.roller.style.webkitTransform = `rotate3d(1, 0, 0, ${deg})`;
       this.scrollDistance = translateY;
     },
 

src/packages/picker/picker.scss

@@ -5,16 +5,19 @@
 
 .nut-picker-control {
 	display: flex;
-	height: 40px;
-	border-bottom: 1px solid $light-color;
+	height: 48px;
+	border-bottom: 1px solid $split-line-color;
 	text-align: center;
-	line-height: 40px;
-	font-size: $font-size-base;
+	line-height: 48px;
+	font-size: $font-size-body-normal;
 
 	.nut-picker-cancel-btn,
 	.nut-picker-confirm-btn {
 		width: 60px;
-		color: $primary-color;
+		color: $text-black-2;
+	}
+	.nut-picker-confirm-btn {
+		color: $text-jd-red;
 	}
 
 	.nut-picker-title {
@@ -22,6 +25,7 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		color: $text-black-1;
 	}
 }
 
@@ -47,71 +51,41 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		//background-image: linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6));
+		background-image: linear-gradient(180deg,hsla(0,0%,100%,.85),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.85),hsla(0,0%,100%,.4));
 		background-position: top, bottom;
-		background-size: 100% 108px;
+		background-size: 100% 99px;
 		background-repeat: no-repeat;
 		z-index: 3;
 	}
 
 	.nut-picker-indicator {
 		position: absolute;
-		top: 108px;
+		top: 99px;
 		width: 100%;
-		height: 34px;
-		border-top: 1px solid $dark-color;
-		border-bottom: 1px solid $dark-color;
+		height: 50px;
+		border-top: 1px solid $split-line-color;
+		border-bottom: 1px solid $split-line-color;
 		z-index: 3;
 	}
 
-	.nut-picker-content,
-	.nut-picker-roller {
+	.nut-picker-content{
 		position: absolute;
-		top: 108px;
+		top: 100px;
 		width: 100%;
-		height: 36px;
-	}
-
-	.nut-picker-content {
 		background: #fff;
 		z-index: 2;
-		overflow: hidden;
 	}
 
-	.nut-picker-item,
-	.nut-picker-roller-item {
+	.nut-picker-item{
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		height: 36px;
-		line-height: 36px;
-		color: $title-color;
-		font-size: $font-size-base;
+		height: 50px;
+		line-height: 50px;
+		color: $text-black-1;
+		font-size: $font-size-body-large;
 		text-align: center;
 	}
-
-	.nut-picker-item {
-		font-size: 15px;
-		background: #fff;
-	}
-
-	.nut-picker-roller {
-		z-index: 1;
-		transform-style: preserve-3d;
-
-		.nut-picker-roller-item {
-			backface-visibility: hidden;
-			position: absolute;
-			top: 0;
-			width: 100%;
-			color: $text-color;
-		}
-
-		.nut-picker-roller-item-hidden {
-			visibility: hidden;
-			opacity: 0;
-		}
-	}
 }
 
 .nut-picker-placeholder {

src/packages/picker/picker.vue

@@ -1,6 +1,10 @@
 <template>
-  <nut-actionsheet :is-visible="isVisible" @close="closeActionSheet">
-    <div class="nut-picker" slot="custom" :class="customClassName ? customClassName : null">
+  <nut-popup
+      v-model="isVisiblePopup"
+      position="bottom"
+      @click-overlay="closeActionSheet" 
+    > 
+    <div class="nut-picker" :class="customClassName ? customClassName : null">
       <div class="nut-picker-control">
         <span class="nut-picker-cancel-btn" @click="closeActionSheet">{{ nutTranslate('lang.cancelBtnTxt') }}</span>
         <div class="nut-picker-title">{{ title ? title : '' }}</div>
@@ -20,7 +24,7 @@
         </template>
       </div>
     </div>
-  </nut-actionsheet>
+  </nut-popup>
 </template>
 <script>
 import nutactionsheet from '../actionsheet/actionsheet.vue';
@@ -41,7 +45,7 @@ export default {
     },
     title: {
       type: String,
-      default: ' '
+      default: ''
     },
     listData: {
       type: Array,
@@ -58,12 +62,16 @@ export default {
   },
   data() {
     return {
+      isVisiblePopup: false,
       chooseValueData: [],
       cacheValueData: [],
       isUpdate: false
     };
   },
   watch: {
+    isVisible: function(value) {
+      this.isVisiblePopup = value;
+    },
     defaultValueData: function() {
       this.chooseValueData = [...this.defaultValueData];
       this.cacheValueData = [...this.defaultValueData];
@@ -97,7 +105,7 @@ export default {
       }
     }
   },
-  created() {
+  mounted() {
     if (this.defaultValueData && this.defaultValueData.length) {
       this.chooseValueData = [...this.defaultValueData];
     } else {