520 lines
14 KiB
Vue
520 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<TPopup
|
|||
|
|
:class="tClass"
|
|||
|
|
:visible="dataVisible"
|
|||
|
|
placement="bottom"
|
|||
|
|
@visible-change="onVisibleChange"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
:style="tools._style([customStyle])"
|
|||
|
|
:class="name"
|
|||
|
|
>
|
|||
|
|
<view :class="name + '__title'">
|
|||
|
|
<slot name="title" />
|
|||
|
|
{{ title }}
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
:class="name + '__close-btn'"
|
|||
|
|
@click="onClose"
|
|||
|
|
>
|
|||
|
|
<slot name="close-btn" />
|
|||
|
|
<TIcon
|
|||
|
|
v-if="closeBtn"
|
|||
|
|
size="48rpx"
|
|||
|
|
name="close"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<slot name="header" />
|
|||
|
|
|
|||
|
|
<view :class="name + '__content'">
|
|||
|
|
<block v-if="steps && steps.length">
|
|||
|
|
<view
|
|||
|
|
v-if="theme == 'step'"
|
|||
|
|
:class="name + '__steps'"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in steps"
|
|||
|
|
:key="index"
|
|||
|
|
:class="name + '__step'"
|
|||
|
|
:data-index="index"
|
|||
|
|
@click="() => onStepClick(index)"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
:class="
|
|||
|
|
name +
|
|||
|
|
'__step-dot ' +
|
|||
|
|
name +
|
|||
|
|
'__step-dot--' +
|
|||
|
|
(item !== placeholder ? 'active' : '') +
|
|||
|
|
' ' +
|
|||
|
|
name +
|
|||
|
|
'__step-dot--' +
|
|||
|
|
(index === steps.length - 1 ? 'last' : '')
|
|||
|
|
"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<view :class="name + '__step-label ' + name + '__step-label--' + (index === stepIndex ? 'active' : '')">
|
|||
|
|
{{ item }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<TIcon
|
|||
|
|
name="chevron-right"
|
|||
|
|
size="44rpx"
|
|||
|
|
:t-class="name + '__step-arrow'"
|
|||
|
|
:custom-style="stepArrowCustomStyle"
|
|||
|
|
style="margin-left: auto"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<TTabs
|
|||
|
|
v-if="theme == 'tab'"
|
|||
|
|
ref="tabs"
|
|||
|
|
:value="stepIndex"
|
|||
|
|
:space-evenly="false"
|
|||
|
|
@change="({value}) => onTabChange(value)"
|
|||
|
|
>
|
|||
|
|
<TTabPanel
|
|||
|
|
v-for="(item, index) in steps"
|
|||
|
|
:key="index"
|
|||
|
|
:ref="`tab-${index}`"
|
|||
|
|
:value="index"
|
|||
|
|
:label="item"
|
|||
|
|
/>
|
|||
|
|
</TTabs>
|
|||
|
|
</block>
|
|||
|
|
|
|||
|
|
<slot name="middle-content" />
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
v-if="subTitles && subTitles[stepIndex]"
|
|||
|
|
:class="name + '__options-title'"
|
|||
|
|
>
|
|||
|
|
{{ subTitles[stepIndex] }}
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
:class="name + '__options-container'"
|
|||
|
|
:style="'width: ' + (items.length + 1) + '00vw; transform: translateX(-' + stepIndex + '00vw)'"
|
|||
|
|
>
|
|||
|
|
<scroll-view
|
|||
|
|
v-for="(options, index) in items"
|
|||
|
|
:key="index"
|
|||
|
|
:class="name + '__options'"
|
|||
|
|
scroll-y
|
|||
|
|
:scroll-top="scrollTopList[index]"
|
|||
|
|
type="list"
|
|||
|
|
:style="'height: ' + _optionsHeight + 'px'"
|
|||
|
|
>
|
|||
|
|
<view :class="'cascader-radio-group-' + index">
|
|||
|
|
<TRadioGroup
|
|||
|
|
:value="selectedValue[index]"
|
|||
|
|
:keys="keys"
|
|||
|
|
:options="options"
|
|||
|
|
:data-level="index"
|
|||
|
|
placement="right"
|
|||
|
|
icon="line"
|
|||
|
|
borderless
|
|||
|
|
@change="({ value }) => handleSelect($event, { level: index, value })"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</TPopup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import TIcon from '../icon/icon';
|
|||
|
|
import TPopup from '../popup/popup';
|
|||
|
|
import TTabs from '../tabs/tabs';
|
|||
|
|
import TTabPanel from '../tab-panel/tab-panel';
|
|||
|
|
import TRadioGroup from '../radio-group/radio-group';
|
|||
|
|
import { uniComponent } from '../common/src/index';
|
|||
|
|
import { prefix } from '../common/config';
|
|||
|
|
import props from './props';
|
|||
|
|
import { getRect, coalesce, nextTick } from '../common/utils';
|
|||
|
|
|
|||
|
|
import tools from '../common/utils.wxs';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const name = `${prefix}-cascader`;
|
|||
|
|
|
|||
|
|
function parseOptions(options, keys) {
|
|||
|
|
const label = coalesce(keys?.label, 'label');
|
|||
|
|
const value = coalesce(keys?.value, 'value');
|
|||
|
|
const disabled = coalesce(keys?.disabled, 'disabled');
|
|||
|
|
|
|||
|
|
return options.map(item => ({
|
|||
|
|
[label]: item[label],
|
|||
|
|
[value]: item[value],
|
|||
|
|
[disabled]: item[disabled],
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const defaultState = {
|
|||
|
|
contentHeight: 0,
|
|||
|
|
stepHeight: 0,
|
|||
|
|
tabsHeight: 0,
|
|||
|
|
subTitlesHeight: 0,
|
|||
|
|
stepsInitHeight: 0,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default uniComponent({
|
|||
|
|
name,
|
|||
|
|
options: {
|
|||
|
|
styleIsolation: 'shared',
|
|||
|
|
},
|
|||
|
|
controlledProps: [
|
|||
|
|
{
|
|||
|
|
key: 'value',
|
|||
|
|
event: 'change',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
externalClasses: [
|
|||
|
|
`${prefix}-class`,
|
|||
|
|
],
|
|||
|
|
components: {
|
|||
|
|
TIcon,
|
|||
|
|
TPopup,
|
|||
|
|
TTabs,
|
|||
|
|
TTabPanel,
|
|||
|
|
TRadioGroup,
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
...props,
|
|||
|
|
},
|
|||
|
|
emits: [
|
|||
|
|
'update:visible',
|
|||
|
|
],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
prefix,
|
|||
|
|
name,
|
|||
|
|
stepIndex: 0,
|
|||
|
|
selectedIndexes: [],
|
|||
|
|
selectedValue: [],
|
|||
|
|
scrollTopList: [],
|
|||
|
|
steps: [],
|
|||
|
|
_optionsHeight: 0,
|
|||
|
|
tools,
|
|||
|
|
|
|||
|
|
dataVisible: this.visible,
|
|||
|
|
dataValue: coalesce(this.value, this.defaultValue),
|
|||
|
|
items: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
stepArrowCustomStyle() {
|
|||
|
|
return tools._style({
|
|||
|
|
color: 'var(--td-cascader-step-arrow-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))))',
|
|||
|
|
marginLeft: 'auto',
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
visible: {
|
|||
|
|
handler(v) {
|
|||
|
|
this.dataVisible = v;
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
dataVisible: {
|
|||
|
|
handler(v) {
|
|||
|
|
if (v) {
|
|||
|
|
nextTick().then(() => {
|
|||
|
|
const $tabs = this.$refs.tabs;
|
|||
|
|
$tabs?.setTrack();
|
|||
|
|
$tabs?.getTabHeight().then((res) => {
|
|||
|
|
this.state.tabsHeight = res.height;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 不能使用 this.$nextTick，在头条小程序下会报错
|
|||
|
|
nextTick().then(() => {
|
|||
|
|
this.initOptionsHeight(this.steps.length);
|
|||
|
|
this.updateScrollTop();
|
|||
|
|
this.initWithValue();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.state = { ...defaultState };
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
value: {
|
|||
|
|
handler(v) {
|
|||
|
|
this.dataValue = v;
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
dataValue: {
|
|||
|
|
handler() {
|
|||
|
|
this.initWithValue();
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
options: {
|
|||
|
|
handler() {
|
|||
|
|
const { selectedValue, steps, items } = this.genItems();
|
|||
|
|
|
|||
|
|
this.steps = steps;
|
|||
|
|
this.items = items;
|
|||
|
|
this.selectedValue = selectedValue;
|
|||
|
|
this.stepIndex = items.length - 1;
|
|||
|
|
this.setTabParent();
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
selectedIndexes: {
|
|||
|
|
handler() {
|
|||
|
|
const { visible, theme } = this;
|
|||
|
|
const { selectedValue, steps, items } = this.genItems();
|
|||
|
|
|
|||
|
|
this.steps = steps;
|
|||
|
|
this.setTabParent();
|
|||
|
|
this.selectedValue = selectedValue;
|
|||
|
|
this.stepIndex = items.length - 1;
|
|||
|
|
|
|||
|
|
if (JSON.stringify(items) !== JSON.stringify(this.items)) {
|
|||
|
|
this.items = items;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (visible && theme === 'step') {
|
|||
|
|
this.updateOptionsHeight(steps.length);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
stepIndex: {
|
|||
|
|
handler() {
|
|||
|
|
const { dataVisible: visible } = this;
|
|||
|
|
|
|||
|
|
if (visible) {
|
|||
|
|
this.updateScrollTop();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.state = {
|
|||
|
|
...defaultState,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
setTabParent() {
|
|||
|
|
// #ifdef MP-TOUTIAO
|
|||
|
|
nextTick().then(() => {
|
|||
|
|
const tabsRef = this.$refs.tabs;
|
|||
|
|
this.steps.forEach((tools, index) => {
|
|||
|
|
const tabRef = this.$refs[`tab-${index}`];
|
|||
|
|
tabRef?.[0]?.setParent(tabsRef);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
updateOptionsHeight(steps) {
|
|||
|
|
const { contentHeight, stepsInitHeight, stepHeight, subTitlesHeight } = this.state;
|
|||
|
|
this._optionsHeight = contentHeight - stepsInitHeight - subTitlesHeight - (steps - 1) * stepHeight;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async initOptionsHeight(steps) {
|
|||
|
|
const { theme, subTitles } = this;
|
|||
|
|
|
|||
|
|
const { height } = await getRect(this, `.${name}__content`);
|
|||
|
|
this.state.contentHeight = height;
|
|||
|
|
|
|||
|
|
if (theme === 'step') {
|
|||
|
|
await Promise.all([
|
|||
|
|
getRect(this, `.${name}__steps`),
|
|||
|
|
getRect(this, `.${name}__step`),
|
|||
|
|
])
|
|||
|
|
.then(([stepsRect, stepRect]) => {
|
|||
|
|
this.state.stepsInitHeight = stepsRect.height - (steps - 1) * stepRect.height;
|
|||
|
|
this.state.stepHeight = stepRect.height;
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (subTitles.length > 0) {
|
|||
|
|
const { height } = await getRect(this, `.${name}__options-title`);
|
|||
|
|
this.state.subTitlesHeight = height;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const optionsInitHeight = this.state.contentHeight - this.state.subTitlesHeight;
|
|||
|
|
this._optionsHeight = theme === 'step'
|
|||
|
|
? optionsInitHeight - this.state.stepsInitHeight - (steps - 1) * this.state.stepHeight
|
|||
|
|
: optionsInitHeight - this.state.tabsHeight;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initWithValue() {
|
|||
|
|
if (this.dataValue != null && this.dataValue !== '') {
|
|||
|
|
const selectedIndexes = this.getIndexesByValue(this.options, this.dataValue);
|
|||
|
|
|
|||
|
|
if (selectedIndexes) {
|
|||
|
|
this.selectedIndexes = selectedIndexes;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.selectedIndexes = [];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getIndexesByValue(options, value) {
|
|||
|
|
const { keys } = this;
|
|||
|
|
|
|||
|
|
for (let i = 0, size = options.length; i < size; i += 1) {
|
|||
|
|
const opt = options[i];
|
|||
|
|
if (opt[coalesce(keys?.value, 'value')] === value) {
|
|||
|
|
return [i];
|
|||
|
|
}
|
|||
|
|
if (opt[coalesce(keys?.children, 'children')]) {
|
|||
|
|
const res = this.getIndexesByValue(opt[coalesce(keys?.children, 'children')], value);
|
|||
|
|
if (res) {
|
|||
|
|
return [i, ...res];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
updateScrollTop() {
|
|||
|
|
const { dataVisible: visible, items, selectedIndexes, stepIndex } = this;
|
|||
|
|
|
|||
|
|
if (visible) {
|
|||
|
|
getRect(this, '.cascader-radio-group-0').then((rect) => {
|
|||
|
|
const eachRadioHeight = rect.height / items[0]?.length;
|
|||
|
|
|
|||
|
|
this[`scrollTopList[${stepIndex}]`] = eachRadioHeight * selectedIndexes[stepIndex];
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hide(trigger) {
|
|||
|
|
this.dataVisible = false;
|
|||
|
|
this.$emit('close', { trigger });
|
|||
|
|
this.$emit('update:visible', false);
|
|||
|
|
},
|
|||
|
|
onVisibleChange() {
|
|||
|
|
this.hide('overlay');
|
|||
|
|
},
|
|||
|
|
onClose() {
|
|||
|
|
if (this.checkStrictly) {
|
|||
|
|
this.triggerChange();
|
|||
|
|
}
|
|||
|
|
this.hide('close-btn');
|
|||
|
|
},
|
|||
|
|
onStepClick(index) {
|
|||
|
|
this.stepIndex = index;
|
|||
|
|
},
|
|||
|
|
onTabChange(value) {
|
|||
|
|
this.stepIndex = value;
|
|||
|
|
},
|
|||
|
|
genItems() {
|
|||
|
|
const { options, selectedIndexes, keys, placeholder } = this;
|
|||
|
|
const selectedValue = [];
|
|||
|
|
const steps = [];
|
|||
|
|
const items = [parseOptions(options, keys)];
|
|||
|
|
|
|||
|
|
if (options.length > 0) {
|
|||
|
|
let current = options;
|
|||
|
|
for (let i = 0, size = selectedIndexes.length; i < size; i += 1) {
|
|||
|
|
const index = selectedIndexes[i];
|
|||
|
|
const next = current[index];
|
|||
|
|
current = next[coalesce(keys?.children, 'children')];
|
|||
|
|
|
|||
|
|
selectedValue.push(next[coalesce(keys?.value, 'value')]);
|
|||
|
|
steps.push(next[coalesce(keys?.label, 'label')]);
|
|||
|
|
|
|||
|
|
if (next[coalesce(keys?.children, 'children')]) {
|
|||
|
|
items.push(parseOptions(next[coalesce(keys?.children, 'children')], keys));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (steps.length < items.length) {
|
|||
|
|
steps.push(placeholder);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
selectedValue,
|
|||
|
|
steps,
|
|||
|
|
items,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
handleSelect(tools, { level, value }) {
|
|||
|
|
const { checkStrictly } = this;
|
|||
|
|
const { selectedIndexes, items, keys, options, selectedValue } = this;
|
|||
|
|
|
|||
|
|
const index = items[level].findIndex(item => item[coalesce(keys?.value, 'value')] === value);
|
|||
|
|
|
|||
|
|
let item = selectedIndexes.slice(0, level).reduce((acc, item, index) => {
|
|||
|
|
if (index === 0) {
|
|||
|
|
return acc[item];
|
|||
|
|
}
|
|||
|
|
return acc[coalesce(keys?.children, 'children')][item];
|
|||
|
|
}, options);
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (level === 0) {
|
|||
|
|
item = item[index];
|
|||
|
|
} else {
|
|||
|
|
item = item[coalesce(keys?.children, 'children')][index];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (item[coalesce(keys?.disabled, 'disabled')]) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.$emit('pick', {
|
|||
|
|
value: item[coalesce(keys?.value, 'value')],
|
|||
|
|
label: item[coalesce(keys?.label, 'label')],
|
|||
|
|
index,
|
|||
|
|
level,
|
|||
|
|
});
|
|||
|
|
selectedIndexes[level] = index;
|
|||
|
|
if (checkStrictly && selectedValue.includes(String(value))) {
|
|||
|
|
selectedIndexes.length = level;
|
|||
|
|
this.selectedIndexes = selectedIndexes;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
selectedIndexes.length = level + 1;
|
|||
|
|
|
|||
|
|
const { items: newItems } = this.genItems();
|
|||
|
|
if (item?.[coalesce(keys?.children, 'children')]?.length >= 0) {
|
|||
|
|
this.selectedIndexes = selectedIndexes;
|
|||
|
|
this[`items[${level + 1}]`] = newItems[level + 1];
|
|||
|
|
} else {
|
|||
|
|
// setCascaderValue(item.value);
|
|||
|
|
this.selectedIndexes = selectedIndexes;
|
|||
|
|
setTimeout(this.triggerChange);
|
|||
|
|
|
|||
|
|
this.hide('finish');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
triggerChange() {
|
|||
|
|
const { items, selectedValue, selectedIndexes } = this;
|
|||
|
|
this._trigger('change', {
|
|||
|
|
value: coalesce(selectedValue[selectedValue.length - 1], ''),
|
|||
|
|
selectedOptions: items.map((item, index) => item[selectedIndexes[index]]).filter(Boolean),
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
@import './cascader.css';
|
|||
|
|
</style>
|