element plus单选框实现默认选中
·
需实现一个默认选中的单选框 点击可以切换样式 效果如下
1 单选框的基本代码
<el-radio-group v-model="checkboxGroup2" @change="check">
<el-radio-button
v-for="(item, index) in modelStore.select"
:key="index"
:label="item"
>{{ item }}</el-radio-button
>
</el-radio-group>
<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { useModelStore } from '@/stores/model.js' // 存放了一些标签名
const modelStore = useModelStore()
const checkboxGroup2 = ref(['']) // 收集标签
function check (tag) {
console.log('tag', tag) // 监听标签的变化
}
onMounted(() => {
checkboxGroup2.value = ['全部']
console.log('checkboxGroup2.value', checkboxGroup2.value)
loadMoreData()
})
</script>
store/model.js的代码
import { defineStore } from 'pinia'
import { reactive, ref } from 'vue'
export const useModelStore = defineStore('model', () => {
const select = ['全部', '人物', '武器', '建筑', '战争']
const selectList = ref([])
return { select, selectList }
})
目前鼠标划过的效果为这样 , 还是没有默认选中 '"全部" , 且能监听到标签的变化
2 因为默认情况下单选框不会自动应用选中项的 CSS , 用:class和计算属性来判断当前项是否被选中
<el-radio-group v-model="checkboxGroup2" @change="check">
<el-radio-button
v-for="(item, index) in modelStore.select"
:key="index"
:label="item"
:class="{ selected: isSelected(item) }" // :class来监听标签的变化
>{{ item }}</el-radio-button
>
</el-radio-group>
<script setup>
const isSelected = computed(() => item => checkboxGroup2.value.includes(item))
<style lang="less" scoped>
.selected {
background-color: #409eff;
}
:deep(.el-radio-button__inner) {
border: none; // 去除单选框默认携带的边框
border-radius: 3px;
transition: none; // 解决下面的过渡效果
}
</style>
目前得到了默认选中的单选框 , 但发现在切换标签时按钮左侧会变化 (按钮会从红色过渡到绿色)
我本以为是bfc的原因 , 找了单选框属性中的el-radio-button__original-radio和el-radio-button__inner一直做margin和padding方面的处理 , 后来发现是过渡效果
3 拓 : vue3 element plus单选框默认不支持数组传入 , 我的项目中传入了数组 , 会报下图这样的警告 , 想清除警告可以去main.js中设置
const app = createApp(App)
app.config.productionTip = false //禁掉vue的warn提醒
app.config.warnHandler = () => {}
app.config.runtimeCompiler = true
app.use(pinia)
app.use(router)
app.mount('#app')
更多推荐
已为社区贡献4条内容
所有评论(0)