更新记录

1.0.0(2020-11-19) 下载此版本

初次上线


平台兼容性

演示如下 🌳

夜间模式

使用说明 🌱

  1. 页面导入

    复制代码import vSwitch from '@/components/v-switch/v-switch'
  2. 引入组件

    复制代码components:{
    vSwitch
    }
  3. template标签

    复制代码<v-switch v-model="on" size="1.2" :activeValue="1" :inactive-value="0" @change="toggleMode"></v-switch>
  4. 只需v-mode绑定data中的变量,值为Boolean。其余参数均为可选项

复制代码/**
 * switch 夜间模式选择器
 * @description 个性化的夜间模式开关。
 * @property {String Number} size 开关尺寸,缩放倍数,建议 (0.5-2)
 * @property {Boolean | Number | String} active-value 打开选择器时通过change事件发出的值(默认true)
 * @property {Boolean | Number | String} inactive-value 关闭选择器时通过change事件发出的值(默认false)
 * @event {Function} change 在switch打开或关闭时触发
 * @example <v-switch v-model="on" size="1.2" :activeValue="1" :inactive-value="0" @change="toggleMode"></v-switch> 完整示例
 */

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
343***@qq.com

2023-06-13

挺好用的

103***@qq.com

2023-06-05

vue3 代码修改 <Switch :status="status" @update:status = "status = $event"/>

组件内 onClick() { this.$emit("update:status", !this.status) this.$nextTick(() => { this.$emit('change', { status: this.status ? this.activeValue : this.inactiveValue, status: this.status }) }) }

103***@qq.com 2023-06-05

click() { this.$emit("update:status", !this.status) this.$nextTick(() => { this.$emit('change', { status: this.status ? this.activeValue : this.inactiveValue, status: this.status }) }) }

175***@qq.com

2023-03-21

貌似没效果

724***@qq.com

2020-12-01

按钮真的好看,样式再多点就完美了哈哈

957***@qq.com

2020-11-20

大兄弟你这玩意导入进去全是报错哎,再看看好了回复我一下感觉还挺好看的

恍然如梦o丶 2020-11-20

能加我发下报错截图吗,Q1843544121,谢谢~

122***@qq.com

2020-11-19

老哥,点击没效果啊

恍然如梦o丶 2020-11-19

需要用v-model绑定父组件data里的变量,感谢反馈,会加在使用说明里

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问