95 lines
5.8 KiB
Plaintext
95 lines
5.8 KiB
Plaintext
<template>
|
||
<div class="kole-listpicker" ref="root">
|
||
<div class="kole-listpicker-trigger" :class="{ 'is-open': open }" @click="open = !open; if(!open) query=''">
|
||
<template v-if="value.length">
|
||
<span v-for="v in value" :key="v" class="kole-listpicker-tag">
|
||
{{ labelOf(v) }}<span class="x" @click.stop="remove(v)">×</span>
|
||
</span>
|
||
</template>
|
||
<span v-else class="kole-listpicker-placeholder">{{ placeholder }}</span>
|
||
<span class="kole-listpicker-caret">▾</span>
|
||
</div>
|
||
|
||
<div v-if="open" class="kole-listpicker-panel">
|
||
<div v-if="filterable" class="kole-listpicker-search">
|
||
<input v-model="query" placeholder="搜索">
|
||
</div>
|
||
<div class="kole-listpicker-selectall" @click="selectAll">全选</div>
|
||
<!-- Vue 2 不允许在 <template v-for> 上写 :key，key 必须落在真实元素上 -->
|
||
<template v-for="(g, gi) in visibleGroups">
|
||
<div :key="'gl-' + gi" class="kole-listpicker-group-label" v-if="g.label">{{ g.label }}</div>
|
||
<div
|
||
v-for="o in g.children" :key="o.value"
|
||
class="kole-listpicker-option" :class="{ 'is-checked': value.includes(o.value), 'is-disabled': o.disabled }"
|
||
@click="toggleOpt(o)"
|
||
>
|
||
<span class="box">{{ value.includes(o.value) ? '✓' : '' }}</span>{{ o.label }}
|
||
</div>
|
||
</template>
|
||
<div v-if="!flatVisible.length" class="kole-listpicker-empty">无匹配项</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'KoleListPicker',
|
||
props: {
|
||
value: { type: Array, default: () => [] },
|
||
options: { type: Array, required: true },
|
||
filterable: { type: Boolean, default: true },
|
||
placeholder: { type: String, default: '请选择' }
|
||
},
|
||
data() { return { open: false, query: '' }; },
|
||
computed: {
|
||
isGrouped() { return this.options.length && this.options[0] && this.options[0].children; },
|
||
flat() { return this.isGrouped ? this.options.flatMap(g => g.children) : this.options; },
|
||
labelMap() { return Object.fromEntries(this.flat.map(o => [o.value, o.label])); },
|
||
flatVisible() { return this.flat.filter(o => o.label.includes(this.query)); },
|
||
visibleGroups() {
|
||
if (!this.isGrouped) return [{ children: this.flatVisible }];
|
||
return this.options
|
||
.map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(this.query)) }))
|
||
.filter(g => g.children.length);
|
||
}
|
||
},
|
||
methods: {
|
||
labelOf(v) { return this.labelMap[v] || v; },
|
||
toggleOpt(o) { if (o.disabled) return; this.commit(this.value.includes(o.value) ? this.value.filter(x => x !== o.value) : [...this.value, o.value]); },
|
||
remove(v) { this.commit(this.value.filter(x => x !== v)); },
|
||
selectAll() { this.commit([...new Set([...this.value, ...this.flatVisible.map(o => o.value)])]); },
|
||
commit(next) { this.$emit('input', next); this.$emit('change', next); },
|
||
onDocClick(e) { if (this.$refs.root && !this.$refs.root.contains(e.target)) { this.open = false; this.query = ''; } }
|
||
},
|
||
mounted() { document.addEventListener('click', this.onDocClick, true); },
|
||
beforeDestroy() { document.removeEventListener('click', this.onDocClick, true); }
|
||
};
|
||
</script>
|
||
|
||
<!-- 样式对齐 组件7.txt ListPicker 规范 -->
|
||
<style>
|
||
.kole-listpicker { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
|
||
.kole-listpicker-trigger { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; padding: 2px 28px 2px 8px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
|
||
.kole-listpicker-trigger:hover { border-color: #2F54EB; }
|
||
.kole-listpicker-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
|
||
.kole-listpicker-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }
|
||
.kole-listpicker-tag .x { cursor: pointer; opacity: .65; }
|
||
.kole-listpicker-tag .x:hover { opacity: 1; }
|
||
.kole-listpicker-placeholder { color: #767676; font-size: 14px; }
|
||
.kole-listpicker-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6E6E6E; }
|
||
.kole-listpicker-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; width: 240px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
|
||
.kole-listpicker-search { padding: 8px; border-bottom: 1px solid #E8ECF1; }
|
||
.kole-listpicker-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }
|
||
.kole-listpicker-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
|
||
.kole-listpicker-selectall { padding: 6px 12px; border-bottom: 1px solid #E8ECF1; cursor: pointer; font-size: 13px; color: #2F54EB; }
|
||
.kole-listpicker-selectall:hover { background: #F5F7FA; }
|
||
.kole-listpicker-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }
|
||
.kole-listpicker-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
|
||
.kole-listpicker-option:hover { background: #F5F7FA; }
|
||
.kole-listpicker-option.is-checked { color: #2F54EB; }
|
||
.kole-listpicker-option .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
|
||
.kole-listpicker-option.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
|
||
.kole-listpicker-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }
|
||
.kole-listpicker-empty { padding: 24px 12px; text-align: center; color: #767676; font-size: 13px; }
|
||
</style>
|