Vue组件用于加载的复选框

Vue组件用于加载的复选框

插件名称:vue-loading-checkbox

发布时间:2020年6月14日

插件作者:Carrene

官网 GitHub下载

用于加载的Vue UI组件复选框

安装和下载:

# NPM
$ npm install vue-loading-checkbox --save

使用

内部.vue文件

<template>
  <div id="your-component">
    <!-- Using Component -->
    <loading-checkbox
      :checked="checked"
      :loading="loading"
      label="Title of checkbox"
      @click.native="toggleStatus"
    />
  </div>
</template>
<script>
// 导入组件和样式
import LoadingCheckbox from 'vue-loading-checkbox'
import 'vue-loading-checkbox/dist/LoadingCheckbox.css'

export default {
  name: 'YourComponentName',
  data() {
    return {
      checked: false,
      loading: false
    }
  },
  methods: {
    toggleStatus() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.checked = !this.checked
      }, 2000)
    }
  },
  components: {
    LoadingCheckbox // 注册组件
  }
}
</script>

组件props

props描述默认
borderColor复选框边框的颜色black
borderRadius复选框的边框半径0
borderStyle复选框边框的样式,(实线,虚线,虚线,…)solid
borderWidth复选框边框的宽度。您必须插入单位(pxem…)1px
checkColor复选标记的颜色white
checked组件的状态。可以true(选中)或false(未选中)false
checkedBackgroundColor检查状态时复选框的背景色gray
checkedBorderColor检查状态时复选框的边框颜色null(与相同borderColor
checkedBorderRadius选中状态时复选框的边框半径null(与相同borderRadius
checkedBorderStyle选中状态时复选框的边框样式null(与相同borderStyle
checkedBorderWidth检查状态时复选框的边框宽度null(与相同borderWidth
checkIcon自定义复选标记图像(.svg,png等)。您必须通过require函数传递它null 默认的纯CSS检查
checkIconPadding填充给定的自定义复选标记图像(这不会影响sizenull
fontColor标签文字颜色black
fontSize标签字体大小null(基于计算size
gap复选框及其中标签之间的间距大小pxnull(基于计算size
label复选框标签null (无标签)
loading如果true组件处于加载状态。它的优先级高于checkedfalse
loadingBackgroundColor状态加载时复选框的背景色white
loadingBorderColor状态加载时复选框的边框颜色null(与相同borderColor
loadingBorderRadius状态加载时复选框的边框半径null(与相同borderRadius
loadingBorderStyle状态加载时复选框的边框样式null(与相同borderStyle
loadingBorderWidth状态加载时复选框的边框宽度null(与相同borderWidth
size中组件的大小px30
spinnerColor旋转器的颜色black
spinnerRingColor加载环的颜色lightgray
uncheckedBackgroundColor取消选中状态时复选框的背景色white
uncheckedBorderColor未选中状态时复选框的边框颜色null(与相同borderColor
uncheckedBorderRadius未选中状态时复选框的边框半径null(与相同borderRadius
uncheckedBorderStyle未选中状态时复选框的边框样式null(与相同borderStyle
uncheckedBorderWidth未选中状态时复选框的边框宽度null(与相同borderWidth
相关插件