121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div class="fix-search is-bg" :style="baseStyle">
|
||
|
|
<div class="inner" :class="[`is-${mode}`]" :style="innerStyle">
|
||
|
|
<el-icon><Search /></el-icon>
|
||
|
|
<span class="text">{{ placeholder }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" name="fix-search" setup>
|
||
|
|
import { ref, computed, type PropType } from "vue";
|
||
|
|
import { Search } from "@element-plus/icons-vue";
|
||
|
|
import { Form } from "../../types/form";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
mode: {
|
||
|
|
type: String,
|
||
|
|
default: "mode-1"
|
||
|
|
},
|
||
|
|
backgroundColor: {
|
||
|
|
type: String,
|
||
|
|
default: "#f6f7fa"
|
||
|
|
},
|
||
|
|
placeholder: {
|
||
|
|
type: String,
|
||
|
|
default: "请输入关键字进行搜索"
|
||
|
|
},
|
||
|
|
styleSpacing: {
|
||
|
|
type: Object as PropType<Form.Spacing>,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
marginTop: 0,
|
||
|
|
marginBottom: 0,
|
||
|
|
marginLR: 0,
|
||
|
|
padding: 0,
|
||
|
|
borderTopLR: 0,
|
||
|
|
borderBottomLR: 0
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
styleColor: {
|
||
|
|
type: Object as PropType<Form.Color>,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
color: "#000",
|
||
|
|
backgroundColor: "#FFFFFF",
|
||
|
|
opacity: 1
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const baseStyle = computed(() => {
|
||
|
|
return {
|
||
|
|
margin: `${props.styleSpacing.marginTop / 2}px ${props.styleSpacing.marginLR / 2}px ${props.styleSpacing.marginBottom / 2}px ${props.styleSpacing.marginLR / 2}px`,
|
||
|
|
color: props.styleColor.color,
|
||
|
|
padding: `${props.styleSpacing.padding / 2}px`,
|
||
|
|
"--opacity": props.styleColor.opacity,
|
||
|
|
"--background": props.styleColor.backgroundColor
|
||
|
|
};
|
||
|
|
});
|
||
|
|
const innerStyle = computed(() => {
|
||
|
|
return {
|
||
|
|
borderRadius: `${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderBottomLR / 2}px ${props.styleSpacing.borderBottomLR / 2}px`,
|
||
|
|
backgroundColor: props.backgroundColor
|
||
|
|
};
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.fix-search {
|
||
|
|
height: 60px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.tips {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #bfbfbf;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inner {
|
||
|
|
height: 40px;
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 10px;
|
||
|
|
.text {
|
||
|
|
font-size: 14px;
|
||
|
|
margin-left: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.is-mode-1 {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
.is-mode-2 {
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.is-mode-3 {
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.is-bg {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1; /* 确保 .is-bg 及其子元素位于 ::after 伪元素的上层 */
|
||
|
|
}
|
||
|
|
.is-bg::after {
|
||
|
|
content: "";
|
||
|
|
background-color: var(--background);
|
||
|
|
opacity: var(--opacity);
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: -1;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
</style>
|