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,172 @@
|
||||
<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="!modelValue.length" class="placeholder">{{ placeholder }}</span>
|
||||
<span v-else class="aa-cascader-tags">
|
||||
<span v-for="(p, i) in modelValue" :key="i" class="aa-cascader-tag">{{ pathLabels(p).join(' / ') }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span v-else>{{ modelValue && modelValue.length ? pathLabels(modelValue).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), n.value]) }"
|
||||
@click="choose(n, ci)"
|
||||
>
|
||||
<span v-if="multiple && !n.children" class="box">{{ isLeafChecked([...pathTo(ci), 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 setup>
|
||||
import { ref, computed, onBeforeUnmount } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: [Array, null], default: () => [] }, // single: 路径数组 | null ; multiple: 路径数组的数组
|
||||
options: { type: Array, required: true }, // [{ value, label, children? }]
|
||||
multiple: { type: Boolean, default: false },
|
||||
filterable: { type: Boolean, default: true },
|
||||
placeholder: { type: String, default: '请选择' }
|
||||
});
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const root = ref(null);
|
||||
const open = ref(false);
|
||||
const activePath = ref([]);
|
||||
const query = ref('');
|
||||
|
||||
function pathLabels(values) {
|
||||
let nodes = props.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;
|
||||
}
|
||||
function pathTo(level) { return activePath.value.slice(0, level); }
|
||||
|
||||
const columns = computed(() => {
|
||||
const cols = [];
|
||||
let nodes = props.options, path = [];
|
||||
for (let lv = 0; lv <= activePath.value.length; lv++) {
|
||||
cols.push(nodes);
|
||||
if (lv < activePath.value.length) {
|
||||
const next = nodes.find(x => x.value === activePath.value[lv]);
|
||||
path = [...path, activePath.value[lv]];
|
||||
nodes = next.children || [];
|
||||
} else break;
|
||||
}
|
||||
return cols;
|
||||
});
|
||||
|
||||
const allLeaves = computed(() => {
|
||||
const out = [];
|
||||
(function walk(list, acc) {
|
||||
list.forEach(n => {
|
||||
const p = [...acc, n.value];
|
||||
if (n.children && n.children.length) walk(n.children, p);
|
||||
else out.push(p);
|
||||
});
|
||||
})(props.options, []);
|
||||
return out;
|
||||
});
|
||||
const results = computed(() =>
|
||||
query.value ? allLeaves.value.filter(p => pathLabels(p).join('/').includes(query.value)) : []
|
||||
);
|
||||
|
||||
function choose(n, lv) {
|
||||
const full = [...activePath.value.slice(0, lv), n.value];
|
||||
if (n.children && n.children.length) {
|
||||
activePath.value = full;
|
||||
} else {
|
||||
if (props.multiple) {
|
||||
const k = JSON.stringify(full);
|
||||
const arr = Array.isArray(props.modelValue) ? props.modelValue : [];
|
||||
const next = arr.some(p => JSON.stringify(p) === k)
|
||||
? arr.filter(p => JSON.stringify(p) !== k)
|
||||
: [...arr, full];
|
||||
commit(next);
|
||||
} else {
|
||||
commit(full);
|
||||
open.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
function isLeafChecked(p) {
|
||||
return Array.isArray(props.modelValue) && props.modelValue.some(x => JSON.stringify(x) === JSON.stringify(p));
|
||||
}
|
||||
function pickResult(p) {
|
||||
if (props.multiple) {
|
||||
const k = JSON.stringify(p);
|
||||
const arr = Array.isArray(props.modelValue) ? props.modelValue : [];
|
||||
const next = arr.some(x => JSON.stringify(x) === k) ? arr.filter(x => JSON.stringify(x) !== k) : [...arr, p];
|
||||
commit(next);
|
||||
} else { commit(p); open.value = false; }
|
||||
}
|
||||
function commit(next) {
|
||||
emit('update:modelValue', next);
|
||||
emit('change', next);
|
||||
}
|
||||
function toggle() {
|
||||
open.value = !open.value;
|
||||
if (!open.value) { query.value = ''; }
|
||||
}
|
||||
function onDocClick(e) {
|
||||
if (root.value && !root.value.contains(e.target)) { open.value = false; query.value = ''; }
|
||||
}
|
||||
document.addEventListener('click', onDocClick, true);
|
||||
onBeforeUnmount(() => document.removeEventListener('click', onDocClick, true));
|
||||
</script>
|
||||
|
||||
<!-- 样式对齐 组件7.txt Cascader 规范 -->
|
||||
<style scoped>
|
||||
.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