已选中的标签框添加下拉菜单

src/view/memberGroup/memberGroupEdit.vue

@@ -11,14 +11,23 @@
                 <span class="color-c0c4cc font-14">（同一个输入框内标签关系为且）</span>
               </div>
               <div class="memberGroupEdit-wrap__tags w-548 border-box">
-                <div class="memberGroupEdit-wrap__tagcell" v-for="(item, index) in selectedTagData" :key="index">
-                  <span>{{ item.tagName }}</span>
-                  <span class="memberGroupEdit-wrap__tag-name">【选择:{{ item.newTagVal }}】</span>
-                  <i class="el-icon-edit" @click="editSelTag(index, item)"></i>
-                  <i class="el-icon-delete" @click="delSelTag(index, item)"></i>
+                <el-dropdown class="memberGroupEdit-wrap__dropdown">
+                  <i class="el-icon-more"></i>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="showAddTag">添加标签</el-dropdown-item>
+                    <el-dropdown-item>删除标签</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+                <div class="memberGroupEdit-wrap__tags-box">
+                  <div class="memberGroupEdit-wrap__tagcell" v-for="(item, index) in selectedTagData" :key="index">
+                    <span>{{ item.tagName }}</span>
+                    <span class="memberGroupEdit-wrap__tag-name">【选择:{{ item.newTagVal }}】</span>
+                    <i class="el-icon-edit" @click="editSelTag(index, item)"></i>
+                    <i class="el-icon-delete" @click="delSelTag(index, item)"></i>
+                  </div>
                 </div>
               </div>
-              <el-button class="m-t-10 w-548 el-icon-plus color-blue" @click="showAddTag">&nbsp;&nbsp;添加</el-button>
+              <el-button class="m-t-10 w-548 el-icon-plus color-blue">&nbsp;&nbsp;添加</el-button>
             </el-form-item>
             <el-form-item label="" prop="groupName" class="w-220">
               <div>分组名称</div>
@@ -40,7 +49,7 @@
                 <label class="input-label textarea-label">{{ inputNumObj.describle }}/200</label>
               </template>
             </el-form-item>
-            <el-form-item label="" class="" prop="updateDay" v-if="ruleForm.isActive == 0">
+            <el-form-item label="" prop="updateDay" v-if="ruleForm.isActive == 0">
               <div>更新频率</div>
               <el-select v-model="ruleForm.updateType" placeholder="请选择" class="w-200" @change="changeRate(ruleForm.updateType)">
                 <el-option label="每日一次" value="1"></el-option>
@@ -91,6 +100,8 @@
 </template>
 
 <script>
+// TODO 点击添加按添加标签组的功能
+// TODO 选中的标签组展示框
 import navCrumb from '@/components/nav/nav.vue';
 import addTagView from '@/components/addTagView.vue';
 import tagShortDetail from '@/components/tagShortDetail.vue';
@@ -703,12 +714,25 @@ export default {
 
 <style lang="scss" scoped>
 .memberGroupEdit-wrap__tags {
-  max-height: 222px;
-  min-height: 100px;
-  padding: 12px;
+  position: relative;
+  padding: 12px 0;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
-  overflow-y: auto;
+
+  .memberGroupEdit-wrap__tags-box {
+    padding: 12px;
+    height: 150px;
+    overflow-y: scroll;
+  }
+
+  .memberGroupEdit-wrap__dropdown {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    padding: 0 8px;
+    height: 20px;
+  }
 
   .memberGroupEdit-wrap__tagcell {
     display: inline-block;