From 9697b15a4c1bc1febfc4c9949631f0bac0f913ff Mon Sep 17 00:00:00 2001
From: wangqing <250543222@qq.com>
Date: Thu, 13 May 2021 22:28:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=9B=BE=E7=89=87=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/ImageSelect/index.vue | 60 +++++++++++++++++------
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/components/Form/ImageSelect/index.vue b/src/components/Form/ImageSelect/index.vue
index 17a9ee3..078527e 100644
--- a/src/components/Form/ImageSelect/index.vue
+++ b/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"
-            @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-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: {
-        onChange(e) {
-            console.log(e)
-            console.log(JSON.stringify(this.options))
-            this.$emit('change', e)
+    data() {
+        return {
+            selectValue: this.value
         }
+    },
+    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>