car-wash-java/admin-web/src/components/form/ExtBoolean.vue

<style scoped lang="scss">
.text {
  display: inline-block;
  padding: 5px 6px 1px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  height: 20px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2px;
  margin-top: 3px;
  width: auto;
  color: #FF5722;
  border: 1px solid #FF5722;
}

.true-text {
  color: #5FB878;
  border: 1px solid #5FB878;
}
</style>
<template>
  <div>
    <span v-if="disabled" class="text" :class="{'true-text':props.modelValue==true}">{{ props.modelValue ? trueLabel : falseLabel }}</span>
    <el-select v-else
               transfer
               :multiple="false"
               clearable
               @change="handleChange"
               style="width: 100%"
               :placeholder="placeholder"
               v-model="state.model">
      <el-option label="是" :value="true"><el-text type="success">{{ trueLabel }}</el-text></el-option>
      <el-option label="否" :value="false"><el-text type="danger">{{ falseLabel }}</el-text></el-option>
    </el-select>
  </div>
</template>
<script setup lang="ts" name="ExtBoolean">
import {reactive, onMounted, watch, computed} from 'vue';
import u from '/@/utils/u';
//数据字典的布尔值类型的下拉选择组件

const props = defineProps({
  modelValue: {
    type: Boolean
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  tips: {
    type: String
  }
})

const state = reactive({
  model: false,
})

const trueLabel = computed(() => u.fmt.fmtDict('1', 'yes_no'));
const falseLabel = computed(() => u.fmt.fmtDict('0', 'yes_no'));

onMounted(() => {
  state.model = props.modelValue;
})

watch(() => props.modelValue, (val, oldVal) => {
  //console.log('ExtBoolean watch modelValue', val, oldVal)
  state.model = props.modelValue;
})

const emit = defineEmits(['on-change', 'update:modelValue']);

const handleChange = () => {
  //console.log(state.model)
  emit('update:modelValue', state.model)
  emit('on-change', state.model)
}
</script>