chore: 拆分input组件
This commit is contained in:
222
src/views/home/components/input/StyleSelect.vue
Normal file
222
src/views/home/components/input/StyleSelect.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="fida-style-select-wrapper">
|
||||
<el-select
|
||||
:model-value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
@focus="openStylePopup"
|
||||
/>
|
||||
|
||||
<el-popover
|
||||
v-model:visible="stylePopupVisible"
|
||||
placement="top"
|
||||
:width="342"
|
||||
:show-arrow="false"
|
||||
trigger="click"
|
||||
popper-class="fida-style-select-popover"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="fida-style-select-trigger"></div>
|
||||
</template>
|
||||
<div class="fida-style-popover-content flex flex-col">
|
||||
<div class="fida-style-popover-header">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="fida-style-popover-grid">
|
||||
<div
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
class="fida-style-popover-item flex flex-center"
|
||||
:class="{ 'is-selected': tempSelectedValue === item.value }"
|
||||
@click="selectStyle(item.value)"
|
||||
>
|
||||
<img :src="getStyleImage(typeValue, item.value)" class="style-bg" />
|
||||
<span class="fida-option-label flex flex-center">{{ item.label }}</span>
|
||||
<img
|
||||
v-show="tempSelectedValue === item.value"
|
||||
src="@/assets/images/checked.png"
|
||||
class="checked-item-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fida-style-popover-footer flex flex-center">
|
||||
<button class="fida-confirm-btn" @click="confirmStyle">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { getStyleImage } from '../style'
|
||||
import type { OptionItem } from './types'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
typeValue: string
|
||||
options: OptionItem[]
|
||||
placeholder: string
|
||||
title: string
|
||||
confirmText: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const tempSelectedValue = ref('')
|
||||
const stylePopupVisible = ref(false)
|
||||
|
||||
const openStylePopup = () => {
|
||||
tempSelectedValue.value = props.modelValue
|
||||
stylePopupVisible.value = true
|
||||
}
|
||||
|
||||
const selectStyle = (value: string) => {
|
||||
tempSelectedValue.value = value
|
||||
}
|
||||
|
||||
const confirmStyle = () => {
|
||||
emit('update:modelValue', tempSelectedValue.value)
|
||||
stylePopupVisible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.fida-style-select-wrapper {
|
||||
position: relative;
|
||||
width: 13.9rem;
|
||||
height: 4rem;
|
||||
|
||||
.el-select {
|
||||
width: 13.9rem;
|
||||
height: 4rem;
|
||||
|
||||
:deep(.el-select__wrapper) {
|
||||
border-radius: 0.8rem;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
border: 0.1rem solid rgba(0, 0, 0, 0.1);
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
min-height: initial;
|
||||
|
||||
.el-select__placeholder {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.el-select__icon {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fida-style-select-trigger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.fida-style-select-popover {
|
||||
width: 34.2rem !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 0.6rem !important;
|
||||
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
|
||||
background-color: #fff !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fida-style-popover-content {
|
||||
padding: 2rem 2.4rem 2.4rem;
|
||||
}
|
||||
|
||||
.fida-style-popover-header {
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
margin-bottom: 2rem;
|
||||
padding: 2rem 2.4rem !important;
|
||||
}
|
||||
|
||||
.fida-style-popover-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
height: 28.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.fida-style-popover-item {
|
||||
height: 9.1rem;
|
||||
width: 9.1rem;
|
||||
border-radius: 1.4rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border: none;
|
||||
|
||||
.checked-item-icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, 50%);
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
|
||||
.style-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1.4rem;
|
||||
}
|
||||
|
||||
.fida-option-label {
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 1.4rem;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
border: 0.3rem solid #000;
|
||||
|
||||
.fida-option-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fida-style-popover-footer {
|
||||
padding: 2.4rem 0 !important;
|
||||
margin-top: 2.4rem;
|
||||
|
||||
.fida-confirm-btn {
|
||||
margin: 0 auto;
|
||||
width: 15.7rem;
|
||||
height: 3.4rem;
|
||||
line-height: 3.4rem;
|
||||
background-color: #ff7a51;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 3.8rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user