253 lines
9.2 KiB
Vue
253 lines
9.2 KiB
Vue
<template>
|
||
<view class="y-tab__pane" :data-index="index" :class="[uniquePaneClass,paneClass]" :style="[paneStyle]">
|
||
<!-- 渲染过的则不再渲染，未渲染的根据激活状态进行渲染 -->
|
||
<view class="y-tab__pane--wrap" v-if="rendered ? true : active">
|
||
<slot />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* y-tab 标签
|
||
* @description 选项卡组件的子组件，搭配y-tabs使用
|
||
* @property {String | Number} name 标签名称，作为匹配的标识符。默认为标签的索引值
|
||
* @property {String} title 标题
|
||
* @property {Boolean} disabled 是否禁用标签，默认false
|
||
* @property {String} dot 是否在标题右上角显示小红点（优先级高于badge）。默认false
|
||
* @property {String | Number} badge 图标右上角徽标的内容
|
||
* @property {String | Number} badge-max-count 徽标数最大数字限制，超过这个数字将变成badgeMaxCount+，如果传空字符串则不设置。默认99
|
||
* @property {Object} title-style 自定义标题样式
|
||
* @property {Boolean} title-class 自定义标题类名
|
||
* @property {String} icon-type 图标图案，为uniapp扩展组件（uni-ui）下的uni-icons的type值，customPrefix用法等同
|
||
* @property {String | Number} icon-size 图标大小，默认16
|
||
* @property {String} custom-prefix 自定义图标
|
||
* @property {String} image-src 图片路径
|
||
* @property {String} image-mode 图片裁剪、缩放的模式，为uniapp内置组件->媒体组件—>image下的mode属性的可选值
|
||
* @property {String} position 在有图标或图片的情况下，标题围绕它们所在的位置，默认right。可选值：left、top、bottom
|
||
*/
|
||
|
||
import { isNull, toClass, getUid } from '../js/uitls';
|
||
import { options } from '../js/const';
|
||
|
||
export default {
|
||
name: 'y-tab',
|
||
options,
|
||
props: {
|
||
title: String, // 标题
|
||
disabled: Boolean, // 是否禁用标签
|
||
dot: Boolean, // 是否在标题右上角显示小红点
|
||
badge: {
|
||
type: [Number, String],
|
||
default: ''
|
||
}, // 图标右上角徽标的内容
|
||
// 徽标数最大数字限制,超过这个数字将变成badgeMaxCount+,如果传空字符串则不设置
|
||
badgeMaxCount: {
|
||
type: [Number, String],
|
||
default: 99
|
||
},
|
||
name: [Number, String], // 标签名称，作为匹配的标识符
|
||
titleStyle: Object, // 自定义标题样式
|
||
titleClass: String, // 自定义标题类名
|
||
iconType: String, //图标图案，为uniapp扩展组件（uni-ui）下的uni-icons的type值，customPrefix用法等同
|
||
iconSize: {
|
||
type: [Number, String],
|
||
default: 16
|
||
}, //图标大小
|
||
customPrefix: String, //自定义图标
|
||
imageSrc: String, //图片路径
|
||
imageMode: {
|
||
type: String,
|
||
default: 'scaleToFill',
|
||
validator(value) {
|
||
return [
|
||
'scaleToFill',
|
||
'aspectFit',
|
||
'aspectFill',
|
||
'widthFix',
|
||
'heightFix',
|
||
'top',
|
||
'bottom',
|
||
'center',
|
||
'left',
|
||
'right',
|
||
'top left',
|
||
'top right',
|
||
'bottom left',
|
||
'bottom right'
|
||
].includes(value);
|
||
}
|
||
}, //图片裁剪、缩放的模式，为uniapp内置组件->媒体组件—>image下的mode值
|
||
position: {
|
||
type: String,
|
||
default: 'right',
|
||
validator(value) {
|
||
return ['top', 'bottom', 'left', 'right'].includes(value);
|
||
}
|
||
} //如果存在图片或图标，标题围绕它们的位置
|
||
},
|
||
data() {
|
||
return {
|
||
isUnmounted: false,
|
||
index: -1, //内容卡片对应的下标
|
||
// parent: null, //父元素实例
|
||
active: false, //是否为激活状态
|
||
rendered: false, //是否渲染过
|
||
swipeable: false, //是否开启手势滑动切换
|
||
paneStyle: null, //内容样式
|
||
scrollspy: false, //是否为滚动导航模式
|
||
// paneObserver: null, //pane交叉观察器
|
||
isDisjoint: false, //当前pane是否与参照节点布局区域相离
|
||
isActiveLast: false // 最后一个pane在滚动导航模式下是否激活对应的标签项
|
||
};
|
||
},
|
||
computed: {
|
||
computedName() {
|
||
return !isNull(this.name) ? this.name : this.index;
|
||
},
|
||
unqieKey() {
|
||
return getUid();
|
||
},
|
||
// 保证唯一的样式
|
||
uniquePaneClass() {
|
||
return 'y-tab__pane' + this.unqieKey
|
||
},
|
||
// 内容class
|
||
paneClass() {
|
||
return toClass({ 'is-active': this.active, 'is-scrollspy': this.scrollspy });
|
||
},
|
||
},
|
||
watch: {
|
||
$props: {
|
||
deep: true,
|
||
// immediate: true,
|
||
handler(newValue, oldValue) {
|
||
// 更新tab
|
||
if (this.parent) {
|
||
this.parent.updateTab({
|
||
newValue: { ...newValue, badge: this.formatBadge() },
|
||
oldValue: oldValue && { ...oldValue },
|
||
index: this.index
|
||
});
|
||
}
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.parent = this.getParent();
|
||
},
|
||
mounted() {
|
||
if (!this.parent) return;
|
||
if (this.parent.childrens.indexOf(this) === -1) this.parent.childrens.push(this);
|
||
this.parent.putTab({ newValue: { ...this.$props, key: this.unqieKey, badge: this.formatBadge() } });
|
||
this.scrollspy = this.parent.scrollspy; // 是否为滚动导航
|
||
this.rendered = !this.parent.isLazyRender || this.scrollspy; //标记是否渲染过，非懒加载与滚动导航模式下默认渲染
|
||
},
|
||
// #ifndef VUE3
|
||
destroyed() {
|
||
if (this.isUnmounted) return;
|
||
this.unInit();
|
||
},
|
||
// #endif
|
||
// #ifdef VUE3
|
||
unmounted() {
|
||
this.isUnmounted = true;
|
||
this.unInit();
|
||
},
|
||
// #endif
|
||
methods: {
|
||
// 徽标格式化
|
||
formatBadge() {
|
||
if (!isNull(this.badge) && !isNull(this.badgeMaxCount) && this.badge > this.badgeMaxCount) {
|
||
return this.badgeMaxCount + '+';
|
||
} else {
|
||
return this.badge
|
||
}
|
||
},
|
||
// 获取查询节点信息的对象
|
||
getSelectorQuery() {
|
||
let query = null;
|
||
// #ifdef MP-ALIPAY
|
||
query = uni.createSelectorQuery();
|
||
// #endif
|
||
// #ifndef MP-ALIPAY
|
||
query = uni.createSelectorQuery().in(this);
|
||
// #endif
|
||
return query;
|
||
},
|
||
// 获取元素位置信息
|
||
getRect(selector) {
|
||
return new Promise((resolve, reject) => {
|
||
selector = `.${this.uniquePaneClass}` + (!isNull(selector) ? " " + selector : '')
|
||
this.getSelectorQuery()
|
||
.select(selector)
|
||
.boundingClientRect()
|
||
.exec(rect => {
|
||
resolve(rect[0] || {});
|
||
});
|
||
});
|
||
},
|
||
// 卸载组件的处理
|
||
unInit() {
|
||
this.disconnectObserver(); //销毁观察器
|
||
if (this.parent) {
|
||
const index = this.parent.childrens.findIndex(item => item === this);
|
||
this.parent.childrens.splice(index, 1);
|
||
this.parent.tabs.splice(index, 1);
|
||
this.parent.tabRects.splice(index, 1);
|
||
}
|
||
},
|
||
//获取父元素实例
|
||
getParent(name = 'y-tabs') {
|
||
let parent = this.$parent;
|
||
let parentName = parent.$options.name;
|
||
while (parentName !== name) {
|
||
parent = parent.$parent;
|
||
if (!parent) return false;
|
||
parentName = parent.$options.name;
|
||
}
|
||
|
||
return parent;
|
||
},
|
||
// 断掉观察，释放资源
|
||
disconnectObserver() {
|
||
this.paneObserver && this.paneObserver?.disconnect();
|
||
},
|
||
// 观察 - 标签内容滚动时定位标签项
|
||
async observePane(top) {
|
||
this.disconnectObserver();
|
||
const paneObserver = uni.createIntersectionObserver(this, { thresholds: [0, 0.01, 0.99, 1] });
|
||
|
||
|
||
// 注意：如果y-tabs使用的区域滚动，整个页面的布局跟随页面滚动，当pane跟随页面移动了之后，
|
||
// 那么y-tabs__content的top就会变化，导致交互区域位置不准确，可以在onPageScroll使用定时器实现滚动结束的处理重新resize一下组件创建pane的监听
|
||
// 如果pane内容超过页面的可视区域，最好舍弃这种交互布局，uniapp未实现Android的嵌套滑动机制，页面滑动到底后无法将事件分发给scroll-view，使scroll-view继承滑动
|
||
|
||
paneObserver.relativeToViewport({ top: -top }); // 到屏幕顶部的高度时触发
|
||
// 不能观察根节点 unk-vendors.js:14596 [system] Node .y-tab__pane9 is not found. Intersection observer will not trigger.
|
||
paneObserver.observe(`.${this.uniquePaneClass} .y-tab__pane--wrap`, res => {
|
||
// console.log('res:', this.title, res);
|
||
if (!this.isActiveLast) {
|
||
// 如果目标节点布局区域的top小于参照节点的top,则说明目标节点在参照节点布局区域之上，intersectionRatio不大于0则说明两者不相交
|
||
this.isDisjoint = res.intersectionRatio <= 0 && res.boundingClientRect.top < res
|
||
.relativeRect.top;
|
||
} else {
|
||
// 滚动导航模式下，最后一个pane完成显示但未超出可视范围顶部时，是否设置相离而激活最后一个标签项
|
||
this.isDisjoint = res.intersectionRatio > 0 && res.boundingClientRect.bottom <= res
|
||
.relativeRect.bottom;
|
||
}
|
||
|
||
// 保证组件初始化完成时执行，避免创建时触发一次监听器的回调函数，导致执行顺序先于tabs的init方法，使底部条错位:
|
||
// 标签栏点击时触发的滚动不允许设置激活下标
|
||
if (this.parent.isLoaded && !this.parent.lockedScrollspy) this.parent
|
||
.setActivedIndexToScroll();
|
||
});
|
||
this.paneObserver = paneObserver;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../css/index.scss';
|
||
</style> |