refactor: switch

src/packages/cell/index.vue

@@ -35,7 +35,6 @@
 import { computed } from 'vue';
 import { createComponent } from '@/utils/create';
 import { useRouter } from 'vue-router';
-import Icon from '@/packages/icon/index.vue';
 const { componentName, create } = createComponent('cell');
 
 export default create({
@@ -50,9 +49,6 @@ export default create({
     url: { type: String, default: '' },
     icon: { type: String, default: '' }
   },
-  components: {
-    [Icon.name]: Icon
-  },
   emits: ['click'],
   setup(props, { emit }) {
     const classes = computed(() => {

src/packages/noticebar/demo.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-noticebar
-        text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-      ></nut-noticebar>
-    </nut-cell>
-  </div>
-</template>
-
-<script lang="ts">
-import { createComponent } from '@/utils/create';
-const { createDemo } = createComponent('noticebar');
-export default createDemo({
-  props: {},
-  setup() {
-    return {};
-  }
-});
-</script>
-
-<style lang="scss" scoped></style>

src/packages/noticebar/doc.md

@@ -1,34 +0,0 @@
-#  noticebar组件
-
-    ### 介绍
-    
-    基于 xxxxxxx
-    
-    ### 安装
-    
-    
-    
-    ## 代码演示
-    
-    ### 基础用法1
-    
-
-    
-    ## API
-    
-    ### Props
-    
-    | 参数         | 说明                             | 类型   | 默认值           |
-    |--------------|----------------------------------|--------|------------------|
-    | name         | 图标名称或图片链接               | String | -                |
-    | color        | 图标颜色                         | String | -                |
-    | size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
-    | class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
-    | tag          | HTML 标签                        | String | 'i'              |
-    
-    ### Events
-    
-    | 事件名 | 说明           | 回调参数     |
-    |--------|----------------|--------------|
-    | click  | 点击图标时触发 | event: Event |
-    

src/packages/noticebar/index.scss

@@ -1,2 +0,0 @@
-.nut-noticebar {
-}

src/packages/noticebar/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <view :class="classes">
-    <view>{{ name }}</view>
-    <view>{{ txt }}</view>
-  </view>
-</template>
-<script lang="ts">
-import { toRefs } from 'vue';
-import { createComponent } from '@/utils/create';
-const { componentName, create } = createComponent('noticebar');
-
-export default create({
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    txt: {
-      type: String,
-      default: ''
-    }
-  },
-  components: {},
-  emits: ['click'],
-
-  setup(props, { emit }) {
-    console.log('componentName', componentName);
-
-    const { name, txt } = toRefs(props);
-
-    const handleClick = (event: Event) => {
-      emit('click', event);
-    };
-
-    return { name, txt, handleClick };
-  }
-});
-</script>
-
-<style lang="scss">
-@import 'index.scss';
-</style>

src/packages/switch/demo.vue

@@ -9,6 +9,12 @@
       ></nut-switch>
     </nut-cell>
 
+    <h2>禁用状态</h2>
+    <nut-cell class="switch-adjust">
+      {{ text }}
+      <nut-switch class="switch-decoration" disable></nut-switch>
+    </nut-cell>
+
     <h2>change事件</h2>
     <nut-cell class="switch-adjust">
       chane
@@ -21,7 +27,13 @@
     <h2>自定义颜色</h2>
     <nut-cell class="switch-adjust">
       color
-      <nut-switch activeColor="blue" class="switch-decoration"></nut-switch>
+      <nut-switch active-color="blue" class="switch-decoration"></nut-switch>
+    </nut-cell>
+
+    <h2>支持文字</h2>
+    <nut-cell class="switch-adjust">
+      text
+      <nut-switch class="switch-decoration" label="开    关"></nut-switch>
     </nut-cell>
   </div>
 </template>
@@ -29,7 +41,6 @@
 <script lang="ts">
 import { toRefs, reactive } from 'vue';
 import { createComponent } from '@/utils/create';
-import { isObject } from '@vue/shared';
 const { createDemo } = createComponent('switch');
 export default createDemo({
   props: {},
@@ -41,7 +52,7 @@ export default createDemo({
       response.text = isOpen ? '开' : '关';
     };
     const change = (event: Event, isOpen: boolean) => {
-      console.log('触发了change事件,开关状态：', isOpen);
+      alert(`触发了change事件,开关状态：${isOpen}`);
     };
 
     return {

src/packages/switch/doc.md

@@ -23,6 +23,12 @@ app.use(Switch);
 <nut-switch></nut-switch>
 ```
 
+### 禁用状态
+
+``` html
+<nut-switch disable></nut-switch>
+```
+
 ### change事件
 
 ``` html
@@ -46,7 +52,7 @@ export default {
 ### 自定义颜色
 
 ``` html
-<nut-switch activeColor="blue"></nut-switch>
+<nut-switch active-color="blue"></nut-switch>
 ```
 
 ## API
@@ -55,14 +61,16 @@ export default {
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| status         | 开关状态               | Boolean | true |
-| activeColor        | 开关打开时的背景颜色  | String | rgb(250,63,25,1)                |
-| inactiveColor         | 开关关闭时的背景颜色 | String | rgba(235,235,235,1)         |
+| status         | 开关状态               | Boolean | `true` |
+| disable         | 禁用状态               | Boolean | `false` |
+| active-color        | 开关打开时的背景颜色  | String | `rgb(250,63,25,1)`                |
+| inactive-color         | 开关关闭时的背景颜色 | String | `rgba(235,235,235,1)`         |
+| label         | 支持内嵌文字 | String | -         |
 
 
 ### Events
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| switch-change  | 切换开关时触发 | event: Event |
+| switch-change  | 切换开关时触发 | (event: Event, isOpen: boolean) |
     

src/packages/switch/index.scss

@@ -1,37 +1,59 @@
 .nut-switch {
   display: flex;
   align-items: center;
-  width: 36px;
-  height: 21px;
-  background-color: rgb(250, 63, 25, 1);
+  background-color: $primary-color;
   border-radius: 21px;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
   flex: 0 0 auto; // 防止被压缩
+  &.switch-close {
+    background-color: $switch-close-bg-color;
+    .close-line {
+      background: $switch-close--cline-bg-color;
+      border-radius: 2px;
+    }
+  }
   .switch-button {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 13px;
-    height: 13px;
-    border-radius: 7px;
-    background: rgba(255, 255, 255, 1);
+    border-radius: 50%;
+    background: $white;
     transition: transform 0.3s;
-    transform: translateX(30%);
+    .nut-switch-label {
+      color: $white;
+      font-size: $font-size-1;
+      &.open {
+        transform: translateX(-14px);
+      }
+      &.close {
+        transform: translateX(14px);
+      }
+    }
   }
-}
-.switch-open {
-  .switch-button {
-    transform: translateX(146%);
+  &.nut-switch-disable {
+    opacity: 0.6;
   }
-}
-.switch-close {
-  background-color: rgba(235, 235, 235, 1);
-  .close-line {
-    width: 8px;
-    height: 2px;
-    background: rgba(240, 240, 240, 1);
-    border-radius: 2px;
+  &.nut-switch-base {
+    width: 36px;
+    height: 21px;
+    line-height: 21px;
+    .switch-button {
+      height: 13px;
+      width: 13px;
+      transform: translateX(30%);
+    }
+    &.switch-open {
+      .switch-button {
+        transform: translateX(146%);
+      }
+    }
+    &.switch-close {
+      .close-line {
+        width: 8px;
+        height: 2px;
+      }
+    }
   }
 }

src/packages/switch/index.vue

@@ -1,18 +1,21 @@
 <template>
-  <view
-    @click="onClick"
-    :style="style"
-    class="nut-switch"
-    :class="[isOpen ? 'switch-open' : 'switch-close']"
-  >
+  <view :class="classes" @click="onClick" :style="style">
     <view class="switch-button">
       <view v-show="!isOpen" class="close-line"></view>
+      <template v-if="label">
+        <view class="nut-switch-label open" v-show="isOpen">{{
+          label.split(/\s+/)[0]
+        }}</view>
+        <div class="nut-switch-label close" v-show="!isOpen">{{
+          label.split(/\s+/)[1]
+        }}</div>
+      </template>
     </view>
   </view>
 </template>
 
 <script lang="ts">
-import { toRefs, computed, reactive, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('switch');
 
@@ -22,61 +25,53 @@ export default create({
       type: Boolean,
       default: true
     },
+    disable: {
+      type: Boolean,
+      default: false
+    },
     activeColor: {
       type: String,
-      default: ''
+      default: 'rgba(250,63,25,1)'
     },
     inactiveColor: {
       type: String,
+      default: 'rgba(235,235,235,1)'
+    },
+    label: {
+      type: String,
       default: ''
     }
   },
 
   setup(props, { emit }) {
-    const { status, activeColor, inactiveColor } = toRefs(props);
-    const actColor = activeColor.value;
-    const inaColor = inactiveColor.value;
+    let isOpen = ref(props.status ? props.status : true);
 
-    const response = reactive({
-      isOpen: status.value ? status.value : true,
-      style: {}
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [isOpen.value ? 'switch-open' : 'switch-close']: true,
+        [`${prefixCls}-disable`]: props.disable,
+        [`${prefixCls}-base`]: true
+      };
     });
 
-    const styleCheck = status => {
-      if (status) {
-        if (actColor) {
-          response.style = {
-            backgroundColor: `${actColor}`
-          };
-        } else {
-          response.style = {
-            backgroundColor: 'rgb(250,63,25,1)'
-          };
-        }
-      }
-      if (!status) {
-        if (inaColor) {
-          response.style = {
-            backgroundColor: `${inaColor}`
-          };
-        } else {
-          response.style = {
-            backgroundColor: 'rgba(235,235,235,1)'
-          };
-        }
-      }
-    };
-
-    styleCheck(status.value);
+    const style = computed(() => {
+      return {
+        backgroundColor: isOpen.value ? props.activeColor : props.inactiveColor
+      };
+    });
 
     const onClick = () => {
-      response.isOpen = !response.isOpen;
-      styleCheck(response.isOpen);
-      emit('switch-change', event, response.isOpen);
+      if (props.disable) return;
+      isOpen.value = !isOpen.value;
+      emit('switch-change', event, isOpen.value);
     };
 
     return {
-      ...toRefs(response),
+      isOpen,
+      classes,
+      style,
       onClick
     };
   }

src/styles/variables.scss

@@ -141,6 +141,10 @@ $avatar-small-height: 32px;
 $avatar-normal-width: 40px;
 $avatar-normal-height: 40px;
 
+//switch
+$switch-close-bg-color: #ebebeb;
+$switch-close--cline-bg-color: #f0f0f0;
+
 // calendar
 $calendar-primary-color: $primary-color;
 $calendar-choose-color: #fef6f6;