diff --git a/build/webpack.config.js b/build/webpack.config.js index dd17d2733..06f6c5859 100644 --- a/build/webpack.config.js +++ b/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: { diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md index 10ef86410..535c18272 100644 --- a/docs/examples-docs/picker.md +++ b/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 + +``` +::: + ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue index 22d56faf7..9870f5c7b 100644 --- a/packages/picker/src/picker.vue +++ b/packages/picker/src/picker.vue @@ -1,7 +1,9 @@ - + + 取消 + 完成 @@ -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`事件 */ diff --git a/packages/zanui-css/src/picker.css b/packages/zanui-css/src/picker.css index 93ad8a1da..3fb1b84cd 100644 --- a/packages/zanui-css/src/picker.css +++ b/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 {