87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import {defineModel, ref} from "vue";
|
|
import usageObj from "@/assets/config/directory/drugMedcWayCode.json"
|
|
|
|
const isVisible = ref<any>(false)
|
|
const usage = defineModel()
|
|
const emit = defineEmits(['clickItem'])
|
|
const clickItem = (item: any) => {
|
|
usage.value = item[1]
|
|
|
|
}
|
|
const focus = () => {
|
|
isVisible.value = true
|
|
}
|
|
const handlerBlur = () => {
|
|
isVisible.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-popover
|
|
:visible="isVisible"
|
|
placement="bottom"
|
|
title=""
|
|
:width="200"
|
|
trigger="click"
|
|
>
|
|
<template #reference>
|
|
<el-input v-model="usage" placeholder="使用方法" @focus="focus" @blur="handlerBlur"></el-input>
|
|
</template>
|
|
<div class="box">
|
|
<div class="item-list">
|
|
<div class="item" v-for="(item, index) in Object.entries(usageObj)" :key="index" @click="clickItem(item)">
|
|
{{ item[1] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.box {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
background: #fff;
|
|
top: 0;
|
|
left: 0;
|
|
width: 482px;
|
|
height: auto;
|
|
border: 1px solid #ddd;
|
|
z-index: 999;
|
|
}
|
|
|
|
.item-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
width: 160px;
|
|
height: 36px;
|
|
background: #fff;
|
|
color: #000;
|
|
border: 1px solid #ededed;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
background: #4d6de4;
|
|
}
|
|
|
|
&.last-item {
|
|
margin-right: 0; /* 最后一个元素不加右边距 */
|
|
}
|
|
|
|
}
|
|
|
|
.active {
|
|
background: #4d6de4 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
</style> |