<template>
    <!-- 公共蓝色下拉框 -->
    <div class="blue-select">
      <el-select  @visible-change="changeValue1($event)" v-model="newValue" :placeholder="placeholder" :style="'width:'+width+';height:'+height" >
          <slot></slot>
      </el-select>
    </div>

</template>

<script>
export default {
  name: 'BlueSelect',
  data(){
    return{
      data : this.vModel
    }
  },
  methods:{
changeValue1:function(callback){ //只有回调参数为false时才触发 ctx.getAreaListDataSearch(vc,1)这个函数;
console.log("回调参数"+callback);


},
  },
  props: {
    width:{ //宽
      type: String,
      default: '238px',
    },
    height:{ //高
      type: String,
      default: '30px',
    },
    placeholder:{ //提示信息
      type: String,
      default: '请输入',
    },
    value:{ //数据(绑定数据)
      type: String,
      default:''
    },
  
  },
  computed: {
    newValue: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      },
    },
  },
}
</script>

<style scoped>
/* 下拉框高度 */

.el-select >>> .el-input__inner { 
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(57, 75, 135, 0.7);
  border-radius: 2px;
  border: 1px solid rgba(77, 103, 186, 0.75);
  /* box-shadow:inset 1px 1px 1px rgba(77, 103, 186, 0.75); */
}
.blue-select >>> .el-input__icon{
  line-height: 30px ;
}
.blue-select >>> .el-input{
  height: 100%;
}


</style>