基于vue2.x实现单选框与复选框组件

基于vue2.x实现单选框与复选框组件

---

w-single-input(单选框)

w-checkbox（多选框）

不是很会录屏，就放几组演示照片吧

话不多说，我们现在就开始实现这两个组件，首先你得搭好一个架子，架子具体实现请参考github,这个是我组件库开发的地址，通过修改vue-cli脚手架，将开发与展示放在一块，利于我前期的一个开发，examples下是展示实例，packages是包所在的文件目录，如果你感觉通过修改vue-cli脚手架太麻烦的话，也可以通过链接引入vue，然后对这两个组件进行注册，当然这也是可以的。

---

我们先来实现单选框组件

1. 最开始我们需要的数据包含originOptions和selected这两个数据，我们通过方法queryData来添加我们想要的数据,冰鞋我们需要设定一个回掉函数singleCallback，来处理我们子组件返回的值，大概是父组件中需要这样写代码，并且我们父组件的html部分需要这样写。

<script>
export default{
    data(){
      return {
        single:{
          originOptions: [],
          selected: {}
        }
      }
    },
    mounted :function() {
    
        this.queryData();
    },
    methods: {
        queryData: function(){
    
        var mySelf = this
        //do ajax here
        // 单选
        mySelf.single.originOptions = [{
   "id":"1","name":"lemon"},{
   "id":"2","name":"mike"},{
   "id":"3","name":"lara"},{
   "id":"4","name":"zoe"},{
   "id":"5","name":"steve"},{
   "id":"6","name":"nolan"}];
        mySelf.single.selected = {
   "id":"4","name":"zoe"}
        this.$nextTick(function(){
    
            //dom更新之后，执行一些其他操所。
        })
        },
      singleCallback: function(data){
    
        this.single.selected = data;
        console.log('父级元素调用singleCallback 选中的是' + JSON.stringify(data))
      }
    }
  }
</script>
//部分，请自行放在合适位置
<w-single-input v-bind:optionsdata="single.originOptions" v-bind:selecteddata="single.selected" @selected="singleCallback" ></