vue 单选框样式_vue自定义组件之单选框组件

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

实现功能

自定义v-model，使组件之间数据能够进行双向绑定。

使用disabled属性禁用radio。

使用label属性定义radio的值。

当用户点击radio时触发组件上绑定的change事件。

代码实现

template

:class="{'checked': checked, 'disabled': disabled}">

:disabled='disabled'>

script

export default {

name: 'lg-radio',

// 自定义v-model，使用change事件更新model的值

model: {

prop: 'model',

event: 'change'

},

props: {

label: {

type: [Number, String],

required: true

},

// 这里的model指的是上面定义的v-model的prop

model: {

type: [Number, String],

required: true

},

disabled: {

type: Boolean,

default: false

}