|
|
|
@ -1,11 +1,13 @@ |
|
|
|
<template> |
|
|
|
<div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" :style="{width}"> |
|
|
|
<div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" |
|
|
|
:style="{ width }"> |
|
|
|
<!-- 触发按钮 --> |
|
|
|
<div class="select-trigger" @click="toggleDropdown"> |
|
|
|
<slot name="trigger"> |
|
|
|
{{ selectedItem ? selectedItem[displayKey] : placeholder }} |
|
|
|
</slot> |
|
|
|
<img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt=""> |
|
|
|
<img class="arrow-icon" |
|
|
|
:src="isOpen ? require('../assets/dropDown_open.png') : require('../assets/dropDown_expand.png')" alt=""> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 下拉内容 --> |
|
|
|
@ -15,7 +17,7 @@ |
|
|
|
<div v-if="options"> |
|
|
|
<div v-for="(item, index) in options" :key="index" class="dropdown-item " |
|
|
|
:class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)"> |
|
|
|
<slot name="item" :item="item" > |
|
|
|
<slot name="item" :item="item"> |
|
|
|
<div class="flex-between"> |
|
|
|
<div class="left"> |
|
|
|
<p class="one">{{ item[displayKey] }}</p> |
|
|
|
@ -44,6 +46,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { EventBus } from '@/utils/eventBus' |
|
|
|
export default { |
|
|
|
props: { |
|
|
|
width: { |
|
|
|
@ -56,7 +59,7 @@ export default { |
|
|
|
}, |
|
|
|
options_null: { |
|
|
|
type: Object, |
|
|
|
default: () => {}, |
|
|
|
default: () => { }, |
|
|
|
}, |
|
|
|
placeholder: { |
|
|
|
type: String, |
|
|
|
@ -68,7 +71,7 @@ export default { |
|
|
|
}, |
|
|
|
valueKey: { |
|
|
|
type: String, |
|
|
|
default: "value", |
|
|
|
default: "value", |
|
|
|
}, |
|
|
|
displayKey: { |
|
|
|
type: String, |
|
|
|
@ -89,14 +92,24 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 监听关闭所有下拉框的事件 |
|
|
|
EventBus.$on('close-all-dropdowns', this.closeDropdown) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
// 组件销毁移除监听 |
|
|
|
EventBus.$off('close-all-dropdowns', this.closeDropdown) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
closeDropdown() { |
|
|
|
this.isOpen = false; |
|
|
|
}, |
|
|
|
toggleDropdown(e) { |
|
|
|
if(e) { |
|
|
|
if (e) { |
|
|
|
e.stopPropagation(); |
|
|
|
} |
|
|
|
// 先通知所有下拉框关闭 |
|
|
|
EventBus.$emit('close-all-dropdowns') |
|
|
|
this.isOpen = !this.isOpen; |
|
|
|
}, |
|
|
|
selectItem(item) { |
|
|
|
|
