hbx4.6
uniappx
? '/static/icon/checkbox-selected.svg' '/static/icon/checkbox.svg' "
class="checkbox-icon"
/>
<slot></slot>
</view>
</template>
<script lang="uts">
export default {
name: 'MyCheckbox',
props: {
modelValue: {
type: Boolean,
default: false
}
},
data(): { checked: boolean } {
return {
checked: this.modelValue
};
},
watch: {
modelValue(newVal: boolean) {
this.checked = newVal;
}
},
methods: {
toggleCheck(): void {
this.checked = !this.checked;
this.$emit('update:modelValue', this.checked);
}
}
};
</script>
<style scoped>
.my-checkbox {
display: flex;
align-items: center;
margin-right: 8px;
cursor: pointer;
}
.checkbox-icon {
width: 20px;
height: 20px;
}
</style>
14:05:34.587 [plugin:uni:app-uts] 编译失败
14:05:34.587 error: 类型不匹配: 推断类型是Any?（可为空的Any），但预期的是Boolean。
14:05:34.587 at components/MyCheckbox/MyCheckbox.uvue:4:21
2 个回复
DCloud_UNI_JBB
升级到最新的hx试试还有没有问题，有问题的话麻烦发下完整的demo
用户2843246 (作者) - 2222
type CheckboxData = {
checked: boolean;
};
export default {
name: 'MyCheckbox',
props: {
modelValue: {
type: Boolean,
default: false
}
},
data() {
return {
checked: false
};
},
mounted() {
this.checked = this.modelValue; // 在mounted中安全赋值
},
watch: {
modelValue(newVal: boolean) {
this.checked = newVal;
}
},
methods: {
toggleCheck(): void {
this.checked = !this.checked;
this.$emit('update:modelValue', this.checked);
}
}
};
uts 不是 ts，https://doc.dcloud.net.cn/uni-app-x/uts/