shuiwu/src/system/IOT/controlPanel/modules/myRadio.vue

<template>
  <div class="my-radio">
    <div style="display: flex;flex-direction: column;min-width: 150px;">
      <span :style="[{'color':textColor},{'marginBottom':'5px'}]">{{ title }}</span>
      <a-radio-group v-bind="$attrs" :style="[{'--textColor':textColor}]" :disabled="disabled" @change="change">
        <a-radio :style="radioStyle" :value="item.value" v-for="item in options">{{ item.label }}</a-radio>
      </a-radio-group>
      <customBtn 
        style="text-align:right;margin-top: 10px;" btnColor="rgb(22,255,246)" 
        textColor="#000000" 
        :btnOptions="[{label:'更新',value:'timeshared'}]" 
        @clickBtn="emitData()" 
      ></customBtn>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>
import {Modal} from 'ant-design-vue'
import {ref, defineProps, defineEmits} from 'vue'
import customBtn from './customBtn.vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
let emit = defineEmits(['Change'])
let currentData = ref('')
let props = defineProps({
  title: {
    type:String
  },
  data: {
    type:[Number,String],
    default:() => ''
  },
  options: {
    type:Array,
    default:() => []
  },
  textColor: {
    type:String,
    default:() => '#ffffff'
  },
  disabled:{
    type:Boolean,
    default:() => false
  }
})
const radioStyle = ref({
  color:'#ffffff',
  marginBottom:'10px',
  fontSize:'12px'
});

let emitData = () => {
  currentData.value = props.data
  if (currentData.value === '') return
  emit('Change',currentData.value)
}

let change = (data) => {
  currentData.value = data
}
</script>

<style scoped>
/deep/.ant-radio-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/deep/.ant-radio-checked .ant-radio-inner {
  border-color: #16FFF6 !important;
}
/deep/.ant-radio-inner:after {
  background-color: #16FFF6 !important;
}
/deep/.ant-radio-inner {
  background: none;
}
/deep/.ant-radio-wrapper {
  color: var(--textColor) !important;
}
/deep/.ant-radio-disabled+span {
  color: #ffffff !important;
}
.my-radio {
  display: flex;
  justify-content: space-between;
}
/deep/.ant-radio-wrapper {
  margin: 0 !important;
}
</style>