Skip to content

Commit 59940f9

Browse files
smileShirmysmileShirmy
committed
feat(Switch): 新增 Switch 组件
1 parent be268fd commit 59940f9

File tree

16 files changed

+206
-2
lines changed

16 files changed

+206
-2
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,6 @@ yarn-error.log
1919
.vscode
2020
package-lock.json
2121
examples/project.config.json
22+
examples/project.private.config.json
2223
/.run
2324
yarn.lock

‎commitlint.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@ module.exports = {
7575
'TabBar',
7676
'DynamicBuild',
7777
'Calendar',
78-
'Script'
78+
'Script',
79+
'Switch'
7980
]
8081
]
8182
}

‎examples/app.json

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
{
9494
"root": "pages/components/form",
9595
"pages": [
96+
"pages/switch/index",
9697
"pages/input/index",
9798
"pages/radio/index",
9899
"pages/checkbox/index",

‎examples/images/component/switch.png

712 Bytes
Loading

‎examples/pages/components/form/pages/form/index.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ Page({
3737
music: '',
3838
sex: '',
3939
desc: '',
40-
score: ''
40+
score: '',
41+
status: false
4142
},
4243
items: [
4344
{
@@ -95,6 +96,19 @@ Page({
9596
trigger: 'change'
9697
}
9798
],
99+
statusRules: [
100+
{
101+
validator(rule, value, callback) {
102+
if (value !== true) {
103+
callback(false);
104+
} else {
105+
callback();
106+
}
107+
},
108+
message: '必须启用',
109+
trigger: 'change'
110+
}
111+
],
98112
register: {
99113
loginId: '',
100114
password: '',

‎examples/pages/components/form/pages/form/index.json

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"l-radio-group": "/dist/radio-group/index",
1414
"l-radio": "/dist/radio/index",
1515
"l-rate": "/dist/rate/index",
16+
"l-switch": "/dist/switch/index",
1617
"l-button": "/dist/button/index"
1718
}
1819
}

‎examples/pages/components/form/pages/form/index.wxml

+3
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,9 @@
166166
<l-form-item tip-type="{{tipType}}" align-items="{{alignType}}" rules="{{descRules}}" label="性格描述:" name="ruleDesc">
167167
<l-textarea l-class="l-input-container-class" border="{{false}}" id="ruleDesc" value="{{ruleForm.desc}}" />
168168
</l-form-item>
169+
<l-form-item tip-type="{{tipType}}" align-items="{{alignType}}" rules="{{statusRules}}" label="是否启用:" name="ruleStatus">
170+
<l-switch id="ruleStatus" value="{{ruleForm.status}}" />
171+
</l-form-item>
169172

170173
<view slot="submit">
171174
<l-button>提交验证</l-button>

‎examples/pages/components/form/pages/switch/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// pages/components/form/pages/switch/index.js
2+
Page({
3+
/**
4+
* 页面的初始数据
5+
*/
6+
data: {
7+
customValue: 0
8+
},
9+
10+
onChange(e) {
11+
this.setData({
12+
customValue: e.detail.checked
13+
});
14+
}
15+
});

‎examples/pages/components/form/pages/switch/index.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"usingComponents": {
3+
"content-title": "/components/content-title/index",
4+
"content-card": "/components/content-card/index",
5+
"l-switch": "/dist/switch/index"
6+
}
7+
}

‎examples/pages/components/form/pages/switch/index.wxml

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!--pages/components/form/pages/switch/index.wxml-->
2+
<view class='container'>
3+
<content-title name="Switch" describe="开关">
4+
<content-card
5+
class="content"
6+
name="基本案例"
7+
>
8+
<l-switch />
9+
10+
</content-card>
11+
12+
<!-- 设置禁用 -->
13+
<content-card
14+
class="content"
15+
name="设置禁用"
16+
>
17+
<l-switch disabled />
18+
</content-card>
19+
20+
<content-card
21+
class="content"
22+
name="自定义大小"
23+
>
24+
<l-switch size="50rpx" />
25+
</content-card>
26+
27+
<content-card
28+
class="content"
29+
name="自定义颜色"
30+
>
31+
<l-switch color="#ccc" select-color="#34BFA3"/>
32+
</content-card>
33+
34+
<content-card
35+
class="content"
36+
name="自定义打开或关闭的值"
37+
>
38+
<l-switch checked="{{ customValue }}" active-value="{{ 1 }}" inactive-value="{{ 0 }}" bind:linchange="onChange"/>
39+
<view>当前选中的值：{{ customValue }}</view>
40+
</content-card>
41+
</content-title>
42+
</view>

‎examples/pages/components/form/pages/switch/index.wxss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* pages/components/form/pages/switch/index.wxss */

‎examples/pages/navigator/content/config/form-navi.js

+6
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,12 @@ const formNaviConfigs = [
4747
desc: '日历',
4848
componentsPath: '/pages/components/form/pages/calendar/index'
4949
},
50+
{
51+
icon: '/images/component/switch.png',
52+
title: 'Switch',
53+
desc: '开关',
54+
componentsPath: '/pages/components/form/pages/switch/index'
55+
},
5056
{
5157
icon: '/images/component/rules.png',
5258
title: 'Rules',

‎src/switch/index.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import eventBus from '../core/utils/event-bus';
2+
3+
Component({
4+
externalClasses: ['l-class', 'l-disabled-class'],
5+
properties: {
6+
checked: {
7+
type: null,
8+
optionalTypes: [Boolean, String, Number],
9+
value: false
10+
},
11+
size: {
12+
type: String,
13+
value: '38rpx'
14+
},
15+
color: {
16+
type: String,
17+
value: '#fff'
18+
},
19+
// 选中后的颜色
20+
selectColor: {
21+
type: String,
22+
value: '#3963BC'
23+
},
24+
activeValue: {
25+
type: null,
26+
value: true,
27+
},
28+
inactiveValue: {
29+
type: null,
30+
value: false,
31+
},
32+
// 不可选状态
33+
disabled: {
34+
type: Boolean,
35+
value: false
36+
},
37+
},
38+
methods: {
39+
onClick() {
40+
const { activeValue, inactiveValue, disabled } = this.data;
41+
42+
if (disabled) {
43+
return;
44+
}
45+
46+
const checked = this.data.checked === activeValue;
47+
const value = checked ? inactiveValue : activeValue;
48+
49+
this.setData({
50+
checked: value
51+
});
52+
53+
this.triggerEvent('linchange', { checked: value });
54+
eventBus.emit(`lin-form-change-${this.id}`, this.id);
55+
},
56+
57+
getValues() {
58+
return this.data.checked;
59+
},
60+
61+
reset() {
62+
this.setData({
63+
checked: this.data.inactiveValue
64+
});
65+
}
66+
}
67+
});

‎src/switch/index.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"component": true,
3+
"usingComponents": {}
4+
}

‎src/switch/index.less

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.switch {
2+
position: relative;
3+
display: inline-block;
4+
box-sizing: content-box;
5+
width: 2em;
6+
height: 1em;
7+
background-color: #fff;
8+
border: 1px solid rgba(0, 0, 0, 0.1);
9+
border-radius: 1em;
10+
transition: background-color 0.3s;
11+
12+
&-node {
13+
position: absolute;
14+
top: 0;
15+
left: 0;
16+
border-radius: 100%;
17+
z-index: 1;
18+
width: 1em;
19+
height: 1em;
20+
background-color: #fff;
21+
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
22+
0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
23+
transition: 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
24+
}
25+
26+
&-on {
27+
.switch-node {
28+
transform: translateX(calc(1em));
29+
}
30+
}
31+
32+
&-disabled {
33+
opacity: 0.5;
34+
}
35+
}

‎src/switch/index.wxml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<view
2+
class="switch {{disabled ? 'switch-disabled l-disabled-class' : 'l-class'}} {{ checked === activeValue ? 'switch-on' : '' }}"
3+
style="background-color:{{checked === activeValue ? selectColor : color}};font-size:{{size}};"
4+
bind:tap="onClick">
5+
<view class="switch-node"></view>
6+
</view>

0 commit comments

Comments
 (0)