879 lines
25 KiB
Vue
879 lines
25 KiB
Vue
|
<template>
|
|||
|
|
<view class="da-dropdown" :class="{'is-fixed': fixedTop, 'has-search': hasSearch}" :style="dropdownStyle">
|
|||
|
|
<!-- 搜索 -->
|
|||
|
|
<view class="da-dropdown-search" v-if="hasSearch" @touchmove.stop.prevent="handleMove">
|
|||
|
|
<input
|
|||
|
|
class="da-dropdown-search-input"
|
|||
|
|
:value="searchItem.value"
|
|||
|
|
@input="handleSearchChange"
|
|||
|
|
:placeholder="searchItem.placeholder || '请输入'"
|
|||
|
|
@confirm="handleSearch"
|
|||
|
|
confirm-type="search" />
|
|||
|
|
<button class="da-dropdown-search-btn" @click="handleSearch">搜索</button>
|
|||
|
|
</view>
|
|||
|
|
<!-- 菜单 -->
|
|||
|
|
<view class="da-dropdown-menu" @touchmove.stop.prevent="handleMove">
|
|||
|
|
<view
|
|||
|
|
class="da-dropdown-menu-item"
|
|||
|
|
:class="{'is-hidden':item.isHidden === 'true'}"
|
|||
|
|
v-for="(item, index) in menuList"
|
|||
|
|
:key="index"
|
|||
|
|
@click="handleMenuClick(index,item)">
|
|||
|
|
<text class="da-dropdown-menu-item--text" :class="item.isActived ? 'is-actived' : ''" >{{ item.title }}</text>
|
|||
|
|
<view class="da-dropdown-menu-item--icon" v-if="item.showArrow" style="padding-left: 2px;">
|
|||
|
|
<text v-if="item.isLoading" class="is--loading"></text>
|
|||
|
|
<text v-else-if="item.isClick" class="is--arrup"></text>
|
|||
|
|
<text v-else class="is--arrdown"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="da-dropdown-menu-item--sort" v-else-if="item.showSort" :class="'is--' + item.value"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 弹出 -->
|
|||
|
|
<view class="da-dropdown-content" :class="{'is-show': isShow,'is-visible': isVisible}">
|
|||
|
|
<view class="da-dropdown-content-popup" :class="isShow ? 'is-show' : ''">
|
|||
|
|
<view class="da-dropdown-popup-box" v-for="(item, index) in menuList" :key="index">
|
|||
|
|
<!-- 下拉列表 -->
|
|||
|
|
<DropdownCell
|
|||
|
|
v-if="item.type === 'cell' && index === currentIndex"
|
|||
|
|
:dropdownItem="item"
|
|||
|
|
:dropdownIndex="index"
|
|||
|
|
@success="handleCellSelect"></DropdownCell>
|
|||
|
|
<!-- 多条件筛选 -->
|
|||
|
|
<DropdownFilter
|
|||
|
|
v-if="item.type === 'filter' && index === currentIndex"
|
|||
|
|
:dropdownItem="item"
|
|||
|
|
:dropdownIndex="index"
|
|||
|
|
@success="handleFilterConfirm"></DropdownFilter>
|
|||
|
|
<!-- 级联选择 -->
|
|||
|
|
<DropdownPicker
|
|||
|
|
v-if="item.type === 'picker' && index === currentIndex"
|
|||
|
|
:dropdownItem="item"
|
|||
|
|
:dropdownIndex="index"
|
|||
|
|
@success="handlePickerConfirm" />
|
|||
|
|
<!-- 日期范围 -->
|
|||
|
|
<DropdownDaterange
|
|||
|
|
v-if="item.type === 'daterange' && index === currentIndex"
|
|||
|
|
:dropdownItem="item"
|
|||
|
|
:dropdownIndex="index"
|
|||
|
|
@success="handleDaterangeConfirm" />
|
|||
|
|
<!-- 弹窗插槽拓展X5 -->
|
|||
|
|
<template v-if="item.type === 'slot1' && index === currentIndex">
|
|||
|
|
<slot name="slot1" :item="item" :index="index"></slot>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="item.type === 'slot2' && index === currentIndex">
|
|||
|
|
<slot name="slot2" :item="item" :index="index"></slot>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="item.type === 'slot3' && index === currentIndex">
|
|||
|
|
<slot name="slot3" :item="item" :index="index"></slot>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="item.type === 'slot4' && index === currentIndex">
|
|||
|
|
<slot name="slot4" :item="item" :index="index"></slot>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="item.type === 'slot5' && index === currentIndex">
|
|||
|
|
<slot name="slot5" :item="item" :index="index"></slot>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="da-dropdown-content-mask"
|
|||
|
|
v-if="fixedTop"
|
|||
|
|
@tap="handlePopupMask"
|
|||
|
|
@touchmove.stop.prevent="handleMove" />
|
|||
|
|
</view>
|
|||
|
|
<view class="da-dropdown--blank" v-if="fixedTop"></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { deepClone, menuInitOpts, getValueByKey, checkDataField } from './utils'
|
|||
|
|
import DropdownPicker from './components/picker.vue'
|
|||
|
|
import DropdownCell from './components/cell.vue'
|
|||
|
|
import DropdownFilter from './components/filter.vue'
|
|||
|
|
import DropdownDaterange from './components/daterange.vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: { DropdownPicker, DropdownCell, DropdownFilter, DropdownDaterange },
|
|||
|
|
props: {
|
|||
|
|
/**
|
|||
|
|
* 导航菜单数据
|
|||
|
|
*/
|
|||
|
|
dropdownMenu: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 激活颜色
|
|||
|
|
*/
|
|||
|
|
themeColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#007aff',
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 常规颜色
|
|||
|
|
*/
|
|||
|
|
textColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#333333',
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 背景颜色，当固定在顶部时，此为必填
|
|||
|
|
*/
|
|||
|
|
bgColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#ffffff',
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否固定在顶部
|
|||
|
|
*/
|
|||
|
|
fixedTop: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 固定在头部时的位置，单位px
|
|||
|
|
* 如果页面定义了 "navigationStyle": "custom" ，因此固定头部时需要额外获取状态栏高度，以免被异形屏头部覆盖
|
|||
|
|
*/
|
|||
|
|
fixedTopValue: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0,
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 弹窗过渡时间
|
|||
|
|
*/
|
|||
|
|
duration: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 300,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
currentIndex: -1,
|
|||
|
|
isVisible: false,
|
|||
|
|
isShow: false,
|
|||
|
|
menuList: [],
|
|||
|
|
hasSearch: false,
|
|||
|
|
searchItem: null,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
/**
|
|||
|
|
* 主题样式
|
|||
|
|
*/
|
|||
|
|
dropdownStyle() {
|
|||
|
|
return `
|
|||
|
|
--dropdown-theme-color: ${this.themeColor};
|
|||
|
|
--dropdown-text-color: ${this.textColor};
|
|||
|
|
--dropdown-background-color: ${this.bgColor};
|
|||
|
|
--dropdown-popup-duration: ${this.duration / 1000}}s;
|
|||
|
|
--dropdown-fixed-top: ${this.fixedTopValue || 0}}px;
|
|||
|
|
`
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initDomInfo()
|
|||
|
|
this.initData()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/**
|
|||
|
|
* 初始化数据
|
|||
|
|
*/
|
|||
|
|
async initData() {
|
|||
|
|
const newMenu = deepClone(this.dropdownMenu || [])
|
|||
|
|
const allItem = { label: '不限', value: '-9999' }
|
|||
|
|
if (!newMenu || newMenu.length === 0) {
|
|||
|
|
this.menuList = []
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let i = 0; i < newMenu.length; i++) {
|
|||
|
|
let item = newMenu[i]
|
|||
|
|
if (item?.type) {
|
|||
|
|
item = { ...(menuInitOpts[newMenu[i]['type']] || {}), ...item }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理异步初始项
|
|||
|
|
if (typeof item.syncDataFn === 'function') {
|
|||
|
|
item.isLoading = true
|
|||
|
|
item.syncDataFn(item, i).then((res) => {
|
|||
|
|
this.menuList[i].options = checkDataField(item.syncDataKey ? getValueByKey(res, item.syncDataKey) : res, item.field)
|
|||
|
|
// 处理 不限 项
|
|||
|
|
if (this.menuList[i].showAll) {
|
|||
|
|
if (this.menuList[i].options.findIndex((k) => k.value === allItem.value) === -1) {
|
|||
|
|
this.menuList[i].options.unshift(allItem)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.menuList[i].isLoading = false
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.menuList[i].isLoading = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (item.options?.length) {
|
|||
|
|
// 同步差异字段
|
|||
|
|
item.options = checkDataField(item.options, item.field)
|
|||
|
|
// 处理 不限 项
|
|||
|
|
if (item.showAll) {
|
|||
|
|
if (item.options.findIndex((k) => k.value === allItem.value) === -1) {
|
|||
|
|
item.options.unshift(allItem)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理已选项
|
|||
|
|
if (typeof item.value !== 'undefined') {
|
|||
|
|
switch (item.type) {
|
|||
|
|
case 'cell':
|
|||
|
|
for (let x = 0; x < item.options.length; x++) {
|
|||
|
|
const k = item.options[x]
|
|||
|
|
if (k.value === item.value) {
|
|||
|
|
item.isActived = true
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
break
|
|||
|
|
case 'click':
|
|||
|
|
item.isActived = item.value === true
|
|||
|
|
|
|||
|
|
break
|
|||
|
|
case 'sort':
|
|||
|
|
item.isActived = item.value === 'asc' || item.value === 'desc'
|
|||
|
|
|
|||
|
|
break
|
|||
|
|
case 'filter':
|
|||
|
|
item.isActived = JSON.stringify(item.value || {}) !== '{}'
|
|||
|
|
|
|||
|
|
break
|
|||
|
|
case 'picker':
|
|||
|
|
item.isActived = item.value?.length
|
|||
|
|
|
|||
|
|
break
|
|||
|
|
case 'daterange':
|
|||
|
|
|
|||
|
|
item.isActived = item.value?.start && item.value?.end
|
|||
|
|
break
|
|||
|
|
case 'slot':
|
|||
|
|
item.isActived = !!item.value
|
|||
|
|
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
item.isActived = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 搜索项特殊处理
|
|||
|
|
if (!this.hasSearch && item.type === 'search') {
|
|||
|
|
item.isHidden = 'true'
|
|||
|
|
this.searchItem = item
|
|||
|
|
this.hasSearch = true
|
|||
|
|
}
|
|||
|
|
newMenu[i] = item
|
|||
|
|
}
|
|||
|
|
this.menuList = newMenu
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 更新数据
|
|||
|
|
* @param prop
|
|||
|
|
* @param value
|
|||
|
|
* @param key
|
|||
|
|
*/
|
|||
|
|
updateMenu(prop, value, key) {
|
|||
|
|
if (!key) {
|
|||
|
|
console.error('updateMenu 错误，key不存在')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const idx = this.getMenuIndex(prop)
|
|||
|
|
this.menuList[idx][key] = key === 'options' ? checkDataField(value, this.menuList[idx].field || null) : value
|
|||
|
|
|
|||
|
|
// 去除点击效果
|
|||
|
|
if (key === 'value' && (!value && value !== 0)) {
|
|||
|
|
this.menuList[idx][idx].isActived = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 更新数据
|
|||
|
|
* @param prop
|
|||
|
|
* @param state
|
|||
|
|
*/
|
|||
|
|
setMenuLoading(prop, state) {
|
|||
|
|
const idx = this.getMenuIndex(prop)
|
|||
|
|
this.menuList[idx].isLoading = state
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 获取菜单项位置
|
|||
|
|
* @param prop
|
|||
|
|
*/
|
|||
|
|
getMenuIndex(prop) {
|
|||
|
|
return this.menuList.findIndex(k => k.prop === prop)
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 获取菜单数据
|
|||
|
|
*/
|
|||
|
|
getMenuList() {
|
|||
|
|
return this.menuList
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 初始化获取系统信息
|
|||
|
|
*/
|
|||
|
|
initDomInfo() {},
|
|||
|
|
/**
|
|||
|
|
* 打开弹窗
|
|||
|
|
* @param index 当前激活索引
|
|||
|
|
*/
|
|||
|
|
openMenuItemPopup(index) {
|
|||
|
|
this.isShow = true
|
|||
|
|
this.isVisible = true
|
|||
|
|
this.currentIndex = index
|
|||
|
|
this.menuList[index].isClick = true
|
|||
|
|
this.$emit('open', this.currentIndex)
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 关闭弹窗
|
|||
|
|
*/
|
|||
|
|
closeMenuPopup() {
|
|||
|
|
this.clearClickState()
|
|||
|
|
this.isShow = false
|
|||
|
|
// 延迟移除下拉弹窗
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isVisible = false
|
|||
|
|
this.clearIndex()
|
|||
|
|
}, this.duration)
|
|||
|
|
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
this.$emit('close', this.currentIndex, this.menuList)
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 点击蒙层
|
|||
|
|
*/
|
|||
|
|
handlePopupMask() {
|
|||
|
|
this.closeMenuPopup()
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 清除点击状态
|
|||
|
|
*/
|
|||
|
|
clearClickState() {
|
|||
|
|
if (this.menuList?.length) {
|
|||
|
|
this.menuList.forEach(k => {
|
|||
|
|
k.isClick = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 清理滚动
|
|||
|
|
*/
|
|||
|
|
handleMove() {
|
|||
|
|
return false
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 关闭弹窗
|
|||
|
|
*/
|
|||
|
|
clearIndex() {
|
|||
|
|
this.currentIndex = -1
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 点击菜单项
|
|||
|
|
*/
|
|||
|
|
handleMenuClick(index, item) {
|
|||
|
|
if (item.isLoading) return
|
|||
|
|
|
|||
|
|
const dropdownMenu = this.menuList
|
|||
|
|
const menuItem = dropdownMenu[index]
|
|||
|
|
|
|||
|
|
dropdownMenu.forEach(k => {
|
|||
|
|
k.isClick = false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (menuItem.type === 'click') {
|
|||
|
|
return this.handleItemClick(menuItem, index)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (menuItem.type === 'sort') {
|
|||
|
|
return this.handleItemSort(menuItem, index)
|
|||
|
|
}
|
|||
|
|
if (index === this.currentIndex) {
|
|||
|
|
item.isClick = false
|
|||
|
|
this.closeMenuPopup()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
item.isClick = true
|
|||
|
|
|
|||
|
|
this.openMenuItemPopup(index)
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 获取菜单值
|
|||
|
|
*/
|
|||
|
|
getMenuValue() {
|
|||
|
|
const obj = {}
|
|||
|
|
this.menuList.forEach(k => {
|
|||
|
|
obj[k.prop] = k.value
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return obj
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 搜索输入
|
|||
|
|
*/
|
|||
|
|
handleSearchChange(e) {
|
|||
|
|
this.searchItem.value = e?.detail?.value
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 确定搜索
|
|||
|
|
*/
|
|||
|
|
handleSearch() {
|
|||
|
|
if (this.searchItem?.prop) {
|
|||
|
|
const res = { [this.searchItem.prop]: this.searchItem.value }
|
|||
|
|
this.$emit('confirm', res, this.getMenuValue())
|
|||
|
|
} else {
|
|||
|
|
console.error(`菜单项${this.searchItem.title}未定义prop，返回内容失败`)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 菜单项-下拉列表回调
|
|||
|
|
* @param callbackData 操作返回的数据
|
|||
|
|
* @param cellItem 下拉列表项数据
|
|||
|
|
* @param index 菜单索引
|
|||
|
|
*/
|
|||
|
|
handleCellSelect(callbackData, cellItem, index) {
|
|||
|
|
const dropdownMenu = this.menuList
|
|||
|
|
const item = dropdownMenu[index]
|
|||
|
|
item.isClick = false
|
|||
|
|
|
|||
|
|
if (cellItem.value === '-9999') {
|
|||
|
|
item.isActived = false
|
|||
|
|
item.activeTitle = undefined
|
|||
|
|
item.value = null
|
|||
|
|
} else {
|
|||
|
|
item.isActived = true
|
|||
|
|
item.activeTitle = cellItem.label
|
|||
|
|
item.value = cellItem.value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.closeMenuPopup()
|
|||
|
|
this.$emit('confirm', callbackData, this.getMenuValue())
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 菜单项-点击
|
|||
|
|
* @param item 菜单项
|
|||
|
|
* @param index 菜单项索引
|
|||
|
|
*/
|
|||
|
|
handleItemClick(item, index) {
|
|||
|
|
this.closeMenuPopup()
|
|||
|
|
|
|||
|
|
if (this.currentIndex === -1) {
|
|||
|
|
this.currentIndex = index
|
|||
|
|
item.value = true
|
|||
|
|
item.isActived = true
|
|||
|
|
} else {
|
|||
|
|
item.value = false
|
|||
|
|
item.isActived = false
|
|||
|
|
this.clearIndex()
|
|||
|
|
}
|
|||
|
|
if (item?.prop) {
|
|||
|
|
const res = { [item.prop]: item.value }
|
|||
|
|
this.$emit('confirm', res, this.getMenuValue())
|
|||
|
|
} else {
|
|||
|
|
console.error(`菜单项${item.title}未定义prop，返回内容失败`)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 菜单项-排序
|
|||
|
|
* @param item 菜单项
|
|||
|
|
* @param index 菜单项索引
|
|||
|
|
*/
|
|||
|
|
handleItemSort(item, index) {
|
|||
|
|
this.closeMenuPopup()
|
|||
|
|
|
|||
|
|
if (item.value === 'asc') {
|
|||
|
|
item.value = 'desc'
|
|||
|
|
this.currentIndex = index
|
|||
|
|
item.isActived = true
|
|||
|
|
} else if (item.value === 'desc') {
|
|||
|
|
item.value = undefined
|
|||
|
|
item.isActived = false
|
|||
|
|
this.clearIndex()
|
|||
|
|
} else {
|
|||
|
|
item.value = 'asc'
|
|||
|
|
this.currentIndex = index
|
|||
|
|
item.isActived = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (item?.prop) {
|
|||
|
|
const res = { [item.prop]: item.value }
|
|||
|
|
this.$emit('confirm', res, this.getMenuValue())
|
|||
|
|
} else {
|
|||
|
|
console.error(`菜单项${item.title}未定义prop，返回内容失败`)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 菜单项-筛选回调
|
|||
|
|
* @param callbackData 操作返回的数据
|
|||
|
|
* @param filterData 筛选数据
|
|||
|
|
* @param index 菜单索引
|
|||
|
|
*/
|
|||
|
|
handleFilterConfirm(callbackData, filterData, index) {
|
|||
|
|
const dropdownMenu = this.menuList
|
|||
|
|
const item = dropdownMenu[index]
|
|||
|
|
item.isClick = false
|
|||
|
|
|
|||
|
|
item.isActived = JSON.stringify(filterData || {}) !== '{}'
|
|||
|
|
item.activeTitle = undefined
|
|||
|
|
item.value = filterData
|
|||
|
|
|
|||
|
|
this.closeMenuPopup()
|
|||
|
|
this.$emit('confirm', callbackData, this.getMenuValue())
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 菜单项-级联回调
|
|||
|
|
* @param callbackData 操作返回的数据
|
|||
|
|
* @param pickerItem 级联已选数据
|
|||
|
|
* @param index 菜单索引
|
|||
|
|
*/
|
|||
|
|
handlePickerConfirm(callbackData, pickerItem, index) {
|
|||
|
|
const dropdownMenu = this.menuList
|
|||
|
|
const item = dropdownMenu[index]
|
|||
|
|
item.isClick = false
|
|||
|
|
|
|||
|
|
if (!pickerItem || pickerItem[0] === '-9999') {
|
|||
|
|
item.isActived = false
|
|||
|
|
item.activeTitle = undefined
|
|||
|
|
item.value = null
|
|||
|
|
} else {
|
|||
|
|
item.isActived = true
|
|||
|
|
item.value = pickerItem
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.closeMenuPopup()
|
|||
|
|
this.$emit('confirm', callbackData, this.getMenuValue())
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 菜单项-日期范围回调
|
|||
|
|
* @param callbackData 操作返回的数据
|
|||
|
|
* @param daterangeItem 日期范围数据
|
|||
|
|
* @param index 菜单索引
|
|||
|
|
*/
|
|||
|
|
handleDaterangeConfirm(callbackData, daterangeItem, index) {
|
|||
|
|
const dropdownMenu = this.menuList
|
|||
|
|
const item = dropdownMenu[index]
|
|||
|
|
item.isClick = false
|
|||
|
|
|
|||
|
|
if (daterangeItem?.start && daterangeItem?.end) {
|
|||
|
|
item.isActived = true
|
|||
|
|
item.value = daterangeItem
|
|||
|
|
} else {
|
|||
|
|
item.isActived = false
|
|||
|
|
item.activeTitle = undefined
|
|||
|
|
item.value = null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.closeMenuPopup()
|
|||
|
|
this.$emit('confirm', callbackData, this.getMenuValue())
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@font-face {
|
|||
|
|
font-family: 'da-dropdown-iconfont'; /* Project id */
|
|||
|
|
src: url('data:application/octet-stream;base64,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') format('truetype');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.da-dropdown {
|
|||
|
|
--dropdown-menu-height: 80rpx;
|
|||
|
|
--dropdown-popup-duration: 0.3s;
|
|||
|
|
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 888;
|
|||
|
|
width: 100%;
|
|||
|
|
line-height: 1;
|
|||
|
|
|
|||
|
|
&--blank {
|
|||
|
|
width: 100%;
|
|||
|
|
height: var(--dropdown-menu-height);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-search {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: var(--dropdown-menu-height);
|
|||
|
|
padding: 10rpx 20rpx 6rpx;
|
|||
|
|
background: var(--dropdown-background-color, #fff);
|
|||
|
|
|
|||
|
|
&-input {
|
|||
|
|
flex-grow: 1;
|
|||
|
|
height: 60rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: var(--dropdown-text-color);
|
|||
|
|
background: #f6f6f6;
|
|||
|
|
border-radius: 8rpx 0 0 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-btn {
|
|||
|
|
display: flex;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 60rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: var(--dropdown-text-color);
|
|||
|
|
background: #f6f6f6;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 0 8rpx 8rpx 0;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-menu {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: var(--dropdown-menu-height);
|
|||
|
|
background: var(--dropdown-background-color, #fff);
|
|||
|
|
box-shadow: 0 1rpx 0 0 #bbb;
|
|||
|
|
|
|||
|
|
&-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-grow: 1;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.is-hidden {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: var(--dropdown-text-color);
|
|||
|
|
|
|||
|
|
&.is-actived {
|
|||
|
|
color: var(--dropdown-theme-color);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--icon {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-left: 2px;
|
|||
|
|
color: #bbb;
|
|||
|
|
|
|||
|
|
.is--loading,
|
|||
|
|
.is--arrup,
|
|||
|
|
.is--arrdown {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
|
|||
|
|
font-family: 'da-dropdown-iconfont' !important;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-style: normal;
|
|||
|
|
content: '\e604';
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.is--loading {
|
|||
|
|
animation: RunLoading 1s linear 0s infinite;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '\e627';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.is--arrup {
|
|||
|
|
color: var(--dropdown-theme-color);
|
|||
|
|
transform: rotate(180deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--sort {
|
|||
|
|
position: relative;
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
transition: transform 0.3s;
|
|||
|
|
|
|||
|
|
&::before,
|
|||
|
|
&::after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: calc(50% - 16rpx);
|
|||
|
|
left: 0;
|
|||
|
|
content: '';
|
|||
|
|
border-color: transparent;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-width: 8rpx;
|
|||
|
|
border-bottom-color: #bbb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
top: calc(50% + 6rpx);
|
|||
|
|
border-top-color: #bbb;
|
|||
|
|
border-bottom-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.is--asc::before {
|
|||
|
|
border-bottom-color: var(--dropdown-theme-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.is--desc::after {
|
|||
|
|
border-top-color: var(--dropdown-theme-color);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-content {
|
|||
|
|
position: absolute;
|
|||
|
|
top: var(--dropdown-menu-height);
|
|||
|
|
left: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
visibility: hidden;
|
|||
|
|
box-shadow: 0 -1rpx 0 0 #bbb;
|
|||
|
|
transition: all var(--dropdown-popup-duration, 0.3s) linear;
|
|||
|
|
|
|||
|
|
&.is-show {
|
|||
|
|
z-index: 901;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.is-visible {
|
|||
|
|
visibility: visible;
|
|||
|
|
animation: CustomBS var(--dropdown-popup-duration) linear var(--dropdown-popup-duration) forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 9;
|
|||
|
|
width: 100%;
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-popup {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
max-height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
transition: transform var(--dropdown-popup-duration) linear;
|
|||
|
|
transform: translateY(-100%);
|
|||
|
|
|
|||
|
|
&.is-show {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-popup-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
line-height: 1;
|
|||
|
|
background: var(--dropdown-background-color, #fff);
|
|||
|
|
transition: border-radius var(--dropdown-popup-duration) linear;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.has-search {
|
|||
|
|
.da-dropdown {
|
|||
|
|
&-content {
|
|||
|
|
top: calc(var(--dropdown-menu-height) + var(--dropdown-menu-height));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 固定至顶 */
|
|||
|
|
&.is-fixed {
|
|||
|
|
z-index: 980;
|
|||
|
|
|
|||
|
|
.da-dropdown {
|
|||
|
|
&-search {
|
|||
|
|
position: fixed;
|
|||
|
|
top: calc(var(--window-top, 0px) + var(--dropdown-fixed-top, 0px));
|
|||
|
|
right: 0;
|
|||
|
|
left: 0;
|
|||
|
|
max-width: 1190px;
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-menu {
|
|||
|
|
position: fixed;
|
|||
|
|
top: calc(var(--window-top, 0px) + var(--dropdown-fixed-top, 0px));
|
|||
|
|
right: 0;
|
|||
|
|
left: 0;
|
|||
|
|
max-width: 1190px;
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-content {
|
|||
|
|
position: fixed;
|
|||
|
|
top: calc(var(--window-top, 0px) + var(--dropdown-fixed-top, 0px) + var(--dropdown-menu-height, 0px));
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
height: 100%;
|
|||
|
|
// box-shadow: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.has-search {
|
|||
|
|
.da-dropdown {
|
|||
|
|
&-menu {
|
|||
|
|
top: calc(var(--window-top, 0px) + var(--dropdown-fixed-top, 0px) + var(--dropdown-menu-height, 0px));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&-content {
|
|||
|
|
top: calc(var(--window-top, 0px) + var(--dropdown-fixed-top, 0px) + var(--dropdown-menu-height, 0px) + var(--dropdown-menu-height, 0px));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--blank {
|
|||
|
|
height: calc(var(--dropdown-fixed-top, 0px) + var(--dropdown-menu-height, 0px) + var(--dropdown-menu-height, 0px));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes RunLoading {
|
|||
|
|
0% {
|
|||
|
|
transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: rotate(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes CustomBS {
|
|||
|
|
0% {
|
|||
|
|
box-shadow: 0 -1rpx 0 0 #bbb, 0 20rpx 20rpx -10rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
box-shadow: 0 -1rpx 0 0 #bbb, 0 20rpx 20rpx -10rpx rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|