Vue+Vant封装通用模态框单选框组件

前言

我们知道，在vant组件中提供的组件往往是比较基础的，能够满足基本需求。但是我们想实现ui设计的一些比较丰富效果的组件，需要自己去实现，且当项目中多次用到的时候，我们将以组件化的思想将其封装起来，供各个页面方面使用。

vant提供的单选框效果：

 项目中UI提供的单选框效果图

1.右边显示单选框效果

2.右边显示为图标效果

 情况

 实现思路

在组建中定义如下变量，用来接收父组件传的值

定义props值

• title：标题
• showList：展示列表的数据
• actionVal：当前列表数据中被选中的值
• dialogType：弹框的类型（0-列表 文字 图标；1-列表 文字 radio；2-自动以内容）
• onlyCancel：是否只显示取消按钮，true只显示取消按钮，false：既显示取消按钮，又显示确定按钮。因为有些是需要点击单选框某项之后直接关闭模态框触发回传事件，有些是需要点击确定按钮再触发，所以这里做了一个区分

定义点击事件

1.列表项点击事件：listClick(i)

listClick(i){
 // 这个key值也是根据父组件传递过来的列表，key值是每项的唯一标识值，这个唯一标示值根据自身业务逻辑而定
 this.currActionVal=i.key//存储当前最新值
 this.$emit('update',this.currentActionVal);//这里可以稍微优化，若存在确定按钮，这一步在确定事件中再进行
 setTimeout(()=>{
   this.show=false
 },500)
}

 2.点击确定按钮事件：handleConfirm

handleConfirm(){
    this.$emit('update',this.currentActionVal)
}

 3.点击取消事件：handleCancel

handleCancel(){
  this.$emit('cancel',this.currentActionVal,this.actionVal);//回传旧值和新值，若用户没有触发修改事件时，这里currentActionVal和this.actionVal相等
}

 父组件调用

引入与注册

使用

右边显示为图标效果

     // html
     

 

右边显示为radio效果

 

最后，附上封装的组件的代码