<template> <div class="dee-radio-image-group-com"> <el-radio-group v-model="cloneValue" class="dee-radio-image-group" @change="change" @input="change"> <el-radio-button v-for="(item, index) in list" :key="index" :label="item.id" :disabled="item.disabled"> <div class="dee-image" :style="{width: item.width || 'auto', height: item.height || 'auto',}"> <el-image v-if="item.src" class="image" :src="item.src" :style="{width: item.imgWidth || '100px', height: item.imgHeight || '60px',}" fit="fill" /> <span class="demonstration">{{ item.name }}</span> </div> </el-radio-button> </el-radio-group> </div> </template> <script> export default { name: 'DeeRadioImageGroup', props: { options: { type: Array, default: () => { return [] } }, value: { type: [String, Number], default: () => { return '' } } }, data() { return { cloneValue: '' } }, computed: { list() { const options = JSON.parse(JSON.stringify(this.options)) return options.map(el => { if (el.src) { if (!el.src.startsWith('http') && !(el.src.startsWith('data:') && el.src.includes(';base64,'))) { el.src = `${el.src}` } } return el }) } }, watch: { value(val) { this.cloneValue = val } }, methods: { change(e) { this.$emit('input', e) } } } </script> <style lang="scss"> .dee-radio-image-group-com { .dee-radio-image-group { margin-top: 20px; .dee-image{ display: flex; flex-direction: column; align-items: center; justify-content: center; .image{ } .demonstration { transform: translateY(10%); } } .el-radio-button__inner{ border-left: 1px solid #DCDFE6; padding: 0; padding-bottom: 5px; width: 100px; height: 80px; } .el-radio-button { padding: 10px; } } } </style>