<template>
|
<div class="select-king" ref="selectKing">
|
<!-- <el-input v-model="selectVal" @focus="isShowOptions=true" :placeholder="placeholder" :readonly="true">
|
<i slot="suffix" v-show="!isShowOptions" class="el-input__icon fas fa-angle-down"></i>
|
<i slot="suffix" v-show="isShowOptions" class="el-input__icon fas fa-angle-up"></i>
|
</el-input>-->
|
<!-- <div class="select-king-options-bg" v-show="isShowOptions" @click="isShowOptions=false"></div> -->
|
<!-- <div class="select-king-options " v-show="isShowOptions">
|
<div class="border px-1 my-1 bg-white options">
|
<slot></slot>
|
</div>
|
</div>-->
|
<el-select
|
v-model="value"
|
:disabled="disabled"
|
ref="select"
|
@focus="isShowOptions=true"
|
@blur="isShowOptions=false"
|
:placeholder="placeholder"
|
>
|
<el-option value class="select-king-options" :style="optionsWidth?`width:${optionsWidth}`:''">
|
<div @click.stop>
|
<slot></slot>
|
</div>
|
</el-option>
|
</el-select>
|
</div>
|
</template>
|
<script>
|
import { Select, Option, Input } from 'element-ui'
|
export default {
|
name: 'selectKing',
|
components: {
|
elInput: Input,
|
elSelect: Select,
|
elOption: Option
|
},
|
data() {
|
return {
|
// selectVal: '',
|
isShowOptions: false
|
}
|
},
|
props: {
|
value: {
|
default: '',
|
type: String
|
},
|
placeholder: {
|
default: '请选择',
|
type: String
|
},
|
optionsWidth: {
|
default: '',
|
type: String
|
},
|
disabled: {
|
default: false,
|
type: Boolean
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
}
|
},
|
methods: {
|
setVal(item) {
|
// console.log(item, 'select-king-setVal')
|
// this.$emit('change', this.isLock)
|
},
|
close() {
|
this.$refs.select.blur()
|
},
|
targetClose(ev) {
|
let target = ev.target
|
while (target !== this.$refs.selectKing && target !== document.body) {
|
target = target.parentNode
|
}
|
if (target !== this.$refs.selectKing) {
|
this.isShowOptions = false
|
}
|
}
|
},
|
mounted() {
|
/* 空白关闭函数 start */
|
// document.body.addEventListener('click', this.targetClose)
|
/* 空白关闭函数 end */
|
},
|
destroyed() {
|
// document.body.removeEventListener('click', this.targetClose)
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
// .select-king {
|
.select-king-options {
|
&.el-select-dropdown__item {
|
height: auto;
|
padding: 0;
|
cursor: inherit;
|
}
|
&.el-select-dropdown__item.hover,
|
&.el-select-dropdown__item:hover {
|
background: transparent !important;
|
}
|
&.el-select-dropdown__item.selected {
|
color: #606266;
|
font-weight: normal;
|
}
|
}
|
// }
|
</style>
|
