You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.1 KiB
1.1 KiB
代码演示
基础用法
通过点击按钮来控制开启和关闭状态，v-model绑定开关的开启状态。
<hd-switch v-model="open"></hd-switch>
const open = ref<boolean>(false)
禁用状态
通过disabled属性控制按钮是否可以点击，true时不可点击。
<hd-switch v-model="open" :disabled="disabled"></hd-switch>
const open = ref<boolean>(false)
const disabled = ref<boolean>(true)
自定义大小
通过size属性自定义开关的大小，单位px，默认24。
<hd-switch v-model="open" size="30"></hd-switch>
自定义颜色
activeColor属性表示打开时开关的背景颜色，默认值是#2979ff；inactiveColor属性表示关闭时开关的背景颜色，默认值是#fffffff。
<hd-switch v-model="open" activeColor="#ee0a24" inactiveColor="#dcdee0"></hd-switch>
圆点与外边框距离
通过space控制圆点与外边框之间的距离，默认0。
<hd-switch v-model="open" space="2"></hd-switch>