302 lines
8.7 KiB
JavaScript
302 lines
8.7 KiB
JavaScript
|
"use strict";
|
|||
|
|
var __defProp = Object.defineProperty;
|
|||
|
|
var __defProps = Object.defineProperties;
|
|||
|
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|||
|
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|||
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|||
|
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|||
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|||
|
|
var __spreadValues = (a, b) => {
|
|||
|
|
for (var prop in b || (b = {}))
|
|||
|
|
if (__hasOwnProp.call(b, prop))
|
|||
|
|
__defNormalProp(a, prop, b[prop]);
|
|||
|
|
if (__getOwnPropSymbols)
|
|||
|
|
for (var prop of __getOwnPropSymbols(b)) {
|
|||
|
|
if (__propIsEnum.call(b, prop))
|
|||
|
|
__defNormalProp(a, prop, b[prop]);
|
|||
|
|
}
|
|||
|
|
return a;
|
|||
|
|
};
|
|||
|
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|||
|
|
var __async = (__this, __arguments, generator) => {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
var fulfilled = (value) => {
|
|||
|
|
try {
|
|||
|
|
step(generator.next(value));
|
|||
|
|
} catch (e) {
|
|||
|
|
reject(e);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var rejected = (value) => {
|
|||
|
|
try {
|
|||
|
|
step(generator.throw(value));
|
|||
|
|
} catch (e) {
|
|||
|
|
reject(e);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|||
|
|
step((generator = generator.apply(__this, __arguments)).next());
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
const common_vendor = require("../../../common/vendor.js");
|
|||
|
|
const sheep_helper_index = require("../../helper/index.js");
|
|||
|
|
const _sfc_main = {
|
|||
|
|
name: "su-tabs",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
addStyle: sheep_helper_index.addStyle,
|
|||
|
|
addUnit: sheep_helper_index.addUnit,
|
|||
|
|
firstTime: true,
|
|||
|
|
scrollLeft: 0,
|
|||
|
|
scrollViewWidth: 0,
|
|||
|
|
lineOffsetLeft: 0,
|
|||
|
|
tabsRect: {
|
|||
|
|
left: 0
|
|||
|
|
},
|
|||
|
|
innerCurrent: 0,
|
|||
|
|
moving: false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
// 滑块的移动过渡时间，单位ms
|
|||
|
|
duration: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 300
|
|||
|
|
},
|
|||
|
|
// tabs标签数组
|
|||
|
|
list: {
|
|||
|
|
type: Array,
|
|||
|
|
default: []
|
|||
|
|
},
|
|||
|
|
// 滑块颜色
|
|||
|
|
lineColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
// 菜单选择中时的样式
|
|||
|
|
activeStyle: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
default() {
|
|||
|
|
return {
|
|||
|
|
color: "#303133"
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 菜单非选中时的样式
|
|||
|
|
inactiveStyle: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
default() {
|
|||
|
|
return {
|
|||
|
|
color: "#606266"
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 滑块长度
|
|||
|
|
lineWidth: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: 20
|
|||
|
|
},
|
|||
|
|
// 滑块高度
|
|||
|
|
lineHeight: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: 3
|
|||
|
|
},
|
|||
|
|
// 滑块背景显示大小，当滑块背景设置为图片时使用
|
|||
|
|
lineBgSize: {
|
|||
|
|
type: String,
|
|||
|
|
default: "cover"
|
|||
|
|
},
|
|||
|
|
// 菜单item的样式
|
|||
|
|
itemStyle: {
|
|||
|
|
type: [String, Object],
|
|||
|
|
default() {
|
|||
|
|
return {
|
|||
|
|
height: "44px"
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 菜单是否可滚动
|
|||
|
|
scrollable: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 当前选中标签的索引
|
|||
|
|
current: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
// 默认读取的键名
|
|||
|
|
keyName: {
|
|||
|
|
type: String,
|
|||
|
|
default: "name"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
current: {
|
|||
|
|
immediate: true,
|
|||
|
|
handler(newValue, oldValue) {
|
|||
|
|
if (newValue !== this.innerCurrent) {
|
|||
|
|
this.innerCurrent = newValue;
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// list变化时，重新渲染list各项信息
|
|||
|
|
list() {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
textStyle() {
|
|||
|
|
return (index) => {
|
|||
|
|
const style = {};
|
|||
|
|
const customeStyle = index === this.innerCurrent ? sheep_helper_index.addStyle(this.activeStyle) : sheep_helper_index.addStyle(this.inactiveStyle);
|
|||
|
|
if (this.list[index].disabled) {
|
|||
|
|
style.color = "#c8c9cc";
|
|||
|
|
}
|
|||
|
|
return sheep_helper_index.deepMerge(customeStyle, style);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
return __async(this, null, function* () {
|
|||
|
|
this.init();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
$uGetRect(selector, all) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
common_vendor.index.createSelectorQuery().in(this)[all ? "selectAll" : "select"](selector).boundingClientRect((rect) => {
|
|||
|
|
if (all && Array.isArray(rect) && rect.length) {
|
|||
|
|
resolve(rect);
|
|||
|
|
}
|
|||
|
|
if (!all && rect) {
|
|||
|
|
resolve(rect);
|
|||
|
|
}
|
|||
|
|
}).exec();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
setLineLeft() {
|
|||
|
|
const tabItem = this.list[this.innerCurrent];
|
|||
|
|
if (!tabItem) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const lineOffsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => total + curr.rect.width, 0);
|
|||
|
|
const lineWidth = sheep_helper_index.getPx(this.lineWidth);
|
|||
|
|
this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2;
|
|||
|
|
if (this.firstTime) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.firstTime = false;
|
|||
|
|
}, 10);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// nvue下设置滑块的位置
|
|||
|
|
animation(x, duration = 0) {
|
|||
|
|
},
|
|||
|
|
// 点击某一个标签
|
|||
|
|
clickHandler(item, index) {
|
|||
|
|
this.$emit("click", __spreadProps(__spreadValues({}, item), {
|
|||
|
|
index
|
|||
|
|
}));
|
|||
|
|
if (item.disabled)
|
|||
|
|
return;
|
|||
|
|
this.innerCurrent = index;
|
|||
|
|
this.resize();
|
|||
|
|
this.$emit("change", __spreadProps(__spreadValues({}, item), {
|
|||
|
|
index
|
|||
|
|
}));
|
|||
|
|
},
|
|||
|
|
init() {
|
|||
|
|
sheep_helper_index.sleep().then(() => {
|
|||
|
|
this.resize();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
setScrollLeft() {
|
|||
|
|
const tabRect = this.list[this.innerCurrent];
|
|||
|
|
const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
|
|||
|
|
return total + curr.rect.width;
|
|||
|
|
}, 0);
|
|||
|
|
const windowWidth = sheep_helper_index.sys().windowWidth;
|
|||
|
|
let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2;
|
|||
|
|
scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width);
|
|||
|
|
this.scrollLeft = Math.max(0, scrollLeft);
|
|||
|
|
},
|
|||
|
|
// 获取所有标签的尺寸
|
|||
|
|
resize() {
|
|||
|
|
if (this.list.length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
|
|||
|
|
this.tabsRect = tabsRect;
|
|||
|
|
this.scrollViewWidth = 0;
|
|||
|
|
itemRect.map((item, index) => {
|
|||
|
|
this.scrollViewWidth += item.width;
|
|||
|
|
this.list[index].rect = item;
|
|||
|
|
});
|
|||
|
|
this.setLineLeft();
|
|||
|
|
this.setScrollLeft();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 获取导航菜单的尺寸
|
|||
|
|
getTabsRect() {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
this.queryRect("u-tabs__wrapper__scroll-view").then((size) => resolve(size));
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 获取所有标签的尺寸
|
|||
|
|
getAllItemRect() {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
const promiseAllArr = this.list.map(
|
|||
|
|
(item, index) => this.queryRect(`u-tabs__wrapper__nav__item-${index}`, true)
|
|||
|
|
);
|
|||
|
|
Promise.all(promiseAllArr).then((sizes) => resolve(sizes));
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 获取各个标签的尺寸
|
|||
|
|
queryRect(el, item) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
this.$uGetRect(`.${el}`).then((size) => {
|
|||
|
|
resolve(size);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
|
return {
|
|||
|
|
a: common_vendor.f($props.list, (item, index, i0) => {
|
|||
|
|
return {
|
|||
|
|
a: common_vendor.t(item[$props.keyName]),
|
|||
|
|
b: common_vendor.n(item.disabled && "u-tabs__wrapper__nav__item__text--disabled"),
|
|||
|
|
c: common_vendor.s($options.textStyle(index)),
|
|||
|
|
d: index,
|
|||
|
|
e: common_vendor.o(($event) => $options.clickHandler(item, index), index),
|
|||
|
|
f: `u-tabs__wrapper__nav__item-${index}`,
|
|||
|
|
g: common_vendor.n(`u-tabs__wrapper__nav__item-${index}`),
|
|||
|
|
h: common_vendor.n(item.disabled && "u-tabs__wrapper__nav__item--disabled")
|
|||
|
|
};
|
|||
|
|
}),
|
|||
|
|
b: common_vendor.s($data.addStyle($props.itemStyle)),
|
|||
|
|
c: common_vendor.s({
|
|||
|
|
flex: $props.scrollable ? "" : 1
|
|||
|
|
}),
|
|||
|
|
d: common_vendor.s({
|
|||
|
|
width: $data.addUnit($props.lineWidth),
|
|||
|
|
transform: `translate(${$data.lineOffsetLeft}px)`,
|
|||
|
|
transitionDuration: `${$data.firstTime ? 0 : $props.duration}ms`,
|
|||
|
|
height: $data.addUnit($props.lineHeight),
|
|||
|
|
background: $props.lineColor ? $props.lineColor : "var(--ui-BG-Main)",
|
|||
|
|
backgroundSize: $props.lineBgSize
|
|||
|
|
}),
|
|||
|
|
e: $props.scrollable,
|
|||
|
|
f: $data.scrollLeft
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-8bbdd969"]]);
|
|||
|
|
wx.createComponent(Component);
|
|||
|
|
//# sourceMappingURL=su-tabs.js.map
|