mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
WyTiny
neverland
parent
6efaa1e132
commit
7e5dae3221
@ -14,11 +14,11 @@ Vue.component(CellSwipe.name, CellSwipe);
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<span slot="left">选择</span>
|
||||
<span slot="left">Select</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
<van-cell title="Cell" value="Cell Content"></van-cell>
|
||||
</van-cell-group>
|
||||
<span slot="right">删除</span>
|
||||
<span slot="right">Delete/span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
:::
|
||||
@ -27,13 +27,13 @@ Vue.component(CellSwipe.name, CellSwipe);
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
|
||||
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
|
||||
| left-width | Width of the left scrollable area | `Number` | `0` | - |
|
||||
| right-width | Width of the right scrollable area | `Number` | `0` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| left | 左侧滑动内容 |
|
||||
| right | 右侧滑动内容 |
|
||||
| - | custom content |
|
||||
| left | content of left scrollable area |
|
||||
| right | content of right scrollabe area |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## SwitchCell
|
||||
|
||||
`SwitchCell`组件是对`Switch`和`Cell`组件的封装
|
||||
`SwitchCell` component is an encapsulation of `Switch` and `Cell`.
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -42,9 +42,9 @@ export default {
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
通过`disabled`属性可以将组件设置为禁用状态
|
||||
use `disabled` property to disable the component
|
||||
|
||||
:::demo 禁用状态
|
||||
:::demo Disabled component
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" :disabled="true" title="标题" />
|
||||
@ -53,9 +53,9 @@ export default {
|
||||
:::
|
||||
|
||||
#### Loading
|
||||
通过`loading`属性可以将组件设置为加载状态
|
||||
use `loading` property to keep component in loading state
|
||||
|
||||
:::demo 加载状态
|
||||
:::demo Component in loading
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" :loading="true" title="标题" />
|
||||
@ -67,13 +67,13 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `Boolean` | - | - |
|
||||
| title | 左侧标题 | `String` | `''` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
| v-model | on-off state of the switch | `Boolean` | - | - |
|
||||
| title | the leftside title | `String` | `''` | - |
|
||||
| loading | whether the component is in loading state | `Boolean` | `false` | - |
|
||||
| disabled | whether to disable the component | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 开关状态切换回调 | checked: 是否选中开关 |
|
||||
| change | triggered when the on-off state is changed | checked: switch is on or not |
|
||||
@ -4,57 +4,57 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
items: [{
|
||||
text: '所有城市',
|
||||
text: 'All Cities',
|
||||
children: [{
|
||||
text: '杭州',
|
||||
text: 'Hang Zhou',
|
||||
id: 1001
|
||||
}, {
|
||||
text: '温州',
|
||||
text: 'Wen Zhou',
|
||||
id: 1002
|
||||
}, {
|
||||
text: '海南',
|
||||
text: 'Hai Nan',
|
||||
id: 1100
|
||||
}, {
|
||||
text: '宁波',
|
||||
text: 'Ning Bo',
|
||||
id: 1003
|
||||
}, {
|
||||
text: '义乌',
|
||||
text: 'Yi Wu',
|
||||
id: 1004
|
||||
}, {
|
||||
text: '无锡',
|
||||
text: 'Wu Xi',
|
||||
id: 1011
|
||||
}, {
|
||||
text: '常州',
|
||||
text: 'Chang Zhou',
|
||||
id: 1012
|
||||
}, {
|
||||
text: '大连',
|
||||
text: 'Da Lian',
|
||||
id: 1031
|
||||
}, {
|
||||
text: '诸暨',
|
||||
text: 'Zhu Ji',
|
||||
id: 1005
|
||||
}]
|
||||
}, {
|
||||
text: '浙江',
|
||||
text: 'Zhe Jiang',
|
||||
children: [{
|
||||
text: '杭州',
|
||||
text: 'Hang Zhou',
|
||||
id: 1001
|
||||
}, {
|
||||
text: '温州',
|
||||
text: 'Wen Zhou',
|
||||
id: 1002
|
||||
}, {
|
||||
text: '宁波',
|
||||
text: 'Ning Bo',
|
||||
id: 1003
|
||||
}, {
|
||||
text: '义乌',
|
||||
text: 'Yi Wu',
|
||||
id: 1004
|
||||
}]
|
||||
}, {
|
||||
text: '江苏',
|
||||
text: 'Jiang Su',
|
||||
children: [{
|
||||
text: '无锡',
|
||||
text: 'Wu Xi',
|
||||
id: 1011
|
||||
}, {
|
||||
text: '常州',
|
||||
text: 'Chang Zhou',
|
||||
id: 1012
|
||||
}]
|
||||
}],
|
||||
@ -103,9 +103,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
items: items,
|
||||
// 左侧高亮元素的index
|
||||
// the index of parent item
|
||||
mainActiveIndex: 0,
|
||||
// 被选中元素的id
|
||||
// the id of selected item
|
||||
activeId: 1001
|
||||
};
|
||||
},
|
||||
@ -124,42 +124,43 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
#### 传入参数
|
||||
#### Properties
|
||||
|
||||
| Attribute | Description | Type | Default | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | - |
|
||||
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | - |
|
||||
| activeId | 右侧选择项，高亮的数据id | Number | 0 | - |
|
||||
| items | Required datasets for the component, see Data Structure for detail. | Array | [] | - |
|
||||
| mainActiveIndex | The index of selected parent node | Number | 0 | - |
|
||||
| activeId | Id of selected item | Number | 0 | - |
|
||||
|
||||
#### Event
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
|
||||
| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
|
||||
| navclick | triggered when parent node is selected | index: index of selected parent |
|
||||
| itemclick | triggered when item is selected | data: selected item |
|
||||
|
||||
### Data Structure
|
||||
#### items 分类显示所需数据的数据结构
|
||||
`items` 整体为一个数组，数组内包含一系列描述分类的 object。
|
||||
#### Data Structure of `items`
|
||||
`items` should be an array contains specified tree objects.
|
||||
|
||||
In every tree object, `text` property defines the name, `id` stands for the unique key while the `children` contains sub-tree objects.
|
||||
|
||||
每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
// 导航名称
|
||||
text: '所有城市',
|
||||
// 该导航下所有的可选项
|
||||
// name of the parent node
|
||||
text: 'All Cities',
|
||||
// leaves of this parent node
|
||||
children: [
|
||||
{
|
||||
// 可选项的名称
|
||||
text: '温州',
|
||||
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
|
||||
// name of the leaf node
|
||||
text: 'Washington',
|
||||
// id of the leaf node, component highlights leaf node by comparing the activeId with this.
|
||||
id: 1002
|
||||
},
|
||||
{
|
||||
// 可选项的名称
|
||||
text: '杭州',
|
||||
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
|
||||
// name of the leaf node
|
||||
text: 'Baltimore',
|
||||
// id of the leaf node, component highlights leaf node by comparing the activeId with this.
|
||||
id: 1001
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user