8 changed files with 411 additions and 52 deletions
@ -0,0 +1,227 @@
|
||||
<template> |
||||
<!-- 搜索弹窗 --> |
||||
<div class="Searchboxpop-upwindow"> |
||||
<el-dialog |
||||
v-model="dialogVisible" |
||||
:title="title" |
||||
:show-close="false" |
||||
:fullscreen="fullscreen" |
||||
:close-on-click-modal="false" |
||||
:draggable="true" |
||||
:overflow="false" |
||||
width="50%" |
||||
> |
||||
<template #header> |
||||
<div class="title"> |
||||
<span>{{ title }}</span> |
||||
</div> |
||||
<div class="div_icon"> |
||||
<el-icon @click="minimize"><Minus /></el-icon> |
||||
<el-icon @click="maximize"><FullScreen /></el-icon> |
||||
<el-icon @click="close"><CloseBold /></el-icon> |
||||
</div> |
||||
</template> |
||||
<el-input |
||||
v-model="localInputValue" |
||||
style="width: 100%; height: 100%" |
||||
:autosize="{ minRows: 24, maxRows: 24 }" |
||||
type="textarea" |
||||
placeholder="每一行算一个搜索单位“多个请【换行】输入" |
||||
/> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button type="primary" @click="dialogSearchSubmit"> 确认 </el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</div> |
||||
<!-- 最小化窗口 --> |
||||
<div class="minimize_windows" v-if="minimizeState"> |
||||
<div class="title"> |
||||
<span>{{ title }}</span> |
||||
</div> |
||||
<div class="div_icon"> |
||||
<el-icon @click="expandWindow"><FullScreen /></el-icon> |
||||
<el-icon @click="destroyWindow"><Close /></el-icon> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, watch, defineProps, defineEmits } from 'vue'; |
||||
import { Minus, FullScreen, CloseBold, Close } from '@element-plus/icons-vue'; |
||||
|
||||
const props = defineProps({ |
||||
modelValue: { |
||||
type: Boolean, |
||||
required: true, |
||||
}, |
||||
title: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
inputValue: { |
||||
type: String, |
||||
required: false, |
||||
default: '', |
||||
}, |
||||
}); |
||||
|
||||
const emit = defineEmits(['update:modelValue', 'dialogSearchSubmit', 'update:inputValue']); |
||||
|
||||
const dialogVisible = ref(props.modelValue); |
||||
const fullscreen = ref(false); |
||||
const minimizeState = ref(false); |
||||
const localInputValue = ref(props.inputValue); |
||||
|
||||
watch( |
||||
() => props.modelValue, |
||||
newVal => { |
||||
dialogVisible.value = newVal; |
||||
} |
||||
); |
||||
|
||||
watch( |
||||
() => props.inputValue, |
||||
newVal => { |
||||
localInputValue.value = newVal; |
||||
} |
||||
); |
||||
|
||||
const minimize = () => { |
||||
minimizeState.value = true; |
||||
dialogVisible.value = false; |
||||
emit('update:modelValue', false); |
||||
}; |
||||
|
||||
const maximize = () => { |
||||
fullscreen.value = !fullscreen.value; |
||||
}; |
||||
|
||||
const close = () => { |
||||
emit('update:modelValue', false); |
||||
}; |
||||
|
||||
const expandWindow = () => { |
||||
minimizeState.value = false; |
||||
dialogVisible.value = true; |
||||
emit('update:modelValue', true); |
||||
}; |
||||
|
||||
const destroyWindow = () => { |
||||
minimizeState.value = false; |
||||
emit('update:modelValue', false); |
||||
}; |
||||
|
||||
const dialogSearchSubmit = () => { |
||||
const lines = localInputValue.value |
||||
.split('\n') // 按换行分割 |
||||
.map(line => line.trim()) // 移除每一行前后的空格 |
||||
.filter(line => line !== ''); // 过滤掉空行 |
||||
|
||||
const joinedLines = lines.join(','); // 使用逗号连接，无空格 |
||||
localInputValue.value = joinedLines; |
||||
emit('dialogSearchSubmit', localInputValue.value); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.Searchboxpop-upwindow { |
||||
:deep(.el-overlay) { |
||||
position: absolute; |
||||
|
||||
.el-dialog { |
||||
min-height: 70%; |
||||
} |
||||
.el-overlay-dialog { |
||||
position: absolute; |
||||
} |
||||
.el-dialog__header { |
||||
display: flex !important; |
||||
justify-content: space-between; |
||||
.title { |
||||
position: relative; |
||||
padding: 0 10px; |
||||
} |
||||
.title::after { |
||||
content: '*'; |
||||
color: #172e60; |
||||
position: absolute; |
||||
font-size: 20px; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
.div_icon { |
||||
width: 100px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 19px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.el-dialog__footer { |
||||
display: flex; |
||||
justify-content: center; |
||||
padding: 6px; |
||||
.el-button { |
||||
width: 160px; |
||||
height: 35px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.minimize_windows { |
||||
width: 200px; |
||||
height: 35px; |
||||
border: 1px solid #cccccc82; |
||||
position: absolute; |
||||
bottom: 5px; |
||||
left: 5px; |
||||
box-shadow: 2px -1px 0.15625vw #c1c1c187; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
background-color: #fff; |
||||
.title { |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
span { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
span { |
||||
font-size: 14px; |
||||
} |
||||
.div_icon { |
||||
display: flex; |
||||
align-items: center; |
||||
width: 54px; |
||||
justify-content: space-between; |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
|
||||
:deep(.el_exportSelection) { |
||||
width: 30%; |
||||
height: 150px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
.el-dialog__body { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-evenly; |
||||
border-radius: 12px; |
||||
.el-button { |
||||
width: 30%; |
||||
height: 44%; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue