no message

src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/components/featureControls.vue

+<template>
+  <div class="featureControls">
+    <div class="row-aic featureControls-bottom featureControls-bottomOne"
+    v-if="ControlsType=='row'">
+      <div @click="toAddPages">
+        <el-tooltip class="item" effect="dark" content="添加页面" placement="top">
+          <i class="el-icon-plus"></i>
+        </el-tooltip>
+      </div>
+      <div @click="toDeletePages" v-if="isDeletePage">
+        <el-tooltip class="item" effect="dark" content="删除页面" placement="top">
+          <i class="el-icon-delete"></i>
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="column featureControls-bottom featureControls-bottomTwo"
+    v-else>
+      <div v-if="!isTemplate">
+        <el-popover trigger="hover" placement="right">
+          <div class="featureControls-Template">
+            <div class="Template-img relative" v-for="(item,index) in TemplateList"
+            @click="setTemplate(item)">
+              <img :src="item.url"/>
+              <div v-if="item.id==TemplateType" class="Template-imgSelect absolute row-ajc el-icon-success"></div>
+            </div>
+          </div>
+          <div slot="reference" style="padding: 0;">
+            <el-tooltip class="item" effect="dark" content="选模版" placement="top">
+              <i class="el-icon-copy-document"></i>
+            </el-tooltip>
+          </div>
+        </el-popover>
+      </div>
+      <div @click="toUploadImg">
+        <el-tooltip class="item" effect="dark" content="上传图" placement="top">
+          <i class="el-icon-upload2"></i>
+        </el-tooltip>
+      </div>
+      <div @click="toSelectImg">
+        <el-tooltip class="item" effect="dark" content="选图" placement="top">
+          <i class="el-icon-search"></i>
+        </el-tooltip>
+      </div>
+      <div @click="toAddImg" v-if="isAddImg">
+        <el-tooltip class="item" effect="dark" content="添加图" placement="top">
+          <i class="el-icon-plus"></i>
+        </el-tooltip>
+      </div>
+      <div @click="toDeleteImg" v-if="isDeleteImg">
+        <el-tooltip class="item" effect="dark" content="删除图" placement="top">
+          <i class="el-icon-delete"></i>
+        </el-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    components: {
+
+    },
+    props: ['ControlsType','pagesType','isDeletePage',
+    'isAddImg','isDeleteImg','isTemplate','Template'],
+    data() {
+      return {
+        TemplateType: 1,
+        TemplateImg: 'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateOne.png',
+        TemplateList:[
+          {
+            url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateOne.png',
+            id:1,
+          },
+          {
+            url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateTwo.png',
+            id:2,
+          },
+          {
+            url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateThree.png',
+            id:3,
+          }
+        ]
+      };
+    },
+    methods: {
+      setTemplate(item){
+        this.TemplateType = item.id
+        this.TemplateImg = item.url
+      },
+      toUploadImg(){
+        this.$emit('toUploadImg')
+      },
+      toSelectImg(){
+        this.$emit('toSelectImg')
+      },
+      toAddImg(){
+        this.$emit('toAddImg')
+      },
+      toDeleteImg(){
+        this.$emit('toDeleteImg')
+      },
+      toAddPages(){
+        // this.pagesType 1 首页 2 介绍 3餐食介绍 4宿 5食 6景
+        this.$emit('toAddPages')
+      },
+      toDeletePages(){
+        this.$emit('toDeletePages')
+      },
+    },
+    computed: {},
+    watch: {
+      // FeatureData: {
+      //   handler(val, oldVal) {
+
+      //   },
+      //   deep: true
+      // },
+    },
+    mounted() {
+
+    }
+  };
+
+</script>
+
+<style>
+.featureControls{
+
+}
+.featureControls-bottom{
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 2px;
+}
+.featureControls-bottomOne{
+  padding: 1px 10px;
+}
+.featureControls-bottomTwo{
+  padding: 5px 0;
+}
+.featureControls-bottomOne div{
+  padding: 0 5px;
+}
+.featureControls-bottomTwo div{
+  padding: 5px;
+}
+.featureControls-Template{
+  width: 150px;
+  top: -5px;
+  left: 85px;
+  background: #fff;
+  border: 4px;
+}
+.featureControls-Template div{
+  padding: 0;
+}
+.Template-img{
+  background: #e6e6e6;
+  margin: 5px 8px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.Template-img img{
+  width: 100%;
+  padding: 10px;
+  display: block;
+}
+.Template-imgSelect{
+  background: rgba(0, 0, 0, 0.7);
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  color: #e95252;
+}
+</style>