mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
breaking change: remove SwitchCell component (#1968)
This commit is contained in:
neverland
GitHub
parent
ae0c00d463
commit
02ade87963
1
dist/switch-cell/index.d.ts
vendored
1
dist/switch-cell/index.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
export {};
|
|
||||||
42
dist/switch-cell/index.js
vendored
42
dist/switch-cell/index.js
vendored
@ -1,42 +0,0 @@
|
|||||||
import { VantComponent } from '../common/component';
|
|
||||||
VantComponent({
|
|
||||||
field: true,
|
|
||||||
props: {
|
|
||||||
value: null,
|
|
||||||
icon: String,
|
|
||||||
title: String,
|
|
||||||
label: String,
|
|
||||||
border: Boolean,
|
|
||||||
checked: Boolean,
|
|
||||||
loading: Boolean,
|
|
||||||
disabled: Boolean,
|
|
||||||
activeColor: String,
|
|
||||||
inactiveColor: String,
|
|
||||||
useLabelSlot: Boolean,
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
value: '24px'
|
|
||||||
},
|
|
||||||
activeValue: {
|
|
||||||
type: null,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
inactiveValue: {
|
|
||||||
type: null,
|
|
||||||
value: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
checked(value) {
|
|
||||||
this.set({ value });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.set({ value: this.data.checked });
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onChange(event) {
|
|
||||||
this.$emit('change', event.detail);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
7
dist/switch-cell/index.json
vendored
7
dist/switch-cell/index.json
vendored
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true,
|
|
||||||
"usingComponents": {
|
|
||||||
"van-cell": "../cell/index",
|
|
||||||
"van-switch": "../switch/index"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
25
dist/switch-cell/index.wxml
vendored
25
dist/switch-cell/index.wxml
vendored
@ -1,25 +0,0 @@
|
|||||||
<van-cell
|
|
||||||
center
|
|
||||||
title="{{ title }}"
|
|
||||||
label="{{ label }}"
|
|
||||||
border="{{ border }}"
|
|
||||||
icon="{{ icon }}"
|
|
||||||
custom-class="van-switch-cell"
|
|
||||||
use-label-slot="{{ useLabelSlot }}"
|
|
||||||
>
|
|
||||||
<slot slot="icon" name="icon" />
|
|
||||||
<slot slot="title" name="title" />
|
|
||||||
<slot slot="label" name="label" />
|
|
||||||
<van-switch
|
|
||||||
size="{{ size }}"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
loading="{{ loading }}"
|
|
||||||
disabled="{{ disabled }}"
|
|
||||||
active-color="{{ activeColor }}"
|
|
||||||
inactive-color="{{ inactiveColor }}"
|
|
||||||
active-value="{{ activeValue }}"
|
|
||||||
inactive-value="{{ inactiveValue }}"
|
|
||||||
custom-class="van-switch-cell__switch"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
</van-cell>
|
|
||||||
1
dist/switch-cell/index.wxss
vendored
1
dist/switch-cell/index.wxss
vendored
@ -1 +0,0 @@
|
|||||||
@import '../common/index.wxss';.van-switch-cell{padding-top:9px;padding-bottom:9px}.van-switch-cell__switch{vertical-align:middle}
|
|
||||||
@ -18,6 +18,11 @@
|
|||||||
|
|
||||||
- `transitionEnd`事件重命名为`transitionend`
|
- `transitionEnd`事件重命名为`transitionend`
|
||||||
|
|
||||||
|
##### SwitchCell
|
||||||
|
|
||||||
|
- 移除了`SwitchCell`组件，请使用`Cell`和`Switch`组件代替
|
||||||
|
|
||||||
|
|
||||||
#### 新特性
|
#### 新特性
|
||||||
|
|
||||||
##### Area
|
##### Area
|
||||||
@ -47,3 +52,7 @@
|
|||||||
- 新增`round`属性
|
- 新增`round`属性
|
||||||
- 新增`closeable`属性
|
- 新增`closeable`属性
|
||||||
- 新增`close-icon`属性
|
- 新增`close-icon`属性
|
||||||
|
|
||||||
|
##### Steps
|
||||||
|
|
||||||
|
- 新增`active-icon`属性
|
||||||
|
|||||||
@ -33,7 +33,6 @@
|
|||||||
"pages/stepper/index",
|
"pages/stepper/index",
|
||||||
"pages/steps/index",
|
"pages/steps/index",
|
||||||
"pages/switch/index",
|
"pages/switch/index",
|
||||||
"pages/switch-cell/index",
|
|
||||||
"pages/search/index",
|
"pages/search/index",
|
||||||
"pages/slider/index",
|
"pages/slider/index",
|
||||||
"pages/sidebar/index",
|
"pages/sidebar/index",
|
||||||
@ -98,7 +97,6 @@
|
|||||||
"van-submit-bar": "./dist/submit-bar/index",
|
"van-submit-bar": "./dist/submit-bar/index",
|
||||||
"van-swipe-cell": "./dist/swipe-cell/index",
|
"van-swipe-cell": "./dist/swipe-cell/index",
|
||||||
"van-switch": "./dist/switch/index",
|
"van-switch": "./dist/switch/index",
|
||||||
"van-switch-cell": "./dist/switch-cell/index",
|
|
||||||
"van-tab": "./dist/tab/index",
|
"van-tab": "./dist/tab/index",
|
||||||
"van-tabs": "./dist/tabs/index",
|
"van-tabs": "./dist/tabs/index",
|
||||||
"van-tabbar": "./dist/tabbar/index",
|
"van-tabbar": "./dist/tabbar/index",
|
||||||
|
|||||||
@ -72,10 +72,6 @@ export default [
|
|||||||
{
|
{
|
||||||
path: '/switch',
|
path: '/switch',
|
||||||
title: 'Switch 开关'
|
title: 'Switch 开关'
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/switch-cell',
|
|
||||||
title: 'SwitchCell 开关单元格'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,11 +0,0 @@
|
|||||||
import Page from '../../common/page';
|
|
||||||
|
|
||||||
Page({
|
|
||||||
data: {
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(event) {
|
|
||||||
this.setData({ checked: event.detail });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"navigationBarTitleText": "SwitchCell 开关单元格"
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
<demo-block title="基础用法">
|
|
||||||
<van-cell-group>
|
|
||||||
<van-switch-cell
|
|
||||||
title="标题"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
</van-cell-group>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="禁用状态">
|
|
||||||
<van-cell-group>
|
|
||||||
<van-switch-cell
|
|
||||||
disabled
|
|
||||||
title="标题"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
</van-cell-group>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="加载状态">
|
|
||||||
<van-cell-group>
|
|
||||||
<van-switch-cell
|
|
||||||
loading
|
|
||||||
title="标题"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
</van-cell-group>
|
|
||||||
</demo-block>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
/* pages/switch-cell/index.wxss */
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
|
||||||
var component_1 = require("../common/component");
|
|
||||||
var touch_1 = require("../mixins/touch");
|
|
||||||
var THRESHOLD = 0.3;
|
|
||||||
component_1.VantComponent({
|
|
||||||
props: {
|
|
||||||
disabled: Boolean,
|
|
||||||
leftWidth: {
|
|
||||||
type: Number,
|
|
||||||
value: 0
|
|
||||||
},
|
|
||||||
rightWidth: {
|
|
||||||
type: Number,
|
|
||||||
value: 0
|
|
||||||
},
|
|
||||||
asyncClose: Boolean
|
|
||||||
},
|
|
||||||
mixins: [touch_1.touch],
|
|
||||||
data: {
|
|
||||||
catchMove: false
|
|
||||||
},
|
|
||||||
created: function () {
|
|
||||||
this.offset = 0;
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open: function (position) {
|
|
||||||
var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
|
|
||||||
var offset = position === 'left' ? leftWidth : -rightWidth;
|
|
||||||
this.swipeMove(offset);
|
|
||||||
},
|
|
||||||
close: function () {
|
|
||||||
this.swipeMove(0);
|
|
||||||
},
|
|
||||||
swipeMove: function (offset) {
|
|
||||||
if (offset === void 0) { offset = 0; }
|
|
||||||
this.offset = offset;
|
|
||||||
var transform = "translate3d(" + offset + "px, 0, 0)";
|
|
||||||
var transition = this.draging
|
|
||||||
? 'none'
|
|
||||||
: '.6s cubic-bezier(0.18, 0.89, 0.32, 1)';
|
|
||||||
this.set({
|
|
||||||
wrapperStyle: "\n -webkit-transform: " + transform + ";\n -webkit-transition: " + transition + ";\n transform: " + transform + ";\n transition: " + transition + ";\n "
|
|
||||||
});
|
|
||||||
},
|
|
||||||
swipeLeaveTransition: function () {
|
|
||||||
var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
|
|
||||||
var offset = this.offset;
|
|
||||||
if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
|
|
||||||
this.open('right');
|
|
||||||
}
|
|
||||||
else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
|
|
||||||
this.open('left');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.swipeMove(0);
|
|
||||||
}
|
|
||||||
this.set({ catchMove: false });
|
|
||||||
},
|
|
||||||
startDrag: function (event) {
|
|
||||||
if (this.data.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.draging = true;
|
|
||||||
this.startOffset = this.offset;
|
|
||||||
this.firstDirection = '';
|
|
||||||
this.touchStart(event);
|
|
||||||
},
|
|
||||||
noop: function () { },
|
|
||||||
onDrag: function (event) {
|
|
||||||
if (this.data.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.touchMove(event);
|
|
||||||
if (!this.firstDirection) {
|
|
||||||
this.firstDirection = this.direction;
|
|
||||||
this.set({ catchMove: this.firstDirection === 'horizontal' });
|
|
||||||
}
|
|
||||||
if (this.firstDirection === 'vertical') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
|
|
||||||
var offset = this.startOffset + this.deltaX;
|
|
||||||
if ((rightWidth > 0 && -offset > rightWidth) ||
|
|
||||||
(leftWidth > 0 && offset > leftWidth)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.swipeMove(offset);
|
|
||||||
},
|
|
||||||
endDrag: function () {
|
|
||||||
if (this.data.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.draging = false;
|
|
||||||
this.swipeLeaveTransition();
|
|
||||||
},
|
|
||||||
onClick: function (event) {
|
|
||||||
var _a = event.currentTarget.dataset.key, position = _a === void 0 ? 'outside' : _a;
|
|
||||||
this.$emit('click', position);
|
|
||||||
if (!this.offset) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.data.asyncClose) {
|
|
||||||
this.$emit('close', { position: position, instance: this });
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.swipeMove(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true
|
|
||||||
}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<view
|
|
||||||
class="van-swipe-cell"
|
|
||||||
data-key="cell"
|
|
||||||
catchtap="onClick"
|
|
||||||
bindtouchstart="startDrag"
|
|
||||||
catchtouchmove="{{ catchMove ? 'noop' : '' }}"
|
|
||||||
capture-bind:touchmove="onDrag"
|
|
||||||
catchtouchend="endDrag"
|
|
||||||
catchtouchcancel="endDrag"
|
|
||||||
>
|
|
||||||
<view style="{{ wrapperStyle }}">
|
|
||||||
<view wx:if="{{ leftWidth }}" class="van-swipe-cell__left" data-key="left" catch:tap="onClick">
|
|
||||||
<slot name="left" />
|
|
||||||
</view>
|
|
||||||
<slot />
|
|
||||||
<view wx:if="{{ rightWidth }}" class="van-swipe-cell__right" data-key="right" catch:tap="onClick">
|
|
||||||
<slot name="right" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
@import '../common/index.wxss';.van-swipe-cell{position:relative;overflow:hidden}.van-swipe-cell__left,.van-swipe-cell__right{position:absolute;top:0;height:100%}.van-swipe-cell__left{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.van-swipe-cell__right{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
|
||||||
var component_1 = require("../common/component");
|
|
||||||
component_1.VantComponent({
|
|
||||||
field: true,
|
|
||||||
props: {
|
|
||||||
value: null,
|
|
||||||
icon: String,
|
|
||||||
title: String,
|
|
||||||
label: String,
|
|
||||||
border: Boolean,
|
|
||||||
checked: Boolean,
|
|
||||||
loading: Boolean,
|
|
||||||
disabled: Boolean,
|
|
||||||
activeColor: String,
|
|
||||||
inactiveColor: String,
|
|
||||||
useLabelSlot: Boolean,
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
value: '24px'
|
|
||||||
},
|
|
||||||
activeValue: {
|
|
||||||
type: null,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
inactiveValue: {
|
|
||||||
type: null,
|
|
||||||
value: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
checked: function (value) {
|
|
||||||
this.set({ value: value });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created: function () {
|
|
||||||
this.set({ value: this.data.checked });
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onChange: function (event) {
|
|
||||||
this.$emit('change', event.detail);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true,
|
|
||||||
"usingComponents": {
|
|
||||||
"van-cell": "../cell/index",
|
|
||||||
"van-switch": "../switch/index"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<van-cell
|
|
||||||
center
|
|
||||||
title="{{ title }}"
|
|
||||||
label="{{ label }}"
|
|
||||||
border="{{ border }}"
|
|
||||||
icon="{{ icon }}"
|
|
||||||
custom-class="van-switch-cell"
|
|
||||||
use-label-slot="{{ useLabelSlot }}"
|
|
||||||
>
|
|
||||||
<slot slot="icon" name="icon" />
|
|
||||||
<slot slot="title" name="title" />
|
|
||||||
<slot slot="label" name="label" />
|
|
||||||
<van-switch
|
|
||||||
size="{{ size }}"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
loading="{{ loading }}"
|
|
||||||
disabled="{{ disabled }}"
|
|
||||||
active-color="{{ activeColor }}"
|
|
||||||
inactive-color="{{ inactiveColor }}"
|
|
||||||
active-value="{{ activeValue }}"
|
|
||||||
inactive-value="{{ inactiveValue }}"
|
|
||||||
custom-class="van-switch-cell__switch"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
</van-cell>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
@import '../common/index.wxss';.van-switch-cell{padding-top:9px;padding-bottom:9px}.van-switch-cell__switch{vertical-align:middle}
|
|
||||||
@ -108,10 +108,6 @@
|
|||||||
@switch-disabled-opacity: .4;
|
@switch-disabled-opacity: .4;
|
||||||
@switch-border: 1px solid rgba(0, 0, 0, .1);
|
@switch-border: 1px solid rgba(0, 0, 0, .1);
|
||||||
|
|
||||||
// SwitchCell
|
|
||||||
@switch-cell-padding-top: 9px;
|
|
||||||
@switch-cell-padding-bottom: 9px;
|
|
||||||
|
|
||||||
// Toast
|
// Toast
|
||||||
@toast-max-width: 70%;
|
@toast-max-width: 70%;
|
||||||
@toast-font-size: 14px;
|
@toast-font-size: 14px;
|
||||||
|
|||||||
@ -1,91 +0,0 @@
|
|||||||
# SwitchCell 开关单元格
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
|
|
||||||
|
|
||||||
```json
|
|
||||||
"usingComponents": {
|
|
||||||
"van-switch-cell": "path/to/vant-weapp/dist/switch-cell/index"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-switch-cell
|
|
||||||
title="标题"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
Page({
|
|
||||||
data: {
|
|
||||||
checked: true
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(event) {
|
|
||||||
// 需要手动对 checked 状态进行更新
|
|
||||||
this.setData({ checked: event.detail });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### 禁用状态
|
|
||||||
通过`disabled`属性可以将组件设置为禁用状态
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-switch-cell
|
|
||||||
disabled
|
|
||||||
title="标题"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 加载状态
|
|
||||||
通过`loading`属性可以将组件设置为加载状态
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-switch-cell
|
|
||||||
loading
|
|
||||||
title="标题"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
|-----------|-----------|-----------|-------------|
|
|
||||||
| name | 在表单内提交时的标识符 | *string* | - |
|
|
||||||
| checked | 开关状态 | *any* | `false` |
|
|
||||||
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | *string* | - |
|
|
||||||
| title | 左侧标题 | *string* | `''` |
|
|
||||||
| label | 标题下方的描述信息 | *string* | - |
|
|
||||||
| loading | 是否为加载状态 | *boolean* | `false` |
|
|
||||||
| disabled | 是否为禁用状态 | *boolean* | `false` |
|
|
||||||
| size | 开关尺寸 | *string* | `24px` |
|
|
||||||
| active-color | 开关打开时的背景色 | *string* | `#1989fa` |
|
|
||||||
| inactive-color | 开关关闭时的背景色 | *string* | `#fff` |
|
|
||||||
| active-value | 打开时的值 | *any* | `true` |
|
|
||||||
| inactive-value | 关闭时的值 | *any* | `false` |
|
|
||||||
| use-label-slot | 是否使用 label slot | *boolean* | `false` |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 参数 |
|
|
||||||
|-----------|-----------|-----------|
|
|
||||||
| bind:change | 开关状态切换回调 | event.detail: 是否选中开关 |
|
|
||||||
|
|
||||||
### Slot
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
|-----------|-----------|
|
|
||||||
| title | 自定义`title`显示内容，如果设置了`title`属性则不生效 |
|
|
||||||
| label | 自定义`label`显示内容，需要设置 `use-label-slot`属性 |
|
|
||||||
| icon | 自定义`icon`显示内容，如果设置了`icon`属性则不生效 |
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true,
|
|
||||||
"usingComponents": {
|
|
||||||
"van-cell": "../cell/index",
|
|
||||||
"van-switch": "../switch/index"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
@import '../common/style/var.less';
|
|
||||||
|
|
||||||
.van-switch-cell {
|
|
||||||
padding-top: @switch-cell-padding-top;
|
|
||||||
padding-bottom: @switch-cell-padding-bottom;
|
|
||||||
|
|
||||||
&__switch {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import { VantComponent } from '../common/component';
|
|
||||||
import { Weapp } from 'definitions/weapp';
|
|
||||||
|
|
||||||
VantComponent({
|
|
||||||
field: true,
|
|
||||||
|
|
||||||
props: {
|
|
||||||
value: null,
|
|
||||||
icon: String,
|
|
||||||
title: String,
|
|
||||||
label: String,
|
|
||||||
border: Boolean,
|
|
||||||
checked: Boolean,
|
|
||||||
loading: Boolean,
|
|
||||||
disabled: Boolean,
|
|
||||||
activeColor: String,
|
|
||||||
inactiveColor: String,
|
|
||||||
useLabelSlot: Boolean,
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
value: '24px'
|
|
||||||
},
|
|
||||||
activeValue: {
|
|
||||||
type: null,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
inactiveValue: {
|
|
||||||
type: null,
|
|
||||||
value: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
checked(value) {
|
|
||||||
this.set({ value });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.set({ value: this.data.checked });
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onChange(event: Weapp.Event) {
|
|
||||||
this.$emit('change', event.detail);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<van-cell
|
|
||||||
center
|
|
||||||
title="{{ title }}"
|
|
||||||
label="{{ label }}"
|
|
||||||
border="{{ border }}"
|
|
||||||
icon="{{ icon }}"
|
|
||||||
custom-class="van-switch-cell"
|
|
||||||
use-label-slot="{{ useLabelSlot }}"
|
|
||||||
>
|
|
||||||
<slot slot="icon" name="icon" />
|
|
||||||
<slot slot="title" name="title" />
|
|
||||||
<slot slot="label" name="label" />
|
|
||||||
<van-switch
|
|
||||||
size="{{ size }}"
|
|
||||||
checked="{{ checked }}"
|
|
||||||
loading="{{ loading }}"
|
|
||||||
disabled="{{ disabled }}"
|
|
||||||
active-color="{{ activeColor }}"
|
|
||||||
inactive-color="{{ inactiveColor }}"
|
|
||||||
active-value="{{ activeValue }}"
|
|
||||||
inactive-value="{{ inactiveValue }}"
|
|
||||||
custom-class="van-switch-cell__switch"
|
|
||||||
bind:change="onChange"
|
|
||||||
/>
|
|
||||||
</van-cell>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user