<template> <view class="uni-table-checkbox" @click="selected"> <view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}"> <view class="checkbox__inner-icon"></view> </view> <view v-else class="checkbox__inner checkbox--indeterminate"> <view class="checkbox__inner-icon"></view> </view> </view> </template> <script> export default { name: 'TableCheckbox', emits:['checkboxSelected'], props: { indeterminate: { type: Boolean, default: false }, checked: { type: [Boolean,String], default: false }, disabled: { type: Boolean, default: false }, index: { type: Number, default: -1 }, cellData: { type: Object, default () { return {} } } }, watch:{ checked(newVal){ if(typeof this.checked === 'boolean'){ this.isChecked = newVal }else{ this.isChecked = true } }, indeterminate(newVal){ this.isIndeterminate = newVal } }, data() { return { isChecked: false, isDisabled: false, isIndeterminate:false } }, created() { if(typeof this.checked === 'boolean'){ this.isChecked = this.checked } this.isDisabled = this.disabled }, methods: { selected() { if (this.isDisabled) return this.isIndeterminate = false this.isChecked = !this.isChecked this.$emit('checkboxSelected', { checked: this.isChecked, data: this.cellData }) } } } </script> <style lang="scss"> $checked-color: #007aff; $border-color: #DCDFE6; $disable:0.4; .uni-table-checkbox { display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; margin: 5px 0; cursor: pointer; // 多选样式 .checkbox__inner { /* #ifndef APP-NVUE */ flex-shrink: 0; box-sizing: border-box; /* #endif */ position: relative; width: 16px; height: 16px; border: 1px solid $border-color; border-radius: 2px; background-color: #fff; z-index: 1; .checkbox__inner-icon { position: absolute; /* #ifdef APP-NVUE */ top: 2px; /* #endif */ /* #ifndef APP-NVUE */ top: 2px; /* #endif */ left: 5px; height: 7px; width: 3px; border: 1px solid #fff; border-left: 0; border-top: 0; opacity: 0; transform-origin: center; transform: rotate(45deg); box-sizing: content-box; } &.checkbox--indeterminate { border-color: $checked-color; background-color: $checked-color; .checkbox__inner-icon { position: absolute; opacity: 1; transform: rotate(0deg); height: 2px; top: 0; bottom: 0; margin: auto; left: 0px; right: 0px; bottom: 0; width: auto; border: none; border-radius: 2px; transform: scale(0.5); background-color: #fff; } } &:hover{ border-color: $checked-color; } // 禁用 &.is-disable { /* #ifdef H5 */ cursor: not-allowed; /* #endif */ background-color: #F2F6FC; border-color: $border-color; } // 选中 &.is-checked { border-color: $checked-color; background-color: $checked-color; .checkbox__inner-icon { opacity: 1; transform: rotate(45deg); } // 选中禁用 &.is-disable { opacity: $disable; } } } } </style>