mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[refactor] Select: 组件升级为自定义组件 (#188)
* done js * done * remove name and ===
This commit is contained in:
oConner
Yao
parent
1164d312f6
commit
5ec544a1ff
@ -1,3 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Select 选择"
|
||||
"navigationBarTitleText": "Select 选择",
|
||||
"usingComponents": {
|
||||
"zan-panel": "/packages/panel/index",
|
||||
"zan-select": "/packages/select/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,24 @@
|
||||
<import src="/dist/select/index.wxml" />
|
||||
<import src="/dist/toptips/index.wxml" />
|
||||
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">SELECT</view>
|
||||
|
||||
<view class="zan-panel-title">基础用法</view>
|
||||
<view class="zan-panel">
|
||||
<view>
|
||||
<template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel title='基本用法'>
|
||||
<zan-select
|
||||
items="{{ items }}"
|
||||
checkedValue="{{ checked.base }}"
|
||||
bind:change="handleFieldChange"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">自定义高亮颜色</view>
|
||||
<view class="zan-panel">
|
||||
<view>
|
||||
<template is="zan-select" data="{{ items, checkedValue: checked.color, activeColor, componentId: 'color' }}" ></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">Form 表单中的select应用</view>
|
||||
<form bindsubmit="formSubmit">
|
||||
<view class="zan-panel">
|
||||
<view>
|
||||
<template
|
||||
is="zan-select"
|
||||
data="{{ items, checkedValue: checked.form, name: 'formtest', componentId: 'form' }}" ></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-btns">
|
||||
<button
|
||||
class="zan-btn zan-btn--primary"
|
||||
formType="submit">提交数据</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
<zan-panel title='自定义高亮颜色'>
|
||||
<zan-select
|
||||
items="{{ items }}"
|
||||
checkedValue="{{ checked.base }}"
|
||||
activeColor="{{ activeColor }}"
|
||||
bind:change="handleFieldChange"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<template is="zan-toptips" data="{{ zanTopTips }}"></template>
|
||||
|
||||
@ -1,68 +1,59 @@
|
||||
## Select 选择
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
```
|
||||
|
||||
在需要使用的页面里引入组件库模板和脚本
|
||||
```html
|
||||
<import src="path/to/zanui-weapp/dist/select/index.wxml" />
|
||||
|
||||
<template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
|
||||
```
|
||||
```js
|
||||
const { extend, Select } = require('path/to/zanui-weapp/dist/index');
|
||||
|
||||
// 在 Page 中混入 Select 里面声明的方法
|
||||
Page(extend({}, Select, {
|
||||
// ...
|
||||
}));
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"zan-select": "/packages/select/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
#### 基础功能
|
||||
`Select` 组件通过传入的 items 对象控制显示，用 checkedValue 确认显示的高亮项目
|
||||
```html
|
||||
<template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
|
||||
<zan-select
|
||||
items="{{ items }}"
|
||||
checkedValue="{{ checkedValue }}"
|
||||
activeColor="{{ activeColor }}"
|
||||
bind:change="handleFieldChange"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
// 当前选项离左侧的距离
|
||||
padding: 0,
|
||||
// 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到
|
||||
value: '1',
|
||||
// 选项文案
|
||||
name: '选项一',
|
||||
},
|
||||
{
|
||||
padding: 0,
|
||||
value: '2',
|
||||
name: '选项二',
|
||||
},
|
||||
],
|
||||
checkedValue: '选项一',
|
||||
activeColor: '#ff4443'
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleFieldChange(event, data) {
|
||||
console.log(event, data);
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
当 Select 被点击时，可以在页面中注册 handleZanTabChange 方法来监听
|
||||
```js
|
||||
Page(extend({}, Select, {
|
||||
handleZanSelectChange({ componentId, value }) {
|
||||
// componentId 即为在模板中传入的 componentId
|
||||
// 用于在一个页面上使用多个 Select 时，进行区分
|
||||
// value 表示被选中项的 value
|
||||
}
|
||||
}));
|
||||
```
|
||||
|
||||
|
||||
#### 具体参数
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| items | select 显示各个项的配置 | Array | - | |
|
||||
| checkedValue | 高亮的 item 的 value 值 | String | - | |
|
||||
| name | Select 的名字，作为 form 表单提交时数据的 key | String | - | |
|
||||
| activeColor | Select 高亮颜色 | String | #ff4444 | |
|
||||
| componentId | 用于区分页面多个 Select 组件 | String | - | |
|
||||
|
||||
items 参数格式
|
||||
```js
|
||||
[
|
||||
{
|
||||
// 当前选项离左侧的距离
|
||||
padding: 0,
|
||||
// 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到
|
||||
value: '1',
|
||||
// 选项文案
|
||||
name: '选项一',
|
||||
},
|
||||
{
|
||||
padding: 0,
|
||||
value: '2',
|
||||
name: '选项二',
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
const { extractComponentId } = require('../common/helper');
|
||||
Component({
|
||||
properties: {
|
||||
items: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
checkedValue: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
activeColor: {
|
||||
type: String,
|
||||
value: '#ff4444'
|
||||
}
|
||||
},
|
||||
|
||||
function handle(e) {
|
||||
const componentId = extractComponentId(e);
|
||||
const value = e.detail.value;
|
||||
|
||||
callback.call(this, componentId, value);
|
||||
}
|
||||
|
||||
function callback(componentId, value) {
|
||||
const e = { componentId, value };
|
||||
console.info('[zan:Select:change]', e);
|
||||
|
||||
if (this.handleZanSelectChange) {
|
||||
this.handleZanSelectChange(e);
|
||||
} else {
|
||||
console.warn('页面缺少 handleZanSelectChange 回调函数');
|
||||
methods: {
|
||||
_handleZanSelectChange(e) {
|
||||
const value = e.detail.value;
|
||||
this.triggerEvent('change', event, { value });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
_handleZanSelectChange(e) {
|
||||
handle.call(this, e);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
7
packages/select/index.json
Normal file
7
packages/select/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"zan-icon": "../icon/index",
|
||||
"zan-cell": "../cell/index"
|
||||
}
|
||||
}
|
||||
@ -1,24 +1,21 @@
|
||||
<template name="zan-select">
|
||||
<radio-group
|
||||
class="zan-select__list"
|
||||
name="{{ name || componentId || '' }}"
|
||||
bindchange="_handleZanSelectChange"
|
||||
data-component-id="{{ componentId }}"
|
||||
>
|
||||
<label wx:for="{{ items }}" wx:key="value">
|
||||
<view class="zan-cell">
|
||||
<radio class="zan-select__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
|
||||
<view
|
||||
class="zan-cell__bd"
|
||||
style="{{ parse.getItemStyle(item, checkedValue, activeColor) }}"
|
||||
>{{ item.name }}</view>
|
||||
<view wx:if="{{ item.value === checkedValue }}" class="zan-cell__ft">
|
||||
<icon type="success_no_circle" color="{{ parse.getColor(activeColor) }}" size="14"></icon>
|
||||
</view>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</template>
|
||||
<radio-group
|
||||
class="zan-select__list"
|
||||
bindchange="_handleZanSelectChange"
|
||||
>
|
||||
<label wx:for="{{ items }}" wx:key="value">
|
||||
<zan-cell>
|
||||
<radio class="zan-select__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
|
||||
<span style="{{ parse.getItemStyle(item, checkedValue, activeColor) }}">{{ item.name }}</span>
|
||||
<zan-icon
|
||||
wx:if="{{ item.value === checkedValue }}"
|
||||
slot="footer"
|
||||
type="success_no_circle"
|
||||
style="color: {{ parse.getColor(activeColor) }};font-size: 14px;"
|
||||
/>
|
||||
</zan-cell>
|
||||
</label>
|
||||
</radio-group>
|
||||
|
||||
|
||||
<wxs module="parse">
|
||||
function getColor(color) {
|
||||
|
||||
@ -24,11 +24,9 @@
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
field: {
|
||||
disabled: false,
|
||||
checked: false,
|
||||
loading: false
|
||||
}
|
||||
disabled: false,
|
||||
checked: false,
|
||||
loading: false
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user