vue自定义组件之单选框组件

最新推荐文章于 2024-08-14 10:04:35 发布

星辰之嗨

最新推荐文章于 2024-08-14 10:04:35 发布

阅读量1.5k

点赞数 1

分类专栏： vue ES6

本文链接：https://blog.csdn.net/qq_37200689/article/details/85279106

版权

为了解决原生单选框样式与网页整体风格不匹配的问题，本文介绍了如何创建一个自定义Vue单选框组件。该组件支持v-model双向绑定、disabled属性禁用、label属性定义值以及点击触发change事件。提供了详细的代码实现、使用方法和动画效果展示。

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

由于原生的单选框的样式太丑，在网页中使用与整体的样式不搭配。因此需要自定义样式

实现功能

自定义v-model，使组件之间数据能够进行双向绑定。
使用disabled属性禁用radio。
使用label属性定义radio的值。
当用户点击radio时触发组件上绑定的change事件。

代码实现

template

<template>
  <label role="radio" aria-checked="true" class="lg-radio"
  :class="{'checked': checked, 'disabled': disabled}">
    <span class="lg-radio__icon"></span>
    <input type="radio" ref="radio" class="lg-radio__original" :value="label" @click="select"
    :disabled='disabled'>
    <span class="lg-radio__label">
      <slot></slot>
    </span>
  </label>
</template>