Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
aurora-admin
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="aa-cascader" ref="root">
|
||||
<div class="aa-cascader-trigger" :class="{ 'is-open': open }" @click="toggle">
|
||||
<span v-if="multiple">
|
||||
<span v-if="!value.length" class="placeholder">{{ placeholder }}</span>
|
||||
<span v-else class="aa-cascader-tags">
|
||||
<span v-for="(p, i) in value" :key="i" class="aa-cascader-tag">{{ pathLabels(p).join(' / ') }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span v-else>{{ value && value.length ? pathLabels(value).join(' / ') : placeholder }}</span>
|
||||
<span class="caret">▾</span>
|
||||
</div>
|
||||
|
||||
<div v-if="open && filterable" class="aa-cascader-search">
|
||||
<input v-model="query" placeholder="搜索">
|
||||
</div>
|
||||
|
||||
<div v-if="open" class="aa-cascader-panel">
|
||||
<template v-if="query">
|
||||
<div class="aa-cascader-results">
|
||||
<div v-if="!results.length" class="aa-cascader-empty">无匹配结果</div>
|
||||
<div v-for="(p, i) in results" :key="i" class="aa-cascader-result" @click="pickResult(p)">{{ pathLabels(p).join(' / ') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="(col, ci) in columns" :key="ci" class="aa-cascader-col">
|
||||
<div
|
||||
v-for="n in col" :key="n.value"
|
||||
class="aa-cascader-opt"
|
||||
:class="{ 'is-active': activePath[ci] === n.value, 'is-checked': multiple && isLeafChecked(pathTo(ci).concat([n.value])) }"
|
||||
@click="choose(n, ci)"
|
||||
>
|
||||
<span v-if="multiple && !n.children" class="box">{{ isLeafChecked(pathTo(ci).concat([n.value])) ? '✓' : '' }}</span>
|
||||
<span>{{ n.label }}</span>
|
||||
<span v-if="n.children && n.children.length" class="arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AaCascader',
|
||||
props: {
|
||||
value: { type: [Array, null], default: () => [] },
|
||||
options: { type: Array, required: true },
|
||||
multiple: { type: Boolean, default: false },
|
||||
filterable: { type: Boolean, default: true },
|
||||
placeholder: { type: String, default: '请选择' }
|
||||
},
|
||||
data() { return { open: false, activePath: [], query: '' }; },
|
||||
computed: {
|
||||
columns() {
|
||||
const cols = [];
|
||||
let nodes = this.options, path = [];
|
||||
for (let lv = 0; lv <= this.activePath.length; lv++) {
|
||||
cols.push(nodes);
|
||||
if (lv < this.activePath.length) {
|
||||
const next = nodes.find(x => x.value === this.activePath[lv]);
|
||||
path = path.concat([this.activePath[lv]]);
|
||||
nodes = next.children || [];
|
||||
} else break;
|
||||
}
|
||||
return cols;
|
||||
},
|
||||
allLeaves() {
|
||||
const out = [];
|
||||
(function walk(list, acc) {
|
||||
list.forEach(n => {
|
||||
const p = acc.concat([n.value]);
|
||||
if (n.children && n.children.length) walk(n.children, p);
|
||||
else out.push(p);
|
||||
});
|
||||
})(this.options, []);
|
||||
return out;
|
||||
},
|
||||
results() {
|
||||
return this.query ? this.allLeaves.filter(p => this.pathLabels(p).join('/').includes(this.query)) : [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pathLabels(values) {
|
||||
let nodes = this.options, labels = [];
|
||||
for (const v of (values || [])) {
|
||||
const n = nodes.find(x => x.value === v);
|
||||
if (!n) break;
|
||||
labels.push(n.label); nodes = n.children || [];
|
||||
}
|
||||
return labels;
|
||||
},
|
||||
pathTo(level) { return this.activePath.slice(0, level); },
|
||||
isLeafChecked(p) {
|
||||
return Array.isArray(this.value) && this.value.some(x => JSON.stringify(x) === JSON.stringify(p));
|
||||
},
|
||||
choose(n, lv) {
|
||||
const full = this.activePath.slice(0, lv).concat([n.value]);
|
||||
if (n.children && n.children.length) {
|
||||
this.activePath = full;
|
||||
} else {
|
||||
if (this.multiple) {
|
||||
const k = JSON.stringify(full);
|
||||
const arr = Array.isArray(this.value) ? this.value : [];
|
||||
const next = arr.some(p => JSON.stringify(p) === k) ? arr.filter(p => JSON.stringify(p) !== k) : arr.concat([full]);
|
||||
this.commit(next);
|
||||
} else { this.commit(full); this.open = false; }
|
||||
}
|
||||
},
|
||||
pickResult(p) {
|
||||
if (this.multiple) {
|
||||
const k = JSON.stringify(p);
|
||||
const arr = Array.isArray(this.value) ? this.value : [];
|
||||
const next = arr.some(x => JSON.stringify(x) === k) ? arr.filter(x => JSON.stringify(x) !== k) : arr.concat([p]);
|
||||
this.commit(next);
|
||||
} else { this.commit(p); this.open = false; }
|
||||
},
|
||||
commit(next) { this.$emit('input', next); this.$emit('change', next); },
|
||||
toggle() { this.open = !this.open; if (!this.open) this.query = ''; },
|
||||
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 Cascader 规范 -->
|
||||
<style>
|
||||
.aa-cascader { position: relative; display: inline-block; min-width: 200px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
|
||||
.aa-cascader-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 12px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
|
||||
.aa-cascader-trigger:hover { border-color: #2F54EB; }
|
||||
.aa-cascader-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
|
||||
.aa-cascader-trigger .placeholder { color: #BFBFBF; }
|
||||
.aa-cascader-trigger .caret { color: #8C8C8C; transition: transform .15s; flex-shrink: 0; }
|
||||
.aa-cascader-trigger.is-open .caret { transform: rotate(180deg); }
|
||||
.aa-cascader-tags { display: flex; flex-wrap: wrap; gap: 4px; }
|
||||
.aa-cascader-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; white-space: nowrap; }
|
||||
.aa-cascader-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: flex; }
|
||||
.aa-cascader-col { min-width: 140px; max-height: 240px; overflow: auto; border-right: 1px solid #E8ECF1; padding: 4px 0; }
|
||||
.aa-cascader-col:last-child { border-right: none; }
|
||||
.aa-cascader-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; color: #262626; }
|
||||
.aa-cascader-opt:hover { background: #F5F7FA; }
|
||||
.aa-cascader-opt.is-active { background: #F0F5FF; color: #2F54EB; font-weight: 500; }
|
||||
.aa-cascader-opt .arrow { color: #8C8C8C; font-size: 12px; }
|
||||
.aa-cascader-opt .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; }
|
||||
.aa-cascader-opt.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
|
||||
.aa-cascader-search { position: absolute; z-index: 101; top: calc(100% + 4px); left: 0; width: 260px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 8px; }
|
||||
.aa-cascader-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; }
|
||||
.aa-cascader-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
|
||||
.aa-cascader-search input::placeholder { color: #BFBFBF; }
|
||||
.aa-cascader-results { max-height: 200px; overflow: auto; margin-top: 8px; }
|
||||
.aa-cascader-result { padding: 6px 8px; cursor: pointer; font-size: 14px; color: #262626; }
|
||||
.aa-cascader-result:hover { background: #F5F7FA; }
|
||||
.aa-cascader-empty { padding: 16px 8px; text-align: center; color: #BFBFBF; font-size: 13px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user