feat(Switch): 新增 Switch 组件

smileShirmy · smileShirmy · commit 59940f98abb1 · 2021-12-29T19:19:52.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -19,5 +19,6 @@ yarn-error.log
 .vscode
 package-lock.json
 examples/project.config.json
+examples/project.private.config.json
 /.run
 yarn.lock
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -75,7 +75,8 @@ module.exports = {
         'TabBar',
         'DynamicBuild',
         'Calendar',
-        'Script'
+        'Script',
+        'Switch'
       ]
     ]
   }
diff --git a/examples/app.json b/examples/app.json
@@ -93,6 +93,7 @@
     {
       "root": "pages/components/form",
       "pages": [
+        "pages/switch/index",
         "pages/input/index",
         "pages/radio/index",
         "pages/checkbox/index",
diff --git a/examples/images/component/switch.png b/examples/images/component/switch.png
diff --git a/examples/pages/components/form/pages/form/index.js b/examples/pages/components/form/pages/form/index.js
@@ -37,7 +37,8 @@ Page({
       music: '',
       sex: '',
       desc: '',
-      score: ''
+      score: '',
+      status: false
     },
     items: [
       {
@@ -95,6 +96,19 @@ Page({
         trigger: 'change'
       }
     ],
+    statusRules: [
+      {
+        validator(rule, value, callback) {
+          if (value !== true) {
+            callback(false);
+          } else {
+            callback();
+          }
+        },
+        message: '必须启用',
+        trigger: 'change'
+      }
+    ],
     register: {
       loginId: '',
       password: '',
diff --git a/examples/pages/components/form/pages/form/index.json b/examples/pages/components/form/pages/form/index.json
@@ -13,6 +13,7 @@
     "l-radio-group": "/dist/radio-group/index",
     "l-radio": "/dist/radio/index",
     "l-rate": "/dist/rate/index",
+    "l-switch": "/dist/switch/index",
     "l-button": "/dist/button/index"
   }
 }
diff --git a/examples/pages/components/form/pages/form/index.wxml b/examples/pages/components/form/pages/form/index.wxml
@@ -166,6 +166,9 @@
                     <l-form-item tip-type="{{tipType}}" align-items="{{alignType}}" rules="{{descRules}}" label="性格描述:" name="ruleDesc">
                         <l-textarea l-class="l-input-container-class" border="{{false}}" id="ruleDesc" value="{{ruleForm.desc}}" />
                     </l-form-item>
+                    <l-form-item tip-type="{{tipType}}" align-items="{{alignType}}" rules="{{statusRules}}" label="是否启用:" name="ruleStatus">
+                        <l-switch id="ruleStatus" value="{{ruleForm.status}}" />
+                    </l-form-item>
 
                     <view slot="submit">
                         <l-button>提交验证</l-button>
diff --git a/examples/pages/components/form/pages/switch/index.js b/examples/pages/components/form/pages/switch/index.js
@@ -0,0 +1,15 @@
+// pages/components/form/pages/switch/index.js
+Page({
+  /**
+  * 页面的初始数据
+  */
+  data: {
+    customValue: 0
+  },
+
+  onChange(e) {
+    this.setData({
+      customValue: e.detail.checked
+    });
+  }
+});
diff --git a/examples/pages/components/form/pages/switch/index.json b/examples/pages/components/form/pages/switch/index.json
@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "content-title": "/components/content-title/index",
+    "content-card": "/components/content-card/index",
+    "l-switch": "/dist/switch/index"
+  }
+}
diff --git a/examples/pages/components/form/pages/switch/index.wxml b/examples/pages/components/form/pages/switch/index.wxml
@@ -0,0 +1,42 @@
+<!--pages/components/form/pages/switch/index.wxml-->
+<view class='container'>
+  <content-title name="Switch" describe="开关">
+    <content-card
+      class="content"
+      name="基本案例"
+    >
+      <l-switch />
+
+    </content-card>
+
+    <!-- 设置禁用 -->
+    <content-card
+      class="content"
+      name="设置禁用"
+    >
+      <l-switch disabled />
+    </content-card>
+
+    <content-card
+      class="content"
+      name="自定义大小"
+    >
+      <l-switch size="50rpx" />
+    </content-card>
+
+    <content-card
+      class="content"
+      name="自定义颜色"
+    >
+      <l-switch color="#ccc" select-color="#34BFA3"/>
+    </content-card>
+
+    <content-card
+      class="content"
+      name="自定义打开或关闭的值"
+    >
+      <l-switch checked="{{ customValue }}" active-value="{{ 1 }}" inactive-value="{{ 0 }}" bind:linchange="onChange"/>
+      <view>当前选中的值：{{ customValue }}</view>
+    </content-card>
+  </content-title>
+</view>
diff --git a/examples/pages/components/form/pages/switch/index.wxss b/examples/pages/components/form/pages/switch/index.wxss
@@ -0,0 +1 @@
+/* pages/components/form/pages/switch/index.wxss */
diff --git a/examples/pages/navigator/content/config/form-navi.js b/examples/pages/navigator/content/config/form-navi.js
@@ -47,6 +47,12 @@ const formNaviConfigs = [
     desc: '日历',
     componentsPath: '/pages/components/form/pages/calendar/index'
   },
+  {
+    icon: '/images/component/switch.png',
+    title: 'Switch',
+    desc: '开关',
+    componentsPath: '/pages/components/form/pages/switch/index'
+  },
   {
     icon: '/images/component/rules.png',
     title: 'Rules',
diff --git a/src/switch/index.js b/src/switch/index.js
@@ -0,0 +1,67 @@
+import eventBus from '../core/utils/event-bus';
+
+Component({
+  externalClasses: ['l-class', 'l-disabled-class'],
+  properties: {
+    checked: {
+      type: null,
+      optionalTypes: [Boolean, String, Number],
+      value: false
+    },
+    size: {
+      type: String,
+      value: '38rpx'
+    },
+    color: {
+      type: String,
+      value: '#fff'
+    },
+    //  选中后的颜色
+    selectColor: {
+      type: String,
+      value: '#3963BC'
+    },
+    activeValue: {
+      type: null,
+      value: true,
+    },
+    inactiveValue: {
+      type: null,
+      value: false,
+    },
+    // 不可选状态
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+  },
+  methods: {
+    onClick() {
+      const { activeValue, inactiveValue, disabled } = this.data;
+
+      if (disabled) {
+        return;
+      }
+
+      const checked = this.data.checked === activeValue;
+      const value = checked ? inactiveValue : activeValue;
+
+      this.setData({
+        checked: value
+      });
+
+      this.triggerEvent('linchange', { checked: value });
+      eventBus.emit(`lin-form-change-${this.id}`, this.id);
+    },
+
+    getValues() {
+      return this.data.checked;
+    },
+
+    reset() {
+      this.setData({
+        checked: this.data.inactiveValue
+      });
+    }
+  }
+});
diff --git a/src/switch/index.json b/src/switch/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
diff --git a/src/switch/index.less b/src/switch/index.less
@@ -0,0 +1,35 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  box-sizing: content-box;
+  width: 2em;
+  height: 1em;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 1em;
+  transition: background-color 0.3s;
+  
+  &-node {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 100%;
+    z-index: 1;
+    width: 1em;
+    height: 1em;
+    background-color: #fff;
+    box-shadow: 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: 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+  }
+
+  &-on {
+    .switch-node {
+      transform: translateX(calc(1em));
+    }
+  }
+
+  &-disabled {
+    opacity: 0.5;
+  }
+}
diff --git a/src/switch/index.wxml b/src/switch/index.wxml
@@ -0,0 +1,6 @@
+<view 
+  class="switch {{disabled ? 'switch-disabled l-disabled-class' : 'l-class'}} {{ checked === activeValue ? 'switch-on' : '' }}"
+  style="background-color:{{checked === activeValue ? selectColor : color}};font-size:{{size}};"
+  bind:tap="onClick">
+  <view class="switch-node"></view>
+</view>

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,8 @@ module.exports = {`
`75`	`75`	`'TabBar',`
`76`	`76`	`'DynamicBuild',`
`77`	`77`	`'Calendar',`
`78`		`- 'Script'`
	`78`	`+ 'Script',`
	`79`	`+ 'Switch'`
`79`	`80`	`]`
`80`	`81`	`]`
`81`	`82`	`}`
Original file line number	Diff line number	Diff line change
`@@ -93,6 +93,7 @@`
`93`	`93`	`{`
`94`	`94`	`"root": "pages/components/form",`
`95`	`95`	`"pages": [`
	`96`	`+ "pages/switch/index",`
`96`	`97`	`"pages/input/index",`
`97`	`98`	`"pages/radio/index",`
`98`	`99`	`"pages/checkbox/index",`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@`
`13`	`13`	`"l-radio-group": "/dist/radio-group/index",`
`14`	`14`	`"l-radio": "/dist/radio/index",`
`15`	`15`	`"l-rate": "/dist/rate/index",`
	`16`	`+ "l-switch": "/dist/switch/index",`
`16`	`17`	`"l-button": "/dist/button/index"`
`17`	`18`	`}`
`18`	`19`	`}`