vue render封装switch提示

引用子组件

 <switchComp
   checkedTxt="上架"
   unCheckTxt="下架"
   v-model="formRole.status"
   :switchStatus="formRole.status"
   ></switchComp>

定义子组件

<script>
export default {
    data () {
        return {
            isBooleanVal: true, // 传的value值是否是布尔值
            popconfirmVisible: false, // 隐藏冒泡弹窗
        }
    },
    props: {
        checkedTxt: {
            type: String,
            default: "上架"
        },
        unCheckTxt: {
            type: String,
            default: "下架"
        },
        okEvent: {
            type: Function,
            default: function () {}
        },
        cancelEvent: {
            type: Function,
            default: function () {}
        },
        switchStatus: {
            type: [Boolean, Number],
            default: true
        }
    },
    mounted () {
        if (this.getValType(this.switchStatus) == "[object Boolean]") {
            this.isBooleanVal = true
        } else {
            this.isBooleanVal = false
        }
    },
    render(createElement) {
        return createElement(
            'div',
            {},
            [
                createElement(
                    'a-popconfirm',
                    {
                        attrs: {
                            title: "确定"+this.unCheckTxt+"吗？",
                            okText: "确定",
                            cancelText: "取消",
                            disabled: this.popconfirmVisible
                        },
                        on: {
                            confirm: () => {
                                // if (this.okEvent) {
                                    let resu = null
                                    if (this.isBooleanVal) {
                                        resu = (!this.switchStatus) ? true : false
                                    } else {
                                        resu = (!this.switchStatus) ? 1 : 0
                                    }
                                    this.$emit("input", resu)
                                    //this.okEvent()
                                // }
                            },
                            cancel: () => {
                                if (this.cancelEvent) {
                                    //this.cancelEvent()
                                    // this.$emit("input", this.switchStatus)
                                }
                            }
                        }
                    },
                    [
                        createElement(
                            'a-switch',
                            {
                                attrs: {
                                    checked: this.switchStatus ? true : false,
                                    checkedChildren: this.checkedTxt,
                                    unCheckedChildren: this.unCheckTxt
                                },
                                on: {
                                    change: (v) => {
                                        if (v) {
                                            this.popconfirmVisible = true
                                            // this.switchStatus = this.isBooleanVal ? true : 1
                                            this.$emit("input", this.isBooleanVal ? true : 1)
                                        }
                                        setTimeout(() => {
                                            this.popconfirmVisible = false
                                        })
                                    }
                                }
                            }
                        )
                    ]
                )
            ]
        )
    },
    methods: {
        getValType (v) {
            return Object.prototype.toString.call(v)
        }
    }
}
</script>

<style lang="scss" scoped>

</style>