@2alheure/vue-toggle 中文文档教程

Question

Vue.js Toggle button

一个简单的 Vue.js 切换按钮。
此组件与 Vue 3 兼容。

• Vue.js Toggle button
• Simple usage
• Props
• Events
• Events

它的灵感来自 ALEXANDRU STRATULAT 的这篇文章 ，所以如果您想了解它是如何工作的，请查看它。

Simple usage

首先运行 npm install @2alheure/vue-toggle。
然后它的用法很简单：

<template><Toggle v-model="isToggled" /></template>

<script>
import Toggle from "@2alheure/vue-toggle";

export default {
  components: {
    Toggle
  },
  data() {
    return {
      isToggled: false
    }
  }
};
</script>

请注意 v-model 指令，因为它可用作输入（本质上是一个输入）。

Props

Name	Type	Default value	Description
name	String	Some random string	The name of the inner input.
colorOK	String	#0d9488	The color of the toggle when it is toggled ON.
colorKO	String	#6b7280	The color of the toggle when it is toggled OFF.
width	String	3rem	The width of the toggle.
height	String	1.5rem	The height of the toggle.
modelValue	Boolean	false	The prop lnked to the v-model directive. (mandatory)

Events

Events

Name	Value type	Value	Description
update:modelValue	Boolean	The toggle value	Emitted each time the toggle switches