使用双向绑定封装单击按钮radio

最新推荐文章于 2023-12-12 20:58:11 发布

穹刀

最新推荐文章于 2023-12-12 20:58:11 发布

阅读量803

点赞数

分类专栏： web前端 vue 文章标签： elementui html css vue 组件化

本文链接：https://blog.csdn.net/qq_33527943/article/details/122657701

版权

本文介绍了如何在Vue中封装一个具有双向绑定功能的单选按钮组件。在实践中，作者发现尽管ElementUI的radio组件使用方便，但在自定义样式时遇到了挑战。通过学习和实践，作者实现了期望的样式，并分享了实现代码。

摘要由CSDN通过智能技术生成

前言

之前一直用的是elementui的radio,用的时候挺好用也挺简单的,直到最近工作中要自己封装一个,才发现这小东西也挺磨人的,于是自己在动手写一个的时候才发现原来自己还有这么多知识点没搞清楚

原始radio

原始的单选框直接将input的type设置为radio,但是样式却改不了

<input type="radio" />

但需要的样式必须是这样的

废话不多说,上代码

<template>
  <span class="radioList radioLink">
    <span class="radioArea">
      <label>
        <input type="radio"
               :value="label"
               class="radioInput"
               v-model="model"
               :disabled="disabled">
        <!-- 定义里面的点 -->
        <span class="radioSelect"&g