| New file |
| | |
|---|
| | | <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>
|
|---|
