vue3 elementPlus的二次开发之el-radio的功能开发

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
第二章 关于el-radio的二次开发

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
关于el-radio的二次开发，需求如下，生成一个单选但是可以取消单选的el-radio

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、成果展示

二、使用步骤

1.使用方式

代码如下（示例）：

  <elRadioCheckbox v-model="value1" :options="optionList" style="position: absolute;left:50%;top: 54%;width: 220px; height: 30px">
  </elRadioCheckbox>
const optionList = [
  { label: '项目一', checked: true },
  { label: '项目二', checked: false },
  { label: '项目三', checked: false }
]

2.组件封装

代码如下（示例）：

<!--
 * @Author: Liuhaiyang 1143391936@qq.com
 * @Date: 2024-02-17 13:58:13
 * @LastEditors: Liuhaiyang 1143391936@qq.com
 * @LastEditTime: 2024-03-24 16:39:17
 * @FilePath: \bjsw-md\src\componentList\Form\el_input.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main">
    <el-checkbox v-model="checkBoxValue[item.label]" style="margin-right: 5px;" @change="handleCheckAllChange($event, item.label)" v-for="(item, index) in options" :key="index">{{ item.label }}</el-checkbox>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from 'vue';

const props = defineProps({
  modelValue: {
    type: String
  },
  options: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['update:modelValue']);
const fromData = ref(props.modelValue);
const checkBoxValue = ref({})
const handleCheckAllChange = (e, atr) => {
  props.options.forEach(res => {
    checkBoxValue.value[res.label] = false
  })
  if (e) {
    checkBoxValue.value[atr] = true
    fromData.value = atr
  } else {
    fromData.value = ''
  }
}
// 监听 fromData 变化，并在变化时触发事件更新父组件的数据
watch(fromData, (newValue) => {
  emit('update:modelValue', newValue);
})
onMounted(()=>{
  props.options.forEach(res => {
    checkBoxValue.value[res.label] = res.checked
  })
})
</script>
<style lang="scss" scoped>
.main{
  width: 100%;
  height: 100%;
  // background-color: red;
  display: flex;
  align-items: center;
  font-size: 12px;
  flex-wrap: wrap;
}
.el-input{
  height: 100%;
}
.el-select{
  // height: 100%;
}
:deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  border: none
}
:deep(.el-input__inner) {
  color: #fff;
  font-size: 12px;
  text-align: center;
}
:deep(.el-select__wrapper) {
  box-shadow: none;
  background-color: transparent;
  border: none!important;;
}
:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
  box-shadow: none;
}
:deep(.el-select__placeholder) {
  color: #fff;
}
:deep(.el-select__wrapper) {
  display: flex;
  align-items: center;
  min-height: 0;
  height: 100%;
}
:deep(.el-popper__arrow) {
  background-color: red!important;
}
:deep(.el-select-dropdown__item.selected) {
     color: red !important;
 }
 .blueBack {

 .el-select-dropdown__item.hover,
 .el-select-dropdown__item:hover {
     background: #fff !important;
 }

 .el-select-dropdown__item {
     color: #cfcfcf !important;
 }

 .el-select-dropdown__item.selected {
     background: #fff !important;
 }
}
:deep(.el-checkbox__label) {
  margin-left: 2px;
  padding-left: 2px;
}
</style>

---

总结

提示：这里对文章进行总结：

使用方式 尽可能和el-radio的方式一样