自定义vue radio控件

如何使用vue自定义radio控件?

背景

原生浏览器的radio控件的样式谁用谁知道,一个字丑! 所以今天要使用vue之间封装一个美美哒的radio控件.

实现功能

1. 自定义v-model,使组件之间数据能够进行双向绑定.
2. 使用checked属性默认选中radio
3. 使用disabled属性禁用radio
4. 当用户点击radio时触发组件上绑定的change事件

代码实现

1. 定义脚本

<script>
export default {
  name:'ui-radio',//radio组件名称
  model: {//自定义 v-model的 prop和event,这个定义的意思就是使用change事件更新model的值,以此来实时更新v-model的值
    prop: 'model',
    event: 'change'
  },
  props:{
    value:{//radio的value属性
      type:[String,Number],
      require:true
    },
    model:{//这里的model指的是上面定义的v-model的prop
      type:[String,Number],
      require:true
    },
    checked:{//是否默认选中
      type:Boolean,
      default:false
    },
    disabled:{//是否禁用
      type:Boolean,
      default:false
    }
  },
  mounted:function(){//当dom渲染完成,判断组件是否默认选中
    if(this.checked===true)
      this.updateVal();
  },
  methods:{
    updateVal:function(){//当用户点击radio时,触发change事件更新v-model
      this.$emit('change',this.$refs.radio.value);
    }
  }
}
</script>

1. 定义组件模板

<template>
  <!--这里设置了选中后的radio样式类,和禁用后的样式类-->
  <label class="ui-radio" :class="{'checked':model==value,'disabled':disabled}">
    <input type="radio" ref="radio" :value="value" @click="updateVal" :disabled="disabled">
  </label>
</template>

1. 定义样式(样式就不再细说了,可以在博客底部打开code sandbox 自己调试)

<style>
.ui-radio{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #4693fe;
  display: inline-block;
  position: relative;
}
.ui-radio.disabled{
  border-color: #ccc;
}
.ui-radio::after{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -5px 0 0 -5px;
  background-color: #4693fe;  
  transition: all .5s ease;
  opacity: 0;
  transform: scale(0);
}
.ui-radio.disabled::after{
  background-color: #ccc;
}
.ui-radio.checked::after {
   opacity: 1;
   transform: scale(1);
}
.ui-radio input[type=radio]{
  opacity: 0;
  margin: 0;
}
</style>

效果和示例代码##

---

优快云 markdown 禁用了iframe, 有翻墙工具的可以点击codesandbox demo.