made the delete component look all pretty, some place holders, removed

src/views/products/components/EditorImage.vue

@@ -1,28 +1,26 @@
 <template>
-  <div class="upload-container">
+  <div>
     <el-button icon="el-icon-delete" size="mini" type="danger" @click=" dialogVisible=true">
       Delete
     </el-button>
     <el-dialog :visible.sync="dialogVisible">
-      <el-upload
+      <div>
-        :multiple="true"
+        <h3>
-        :file-list="fileList"
+          Are you sure you want to delete this {{ type }} ?
-        :show-file-list="true"
+        </h3>
-        :on-remove="handleRemove"
+        <p>To delete this {{ type }}, type in <b>{{ name }}</b> and click delete</p>
-        :on-success="handleSuccess"
+      </div>
-        :before-upload="beforeUpload"
+      <el-row :gutter="20">
-        class="editor-slide-upload"
+        <el-col :span="12" :offset="6">
-        action="https://httpbin.org/post"
+          <div class="inputBox">
-        list-type="picture-card"
+            <el-input v-model="input" placeholder="Please input" />
-      >
+          </div>
-        <el-button size="small" type="primary">
+        </el-col>
-          Click upload
+      </el-row>
-        </el-button>
-      </el-upload>
       <el-button @click="dialogVisible = false">
         Cancel
       </el-button>
-      <el-button type="primary" @click="handleSubmit">
+      <el-button type="danger" :disabled="isNameCorrect" @click="handleSubmit">
         Confirm
       </el-button>
     </el-dialog>
@@ -42,8 +40,10 @@ export default {
   data() {
     return {
       dialogVisible: false,
-      listObj: {},
+      isNameCorrect: true,
-      fileList: []
+      input: '',
+      type: 'product',
+      name: 'Kerosenos'
     }
   },
   methods: {
@@ -101,10 +101,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.editor-slide-upload {
+.inputBox {
   margin-bottom: 20px;
-  /deep/ .el-upload--picture-card {
-    width: 100%;
-  }
 }
 </style>