Vue的简单拨动开关组件– v-toggle

Vue的简单拨动开关组件– v-toggle
插件名称 vue-toggle
发布时间 2020年11月29日
插件作者 eperedo

Vue.js的一个简单,轻便的开关/切换按钮组件。

安装和下载:

# Yarn
$ yarn add v-toggle

# NPM
$ npm install v-toggle --save

用法:

导入v-toggle。

import v-toggle from 'v-toggle';

在您的模板中。

<div class="toggles">
  <v-toggle id="v-t-default" v-model="toggleValue" />    
</div>
<div class="toggles">
  <v-toggle v-bind:width="36" v-bind:height="22"
      active-color="peru" inactive-color="red"
              id="v-t-small" v-model="toggleSmall" /> 
</div>
<div class="toggles">
  <v-toggle id="v-t-disabled" disabled="true" 
        v-model="vDisabled" />
</div>
<div class="toggles">
  <v-toggle color-gradient
    active-color="linear-gradient(to left, #b3205f, #7d1642)"
    inactive-color="linear-gradient(to right, #20535e, #348899)"
    id="v-t-gradient" v-model="toggleGradient" />    
</div>

激活拨动开关。

new Vue({
  el: '#app',
  data: {
    toggleGradient: true,
    toggleValue: true,
    toggleSmall: true,
    vDisabled: true,
  },
  components: {
    vToggle: window.vToggle.default,
  },
});

默认 props 。

colorValue: false,
successValue: false,
toggleGradient: false,
toggleSmall: false,
toggleValue: true,