2 Commits
fd791b6f6a
...
58b4e1c618
| Author | SHA1 | Message | Date |
|---|---|---|---|
ZhangYong
|
58b4e1c618 |
产品选择组件
|
1 day ago |
|
ZhangYong
|
3d98845145 |
新增付款币种组件
|
2 days ago |
3 changed files with 508 additions and 22 deletions
-
336src/components/MoneyManage/CurrencySelect.vue
-
121src/components/MoneyManage/ProductSelect.vue
-
71src/views/moneyManage/receiveDetail/receiveDetail.vue
@ -0,0 +1,336 @@ |
|||
<template> |
|||
<div class="dropdown" ref="dropdownRef"> |
|||
<!-- 下拉框触发器 --> |
|||
<div class="dropdown-toggle" @click="toggleMenu" :class="{ 'active': isOpen }"> |
|||
<span class="placeholder" :style="{ color: selectedItem ? '#333' : '#A8ABB2' }"> |
|||
{{ selectedItem || placeholder }} |
|||
</span> |
|||
<span class="arrow"> |
|||
<el-icon> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</span> |
|||
</div> |
|||
|
|||
<!-- 下拉菜单 --> |
|||
<div class="dropdown-menu" v-if="isOpen"> |
|||
<!-- 搜索框 --> |
|||
<div class="search"> |
|||
<input type="text" v-model="searchData" class="search-input" placeholder="查询" @focus="handleSearchFocus" |
|||
@blur="handleSearchBlur"> |
|||
<el-icon v-show="!searchData" class="search-icon"> |
|||
<Search /> |
|||
</el-icon> |
|||
<el-icon class="clear-icon" v-if="searchData" @click="clearSearch"> |
|||
<CircleClose /> |
|||
</el-icon> |
|||
</div> |
|||
|
|||
<!-- 选项区域：按钮样式 --> |
|||
<div class="menuContent"> |
|||
<button class="dropdown-item" v-for="(item, index) in filteredItems" :key="index" @click="handleSelect(item)" |
|||
:class="{ 'selected': selectedItem === item }"> |
|||
{{ item }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, watchEffect, onMounted } from 'vue'; |
|||
|
|||
const searchData = ref('') |
|||
const isOpen = ref(false) |
|||
const selectedItem = ref('') |
|||
const dropdownRef = ref(null) |
|||
|
|||
const props = defineProps({ |
|||
items: { |
|||
type: Array, |
|||
required: true, |
|||
default: () => [] |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: '请选择支付方式' |
|||
}, |
|||
modelValue: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['update:modelValue', 'change']) |
|||
|
|||
// 切换下拉菜单 |
|||
const toggleMenu = () => { |
|||
isOpen.value = !isOpen.value |
|||
searchData.value = '' |
|||
} |
|||
|
|||
// 清除搜索 |
|||
const clearSearch = () => { |
|||
searchData.value = '' |
|||
} |
|||
|
|||
// 选择选项 |
|||
const handleSelect = (item) => { |
|||
selectedItem.value = item |
|||
isOpen.value = false |
|||
emit('update:modelValue', item) |
|||
emit('change', item) |
|||
} |
|||
|
|||
// 点击外部关闭菜单 |
|||
const handleClickOutside = (event) => { |
|||
if (dropdownRef.value && !dropdownRef.value.contains(event.target)) { |
|||
isOpen.value = false |
|||
} |
|||
} |
|||
|
|||
// 监听搜索框的焦点和失焦事件 |
|||
const handleSearchFocus = () => { |
|||
// 可以在这里添加额外的逻辑 |
|||
} |
|||
|
|||
const handleSearchBlur = () => { |
|||
// 可以在这里添加额外的逻辑 |
|||
} |
|||
|
|||
// 搜索过滤 |
|||
const filteredItems = computed(() => { |
|||
if (!searchData.value) return props.items |
|||
return props.items.filter(item => |
|||
item.toLowerCase().includes(searchData.value.toLowerCase()) |
|||
) |
|||
}) |
|||
|
|||
// 挂载/卸载事件 |
|||
onMounted(() => { |
|||
document.addEventListener('click', handleClickOutside) |
|||
return () => { |
|||
document.removeEventListener('click', handleClickOutside) |
|||
} |
|||
}) |
|||
|
|||
// 监听外部值变化 |
|||
watchEffect(() => { |
|||
selectedItem.value = props.modelValue |
|||
}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
// 下拉容器 |
|||
.dropdown { |
|||
position: relative; |
|||
width: 268px; |
|||
font-family: 'Arial', sans-serif; |
|||
} |
|||
|
|||
// 触发器：控制展开/收起 |
|||
.dropdown-toggle { |
|||
border: 1px solid #e5e7eb; |
|||
padding: 4px 12px; |
|||
/* 调整内边距以匹配按钮高度 */ |
|||
height: 23px; |
|||
/* 调整高度以匹配按钮 */ |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background-color: #fff; |
|||
border-radius: 6px; |
|||
transition: all 0.3s ease; |
|||
|
|||
.placeholder { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #A8ABB2; |
|||
} |
|||
} |
|||
|
|||
// 展开状态：边框+阴影高亮 |
|||
.dropdown-toggle.active { |
|||
border-color: #678BFF; |
|||
box-shadow: 0 0 0 2px rgba(103, 139, 255, 0.1); |
|||
} |
|||
|
|||
// 箭头图标：展开时旋转 |
|||
.arrow { |
|||
margin-left: 8px; |
|||
color: #999; |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.dropdown-toggle.active .arrow { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
// 下拉菜单主体 |
|||
.dropdown-menu { |
|||
position: absolute; |
|||
top: 100%; // 紧贴触发器下方 |
|||
left: 0; |
|||
width: 100%; |
|||
border: 1px solid #678BFF; |
|||
max-height: 300px; |
|||
background-color: #fff; |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|||
border-radius: 0 0 8px 8px; // 仅底部两侧圆角 |
|||
z-index: 1000; |
|||
margin-top: 15px; // 关键：不要有上外边距，尖角要紧贴触发器 |
|||
overflow: visible; |
|||
|
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: -8px; |
|||
left: 50%; |
|||
transform: translateX(-50%) scaleY(0.5); |
|||
width: 30px; |
|||
height: 16px; |
|||
background: #fff; |
|||
clip-path: polygon(0 100%, 100% 100%, 50% 0); |
|||
z-index: 1001; |
|||
border: none; |
|||
/* 移除原来的边框 */ |
|||
} |
|||
|
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: -9px; |
|||
/* 比 ::before 往下一点，制造边框效果 */ |
|||
left: 50%; |
|||
transform: translateX(-50%) scaleY(0.5); |
|||
width: 30px; |
|||
height: 16px; |
|||
background: #678BFF; |
|||
clip-path: polygon(0 100%, 100% 100%, 50% 0); |
|||
z-index: 1000; |
|||
} |
|||
} |
|||
|
|||
// 搜索框区域 |
|||
.search { |
|||
position: sticky; |
|||
top: 0; |
|||
background-color: #FFFFFF; |
|||
z-index: 1002; |
|||
padding: 10px 14px 0px 10px; |
|||
} |
|||
|
|||
// 搜索输入框：浅灰背景 + 图标定位 |
|||
.search-input { |
|||
width: 100%; |
|||
height: 27px; |
|||
padding: 0 12px 0 5px; |
|||
/* 左侧留出图标空间 */ |
|||
border: 1px solid #dcdfe6; |
|||
border-radius: 10px; |
|||
box-sizing: border-box; |
|||
background-color: #f8f9fa; |
|||
/* 浅灰背景匹配参考图 */ |
|||
outline: none; |
|||
font-size: 12px; |
|||
transition: border-color 0.3s ease; |
|||
|
|||
&::placeholder { |
|||
color: #909399; |
|||
} |
|||
|
|||
&:hover { |
|||
border-color: #c0c4cc; |
|||
} |
|||
|
|||
&:focus { |
|||
border-color: #678BFF; |
|||
} |
|||
} |
|||
|
|||
// 搜索图标：左侧定位 |
|||
.search-icon { |
|||
position: absolute; |
|||
top: 62%; |
|||
left: 50px; |
|||
transform: translateY(-50%); |
|||
color: #909399; |
|||
z-index: 1003; |
|||
} |
|||
|
|||
// 清除图标：右侧定位 + hover效果 |
|||
.clear-icon { |
|||
position: absolute; |
|||
top: 62%; |
|||
right: 20px; |
|||
transform: translateY(-50%); |
|||
color: #909399; |
|||
cursor: pointer; |
|||
z-index: 1003; |
|||
|
|||
&:hover { |
|||
color: #606266; |
|||
} |
|||
} |
|||
|
|||
// 选项容器：调整滚动区域高度 |
|||
.menuContent { |
|||
max-height: 200px; |
|||
/* 减去搜索框高度和尖角高度 */ |
|||
overflow-y: auto; |
|||
padding: 8px; |
|||
padding: 10px 14px 12px 10px; |
|||
} |
|||
|
|||
// 选项按钮：无边框 + hover/选中效果 |
|||
.dropdown-item { |
|||
width: 100%; |
|||
height: 27px; |
|||
padding: 5px 12px 5px 5px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
border: none; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 20px; |
|||
margin: 5px 0; |
|||
color: #040A2D; |
|||
transition: all 0.2s ease; |
|||
|
|||
&:hover { |
|||
background-color: #F3FAFE; |
|||
/* hover浅灰 */ |
|||
} |
|||
|
|||
&.selected { |
|||
background-color: #E5EBFE; |
|||
/* 选中浅蓝 */ |
|||
color: #2741DE; |
|||
/* 选中文字蓝色 */ |
|||
} |
|||
} |
|||
|
|||
// 可选：滚动条美化（与原风格一致） |
|||
.menuContent::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
.menuContent::-webkit-scrollbar-track { |
|||
background: #f1f1f1; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.menuContent::-webkit-scrollbar-thumb { |
|||
background: #c0c4cc; |
|||
border-radius: 3px; |
|||
|
|||
&:hover { |
|||
background: #909399; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<div class="productContent"> |
|||
<div class="selectBox" @click="handelMenu" :class="{ 'active': isOpen }"> |
|||
<span class="placeholder" :style="{ color: selectedItem ? '#333' : '#A8ABB2' }"> |
|||
{{ selectedItem || placeholder }} |
|||
</span> |
|||
<span class="arrow"> |
|||
<el-icon> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="menu" v-show="isOpen"> |
|||
<div class="coin"> |
|||
<div class="coinselect"> |
|||
coin1 |
|||
<span class="coin-arrow"> |
|||
<el-icon> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</span> |
|||
</div> |
|||
<div class="coinoption"> |
|||
coIn2 |
|||
</div> |
|||
</div> |
|||
<div class="product"> |
|||
22 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { ref, computed, watchEffect, onMounted } from 'vue'; |
|||
const searchData = ref('') |
|||
const isOpen = ref(false) |
|||
const selectedItem = ref('') |
|||
const dropdownRef = ref(null) |
|||
const placeholder = ref('请选择产品') |
|||
|
|||
const handelMenu = () => { |
|||
isOpen.value = !isOpen.value |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.productContent { |
|||
position: relative; |
|||
width: 268px; |
|||
font-family: 'Arial', sans-serif; |
|||
} |
|||
|
|||
.selectBox { |
|||
border: 1px solid #e5e7eb; |
|||
padding: 4px 12px; |
|||
/* 调整内边距以匹配按钮高度 */ |
|||
height: 23px; |
|||
/* 调整高度以匹配按钮 */ |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background-color: #fff; |
|||
border-radius: 6px; |
|||
transition: all 0.3s ease; |
|||
|
|||
.placeholder { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #A8ABB2; |
|||
} |
|||
} |
|||
|
|||
// 箭头图标：展开时旋转 |
|||
.arrow { |
|||
margin-left: 8px; |
|||
color: #999; |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.selectBox.active .arrow { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
.menu { |
|||
position: absolute; |
|||
top: 100%; // 紧贴触发器下方 |
|||
left: 0; |
|||
width: 130%; |
|||
max-height: 600px; |
|||
display: flex; |
|||
padding: 10px; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 10px; |
|||
flex-shrink: 0; |
|||
border-radius: 8px; |
|||
background: #E4F0FC; |
|||
box-shadow: 0 0 4px 0 #00000040; |
|||
z-index: 100; |
|||
|
|||
|
|||
.coin { |
|||
width: 100%; |
|||
|
|||
.coinselect { |
|||
width: 100px; |
|||
height: 30px; |
|||
border: 1px solid #175BE5; |
|||
padding: 5px 0 5px 12px; |
|||
display: flex; |
|||
|
|||
.coin-arrow { |
|||
margin-top: 8px; |
|||
color: #111; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue