Switch开关组件 jb-switch

jb-switch组件是在NaiveUI的Switch组件基础上扩展的一个组件，所以NaiveUI中支持的属性在jb-switch中都可以使用。 jb-switch做了以下扩展：

支持配置url请求地址，当开关状态发生变化时，会自动向url发起请求。
支持配置confirm属性，切换开关时，会弹出确认框，用户确认后才会向url发起请求。

Props

名称	类型	默认值	说明
url	string	`undefined`	切换开关时，向`url`发起请求。`url`中支持${value}占位符，会自动替换为开关新的值。
confirm	string	`undefined`	确认提示。一旦传入有效字符串，就会开启提示，用户点击切换开关时，只有经过确认才会向`url`发起请求
fieldName	string	`enable`	请求响应后，会自动提取响应结果中的`fieldName`字段值更新为组件的`value`值。如果响应结果就是个boolean类型值，那么该结果将直接更新为`value`值。如果响应结果不满足前面两种情况，将会用组件当前值去更新`value`值
@change	(resData) => void	`undefined`	组件值发生变化时触发，参数为请求的响应结果

示例

在表格中使用

vue

<jb-column field="enable" title="是否启用" width="160" fixed="right">
    <template #default="{ row }">
        <jb-switch
            v-model:value="row.enable"
            :url="`/api/admin/app/toggleEnable/${row.id}`"
        ></jb-switch>
    </template>
</jb-column>

<jb-column field="enable" title="是否启用" width="160" fixed="right">
    <template #default="{ row }">
        <jb-switch
            v-model:value="row.enable"
            :url="`/api/admin/app/toggleEnable/${row.id}`"
        ></jb-switch>
    </template>
</jb-column>

切换时进行确认，成功后调用change回调，刷新表格数据

vue

<jb-column field="enable" title="是否启用" width="80">
    <template #default="{ row }">
        <jb-switch
            v-model:value="row.enable"
            confirm="确定切换此类型启用状态？"
            :url="`/api/admin/dictionaryType/toggleEnable/${row.id}`"
            @change="typePage?.loadData()"
        ></jb-switch>
    </template>
</jb-column>

<jb-column field="enable" title="是否启用" width="80">
    <template #default="{ row }">
        <jb-switch
            v-model:value="row.enable"
            confirm="确定切换此类型启用状态？"
            :url="`/api/admin/dictionaryType/toggleEnable/${row.id}`"
            @change="typePage?.loadData()"
        ></jb-switch>
    </template>
</jb-column>

切换后，url请求中传入开关值，change回调中获取响应结果。注意： 如果url本身是模版字符串，你又想使用${value}占位符，那么需要使用\$来转义。

vue


<jb-column field="isDefault" title="是否设为默认选项" width="80">
    <template #default="{ row }">
        <jb-switch
            v-model:value="row.isDefault"
            :url="`/api/admin/dictionaryType/toggleDefault/${row.id}-\${value}`"
            fieldName="isDefault"
            @change="updateRow(row,$event)"
        ></jb-switch>
    </template>
</jb-column>

<script >
    function updateRow(row, resData) {
        //resData就是响应数据
    }
</script>


<jb-column field="isDefault" title="是否设为默认选项" width="80">
    <template #default="{ row }">
        <jb-switch
            v-model:value="row.isDefault"
            :url="`/api/admin/dictionaryType/toggleDefault/${row.id}-\${value}`"
            fieldName="isDefault"
            @change="updateRow(row,$event)"
        ></jb-switch>
    </template>
</jb-column>

<script >
    function updateRow(row, resData) {
        //resData就是响应数据
    }
</script>

Switch开关组件 jb-switch ​

Props ​

示例 ​

Switch开关组件 jb-switch

Props

示例