143 lines
3.6 KiB
JavaScript
143 lines
3.6 KiB
JavaScript
|
"use strict";
|
|||
|
const sheep_helper_index = require("../../helper/index.js");
|
|||
|
const common_vendor = require("../../../common/vendor.js");
|
|||
|
const _sfc_main = {
|
|||
|
name: "su-tabbar-item",
|
|||
|
props: {
|
|||
|
customStyle: {
|
|||
|
type: [Object, String],
|
|||
|
default: () => ({})
|
|||
|
},
|
|||
|
customClass: {
|
|||
|
type: String,
|
|||
|
default: ""
|
|||
|
},
|
|||
|
// 跳转的页面路径
|
|||
|
url: {
|
|||
|
type: String,
|
|||
|
default: ""
|
|||
|
},
|
|||
|
// 页面跳转的类型
|
|||
|
linkType: {
|
|||
|
type: String,
|
|||
|
default: "navigateTo"
|
|||
|
},
|
|||
|
// item标签的名称,作为与u-tabbar的value参数匹配的标识符
|
|||
|
name: {
|
|||
|
type: [String, Number, null],
|
|||
|
default: ""
|
|||
|
},
|
|||
|
// uView内置图标或者绝对路径的图片
|
|||
|
icon: {
|
|||
|
icon: String,
|
|||
|
default: ""
|
|||
|
},
|
|||
|
// 右上角的角标提示信息
|
|||
|
badge: {
|
|||
|
type: [String, Number, null],
|
|||
|
default: ""
|
|||
|
},
|
|||
|
// 是否显示圆点,将会覆盖badge参数
|
|||
|
dot: {
|
|||
|
type: Boolean,
|
|||
|
default: false
|
|||
|
},
|
|||
|
// 描述文本
|
|||
|
text: {
|
|||
|
type: String,
|
|||
|
default: ""
|
|||
|
},
|
|||
|
// 控制徽标的位置,对象或者字符串形式,可以设置top和right属性
|
|||
|
badgeStyle: {
|
|||
|
type: [Object, String],
|
|||
|
default: ""
|
|||
|
},
|
|||
|
isCenter: {
|
|||
|
type: Boolean,
|
|||
|
default: false
|
|||
|
},
|
|||
|
centerImage: {
|
|||
|
type: String,
|
|||
|
default: ""
|
|||
|
}
|
|||
|
},
|
|||
|
data() {
|
|||
|
return {
|
|||
|
isActive: false,
|
|||
|
// 是否处于激活状态
|
|||
|
addStyle: sheep_helper_index.addStyle,
|
|||
|
parentData: {
|
|||
|
value: null,
|
|||
|
activeColor: "",
|
|||
|
color: ""
|
|||
|
},
|
|||
|
parent: {}
|
|||
|
};
|
|||
|
},
|
|||
|
created() {
|
|||
|
this.init();
|
|||
|
},
|
|||
|
methods: {
|
|||
|
getParentData(parentName = "") {
|
|||
|
if (!this.parent)
|
|||
|
this.parent = {};
|
|||
|
this.parent = sheep_helper_index.$parent.call(this, parentName);
|
|||
|
if (this.parent.children) {
|
|||
|
this.parent.children.indexOf(this) === -1 && this.parent.children.push(this);
|
|||
|
}
|
|||
|
if (this.parent && this.parentData) {
|
|||
|
Object.keys(this.parentData).map((key) => {
|
|||
|
this.parentData[key] = this.parent[key];
|
|||
|
});
|
|||
|
}
|
|||
|
},
|
|||
|
init() {
|
|||
|
this.updateParentData();
|
|||
|
if (!this.parent) {
|
|||
|
console.log("u-tabbar-item必须搭配u-tabbar组件使用");
|
|||
|
}
|
|||
|
const index = this.parent.children.indexOf(this);
|
|||
|
this.isActive = (this.name.split("?")[0] || index) === this.parentData.value;
|
|||
|
},
|
|||
|
updateParentData() {
|
|||
|
this.getParentData("su-tabbar");
|
|||
|
},
|
|||
|
// 此方法将会被父组件u-tabbar调用
|
|||
|
updateFromParent() {
|
|||
|
this.init();
|
|||
|
},
|
|||
|
clickHandler() {
|
|||
|
this.$nextTick(() => {
|
|||
|
const index = this.parent.children.indexOf(this);
|
|||
|
const name = this.name || index;
|
|||
|
if (name !== this.parent.value) {
|
|||
|
this.parent.$emit("change", name);
|
|||
|
}
|
|||
|
this.$emit("click", name);
|
|||
|
});
|
|||
|
}
|
|||
|
}
|
|||
|
};
|
|||
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
return common_vendor.e({
|
|||
|
a: $props.isCenter
|
|||
|
}, $props.isCenter ? {
|
|||
|
b: $props.centerImage
|
|||
|
} : common_vendor.e({
|
|||
|
c: $props.icon
|
|||
|
}, $props.icon ? {
|
|||
|
d: $props.icon,
|
|||
|
e: $data.isActive ? $data.parentData.activeColor : $data.parentData.color
|
|||
|
} : common_vendor.e({
|
|||
|
f: $data.isActive
|
|||
|
}, $data.isActive ? {} : {}), {
|
|||
|
g: common_vendor.t($props.text),
|
|||
|
h: $data.isActive ? $data.parentData.activeColor : $data.parentData.color
|
|||
|
}), {
|
|||
|
i: common_vendor.s($data.addStyle($props.customStyle))
|
|||
|
});
|
|||
|
}
|
|||
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-21c8b054"]]);
|
|||
|
wx.createComponent(Component);
|
|||
|
//# sourceMappingURL=su-tabbar-item.js.map
|