mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] Switch: rewrite
This commit is contained in:
陈嘉涵
parent
69e7e0c97b
commit
92a98d2322
@ -1,31 +1,22 @@
|
||||
var Zan = require('../../dist/index');
|
||||
|
||||
Page(Object.assign({}, Zan.Switch, {
|
||||
Page({
|
||||
data: {
|
||||
sync: {
|
||||
checked: false
|
||||
},
|
||||
async: {
|
||||
checked: true,
|
||||
loading: false
|
||||
},
|
||||
checked: true,
|
||||
checked2: true
|
||||
},
|
||||
|
||||
syncChange({ detail }) {
|
||||
this.setData({
|
||||
'sync.checked': detail.checked
|
||||
});
|
||||
onChange({ detail }) {
|
||||
this.setData({ checked: detail });
|
||||
},
|
||||
|
||||
asyncChange({ detail }) {
|
||||
this.setData({
|
||||
'async.loading': true
|
||||
onChange2({ detail }) {
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: '是否切换开关？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.setData({ checked2: detail });
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
'async.loading': false,
|
||||
'async.checked': detail.checked
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Switch 开关",
|
||||
"usingComponents": {
|
||||
"van-switch": "../../dist/switch/index",
|
||||
"van-panel": "../../dist/panel/index",
|
||||
"van-cell": "../../dist/cell/index"
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-switch": "../../dist/switch/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,30 @@
|
||||
<van-panel title='同步开关'>
|
||||
<van-cell>
|
||||
<van-switch checked="{{sync.checked}}" bind:change="syncChange" />
|
||||
</van-cell>
|
||||
</van-panel>
|
||||
<demo-block title="基础用法">
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title='异步开关'>
|
||||
<van-cell>
|
||||
<van-switch checked="{{async.checked}}" disabled="{{ async.disabled }}" loading="{{ async.loading }}" bind:change="asyncChange" />
|
||||
</van-cell>
|
||||
</van-panel>
|
||||
<demo-block title="禁用状态">
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
disabled
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title='禁止改动的开关'>
|
||||
<van-cell>
|
||||
<van-switch disabled="{{ false }}" />
|
||||
</van-cell>
|
||||
</van-panel>
|
||||
<demo-block title="加载状态">
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
loading
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-panel title='自定义高亮样式'>
|
||||
<van-cell>
|
||||
<van-switch theme-class="switch-theme" disabled="{{ false }}" checked/>
|
||||
</van-cell>
|
||||
</van-panel>
|
||||
<demo-block title="高级用法">
|
||||
<van-switch
|
||||
checked="{{ checked2 }}"
|
||||
size="36px"
|
||||
bind:change="onChange2"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -3,55 +3,88 @@
|
||||
### 使用指南
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-switch": "path/to/vant-weapp/dist/switch/index"
|
||||
}
|
||||
"usingComponents": {
|
||||
"van-switch": "path/to/vant-weapp/dist/switch/index"
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
可以在页面任意位置上使用 van-switch 标签。
|
||||
|
||||
#### 基础用法
|
||||
```html
|
||||
<van-switch checked="{{ checked }}" bind:change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
checked: true
|
||||
},
|
||||
|
||||
onChange({ detail }) {
|
||||
// 需要手动对 checked 状态进行更新
|
||||
this.setData({ checked: detail });
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
```html
|
||||
<van-switch checked="{{ checked }}" disabled />
|
||||
```
|
||||
|
||||
#### 加载状态
|
||||
```html
|
||||
<van-switch checked="{{ checked }}" loading />
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
```html
|
||||
<van-switch
|
||||
disabled="{{ disabled }}"
|
||||
size="36px"
|
||||
checked="{{ checked }}"
|
||||
loading="{{ loading }}"
|
||||
bind:change="handleFieldChange"
|
||||
></van-switch>
|
||||
bind:change="onChange"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
Page({
|
||||
data: {
|
||||
disabled: false,
|
||||
checked: false,
|
||||
loading: false
|
||||
checked: true
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleFieldChange(event, data) {
|
||||
console.log(event, data);
|
||||
}
|
||||
onChange({ detail }) {
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: '是否切换开关？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.setData({ checked2: detail });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| loading | switch 是否是 loading 状态 | Boolean | false | |
|
||||
| disabled | 是否不可用 | Boolean | false | |
|
||||
| checked | 是否打开状态 | Boolean | false | 必须 |
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| checked | 开关选中状态 | `Boolean` | `false` |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` |
|
||||
| size | 开关尺寸 | `String` | `30px` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | event对象和数据对象（包含loading和checked） |
|
||||
| change | 开关状态切换回调 | event.detail: 是否选中开关 |
|
||||
|
||||
### 外部样式类
|
||||
| 类名 | 说明 |
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
|
||||
| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 |
|
||||
| custom-class | 根节点样式类 |
|
||||
| node-class | 圆点样式类 |
|
||||
|
||||
@ -1,33 +1,23 @@
|
||||
Component({
|
||||
externalClasses: ['custom-class', 'theme-class'],
|
||||
externalClasses: ['custom-class', 'node-class'],
|
||||
|
||||
properties: {
|
||||
checked: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
checked: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
size: {
|
||||
type: String,
|
||||
value: '30px'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleZanSwitchChange() {
|
||||
if (this.data.loading || this.data.disabled) {
|
||||
return;
|
||||
onClick() {
|
||||
if (!this.data.disabled && !this.data.loading) {
|
||||
const checked = !this.data.checked;
|
||||
this.triggerEvent('input', checked);
|
||||
this.triggerEvent('change', checked);
|
||||
}
|
||||
let checked = !this.data.checked;
|
||||
this.triggerEvent('change', {
|
||||
checked,
|
||||
loading: this.data.loading
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-loading": "../loading/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,69 +1,45 @@
|
||||
@import '../helper/index.pcss';
|
||||
|
||||
.van-switch {
|
||||
height: 1em;
|
||||
width: 1.6em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16px;
|
||||
background: #44DB5E;
|
||||
border: 1px solid #44DB5E;
|
||||
}
|
||||
.van-switch__circle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
border-radius: 15px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
|
||||
z-index: 2;
|
||||
}
|
||||
.van-switch__bg {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 52px;
|
||||
height: 32px;
|
||||
background: #fff;
|
||||
border-radius: 26px;
|
||||
display: inline-block;
|
||||
border: 1px solid #e5e5e5;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
|
||||
transform: scale(0);
|
||||
transform-origin: 36px 16px;
|
||||
}
|
||||
.van-switch--on .van-switch__circle {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
.van-switch--off .van-switch__bg {
|
||||
transform: scale(1);
|
||||
}
|
||||
.van-swtich--disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.van-switch__loading {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(https://img.yzcdn.cn/public_files/2017/02/24/9acec77d91106cd15b8107c4633d9155.png) no-repeat;
|
||||
background-size: 16px 16px;
|
||||
animation: van-switch-loading 0.8s infinite linear;
|
||||
}
|
||||
background: $white;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
border-radius: 1em;
|
||||
|
||||
@keyframes van-switch-loading {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
&__node {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
transition: .3s;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
background-color: $white;
|
||||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
|
||||
&__loading {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
&--on {
|
||||
background-color: #44db5e;
|
||||
|
||||
.van-switch__node {
|
||||
transform: translateX(.6em);
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
<view
|
||||
class="custom-class theme-class van-switch van-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'van-swtich--disabled' : '' }}"
|
||||
checked="{{ checked }}"
|
||||
loading="{{ loading }}"
|
||||
disabled="{{ disabled }}"
|
||||
bindtap="handleZanSwitchChange"
|
||||
<div
|
||||
class="van-switch custom-class {{ checked ? 'van-switch--on' : '' }} {{ disabled ? 'van-switch--disabled' : '' }}"
|
||||
style="font-size: {{ size }};"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view class="van-switch__circle">
|
||||
<view hidden="{{ !loading }}" class="van-switch__loading"></view>
|
||||
</view>
|
||||
<view class="van-switch__bg"></view>
|
||||
</view>
|
||||
<div class="van-switch__node node-class">
|
||||
<van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user