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

最新推荐文章于 2024-09-05 11:22:00 发布

置顶

Eden-one

最新推荐文章于 2024-09-05 11:22:00 发布

阅读量3.8k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/SHINE_SUNNY1/article/details/80469982

版权

本文介绍了如何基于Vue2.x实现单选框(w-single-input)和复选框(w-checkbox)组件的开发。包括组件的数据结构、属性设置、事件处理以及父子组件间的通信。通过示例代码展示了组件的关键实现，同时提到了在编码过程中需要注意的命名规范和事件触发方式。

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

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

w-single-input(单选框)

w-checkbox（多选框）

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

多选框选中
单选框

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

我们先来实现单选框组件

最开始我们需要的数据包含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" ></