云迈博客

您现在的位置是:首页 > 前端技术 > uni-app > 正文

uni-app

uniapp 自定义 radio 组件

吴志云2022-01-04uni-app575
自定义单选按钮组当官方提供的组件无法满足我们的样式要求是我们需要自定义一个组件1.创建m-radio-group组件``m-radio-groupjs代码//将父组件中的pushR

自定义单选按钮组

当官方提供的组件 无法满足我们的样式要求是我们需要自定义一个组件

1.创建m-radio-group组件

`<view class="m-radio-group flex ai-c">
    <slot></slot>  
</view>`

m-radio-group js代码
//将父组件中的pushRadio changeRadio 方法添加至 provide 依赖注入方法中
//依赖注入 用于子组件调用父组件方法 具体 可查看vue 文档
https://cn.vuejs.org/v2/guide/components-edge-cases.html

name: "m-radio-group",
provide() { 
    return { 
        pushRadio: this.pushRadio,
        changeRadio:this.changeRadio
    }
},
model: { //自定义v-midel 还需要在props中定义
    prop: "value",
    event: "change"
},
props: {
    value: {
        default: 0,
        type: Number
    }
},
methods: {
  pushRadio(vm) { 
    //将子组件中的实例添加至radios 数组中用于操作子组件
    //也可以使用$children 操作子组件
    this.radios.push(vm);
 },
 changeRadio(value) {
  //单子组件选中时遍历遍历子组件列表
  //将非选中的值时设置为false
    this.$emit("change", value);
    for (let i = 0; i < this.radios.length; i++) {
        if (this.radios[i].value != value) {
            this.radios[i].checked2 = false;
        }
    }
 }

2.创建子组件m-radio-item

//使用 inject 选项来接收父组件的属性
//相比 $parent 来说,这个用法可以让我们在任意后代组件中访问

    <view class="m-radio-item flex ai-c jc-c" :class="{checked:checked2}" @click="change">
        {{label}}
    </view>

inject: ["pushRadio","changeRadio"],
data() {
            return {  //初始化
                checked2: this.checked
            }
        },
    props: {
            value: [String, Number],  //子组件的 value值
            label: [String, Number],  //子组件的显示文字
            checked: {                //是否选中
                default: false,
                type: Boolean
            }
        },
   mounted() { //当子组件创建完成后调用父组件的方法
   //将当前组件实例添加至父组件raidos中可进行下一步操作
            this.pushRadio(this)
        },
   methods: {
            change() {//当子组件点击时调用父组件切换事件
                this.checked2 = true;
                this.changeRadio(this.value)
            }
        }
<m-radio-group v-model="form1.is_late">
    <m-radio-item label="否" value="0" checked />
    <m-radio-item label="是" value="1" />
</m-radio-group>

这样就完成了一个单选按钮组的功能 复选框也可以使用类似的方法操作

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~