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({
|
||||||
|
|
||||||
Page(Object.assign({}, Zan.Switch, {
|
|
||||||
data: {
|
data: {
|
||||||
sync: {
|
checked: true,
|
||||||
checked: false
|
checked2: true
|
||||||
},
|
|
||||||
async: {
|
|
||||||
checked: true,
|
|
||||||
loading: false
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
syncChange({ detail }) {
|
onChange({ detail }) {
|
||||||
this.setData({
|
this.setData({ checked: detail });
|
||||||
'sync.checked': detail.checked
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
asyncChange({ detail }) {
|
onChange2({ detail }) {
|
||||||
this.setData({
|
wx.showModal({
|
||||||
'async.loading': true
|
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 开关",
|
"navigationBarTitleText": "Switch 开关",
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"van-switch": "../../dist/switch/index",
|
"demo-block": "../../components/demo-block/index",
|
||||||
"van-panel": "../../dist/panel/index",
|
"van-switch": "../../dist/switch/index"
|
||||||
"van-cell": "../../dist/cell/index"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,23 +1,30 @@
|
|||||||
<van-panel title='同步开关'>
|
<demo-block title="基础用法">
|
||||||
<van-cell>
|
<van-switch
|
||||||
<van-switch checked="{{sync.checked}}" bind:change="syncChange" />
|
checked="{{ checked }}"
|
||||||
</van-cell>
|
bind:change="onChange"
|
||||||
</van-panel>
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<van-panel title='异步开关'>
|
<demo-block title="禁用状态">
|
||||||
<van-cell>
|
<van-switch
|
||||||
<van-switch checked="{{async.checked}}" disabled="{{ async.disabled }}" loading="{{ async.loading }}" bind:change="asyncChange" />
|
checked="{{ checked }}"
|
||||||
</van-cell>
|
disabled
|
||||||
</van-panel>
|
bind:change="onChange"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<van-panel title='禁止改动的开关'>
|
<demo-block title="加载状态">
|
||||||
<van-cell>
|
<van-switch
|
||||||
<van-switch disabled="{{ false }}" />
|
checked="{{ checked }}"
|
||||||
</van-cell>
|
loading
|
||||||
</van-panel>
|
bind:change="onChange"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<van-panel title='自定义高亮样式'>
|
<demo-block title="高级用法">
|
||||||
<van-cell>
|
<van-switch
|
||||||
<van-switch theme-class="switch-theme" disabled="{{ false }}" checked/>
|
checked="{{ checked2 }}"
|
||||||
</van-cell>
|
size="36px"
|
||||||
</van-panel>
|
bind:change="onChange2"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|||||||
@ -3,55 +3,88 @@
|
|||||||
### 使用指南
|
### 使用指南
|
||||||
在 index.json 中引入组件
|
在 index.json 中引入组件
|
||||||
```json
|
```json
|
||||||
{
|
"usingComponents": {
|
||||||
"usingComponents": {
|
"van-switch": "path/to/vant-weapp/dist/switch/index"
|
||||||
"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
|
```html
|
||||||
<van-switch
|
<van-switch
|
||||||
disabled="{{ disabled }}"
|
size="36px"
|
||||||
checked="{{ checked }}"
|
checked="{{ checked }}"
|
||||||
loading="{{ loading }}"
|
bind:change="onChange"
|
||||||
bind:change="handleFieldChange"
|
/>
|
||||||
></van-switch>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
disabled: false,
|
checked: true
|
||||||
checked: false,
|
|
||||||
loading: false
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
onChange({ detail }) {
|
||||||
handleFieldChange(event, data) {
|
wx.showModal({
|
||||||
console.log(event, data);
|
title: '提示',
|
||||||
}
|
content: '是否切换开关？',
|
||||||
|
success: res => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.setData({ checked2: detail });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### API
|
### 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
|
### Event
|
||||||
|
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名 | 说明 | 参数 |
|
||||||
|-----------|-----------|-----------|
|
|-----------|-----------|-----------|
|
||||||
| change | 当绑定值变化时触发的事件 | event对象和数据对象（包含loading和checked） |
|
| change | 开关状态切换回调 | event.detail: 是否选中开关 |
|
||||||
|
|
||||||
### 外部样式类
|
### 外部样式类
|
||||||
| 类名 | 说明 |
|
|
||||||
|
| 类名 | 说明 |
|
||||||
|-----------|-----------|
|
|-----------|-----------|
|
||||||
| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
|
| custom-class | 根节点样式类 |
|
||||||
| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 |
|
| node-class | 圆点样式类 |
|
||||||
|
|||||||
@ -1,33 +1,23 @@
|
|||||||
Component({
|
Component({
|
||||||
externalClasses: ['custom-class', 'theme-class'],
|
externalClasses: ['custom-class', 'node-class'],
|
||||||
|
|
||||||
properties: {
|
properties: {
|
||||||
checked: {
|
checked: Boolean,
|
||||||
type: Boolean,
|
loading: Boolean,
|
||||||
value: false
|
disabled: Boolean,
|
||||||
},
|
size: {
|
||||||
|
type: String,
|
||||||
loading: {
|
value: '30px'
|
||||||
type: Boolean,
|
|
||||||
value: false
|
|
||||||
},
|
|
||||||
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleZanSwitchChange() {
|
onClick() {
|
||||||
if (this.data.loading || this.data.disabled) {
|
if (!this.data.disabled && !this.data.loading) {
|
||||||
return;
|
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 {
|
.van-switch {
|
||||||
|
height: 1em;
|
||||||
|
width: 1.6em;
|
||||||
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
background: $white;
|
||||||
width: 52px;
|
box-sizing: content-box;
|
||||||
height: 32px;
|
border: 1px solid rgba(0, 0, 0, .1);
|
||||||
vertical-align: middle;
|
border-radius: 1em;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes van-switch-loading {
|
&__node {
|
||||||
from {
|
top: 0;
|
||||||
transform: rotate(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
|
<div
|
||||||
class="custom-class theme-class van-switch van-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'van-swtich--disabled' : '' }}"
|
class="van-switch custom-class {{ checked ? 'van-switch--on' : '' }} {{ disabled ? 'van-switch--disabled' : '' }}"
|
||||||
checked="{{ checked }}"
|
style="font-size: {{ size }};"
|
||||||
loading="{{ loading }}"
|
bind:tap="onClick"
|
||||||
disabled="{{ disabled }}"
|
|
||||||
bindtap="handleZanSwitchChange"
|
|
||||||
>
|
>
|
||||||
<view class="van-switch__circle">
|
<div class="van-switch__node node-class">
|
||||||
<view hidden="{{ !loading }}" class="van-switch__loading"></view>
|
<van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" />
|
||||||
</view>
|
</div>
|
||||||
<view class="van-switch__bg"></view>
|
</div>
|
||||||
</view>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user