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`
|
||||
|
||||
##### SwitchCell
|
||||
|
||||
- 移除了`SwitchCell`组件，请使用`Cell`和`Switch`组件代替
|
||||
|
||||
|
||||
#### 新特性
|
||||
|
||||
##### Area
|
||||
@ -47,3 +52,7 @@
|
||||
- 新增`round`属性
|
||||
- 新增`closeable`属性
|
||||
- 新增`close-icon`属性
|
||||
|
||||
##### Steps
|
||||
|
||||
- 新增`active-icon`属性
|
||||
|
||||
@ -33,7 +33,6 @@
|
||||
"pages/stepper/index",
|
||||
"pages/steps/index",
|
||||
"pages/switch/index",
|
||||
"pages/switch-cell/index",
|
||||
"pages/search/index",
|
||||
"pages/slider/index",
|
||||
"pages/sidebar/index",
|
||||
@ -98,7 +97,6 @@
|
||||
"van-submit-bar": "./dist/submit-bar/index",
|
||||
"van-swipe-cell": "./dist/swipe-cell/index",
|
||||
"van-switch": "./dist/switch/index",
|
||||
"van-switch-cell": "./dist/switch-cell/index",
|
||||
"van-tab": "./dist/tab/index",
|
||||
"van-tabs": "./dist/tabs/index",
|
||||
"van-tabbar": "./dist/tabbar/index",
|
||||
|
||||
@ -72,10 +72,6 @@ export default [
|
||||
{
|
||||
path: '/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-border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
// SwitchCell
|
||||
@switch-cell-padding-top: 9px;
|
||||
@switch-cell-padding-bottom: 9px;
|
||||
|
||||
// Toast
|
||||
@toast-max-width: 70%;
|
||||
@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