From cf9cfdb44bafbba7160120e7a9e32cf21b181d18 Mon Sep 17 00:00:00 2001 From: nrz Date: Sun, 15 Jul 2018 14:47:03 +0800 Subject: [PATCH] =?UTF-8?q?[new=20feature]=20=E6=96=B0=E5=A2=9E=20Radio=20?= =?UTF-8?q?(#354)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [new component]: Radio * [new component]: Radio misc * [new component] Radio code review * [new component] Radio code review * [new component] Radio misc * [new component] Radio improve style --- doc.config.js | 1 + example/app.json | 1 + example/pages/dashboard/config.js | 17 +++-- example/pages/radio/index.js | 19 ++++++ example/pages/radio/index.json | 9 +++ example/pages/radio/index.wxml | 35 ++++++++++ example/pages/radio/index.wxss | 8 +++ packages/checkbox/index.wxml | 14 +--- packages/radio/README.md | 106 ++++++++++++++++++++++++++++++ packages/radio/index.js | 31 +++++++++ packages/radio/index.json | 6 ++ packages/radio/index.pcss | 79 ++++++++++++++++++++++ packages/radio/index.wxml | 28 ++++++++ 13 files changed, 335 insertions(+), 19 deletions(-) create mode 100644 example/pages/radio/index.js create mode 100644 example/pages/radio/index.json create mode 100644 example/pages/radio/index.wxml create mode 100644 example/pages/radio/index.wxss create mode 100644 packages/radio/README.md create mode 100644 packages/radio/index.js create mode 100644 packages/radio/index.json create mode 100644 packages/radio/index.pcss create mode 100644 packages/radio/index.wxml diff --git a/doc.config.js b/doc.config.js index f75364c2..bb81673a 100644 --- a/doc.config.js +++ b/doc.config.js @@ -56,6 +56,7 @@ module.exports = { include: { checkbox: require('./packages/checkbox/README.md'), field: require('./packages/field/README.md'), + radio: require('./packages/radio/README.md'), search: require('./packages/search/README.md'), select: require('./packages/select/README.md'), stepper: require('./packages/stepper/README.md'), diff --git a/example/app.json b/example/app.json index d4e2ccc9..d666e4d9 100644 --- a/example/app.json +++ b/example/app.json @@ -17,6 +17,7 @@ "pages/noticebar/index", "pages/panel/index", "pages/popup/index", + "pages/radio/index", "pages/stepper/index", "pages/steps/index", "pages/switch/index", diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js index 6c588003..becd3917 100644 --- a/example/pages/dashboard/config.js +++ b/example/pages/dashboard/config.js @@ -17,9 +17,6 @@ export default { }, { name: 'Cell 单元格', path: '/pages/cell/index' - }, { - name: 'Checkbox 复选框', - path: '/pages/checkbox/index' }, { name: 'Helper 基础样式', path: '/pages/helper/index' @@ -72,13 +69,21 @@ export default { title: '表单', content: [ { - name: 'Field 输入框', - path: '/pages/field/index' + name: 'Checkbox 复选框', + path: '/pages/checkbox/index' }, { name: 'Datetime 时间选择器', path: '/pages/datetime/index' - } + }, + { + name: 'Field 输入框', + path: '/pages/field/index' + }, + { + name: 'Radio 单选框', + path: '/pages/radio/index' + }, ] }, action: { diff --git a/example/pages/radio/index.js b/example/pages/radio/index.js new file mode 100644 index 00000000..0ed7cd12 --- /dev/null +++ b/example/pages/radio/index.js @@ -0,0 +1,19 @@ +Page({ + + data: { + items: [ + {name: 'USA', value: '美国'}, + {name: 'CHN', value: '中国', checked: 'true'} + ], + + items1: [ + {name: 'USA', value: '美国'}, + {name: 'BRA', value: '巴西', disabled: true }, + {name: 'CHN', value: '中国', checked: 'true'} + ] + }, + + handleRadioChange: function(e) { + console.log('radio发生change事件，携带value值为：', e.detail) + } +}); diff --git a/example/pages/radio/index.json b/example/pages/radio/index.json new file mode 100644 index 00000000..4b40c1a9 --- /dev/null +++ b/example/pages/radio/index.json @@ -0,0 +1,9 @@ +{ + "navigationBarTitleText": "Radio 单选框", + "usingComponents": { + "zan-radio": "../../dist/radio/index", + "zan-panel": "../../dist/panel/index", + "zan-cell": "../../dist/cell/index", + "doc-page": "../../components/doc-page/index" + } +} diff --git a/example/pages/radio/index.wxml b/example/pages/radio/index.wxml new file mode 100644 index 00000000..318a2e3b --- /dev/null +++ b/example/pages/radio/index.wxml @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/example/pages/radio/index.wxss b/example/pages/radio/index.wxss new file mode 100644 index 00000000..ab86a7bb --- /dev/null +++ b/example/pages/radio/index.wxss @@ -0,0 +1,8 @@ +.radio-demo { + font-size: 12px !important; +} + +.radio-color { + background-color: red !important; + border-color: red !important; +} diff --git a/packages/checkbox/index.wxml b/packages/checkbox/index.wxml index 874c18a6..bba78662 100644 --- a/packages/checkbox/index.wxml +++ b/packages/checkbox/index.wxml @@ -1,25 +1,13 @@ - - -function getColor(color) { - color = color || '#ff4444' - return color; -} - -module.exports = { - getColor: getColor -}; - diff --git a/packages/radio/README.md b/packages/radio/README.md new file mode 100644 index 00000000..3f95b3e6 --- /dev/null +++ b/packages/radio/README.md @@ -0,0 +1,106 @@ +## Radio 单选框 + +### 使用指南 +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-radio": "/packages/radio/index" + } +} +``` + +### 代码演示 + +#### 基础数据结构 + +```js +items: [ + {name: 'USA', value: '美国'}, + {name: 'BRA', value: '巴西', disabled: true }, + {name: 'CHN', value: '中国', checked: 'true'} +] +``` + +#### 基础用法 + +```html + +``` + +#### 禁用状态 + +```html + +``` + +```js +Page({ + data: { + items: [ + {name: 'USA', value: '美国'}, + {name: 'BRA', value: '巴西', disabled: true }, + {name: 'CHN', value: '中国', checked: 'true'} + ] + } +}) +``` + +#### 自定义样式 + +```html + +``` + +```css +.radio-demo { + font-size: 12px !important; +} + +.radio-color { + color: red !important; +} +``` + +#### 事件 + +```html + + + +``` + +```js +Page({ + handleRadioChange: function(e) { + console.log('radio发生change事件，携带value值为：', e.detail) + } +}) +``` + +#### 列表模式 + +```html + +``` + +### 参数 +| 参数 | 说明 | 类型 | 默认值 | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| items | 单选数组 | Array | [] | - | +| type | 显示类型: list | String | - | | +| radio-class | radio样式类| String| -| +| radio-color | radio选中颜色 | String | #06bf04| + +### 事件 + +| 事件名称 | 说明 | 回调参数 | +| ---- | --- | ---| +| change | 数值改变时触发 | event | diff --git a/packages/radio/index.js b/packages/radio/index.js new file mode 100644 index 00000000..3a9be02a --- /dev/null +++ b/packages/radio/index.js @@ -0,0 +1,31 @@ +Component({ + behaviors: ['wx://form-field'], + + externalClasses: ['radio-class', 'radio-color'], + + properties: { + items: Array, + type: String + }, + + methods: { + radioChange(e) { + this.selectItem(e.detail.value) + this.triggerEvent('change', e) + }, + + selectItem(value) { + let { items } = this.data; + + items.forEach(item => { + if ( item.name === value ) { + item.checked = true; + } else { + item.checked = false; + } + }) + + this.setData({ items }) + } + } +}); diff --git a/packages/radio/index.json b/packages/radio/index.json new file mode 100644 index 00000000..fc0d0bf9 --- /dev/null +++ b/packages/radio/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "zan-icon": "../icon/index" + } +} diff --git a/packages/radio/index.pcss b/packages/radio/index.pcss new file mode 100644 index 00000000..b9f74c7e --- /dev/null +++ b/packages/radio/index.pcss @@ -0,0 +1,79 @@ +.zan-radio { + display: block; + padding: 0 10px; + font-size: 14px; + + &__item { + display: block; + margin-top: 10px; + height: 20px; + + &:last-child { + margin-bottom: 10px; + } + } + + &__list-item { + display: block; + padding: 10px 10px 10px 0; + border-bottom: 1px solid #e5e5e5; + .zan-radio__icon-wrap { + float: right; + margin-top: 3px; + } + } + + &__icon-wrap { + position: relative; + width: 14px; + height: 15px; + display: inline-flex; + align-items: center; + color: #aaa; + .zan-radio__origin { + opacity: 0; + width: 14px; + height: 20px; + } + .zan-radio__icon { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + border: 1px solid #dcdfe6; + border-radius: 100%; + width: 14px; + height: 14px; + background-color: #fff; + cursor: pointer; + box-sizing: border-box; + + .zan-radio__icon-inside { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + width: 4px; + height: 4px; + border-radius: 50%; + } + + &.zan-radio--checked { + border-color: #06bf04; + background: #06bf04; + .zan-radio__icon-inside { + background-color: #fff; + } + } + + &.zan-radio--disabled { + opacity: .6; + } + } + } + + &__name { + display: inline-block; + margin-left: 10px; + } +} diff --git a/packages/radio/index.wxml b/packages/radio/index.wxml new file mode 100644 index 00000000..10dbffe5 --- /dev/null +++ b/packages/radio/index.wxml @@ -0,0 +1,28 @@ + + +