upd(switch & icon): 图标库增加loading，switch组件增加加载中状态

src/packages/__VUE/icon/index.scss

@@ -19,7 +19,8 @@
     height: $icon-height;
     object-fit: contain;
   }
-  &-loading {
+  &-loading,
+  &-loading1 {
     display: inline-block;
     animation: loadingCircle 1s infinite linear;
   }

src/packages/__VUE/switch/demo.vue

@@ -10,6 +10,11 @@
       <nut-switch v-model="checked" disable />
     </nut-cell>
 
+    <h2>加载状态</h2>
+    <nut-cell>
+      <nut-switch v-model="checked" loading color="red" />
+    </nut-cell>
+
     <h2>change事件</h2>
     <nut-cell>
       <nut-switch v-model="checked" @change="change" />
@@ -17,26 +22,17 @@
 
     <h2>异步控制</h2>
     <nut-cell>
-      <nut-switch :model-value="checkedAsync" @change="changeAsync" />
+      <nut-switch :model-value="checkedAsync" @change="changeAsync" :loading="loadingAsync" />
     </nut-cell>
 
     <h2>自定义颜色</h2>
     <nut-cell>
-      <nut-switch
-        v-model="checked"
-        @change="switchChange"
-        active-color="blue"
-      />
+      <nut-switch v-model="checked" @change="switchChange" active-color="blue" />
     </nut-cell>
 
     <h2>支持文字</h2>
     <nut-cell>
-      <nut-switch
-        v-model="checked"
-        @change="switchChange"
-        active-text="开"
-        inactive-text="关"
-      />
+      <nut-switch v-model="checked" @change="switchChange" active-text="开" inactive-text="关" />
     </nut-cell>
   </div>
 </template>
@@ -50,20 +46,25 @@ export default createDemo({
     let { proxy } = getCurrentInstance() as any;
     const checked = ref(true);
     const checkedAsync = ref(true);
+    const loadingAsync = ref(false);
 
     const change = (value: boolean, event: Event) => {
       proxy.$toast.text(`触发了change事件，开关状态：${value}`);
     };
+
     const changeAsync = (value: boolean, event: Event) => {
       proxy.$toast.text(`2秒后异步触发 ${value}`);
+      loadingAsync.value = true;
       setTimeout(() => {
         checkedAsync.value = value;
+        loadingAsync.value = false;
       }, 2000);
     };
 
     return {
       checked,
       checkedAsync,
+      loadingAsync,
       change,
       changeAsync
     };

src/packages/__VUE/switch/doc.md

@@ -41,6 +41,12 @@ export default {
 <nut-switch v-model="checked" disable />
 ```
 
+### 加载状态
+
+``` html
+<nut-switch v-model="checked" loading color="loading" />
+```
+
 ### change事件
 
 ``` html
@@ -107,6 +113,10 @@ export default {
 |----------------|------------------|---------|-----------------------|
 | v-model        | 开关状态         | Boolean | `false`               |
 | disable        | 禁用状态         | Boolean | `false`               |
+| loading        | 加载状态         | Boolean | `false`               |
+| name        | [图标名称](#/icon)         | String | `loading`               |
+| color        | [图标颜色](#/icon)          | String | -               |
+| size        | [图标尺寸](#/icon)          | String、Number | `12px`               |
 | active-color   | 打开时的背景颜色 | String  | `#fa2c19`    |
 | inactive-color | 关闭时的背景颜色 | String  | `#ebebeb` |
 | active-text    | 打开时文字描述   | String  | -                     |

src/packages/__VUE/switch/index.taro.vue

@@ -1,21 +1,18 @@
 <template>
   <view :class="classes" @click="onClick" :style="style">
     <view class="switch-button">
-      <view v-show="!modelValue" class="close-line"></view>
+      <nut-icon v-if="loading" :name="name" :size="size" :color="color"></nut-icon>
+      <!-- <view v-show="!modelValue" class="close-line"></view> -->
       <template v-if="activeText">
-        <view class="nut-switch-label open" v-show="modelValue">{{
-          activeText
-        }}</view>
-        <view class="nut-switch-label close" v-show="!modelValue">{{
-          inactiveText
-        }}</view>
+        <view class="nut-switch-label open" v-show="modelValue">{{ activeText }}</view>
+        <view class="nut-switch-label close" v-show="!modelValue">{{ inactiveText }}</view>
       </template>
     </view>
   </view>
 </template>
 
 <script lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('switch');
 
@@ -44,6 +41,22 @@ export default create({
     inactiveText: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'loading1'
+    },
+    size: {
+      type: [String, Number],
+      default: '12px'
+    },
+    color: {
+      type: String,
+      default: ''
     }
   },
   emits: ['change', 'update:modelValue'],
@@ -60,15 +73,14 @@ export default create({
 
     const style = computed(() => {
       return {
-        backgroundColor: props.modelValue
-          ? props.activeColor
-          : props.inactiveColor
+        backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
       };
     });
 
     const onClick = (event: Event) => {
-      if (props.disable) return;
+      if (props.disable || props.loading) return;
       emit('update:modelValue', !props.modelValue);
+      emit('update:loading');
       emit('change', !props.modelValue, event);
     };
 

src/packages/__VUE/switch/index.vue

@@ -1,21 +1,18 @@
 <template>
   <view :class="classes" @click="onClick" :style="style">
     <view class="switch-button">
-      <view v-show="!modelValue" class="close-line"></view>
+      <nut-icon v-if="loading" :name="name" :size="size" :color="color"></nut-icon>
+      <!-- <view v-show="!modelValue" class="close-line"></view> -->
       <template v-if="activeText">
-        <view class="nut-switch-label open" v-show="modelValue">{{
-          activeText
-        }}</view>
-        <view class="nut-switch-label close" v-show="!modelValue">{{
-          inactiveText
-        }}</view>
+        <view class="nut-switch-label open" v-show="modelValue">{{ activeText }}</view>
+        <view class="nut-switch-label close" v-show="!modelValue">{{ inactiveText }}</view>
       </template>
     </view>
   </view>
 </template>
 
 <script lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('switch');
 
@@ -44,6 +41,22 @@ export default create({
     inactiveText: {
       type: String,
       default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'loading1'
+    },
+    size: {
+      type: [String, Number],
+      default: '12px'
+    },
+    color: {
+      type: String,
+      default: ''
     }
   },
   emits: ['change', 'update:modelValue'],
@@ -60,15 +73,14 @@ export default create({
 
     const style = computed(() => {
       return {
-        backgroundColor: props.modelValue
-          ? props.activeColor
-          : props.inactiveColor
+        backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
       };
     });
 
     const onClick = (event: Event) => {
-      if (props.disable) return;
+      if (props.disable || props.loading) return;
       emit('update:modelValue', !props.modelValue);
+      emit('update:loading');
       emit('change', !props.modelValue, event);
     };
 

src/packages/styles/font/config.json

@@ -113,7 +113,8 @@
         "check-disabled",
         "check-normal",
         "check-checked",
-        "loading"
+        "loading",
+        "loading1"
       ]
     }
   ]

src/packages/styles/font/demo_index.html

@@ -55,6 +55,12 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon nutui-iconfont">&#xe614;</span>
+                <div class="name">loading2</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon nutui-iconfont">&#xe601;</span>
                 <div class="name">checked</div>
                 <div class="code-name">&amp;#xe601;</div>
@@ -732,9 +738,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'nutui-iconfont';
-  src: url('iconfont.woff2?t=1620383008438') format('woff2'),
-       url('iconfont.woff?t=1620383008438') format('woff'),
-       url('iconfont.ttf?t=1620383008438') format('truetype');
+  src: url('iconfont.woff2?t=1637809232376') format('woff2'),
+       url('iconfont.woff?t=1637809232376') format('woff'),
+       url('iconfont.ttf?t=1637809232376') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -761,6 +767,15 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-loading1"></span>
+            <div class="name">
+              loading2
+            </div>
+            <div class="code-name">.nut-icon-loading1
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon nutui-iconfont nut-icon-checked"></span>
             <div class="name">
               checked
@@ -1779,6 +1794,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-loading1"></use>
+                </svg>
+                <div class="name">loading2</div>
+                <div class="code-name">#nut-icon-loading1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#nut-icon-checked"></use>
                 </svg>
                 <div class="name">checked</div>

src/packages/styles/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nutui-iconfont"; /* Project id 2166874 */
-  src: url('iconfont.woff2?t=1620383008438') format('woff2'),
-       url('iconfont.woff?t=1620383008438') format('woff'),
-       url('iconfont.ttf?t=1620383008438') format('truetype');
+  src: url('iconfont.woff2?t=1637809232376') format('woff2'),
+       url('iconfont.woff?t=1637809232376') format('woff'),
+       url('iconfont.ttf?t=1637809232376') format('truetype');
 }
 
 .nutui-iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nut-icon-loading1:before {
+  content: "\e614";
+}
+
 .nut-icon-checked:before {
   content: "\e601";
 }

src/packages/styles/font/iconfont.json

@@ -6,6 +6,13 @@
   "description": "nutui 3.0字体管理",
   "glyphs": [
     {
+      "icon_id": "1388116",
+      "name": "loading2",
+      "font_class": "loading1",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
       "icon_id": "21445300",
       "name": "checked",
       "font_class": "checked",

src/sites/mobile-taro/vue/project.config.json

@@ -5,28 +5,38 @@
   "appid": "wxf2b976b67dab3882",
   "setting": {
     "urlCheck": true,
-    "scopeDataCheck": false,
-    "coverView": true,
     "es6": false,
+    "enhance": true,
     "postcss": true,
-    "compileHotReLoad": false,
-    "lazyloadPlaceholderEnable": false,
     "preloadBackgroundData": false,
     "minified": true,
-    "autoAudits": false,
     "newFeature": false,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
     "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
     "uploadWithSourceMap": true,
-    "useIsolateContext": true,
-    "nodeModules": false,
-    "enhance": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
     "useMultiFrameRuntime": true,
     "useApiHook": true,
     "useApiHostProcess": true,
-    "showShadowRootInWxmlPanel": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "enableEngineNative": false,
+    "useIsolateContext": true,
+    "userConfirmedBundleSwitch": false,
     "packNpmManually": false,
     "packNpmRelationList": [],
-    "minifyWXSS": true
+    "minifyWXSS": true,
+    "showES6CompileOption": false
   },
   "compileType": "miniprogram",
   "simulatorType": "wechat",

src/sites/mobile-taro/vue/src/feedback/pages/switch/index.vue

@@ -10,6 +10,11 @@
       <nut-switch v-model="checked" disable />
     </nut-cell>
 
+    <h2>加载状态</h2>
+    <nut-cell>
+      <nut-switch v-model="checked" loading color="red" />
+    </nut-cell>
+
     <h2>change事件</h2>
     <nut-cell>
       <nut-switch v-model="checked" @change="change" />
@@ -17,26 +22,17 @@
 
     <h2>异步控制</h2>
     <nut-cell>
-      <nut-switch :model-value="checkedAsync" @change="changeAsync" />
+      <nut-switch :model-value="checkedAsync" @change="changeAsync" :loading="loadingAsync" />
     </nut-cell>
 
     <h2>自定义颜色</h2>
     <nut-cell>
-      <nut-switch
-        v-model="checked"
-        @change="switchChange"
-        active-color="blue"
-      />
+      <nut-switch v-model="checked" @change="switchChange" active-color="blue" />
     </nut-cell>
 
     <h2>支持文字</h2>
     <nut-cell>
-      <nut-switch
-        v-model="checked"
-        @change="switchChange"
-        active-text="开"
-        inactive-text="关"
-      />
+      <nut-switch v-model="checked" @change="switchChange" active-text="开" inactive-text="关" />
     </nut-cell>
   </div>
 </template>
@@ -48,20 +44,24 @@ export default {
     let { proxy } = getCurrentInstance() as any;
     const checked = ref(true);
     const checkedAsync = ref(true);
+    const loadingAsync = ref(false);
 
     const change = (value: boolean, event: Event) => {
       console.log(`触发了change事件，开关状态：${value}`);
     };
     const changeAsync = (value: boolean, event: Event) => {
       console.log(`2秒后异步触发 ${value}`);
+      loadingAsync.value = true;
       setTimeout(() => {
         checkedAsync.value = value;
+        loadingAsync.value = false;
       }, 2000);
     };
 
     return {
       checked,
       checkedAsync,
+      loadingAsync,
       change,
       changeAsync
     };