picker toolbar

build/webpack.config.js

@@ -42,7 +42,8 @@ module.exports = {
       'vue$': 'vue/dist/vue.runtime.common.js',
       'zanui': path.join(__dirname, '..'),
       'src': path.join(__dirname, '../src'),
-      'packages': path.join(__dirname, '../packages')
+      'packages': path.join(__dirname, '../packages'),
+      'lib': path.join(__dirname, '../lib')
     }
   },
   module: {

docs/examples-docs/picker.md

@@ -24,6 +24,12 @@ export default {
   methods: {
     handlePickerChange(picker, values) {
       picker.setColumnValues(1, citys[values[0]]);
+    },
+    handlePickerCancel() {
+      alert('picker cancel');
+    },
+    handlePickerConfirm() {
+      alert('picker confirm');
     }
   }
 };
@@ -41,6 +47,14 @@ export default {
 ```
 :::
 
+### 带toolbar的Picker
+
+:::demo 带toolbar的Picker
+```html
+<zan-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |

packages/picker/src/picker.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="zan-picker">
-    <div class="zan-picker__toolbar">
+    <div class="zan-picker__toolbar" v-show="showToolbar">
       <slot>
+        <a href="javascript:void(0)" class="zan-picker__cancel" @click="handlePickerCancel">取消</a>
+        <a href="javascript:void(0)" class="zan-picker__confirm" @click="handlePickerConfirm">完成</a>
       </slot>
     </div>
     <div class="zan-picker__columns" :class="['zan-picker__columns--' + columns.length]">
@@ -60,7 +62,7 @@ export default {
      */
     showToolbar: {
       type: Boolean,
-      default: true
+      default: false
     }
   },
 
@@ -78,6 +80,12 @@ export default {
   },
 
   methods: {
+    handlePickerCancel() {
+      this.$emit('cancel');
+    },
+    handlePickerConfirm() {
+      this.$emit('confirm');
+    },
     /**
      * 处理列`change`事件
      */

packages/zanui-css/src/picker.css

@@ -1,9 +1,29 @@
+@import "./mixins/border_retina.css";
+
 @component-namespace zan {
   @b picker {
     overflow: hidden;
 
     @e toolbar {
       height: 40px;
+      line-height: 40px;
+      overflow: hidden;
+      padding: 0 15px;
+      position: relative;
+
+      &::after {
+        @mixin border-retina (top, bottom);
+      }
+    }
+
+    @e cancel {
+      color: #3388FF;
+      float: left;
+    }
+
+    @e confirm {
+      color: #3388FF;
+      float: right;
     }
 
     @e columns {