moreAction 提取

src/components/MoreAction.vue

+<template>
+   <van-popup 
+    v-model="showAction"
+    round 
+    class="more-action"
+    position="bottom"
+  >
+    <van-grid :column-num="3" :gutter="10" :border="false">
+      <van-grid-item 
+        v-for="({icon, text, action}, index) in menuList"
+        :key="index"
+        icon="photo-o"
+        :text="text"
+        @click="actionHandler(action)"
+        >
+        <template #icon>
+          <common-svg :name="icon" :width="'44px'" :height="'44px'"></common-svg>
+        </template>
+      </van-grid-item>
+    </van-grid>
+    <van-button block round @click="cancel">取消</van-button>
+  </van-popup>
+</template>
+
+<script lang="ts">
+import { Component, Prop, PropSync, Vue, Emit, Inject, Model } from 'vue-property-decorator';
+import { ChainStatus } from '@/const/enum';
+import { ChainStatusStr } from '@/const/constants';
+@Component({
+  name: 'MoreAction',
+  components: {
+  },
+})
+export default class MoreAction extends Vue {
+  @PropSync('show', { type: Boolean, required: true })
+  private showAction!: boolean;
+  @Prop ({ type: Array, default: () => []})
+  private menuList!: any[];
+  private actionHandler(action: any) {
+    this.showAction = false;
+    action();
+  }
+  @Emit('cancel')
+  private cancel() {
+    this.showAction = false;
+  }
+}
+</script>
+<style scoped lang="scss">
+  
+</style>

src/components/index.ts

 import { importAll } from '@/utils/utils';
 const components = importAll(require.context('@/components/', true,  /\.vue$/ ));
+import { List, Image, Empty, Field, Dialog, GridItem, Grid, Button, Popup } from 'vant';
 export default {
     install(Vue: any) {
+        Vue.component(List.name, List);
+        Vue.component(Image.name, Image);
+        Vue.component(Empty.name, Empty);
+        Vue.component(Field.name, Field);
+        Vue.component(GridItem.name, GridItem);
+        Vue.component(Grid.name, Grid);
+        Vue.component(Button.name, Button);
+        Vue.component(Popup.name, Popup);
+        Vue.component(Dialog.Component.name, Dialog.Component);
         Object.keys(components).forEach((key: string) => {
             Vue.component(key, components[key]);
         });

src/views/template/Add.vue

@@ -47,43 +47,7 @@
       <transition name="van-slide-up">
         <preview-template :data="data" v-if="preview" @cancel="preview = false" @employ="employ"></preview-template>
       </transition> 
-          <van-popup 
-            v-model="showAction" 
-            round 
-            class="more-action"
-            position="bottom"
-          >
-            <van-grid :column-num="3" :gutter="10" :border="false">
-              <van-grid-item 
-                icon="photo-o"
-                text="在上添加"
-                @click="addBefore"
-                >
-                <template #icon>
-                  <common-svg name="zaishangtianjia" :width="'44px'" :height="'44px'"></common-svg>
-                </template>
-              </van-grid-item>
-              <van-grid-item 
-                icon="photo-o"
-                text="在下添加"
-                @click="addAfter"
-                >
-                <template #icon>
-                  <common-svg name="zaixiatianjia" :width="'44px'" :height="'44px'"></common-svg>
-                </template>
-              </van-grid-item>
-              <van-grid-item 
-                icon="photo-o"
-                text="删除"
-                @click="delWord"
-                >
-                <template #icon>
-                  <common-svg name="shanchu4" :width="'44px'" :height="'44px'"></common-svg>
-                </template>
-              </van-grid-item>
-            </van-grid>
-            <van-button block round @click="showAction = false;">取消</van-button>
-          </van-popup>     
+      <more-action :show.sync="showAction" :menuList="menuList"></more-action>   
    </div>
 </template>
 <script lang="ts">
@@ -383,6 +347,23 @@ export default class Add extends Vue {
     return obj[`obj${this.level}`];
   }
   private showAction: boolean = false;
+  private menuList: any[] = [
+    {
+      icon: 'zaishangtianjia',
+      text: '在上添加',
+      action: this.addBefore.bind(this),
+    },
+    {
+      icon: 'zaixiatianjia',
+      text: '在下添加',
+      action: this.addAfter.bind(this),
+    },
+    {
+      icon: 'shanchu4',
+      text: '删除',
+      action: this.delWord.bind(this),
+    },
+  ];
   private currentIndex: number = -1;
   private parentIndex: number = -1;
   private flag: string = '';