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

 <template>
    <div class="template">
-     <base-info @next="next" @cancel="cancelCreateTempl"></base-info>
-      <div v-for="(item,index) in data" :key="index" class="template-item van-hairline--top">
-        <div v-if="item.type === 3">
-          <div style="display:flex;flex-direction:row;justify-content:space-between;" class="data-item van-hairline--bottom">
-            <div style="color:#353535;font-size:18px;font-weight:500;">{{item.label}}</div>
-            <div style="width: 30px;text-align:center;">
-                <common-svg name="cunzhengliebiao-gengduo" @click.native="showActionHandler(index)" width="20px" height="20px"></common-svg>
-            </div>
-            <!-- <div @click="preAddWord(2,item)" style="color:#3F79FE;font-size:16px;">添加字段</div> -->
+    <base-info @next="next" @cancel="cancelCreateTempl"></base-info>
+    <div v-for="(item,index) in data" :key="index" class="template-item van-hairline--top">
+      <div v-if="item.type === 3">
+        <div style="display:flex;flex-direction:row;justify-content:space-between;" class="data-item van-hairline--bottom">
+          <div style="color:#353535;font-size:18px;font-weight:500;">{{item.label}}</div>
+          <div style="width: 30px;text-align:center;">
+              <common-svg name="cunzhengliebiao-gengduo" @click.native="showActionHandler(index)" width="20px" height="20px"></common-svg>
           </div>
-          <div v-for="(item, index2) in item.data" :key="index2" class="data-item van-hairline--bottom" style="margin-top:10px;">
-            <div style="font-size:15px;color:#353535;">{{item.label}}</div>
-            <div style="font-size:10px;color:#818181;">字段类型: {{typeObj[item.type]}}</div>
-            <common-svg name="cunzhengliebiao-gengduo" class="icon" width="20px" height="20px" @click.native="showActionHandler(index2, index)"></common-svg>
-          </div>
-          <div @click="preAddWord(2,item)" style="color:#B6B5BA;font-size:16px;text-align:center;padding:12px;background:#FFFFFF;"><common-svg name="tianjia1" width="16px" height="16px" style="margin-right:5px"></common-svg>添加下一级</div>
+          <!-- <div @click="preAddWord(2,item)" style="color:#3F79FE;font-size:16px;">添加字段</div> -->
         </div>
-        <div v-else>
-          出错了
+        <div v-for="(item, index2) in item.data" :key="index2" class="data-item van-hairline--bottom" style="margin-top:10px;">
+          <div style="font-size:15px;color:#353535;">{{item.label}}</div>
+          <div style="font-size:10px;color:#818181;">字段类型: {{typeObj[item.type]}}</div>
+          <common-svg name="cunzhengliebiao-gengduo" class="icon" width="20px" height="20px" @click.native="showActionHandler(index2, index)"></common-svg>
         </div>
+        <div @click="preAddWord(2,item)" style="color:#B6B5BA;font-size:16px;text-align:center;padding:12px;background:#FFFFFF;"><common-svg name="tianjia1" width="16px" height="16px" style="margin-right:5px"></common-svg>添加下一级</div>
+      </div>
+      <div v-else>
+        出错了
       </div>
+    </div>
       <div class="add-word"
         @click="preAddWord(1)">
         <common-svg name="tianjia" style="margin-right:10px;"></common-svg>添加一级标题
@@ -41,49 +41,13 @@
             @click="show2 = true;"
            style="text-align:left;display:flex;justify-content:space-between;padding:16px;color:#999999;font-size:14px;"><span>字段类型</span> <span>{{typeObj[wordType]}}</span></div>
       </van-dialog>
-       <transition name="van-slide-up">
+      <transition name="van-slide-up">
         <add-option v-if="show2" @back="show2=false" @confirmWordType="confirmWordType"></add-option>  
       </transition> 
       <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 = '';
@@ -569,4 +550,4 @@ export default class Add extends Vue {
         grid-template-columns: repeat(3,100px);
       }
     }
-</style>
+</style>
\ No newline at end of file