59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
|
|
|
|
<template>
|
|
<el-popover placement="bottom-start" trigger="click" :width="props.width" >
|
|
<template #reference>
|
|
<el-input v-model="input" :style="{'width': props.width+'px'}" clearable></el-input>
|
|
</template>
|
|
<div class="code-popo" v-if="props.list.length > 0">
|
|
<div class="code-item" v-for="item in props.list" >
|
|
<div class="code-item-name" v-for="subItem in item" @click="inputStr(subItem)">
|
|
{{subItem}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref} from "vue";
|
|
const input = defineModel<string | null>();
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 1000
|
|
}
|
|
})
|
|
|
|
const inputStr = (str: string) => {
|
|
let strList = input.value?input.value.split(","):[];
|
|
strList.push(str);
|
|
input.value = strList.join(",");
|
|
}
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.code-popo{
|
|
width: 100%;
|
|
.code-item{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #fffeee;
|
|
.code-item-name{
|
|
flex: 0 0 calc(100% / 12);
|
|
font-size: 16px;
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
&:hover{
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |