tag

src/components/Tag/index.vue

@@ -14,7 +14,7 @@
     <span class="add-tag" @click="addTag">打标</span>
 
     <!-- 弹窗 -->
-    <div v-if="visible" class="dialogbox">
+    <div v-if="visible" class="tag_dialogbox">
       <div class="box">
         <div class="title">
           <span class="line" />
@@ -22,35 +22,34 @@
           <i class="el-icon-close icon" @click="visible = false" />
         </div>
         <div class="body">
-          <el-form-item style="width: 100%;margin-right: 0;" :rules="[{ required: true, message: '标签不能为空'}]" label="标签：" class="tag-from">
-           <el-select
-            ref="select"
-            v-model="tagSelectValue"
-            style="width: 100%;"
-            multiple
-            remote
-            filterable
-            allow-create
-            default-first-option
-            :placeholder="placeholder"
-            :remote-method="remoteMethod"
-            @click.stop
-            @change="change"
-          >
-            <el-option
-              v-for="(item, itemIndex) in options"
-              :key="itemIndex"
-              :label="item"
-              :value="item"
+          <div class="tag-from_item">
+            <div class="tag-from__label">标签：</div>
+            <div class="tag-from__content">
+              <el-select
+              ref="select"
+              v-model="tagSelectValue"
+              style="width: 100%;"
+              multiple
+              remote
+              filterable
+              allow-create
+              default-first-option
+              :placeholder="placeholder"
+              :remote-method="remoteMethod"
+              @click.stop
+              @change="change"
             >
-              {{ item }}
-            </el-option>
-          </el-select>
-      <template slot="footer">
-        <el-button size="small" @click="close">取消</el-button>
-        <el-button size="small" type="primary" @click="ok">确定</el-button>
-      </template>
-          </el-form-item>
+              <el-option
+                v-for="(item, itemIndex) in options"
+                :key="itemIndex"
+                :label="item"
+                :value="item"
+              >
+                {{ item }}
+              </el-option>
+            </el-select>
+            </div>
+          </div>
         </div>
         <div class="footer">
           <el-button size="small" @click="close">取消</el-button>
@@ -167,7 +166,7 @@ export default {
   }
 }
 
-.dialogbox {
+.tag_dialogbox {
   .box {
     position: fixed;
     top:20vh;
@@ -220,6 +219,15 @@ export default {
       .tag-from .el-form-item__content {
         width: calc(100% - 100px);
       }
+      .tag-from_item{
+        display: flex;
+        .tag-from__label {
+          width: 50px;
+        }
+        .tag-from__content {
+          flex: 1;
+        }
+      }
     }
     .footer {
       padding: 0 20px 15px;