当你照搬Switch组件使用的时候,发现明明每个字都一致页面就是不显示时,

试试将switch写成i-switch。

<template>
    <i-Switch v-model="switch1" @on-change="change" ></i-Switch>
</template>
<script>
    export default {
        data () {
            return {
                switch1: false
            }  
        },
        methods: {
            change (status) {
                this.$Message.info('开关状态:' + status);
            }
        }
    }
</script>

为什么呢?这是因为在 iView 组件库中,使用 i-Switch 而不是 Switch 的主要原因是为了避免与 Vue 的关键字冲突。

Switch 是 Vue 的一个核心指令,用于在模板中条件地显示或隐藏元素。为了避免命名冲突和潜在的不可预测行为,iView 在其组件库中将 Switch 组件的名称更改为 i-Switch

通过将组件名称前缀为 i-,iView 可以确保组件的命名与 Vue 核心指令、其他第三方组件或用户自定义组件之间保持独立,避免可能的冲突。

因此,在使用 iView 的 Switch 组件时,需要使用 i-Switch 组件名称来正确引用和使用该组件。

有帮到你的话不妨点个赞哟~

Logo

前往低代码交流专区

更多推荐