用于加载的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 | 描述 | 默认 |
---|---|---|
borderColor | 复选框边框的颜色 | black |
borderRadius | 复选框的边框半径 | 0 |
borderStyle | 复选框边框的样式,(实线,虚线,虚线,…) | solid |
borderWidth | 复选框边框的宽度。您必须插入单位(px ,em …) | 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 | 填充给定的自定义复选标记图像(这不会影响size ) | null |
fontColor | 标签文字颜色 | black |
fontSize | 标签字体大小 | null (基于计算size ) |
gap | 复选框及其中标签之间的间距大小px 。 | null (基于计算size ) |
label | 复选框标签 | null (无标签) |
loading | 如果true 组件处于加载状态。它的优先级高于checked | false |
loadingBackgroundColor | 状态加载时复选框的背景色 | white |
loadingBorderColor | 状态加载时复选框的边框颜色 | null (与相同borderColor ) |
loadingBorderRadius | 状态加载时复选框的边框半径 | null (与相同borderRadius ) |
loadingBorderStyle | 状态加载时复选框的边框样式 | null (与相同borderStyle ) |
loadingBorderWidth | 状态加载时复选框的边框宽度 | null (与相同borderWidth ) |
size | 中组件的大小px 。 | 30 |
spinnerColor | 旋转器的颜色 | black |
spinnerRingColor | 加载环的颜色 | lightgray |
uncheckedBackgroundColor | 取消选中状态时复选框的背景色 | white |
uncheckedBorderColor | 未选中状态时复选框的边框颜色 | null (与相同borderColor ) |
uncheckedBorderRadius | 未选中状态时复选框的边框半径 | null (与相同borderRadius ) |
uncheckedBorderStyle | 未选中状态时复选框的边框样式 | null (与相同borderStyle ) |
uncheckedBorderWidth | 未选中状态时复选框的边框宽度 | null (与相同borderWidth ) |