mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] Select: removed
This commit is contained in:
parent
7c7ab71ccd
commit
b9f6b1f6ed
@ -26,7 +26,6 @@
|
|||||||
"pages/toptips/index",
|
"pages/toptips/index",
|
||||||
"pages/toast/index",
|
"pages/toast/index",
|
||||||
"pages/tree-select/index",
|
"pages/tree-select/index",
|
||||||
"pages/select/index",
|
|
||||||
"pages/datetime/index",
|
"pages/datetime/index",
|
||||||
"pages/loadmore/index"
|
"pages/loadmore/index"
|
||||||
],
|
],
|
||||||
|
@ -68,9 +68,6 @@ export default {
|
|||||||
}, {
|
}, {
|
||||||
name: 'Search 搜索',
|
name: 'Search 搜索',
|
||||||
path: '/pages/search/index'
|
path: '/pages/search/index'
|
||||||
}, {
|
|
||||||
name: 'Select 选择',
|
|
||||||
path: '/pages/select/index'
|
|
||||||
}, {
|
}, {
|
||||||
name: 'Stepper 步进器',
|
name: 'Stepper 步进器',
|
||||||
path: '/pages/stepper/index'
|
path: '/pages/stepper/index'
|
||||||
|
@ -1,36 +0,0 @@
|
|||||||
var Zan = require('../../dist/index');
|
|
||||||
|
|
||||||
Page({
|
|
||||||
|
|
||||||
data: {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
padding: 0,
|
|
||||||
value: '1',
|
|
||||||
name: '选项一',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
padding: 0,
|
|
||||||
value: '2',
|
|
||||||
name: '选项二',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
checked: {
|
|
||||||
base: -1,
|
|
||||||
color: -1,
|
|
||||||
form: -1
|
|
||||||
},
|
|
||||||
|
|
||||||
activeColor: '#4b0'
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSelectChange({ currentTarget = {}, detail = {} }) {
|
|
||||||
const { value = '' } = detail;
|
|
||||||
const { dataset = {} } = currentTarget;
|
|
||||||
const type = dataset.type;
|
|
||||||
this.setData({
|
|
||||||
[`checked.${type}`]: value
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"navigationBarTitleText": "Select 选择",
|
|
||||||
"usingComponents": {
|
|
||||||
"van-panel": "../../dist/panel/index",
|
|
||||||
"van-select": "../../dist/select/index"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,18 +0,0 @@
|
|||||||
<van-panel title='基本用法'>
|
|
||||||
<van-select
|
|
||||||
items="{{ items }}"
|
|
||||||
data-type="base"
|
|
||||||
checkedValue="{{ checked.base }}"
|
|
||||||
bind:change="handleSelectChange"
|
|
||||||
/>
|
|
||||||
</van-panel>
|
|
||||||
|
|
||||||
<van-panel title='自定义高亮颜色'>
|
|
||||||
<van-select
|
|
||||||
items="{{ items }}"
|
|
||||||
data-type="color"
|
|
||||||
checkedValue="{{ checked.color }}"
|
|
||||||
activeColor="{{ activeColor }}"
|
|
||||||
bind:change="handleSelectChange"
|
|
||||||
/>
|
|
||||||
</van-panel>
|
|
@ -1,73 +0,0 @@
|
|||||||
## Select 选择
|
|
||||||
|
|
||||||
### 使用指南
|
|
||||||
在 index.json 中引入组件
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"usingComponents": {
|
|
||||||
"van-select": "path/to/vant-weapp/dist/select/index"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 代码演示
|
|
||||||
```html
|
|
||||||
<van-select
|
|
||||||
items="{{ items }}"
|
|
||||||
checkedValue="{{ checkedValue }}"
|
|
||||||
activeColor="{{ activeColor }}"
|
|
||||||
bind:change="handleSelectChange"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
Page({
|
|
||||||
data: {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
value: '1',
|
|
||||||
// 选项文案
|
|
||||||
name: '选项一',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '2',
|
|
||||||
name: '选项二',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
checkedValue: '1',
|
|
||||||
activeColor: '#ff4443'
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleSelectChange({ detail }) {
|
|
||||||
console.log(detail);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### 具体参数
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|
||||||
| items | select 显示各个项的配置 | Array | - | |
|
|
||||||
| checkedValue | 高亮的 item 的 value 值 | String | - | |
|
|
||||||
| activeColor | Select 高亮颜色 | String | #ff4444 | |
|
|
||||||
|
|
||||||
items 具体格式如下
|
|
||||||
```js
|
|
||||||
{
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
// 选项选中时,代表的选中值。会以此作为唯一值,判断是否选中
|
|
||||||
value: '1',
|
|
||||||
// 选项的文字描述
|
|
||||||
name: '选项一',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '2',
|
|
||||||
name: '选项二',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
@ -1,27 +0,0 @@
|
|||||||
Component({
|
|
||||||
properties: {
|
|
||||||
items: {
|
|
||||||
type: Array,
|
|
||||||
value: []
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
checkedValue: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
activeColor: {
|
|
||||||
type: String,
|
|
||||||
value: '#ff4444'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleSelectChange(e) {
|
|
||||||
const value = e.detail.value;
|
|
||||||
this.triggerEvent('change', { value });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true,
|
|
||||||
"usingComponents": {
|
|
||||||
"van-icon": "../icon/index",
|
|
||||||
"van-cell": "../cell/index"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,8 +0,0 @@
|
|||||||
.van-select__list .van-select__radio{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
@ -1,40 +0,0 @@
|
|||||||
<radio-group
|
|
||||||
class="van-select__list"
|
|
||||||
bindchange="handleSelectChange"
|
|
||||||
>
|
|
||||||
<label wx:for="{{ items }}" wx:key="value">
|
|
||||||
<van-cell>
|
|
||||||
<radio class="van-select__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
|
|
||||||
<span style="{{ parse.getItemStyle(item, checkedValue, activeColor) }}">{{ item.name }}</span>
|
|
||||||
<van-icon
|
|
||||||
wx:if="{{ item.value === checkedValue }}"
|
|
||||||
slot="footer"
|
|
||||||
type="success"
|
|
||||||
style="color: {{ parse.getColor(activeColor) }};font-size: 14px;"
|
|
||||||
/>
|
|
||||||
</van-cell>
|
|
||||||
</label>
|
|
||||||
</radio-group>
|
|
||||||
|
|
||||||
|
|
||||||
<wxs module="parse">
|
|
||||||
function getColor(color) {
|
|
||||||
color = color || '#ff4444'
|
|
||||||
return color;
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
getColor: getColor,
|
|
||||||
getItemStyle: function(item, checkedValue, activeColor) {
|
|
||||||
var padding = item.padding * 10;
|
|
||||||
var style = 'padding-left: ' + padding + 'px;';
|
|
||||||
|
|
||||||
// 如果为选中状态,则高亮
|
|
||||||
if (item.value === checkedValue) {
|
|
||||||
style += 'color: ' + getColor(activeColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
return style;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</wxs>
|
|
Loading…
x
Reference in New Issue
Block a user