client-base-v5/src/widget/RedGreenSelect.vue

<template>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default red-vouch" :class="{'active' : isRed}" @click="redButtonClick">红单</button>
    <button type="button" class="btn btn-default green-vouch" :class="{'active' : isGreen}" @click="greenButtonClick">蓝单</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelValue',
    event: 'input',
  },
  

  props: {
    // 绑定的值
    value: {
      type: String,
      default: null,
    },
    // string: 绑定的是字符串"true","false"
    type: {
      type: String,
      default: null,
    },
    // true: 控件可以使用; false: 控件不可以使用。
    disabled: {
      type: Boolean,
      default: null,
    },
    // true: 控件不可以使用; false: 控件可以使用。	
    readonly: {
      type: Boolean,
      default: null,
    },
  },
  emits: ['input'],


		
  data: function(){
    return {
				
    };
  },
		
  computed:{
    'isRed': function(){
      if(this.type == 'string'){
        return this.value == 'true';
      }else{
        return this.value == true;
      }
    },
			
    'isGreen': function(){
      if(this.type == 'string'){
        return (this.value == undefined || this.value == 'false');
      }else{
        return (this.value == undefined || this.value == false);
      }
    },
  },
		
  methods: {
    /**
			 * 红色的按钮被按下
			 */
    redButtonClick: function(){
      if(this.disabled == true){
        return;
      }
      if(this.readonly == true){
        return;
      }
      if(this.type == 'string'){
        this.$emit('input', 'true');
      }else{
        this.$emit('input', true);
      }
    },
			
    /**
			 * 绿色的按钮被按下
			 */
    greenButtonClick: function(){
      if(this.disabled == true){
        return;
      }
				
      if(this.readonly == true){
        return;
      }
				
      if(this.type == 'string'){
        this.$emit('input', 'false');
      }else{
        this.$emit('input', false);
      }
    },
  },
};
</script>

<style>
	.red-vouch{
		color: red !important;
		font-weight: bold;
	}
	
	.green-vouch{
		color: green !important;
		font-weight: bold;
	}
</style>