Radio组件
<template>
<view class="checkbox" @click="check">
<view class="iconfont">{{ checked?'':'' }}</view>
<view class="text">
<slot />
</view>
</view>
</template>
<script>
export default {
props: {
checked: {
default: false,
},
value: {
default: '',
},
},
model: {
props: 'checked',
event: 'onChange'
},
inject: {
radioGroupContext: { default: undefined },
},
methods: {
check(e) {
console.log(this.radioGroupContext)
e.target.checked = false;
e.target.value = undefined;
if (this.radioGroupContext && this.radioGroupContext.onRadioChange) {
this.radioGroupContext.emptyAll((node) => {
node.$emit('update:checked', e);
});
}
e.target.checked = !this.checked;
e.target.value = this.value;
this.$emit('onChange', e);
this.$emit('update:checked', e);
if (this.radioGroupContext && this.radioGroupContext.onRadioChange) {
this.radioGroupContext.onRadioChange(e);
}
},
}
}
</script>
<style lang="scss" scoped>
.checkbox{
display: inline-flex;
align-items: center;
font-size: 30rpx;
line-height: 0;
.iconfont{
font-size: 32rpx;
color: $blue;
}
.text{
margin-left: 10rpx;
color: $black5;
}
}
</style>
RadioGroup组件
<template>
<view class="checkbox-group">
<slot />
</view>
</template>
<script>
export default {
name:"RadioGroup",
provide() {
return {
radioGroupContext: this,
};
},
data() {
return {
};
},
methods: {
onRadioChange(e) {
this.$emit('onChange', e)
},
emptyAll(callback) {
this.$children.forEach(node => {
callback && callback(node)
})
}
}
}
</script>
<style lang="scss" scoped>
.checkbox-group{
width: 100%;
display: flex;
justify-content: flex-end;
}
</style>
使用示例Demo
<template>
<view class="container">
<view class="form-contrl" v-for="(item,i) in list" :key="i">
<MtRadioGroup class="ck-group" @onChange="onRadioChange">
<MtRadio :checked="item.isPlay" :value="true">是</MtRadio>
<MtRadio class="ck-item" :checked="!item.isPlay" :value="false">否</MtRadio>
</MtRadioGroup>
</view>
</view>
</template>
<script>
import MtRadioGroup from '../../components/RadioGroup/RadioGroup.vue'
import MtRadio from '../../components/Radio/Radio.vue'
import MtButton from '../../components/Button/Button.vue'
export default {
components:{
MtRadioGroup,
MtRadio,
MtButton,
},
data() {
return {
list: [
{isPlay: true},
{isPlay: true},
],
};
},
onLoad() {
},
methods: {
onRadioChange(e) {
console.log(e)
},
add() {
this.list.push({isPlay: true});
},
}
};
</script>
<style lang="scss" scoped>
.ck-group {
.ck-item {
margin-left: 40rpx;
}
}
.card{
height: 88rpx;
line-height: 88rpx;
padding: 30rpx;
border: 1px solid red;
}
</style>
0 个回复