diff --git a/README.md b/README.md index 9cac89c33..13d59c68b 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@

项目logo

+

A Vue.js 2.0 Mobile UI at YouZan

[![Build Status](https://travis-ci.org/youzan/vant.svg?branch=master)](https://travis-ci.org/youzan/vant) diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js index a9433271a..3acf74802 100644 --- a/build/webpack.config.dev.js +++ b/build/webpack.config.dev.js @@ -5,6 +5,12 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ProgressBarPlugin = require('progress-bar-webpack-plugin'); const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); const isProduction = process.env.NODE_ENV === 'production'; +const cache = { + loader: 'cache-loader', + options: { + cacheDirectory: path.resolve(__dirname, '../node_modules/.cache-loader') + } +}; module.exports = { entry: { @@ -16,7 +22,6 @@ module.exports = { path: path.join(__dirname, '../docs/dist'), publicPath: '/', filename: '[name].js', - umdNamedDefine: true, chunkFilename: 'async_[name].js' }, devServer: { @@ -44,6 +49,7 @@ module.exports = { { test: /\.vue$/, use: [ + cache, { loader: 'vue-loader', options: { @@ -57,6 +63,7 @@ module.exports = { test: /\.js$/, exclude: /node_modules|vue-router\/|vue-loader\//, use: [ + cache, 'babel-loader' ] }, @@ -72,6 +79,7 @@ module.exports = { { test: /\.md/, use: [ + cache, 'vue-loader', 'fast-vue-md-loader' ] diff --git a/docs/demos/views/area.vue b/docs/demos/views/area.vue index 35bd296d9..04794cf3a 100644 --- a/docs/demos/views/area.vue +++ b/docs/demos/views/area.vue @@ -5,7 +5,7 @@ - + @@ -31,7 +31,8 @@ export default { data() { return { - areaList: AreaList + areaList: AreaList, + value: '110101' }; } }; diff --git a/docs/demos/views/picker.vue b/docs/demos/views/picker.vue index e9006595a..112fd2f6c 100644 --- a/docs/demos/views/picker.vue +++ b/docs/demos/views/picker.vue @@ -1,19 +1,26 @@ @@ -21,26 +28,45 @@ export default { i18n: { 'zh-CN': { - area: '地区选择', - title2: '带 toolbar 的 Picker', - column: { - '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'], - '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩'] - } + area: '标题', + title2: '禁用选项', + title3: '展示顶部栏', + title4: '多列联动', + column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'], + column2: [ + { text: '杭州', disabled: true }, + { text: '宁波' }, + { text: '温州' } + ], + column3: { + 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'], + 福建: ['福州', '厦门', '莆田', '三明', '泉州'] + }, + toastContent: (value, index) => `当前值：${value}, 当前索引：${index}` }, 'en-US': { area: 'Title', + title2: 'Disable Option', + title3: 'Show Toolbar', + title4: 'Multi Columns', title2: 'Picker with toolbar', - column: { - 'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], - 'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas'] - } + column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], + column2: [ + { text: 'Delaware', disabled: true }, + { text: 'Florida' }, + { text: 'Georqia' } + ], + column3: { + Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], + Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'] + }, + toastContent: (value, index) => `Value: ${value}, Index：${index}` } }, computed: { columns() { - const column = this.$t('column'); + const column = this.$t('column3'); return [ { values: Object.keys(column), @@ -48,27 +74,26 @@ export default { }, { values: column[Object.keys(column)[0]], - className: 'column2' + className: 'column2', + defaultIndex: 2 } ]; } }, methods: { - onChange(picker, values) { - picker.setColumnValues(1, this.$t('column')[values[0]]); + onChange1(picker, value, index) { + Toast(this.$t('toastContent', value, index)); + }, + onChange2(picker, values) { + picker.setColumnValues(1, this.$t('column3')[values[0]]); + }, + onConfirm(value, index) { + Toast(this.$t('toastContent', value, index)); }, onCancel() { - Toast('picker cancel'); - }, - onConfirm() { - Toast('picker confirm'); + Toast(this.$t('cancel')); } } }; - - - diff --git a/docs/demos/views/sku.vue b/docs/demos/views/sku.vue index 763ae13ca..b8206aadb 100644 --- a/docs/demos/views/sku.vue +++ b/docs/demos/views/sku.vue @@ -42,13 +42,9 @@ diff --git a/docs/markdown/en-US/picker.md b/docs/markdown/en-US/picker.md index cd823e513..3a404cc10 100644 --- a/docs/markdown/en-US/picker.md +++ b/docs/markdown/en-US/picker.md @@ -11,55 +11,79 @@ Vue.component(Picker.name, Picker); #### Basic Usage - ```html - + ``` ```javascript -const states = { - 'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], - 'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas'] -}; - export default { data() { return { - pickerColumns: [ - { - values: Object.keys(states), - className: 'column1' - }, - { - values: states.Group1, - className: 'column2' - } - ] + columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'] }; }, - - methods: { - onChange(picker, values) { - picker.setColumnValues(1, citys[values[0]]); - } + onChange(picker, value, index) { + Toast(`Value: ${value}, Index: ${index}`); } }; ``` +#### Disable option -#### Picker with toolbar +```html + +``` + +```javascript +export default { + data() { + return { + columns: [ + { text: 'Delaware', disabled: true }, + { text: 'Florida' }, + { text: 'Georqia' } + ] + }; + } +}; +``` + +#### Show Toolbar ```html ``` +```javascript +export default { + data() { + return { + columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'] + } + }, + methods: { + onConfirm(value, index) { + Toast(`Value: ${value}, Index: ${index}`); + }, + onCancel() { + Toast('Cancel'); + } + } +}; +``` + +#### Multi columns + +```html + +``` + ```javascript const states = { 'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], @@ -69,29 +93,22 @@ const states = { export default { data() { return { - title: 'Title', - pickerColumns: [ + columns: [ { values: Object.keys(states), className: 'column1' }, { values: states.Group1, - className: 'column2' + className: 'column2', + defaultIndex: 2 } ] }; }, - methods: { onChange(picker, values) { - picker.setColumnValues(1, citys[values[0]]); - }, - onCancel() { - Toast('Cancel'); - }, - onConfirm() { - Toast('Confirm'); + picker.setColumnValues(1, states[values[0]]); } } }; @@ -101,11 +118,12 @@ export default { | Attribute | Description | Type | Default | Accepted Values | |-----------|-----------|-----------|-------------|-------------| -| visibileColumnCount | Count of columns to show | `Number` | `5` | - | -| itemHeight | Item height | `Number` | `44` | - | -| columns | Columns data | `Array` | - | - | -| showToolbar | Whether to show toolbar | `Boolean` | `true` | - | -| title | Toolbar title | `String` | - | - | +| columns | Columns data | `Array` | `[]` | - | +| showToolbar | Whether to show toolbar | `Boolean` | `false` | - | +| title | Toolbar title | `String` | `''` | - | +| itemHeight | Option height | `Number` | `44` | - | +| visibileColumnCount | Count of visible columns | `Number` | `5` | - | +| valueKey | Key of option text | `String` | `text` | - | ### Data struct of columns @@ -116,13 +134,17 @@ export default { | className | ClassName for this column | ### Picker instance -The first argument of change event's callback function is a picker instance with some methods +You can get the picker instance in 'change' event, and | Method | Description | |-----------|-----------| -| getColumnValue(index) | get current value of the column | -| setColumnValue(index, value) | set current value of the column | -| getColumnValues(index) | get all values of the column | -| setColumnValues(index, values) | set all values of the column | -| getValues() | get current values of all columns | -| setValues(values) | set current values of all columns | +| getValues() | Get current values of all columns | +| setValues(values) | Set current values of all columns | +| getIndexes() | Get current indexes of all columns | +| setIndexes(indexes) | Set current indexes of all columns | +| getColumnValue(columnIndex) | Get current value of the column | +| setColumnValue(columnIndex, value) | Set current value of the column | +| getColumnIndex(columnIndex) | Get current index of the column | +| setColumnIndex(columnIndex, optionIndex) | Set current index of the column | +| getColumnValues(columnIndex) | Get columns data of the column | +| setColumnValues(columnIndex, values) | Set columns data of the column | diff --git a/docs/markdown/en-US/popup.md b/docs/markdown/en-US/popup.md index 598bf31a5..9c9045c16 100644 --- a/docs/markdown/en-US/popup.md +++ b/docs/markdown/en-US/popup.md @@ -44,7 +44,7 @@ Use `position` prop to set popup display position | lockOnScroll | Lock body scroll | `Boolean` | `false` | - | | position | Position | `String` | - | `top` `bottom` `right` `left` | | overlayClass | Custom overlay class | `String` | `` | - | -| overlayStyle | Custom overlay style | `Object` | `` | - | +| overlayStyle | Custom overlay style | `Object` | - | - | | closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - | | transition | Transition | `String` | `popup-slide` | - | | preventScroll | Prevent background scroll | `Boolean` | `false` | - | diff --git a/docs/markdown/en-US/sku.md b/docs/markdown/en-US/sku.md index 77ac19c1e..b96376d6b 100644 --- a/docs/markdown/en-US/sku.md +++ b/docs/markdown/en-US/sku.md @@ -49,13 +49,9 @@ Vue.component(Sku.name, Sku); diff --git a/docs/markdown/zh-CN/button.md b/docs/markdown/zh-CN/button.md index d1894244a..c6be861cd 100644 --- a/docs/markdown/zh-CN/button.md +++ b/docs/markdown/zh-CN/button.md @@ -58,14 +58,14 @@ Vue.component(Button.name, Button); #### 页面底部操作按钮 ```html -按钮 +按钮 - 按钮 + 按钮 - 按钮 + 按钮 ``` diff --git a/docs/markdown/zh-CN/picker.md b/docs/markdown/zh-CN/picker.md index 83a4ff41a..14465a31b 100644 --- a/docs/markdown/zh-CN/picker.md +++ b/docs/markdown/zh-CN/picker.md @@ -9,87 +9,108 @@ Vue.component(Picker.name, Picker); ### 代码演示 + #### 基础用法 ```html - + ``` ```javascript -const citys = { - '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'], - '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩'] -}; - export default { data() { return { - pickerColumns: [ - { - values: Object.keys(citys), - className: 'column1' - }, - { - values: citys['浙江'], - className: 'column2' - } - ] + columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] }; }, - - methods: { - onChange(picker, values) { - picker.setColumnValues(1, citys[values[0]]); - } + onChange(picker, value, index) { + Toast(`当前值：${value}, 当前索引：${index}`); } }; ``` -#### 带 toolbar 的 Picker +#### 禁用选项 +选项可以为对象结构，通过设置 disabled 来禁用该选项 + +```html + +``` + +```javascript +export default { + data() { + return { + columns: [ + { text: '杭州', disabled: true }, + { text: '宁波' }, + { text: '温州' } + ] + }; + } +}; +``` + +#### 展示顶部栏 ```html ``` +```javascript +export default { + data() { + return { + columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] + } + }, + methods: { + onConfirm(value, index) { + Toast(`当前值：${value}, 当前索引：${index}`); + }, + onCancel() { + Toast('取消'); + } + } +}; +``` + +#### 多列联动 + +```html + +``` + ```javascript const citys = { - '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'], - '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩'] + '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'], + '福建': ['福州', '厦门', '莆田', '三明', '泉州'] }; export default { data() { return { - title: '地区选择', - pickerColumns: [ + columns: [ { values: Object.keys(citys), className: 'column1' }, { values: citys['浙江'], - className: 'column2' + className: 'column2', + defaultIndex: 2 } ] }; }, - methods: { onChange(picker, values) { picker.setColumnValues(1, citys[values[0]]); - }, - onCancel() { - Toast('picker cancel'); - }, - onConfirm() { - Toast('picker confirm'); } } }; @@ -99,31 +120,34 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - | -| itemHeight | 选中元素区高度 | `Number` | `44` | - | -| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - | -| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - | -| title | 在toolbar上显示的标题文字 | `String` | - | - | +| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - | +| showToolbar | 是否显示顶部栏 | `Boolean` | `false` | - | +| title | 顶部栏标题 | `String` | `''` | - | +| itemHeight | 选项高度 | `Number` | `44` | - | +| visibileColumnCount | 可见的选项个数 | `Number` | `5` | - | +| valueKey | 选项对象中，文字对应的 key | `String` | `text` | - | -### columns - -`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`： +### Columns 数据结构 +当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key` | key | 说明 | |-----------|-----------| | values | 列中对应的备选值 | -| defaultIndex | 初始选中值的索引，默认为0 | -| className | 为对应列添加特殊的`class` | +| defaultIndex | 初始选中项的索引，默认为 0 | +| className | 为对应列添加额外的`class` | -### change事件 - -在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作： +### Picker 实例 +在`change`事件中，可以获取到`picker`实例，通过实例方法可以灵活控制 Picker 内容 | 函数 | 说明 | |-----------|-----------| -| getColumnValue(index) | 获取对应列中选中的值 | -| setColumnValue(index, value) | 设置对应列中选中的值 | -| getColumnValues(index) | 获取对应列中所有的备选值 | -| setColumnValues(index, values) | 设置对应列中所有的备选值 | -| getValues() | 获取所有列中被选中的值，返回一个数组 | -| setValues(values) | `values`为一个数组，设置所有列中被选中的值 | +| getValues() | 获取所有列选中的值，返回一个数组 | +| setValues(values) | 设置所有列选中的值 | +| getIndexes() | 获取所有列选中值对应的索引，返回一个数组 | +| setIndexes(indexes) | 设置所有列选中值对应的索引 | +| getColumnValue(columnIndex) | 获取对应列选中的值 | +| setColumnValue(columnIndex, value) | 设置对应列选中的值 | +| getColumnIndex(columnIndex) | 获取对应列选中项的索引 | +| setColumnIndex(columnIndex, optionIndex) | 设置对应列选中项的索引 | +| getColumnValues(columnIndex) | 获取对应列中所有选项 | +| setColumnValues(columnIndex, values) | 设置对应列中所有选项 | diff --git a/docs/markdown/zh-CN/sku.md b/docs/markdown/zh-CN/sku.md index 022101b94..d27f36a1b 100644 --- a/docs/markdown/zh-CN/sku.md +++ b/docs/markdown/zh-CN/sku.md @@ -49,13 +49,9 @@ Vue.component(Sku.name, Sku); diff --git a/docs/src/components/DemoList.vue b/docs/src/components/DemoList.vue index 153bd0a69..c79a7b8f7 100644 --- a/docs/src/components/DemoList.vue +++ b/docs/src/components/DemoList.vue @@ -58,7 +58,7 @@ export default {