fe：优化自定义指令

fujiazhang · Sep 8, 2021 · 5f6179c · 5f6179c
1 parent 7fbbd0c
commit 5f6179c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/src/components-base/loading/directive.js b/src/components-base/loading/directive.js
@@ -3,18 +3,22 @@ import Loading from './loading'
 
 const loadingDirective = {
     mounted(el,binding) {
-        //根据自定义指令参数 渲染对应loading的颜色 无法组件哪儿v-bind pros传值，所以这里修改
-        Loading.props.color.default = binding.value.color 
         const app = createApp(<Loading />)
-
         const instance = app.mount(document.createElement('div'))
-        el.instance = instance
+
+        binding.value.title && instance.setTitle(binding.value.title)
+        binding.value.color && instance.setColor(binding.value.color)
+
+        el.instance = instance // 存一个
 
         if(binding.value.loading){
             append(el)
         }
     },
     updated(el,binding) {
+        binding.value.title && el.instance.setTitle(binding.value.title)
+        binding.value.color && el.instance.setColor(binding.value.color)
+
         if(binding.value.loading !== binding.oldValue.loading){
             binding.value.loading? append(el) : remove(el)
         }

diff --git a/src/components-base/loading/loading.vue b/src/components-base/loading/loading.vue
@@ -1,19 +1,22 @@
 <template>
-    <div class="wrapper">
-        <span class="line1" :class="iconColor"></span>
-        <span class="line2" :class="iconColor"></span>
-        <span class="line3" :class="iconColor"></span>
-        <span class="line4" :class="iconColor"></span>
+    <div>
+        <div class="wrapper">
+            <span class="line1" :class="iconColor"></span>
+            <span class="line2" :class="iconColor"></span>
+            <span class="line3" :class="iconColor"></span>
+            <span class="line4" :class="iconColor"></span>
+        </div>
+        <div class="title">{{title}}</div>
     </div>
 </template>
 <script>
 export default {
   name:'loading',
-  props: {
-    color: {
-      type: String,
-      default:''
-    }
+  data() {
+      return {
+        title:'',
+        color:''
+      }
   },
   computed: {
     iconColor () {
@@ -29,7 +32,15 @@ export default {
       }
       return ''
     }
-  }
+  },
+  methods: {
+      setTitle(title){
+        this.title = title
+      },
+      setColor(color){
+          this.color = color
+      }
+  },
 }
 </script>
 <style lang="stylus" scoped>
@@ -91,4 +102,9 @@ span {
             height: 20px;
         }
     }
+.title
+    font-size 12px 
+    color #333
+    padding-top 10px
+    padding-left 18px
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -18,7 +18,7 @@
               </li>
             </ul> -->
           </div>
-          <div class="newSongs" v-loading="{loading:loading,color:'red'}">
+          <div class="newSongs" v-loading="{loading:loading,color:'red',title:'加载中...'}">
             <div class="new-title">
               新歌首发
             </div>