修改按钮组件

components/page/Vcard.vue

@@ -74,7 +74,6 @@
               <slot name="leftBottom" v-if="leftOneName">
                 <Icon :type="leftOneIcon" class="iconStyle" />
                 {{ leftOneName }}
-                <!--   v-show="leftBtmicon" -->
               </slot>
             </span>
             <span class="overdue f14 fwBold mr20">
@@ -84,9 +83,9 @@
               </slot>
             </span>
           </div>
-          <span class="rightMore">
+          <div class="rightMore">
             <slot name="rightBottom"> </slot>
-          </span>
+          </div>
         </div>
       </div>
     </div>
@@ -283,7 +282,7 @@ export default {
       }
     }
     .bottomCard {
-      justify-content: space-between;
+      // justify-content: space-between;
       padding-bottom: 20px;
       padding-left: 14px;
       .leftBtm {
@@ -307,9 +306,6 @@ export default {
 }
 .cardBox:hover {
   box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
-  // .topCard {
-  //   background: rgba(38, 128, 235, 0.4);
-  // }
 }
 .borderCss {
   border: 2px solid #2680eb;

components/page/rightM.vue

 <template>
-  <div
-    class="rightM flex"
-    :class="{ mr10: num == 1 }"
-    v-if="rightM && rightList"
-    @mouseleave="outPut"
-  >
-    <slot >
-      <op   v-if="rightList && rightList.slice(0, num).length > 0"
-        v-for="(v, i) in rightList.slice(0, num)"
-        :key="i"
-        :title="v.name"
-        :type="v.type"
-        :msg="v.msg"
-        :disable="v.disable" 
-        @click="v.click(row,$event)"
-      >
-       <Icon :type="v.icon==null || v.icon==undefined ? 'ios-paper':v.icon" v-if="v.type=='icon'||  v.type=='' || v.type==undefined || v.type==null "/>
-        <span v-if="v.name">
-          {{ v.name }}
-        </span>
-      </op>
-      <span
-        class="elliPsis fwBold"
-        slot="elliPsis"
-        v-if="rightList && rightList.length > num > 0"
-      >
-        <span :class="{ hide: inlines, mr10: !inlines }" @mouseenter="inFo"
-          >•••</span >
-        <span class="mr10" :class="{ inline: inlines, hide: !inlines }">
-          <op
-            v-for="(value, index) in rightList.slice(num)"
-            :key="index"
-            :title="value.name"
-            :type="value.type"
-            :msg="value.msg"
-            :disable="value.disable"
-            @click="value.click(row,$event)"
-            v-if="rightList &&  rightList.slice(num).length >= num"
-          >
-            <Icon :type="value.icon==''?'ios-paper':value.icon" v-if="value.type=='icon'|| value.type=='' || value.type==undefined || value.type==null"/>
-            <span v-if="value.name">
-              {{ value.name }}
-            </span>
-          </op>
-        </span>
-      </span>
-    </slot>
+  <div class="rightM pr" v-if="rightM && rightList">
+    <div class="flex rightMbtns mr10" :class="{'pa':!more}"  @mouseleave="more=true" >
+      <slot>
+        <op
+          class="mr5 opBtns tc"
+          v-if="btnBoxList && btnBoxList.length > 0"
+          v-for="(v, i) in btnBoxList"
+          :key="i"
+          :title="v.name"
+          :type="v.type"
+          :msg="v.msg"
+          :disable="v.disable == null || v.disable == undefined ? false : true"
+          @click.native="v.click(row,$event)"
+        >
+          <Icon
+            :type="v.icon == null || v.icon == undefined ? 'ios-paper' : v.icon"
+            v-if="
+              v.type == 'icon' ||
+              v.type == '' ||
+              v.type == undefined ||
+              v.type == null
+            "
+          />
+          <span v-if="v.name">
+            {{ v.name }}
+          </span>
+        </op>
+         <div
+          class="elliPsis fwBold mr10"
+          v-if="num<rightList.length&&more"
+          @mouseenter="more=false"
+        >
+          •••
+        </div>
+      </slot>
+    </div>
+   
   </div>
 </template>
 <script>
 export default {
+  name: "rm",
   data() {
     return {
-      inlines: false,
-      btnBoxList: [],
+      more: true,
     };
   },
   props: {
     row: {
-     type:[Object,Array],
-      default: []
+      type: [Object, Array],
+      default: [],
     },
     rightList: {
-       type:[Object,Array],
+      type: Array,
       default: [],
     },
     num: {
@@ -75,25 +65,44 @@ export default {
     },
   },
   mounted() {
-    //   console.log("$slots",this.$slots,this.$slots.default)
   },
   methods: {
-    inFo() {
-      this.inlines = true;
-    },
-    outPut() {
-      this.inlines = false;
-    },
+  //  hello(row,event){
+  //   console.log('111',row,event)
+  //  }
   },
+  computed:{
+    btnBoxList(){
+      if(this.num>=this.rightList.length){
+        return this.rightList;
+      }else {
+         if(this.more)
+          return  this.rightList.slice(0, this.num);
+          else
+          return this.rightList;
+      }
+    
+    }
+  }
 };
 </script>
-
-<style lang="less" scoped>
+<style lang="less" >
 .rightM {
+  overflow: visible;
   cursor: pointer;
-  height: auto;
+  width: 100%;
+  height: 100%;
   .elliPsis {
     color: #2680eb;
   }
+  .rightMbtns{
+    background: #ffffff;
+    right: 0;
+    top:-12px;
+    z-index: 99;
+  }
+  .opBtns{
+    min-width: 55px;
+  }
 }
 </style>
\ No newline at end of file

plugins/iview.js

@@ -171,12 +171,10 @@ Vue.component("FilesViewer", FilesViewer)
 Vue.use(Contextmenu);
 
 //注入mock
-// require("../mock")
-// Vue.component("Vcard", Vcard)
-// Vue.component("BtnBox", BtnBox)
-// Vue.component("RightM", RightM)
-//注入mock
-// require("../mock")
+require("../mock")
+Vue.component("Vcard", Vcard)
+Vue.component("BtnBox", BtnBox)
+Vue.component("RightM", RightM)
 
 Vue.prototype.$api = request;
 Vue.prototype.$http = Api;