完善图片选择组件

src/components/Form/ImageSelect/index.vue

@@ -2,31 +2,37 @@
     <div>
         <el-radio-group
             v-if="!multiple"
-            v-bind="$attrs" v-on="$listeners" @change="onChange"
+            v-model="selectValue"
         >
             <div v-for="option in options" :key="option.value" class="img-radio-item">
                 <el-image
-                    class="image"
+                    :preview-src-list="[option.image]"
                     :src="option.image"
+                    class="image"
                     fit="scale-down"
-                    :preview-src-list="[option.image]"
+                >
-                />
+                    <div slot="error" class="image-slot">
+                        <i class="el-icon-picture-outline" />
+                    </div>
+                </el-image>
                 <el-radio :label="option.value">{{ option.label }}</el-radio>
             </div>
         </el-radio-group>
         <el-checkbox-group
             v-else
-            v-bind="$attrs" v-on="$listeners"
+            v-model="selectValue"
-            @change="onChange"
         >
             <div v-for="option in options" :key="option.value" class="img-radio-item">
                 <el-image
-                    class="image"
+                    :preview-src-list="[option.image]"
                     :src="option.image"
+                    class="image"
                     fit="scale-down"
-                    :preview-src-list="[option.image]"
+                >
-                />
+                    <div slot="error" class="image-slot">
-
+                        <i class="el-icon-picture-outline" />
+                    </div>
+                </el-image>
                 <el-checkbox :label="option.value">{{ option.label }}</el-checkbox>
             </div>
         </el-checkbox-group>
@@ -37,6 +43,10 @@
 export default {
     name: 'ImageSelect',
     props: {
+        value: {
+            type: Number,
+            default: 1
+        },
         options: {
             type: Array,
             default: function() {
@@ -49,12 +59,21 @@ export default {
             default: false
         }
     },
-    methods: {
+    data() {
-        onChange(e) {
+        return {
-            console.log(e)
+            selectValue: this.value
-            console.log(JSON.stringify(this.options))
-            this.$emit('change', e)
         }
+    },
+    watch: {
+        selectValue(val) {
+            this.$emit('input', val)
+        },
+        value(val) {
+            this.selectValue = val
+        }
+    },
+    methods: {
+
     }
 }
 </script>
@@ -72,6 +91,7 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1) !important;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
     margin: 3px !important;
+    background-color: #fff;
     .image {
         width: 100px;
         height: 100px;
@@ -81,4 +101,14 @@ export default {
         margin: 4px;
     }
 }
+::v-deep .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    //background: #f5f7fa;
+    color: #909399;
+    font-size: 30px;
+}
 </style>