项目初始化
This commit is contained in:
jerry
234
sheep/ui/su-tabbar-item/su-tabbar-item.vue
Normal file
234
sheep/ui/su-tabbar-item/su-tabbar-item.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<!-- 自定义底部导航项 -->
|
||||
<template>
|
||||
<view class="u-tabbar-item" :style="[addStyle(customStyle)]">
|
||||
<view v-if="isCenter" class="tabbar-center-item">
|
||||
<image class="center-image" :src="centerImage" mode="aspectFill"></image>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="u-tabbar-item__icon">
|
||||
<image
|
||||
v-if="icon"
|
||||
:name="icon"
|
||||
:color="isActive ? parentData.activeColor : parentData.color"
|
||||
:size="20"
|
||||
></image>
|
||||
<block v-else>
|
||||
<slot v-if="isActive" name="active-icon" />
|
||||
<slot v-else name="inactive-icon" />
|
||||
</block>
|
||||
<!-- <u-badge
|
||||
absolute
|
||||
:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
|
||||
:customStyle="badgeStyle"
|
||||
:isDot="dot"
|
||||
:value="badge || (dot ? 1 : null)"
|
||||
:show="dot || badge > 0"
|
||||
></u-badge> -->
|
||||
</view>
|
||||
|
||||
<slot name="text">
|
||||
<text
|
||||
class="u-tabbar-item__text"
|
||||
:style="{
|
||||
color: isActive ? parentData.activeColor : parentData.color,
|
||||
}"
|
||||
>
|
||||
{{ text }}
|
||||
</text>
|
||||
</slot>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* TabbarItem 底部导航栏子组件
|
||||
* @description 此组件提供了自定义tabbar的能力。
|
||||
* @property {String | Number} name item标签的名称，作为与u-tabbar的value参数匹配的标识符
|
||||
* @property {String} icon uView内置图标或者绝对路径的图片
|
||||
* @property {String | Number} badge 右上角的角标提示信息
|
||||
* @property {Boolean} dot 是否显示圆点，将会覆盖badge参数（默认 false ）
|
||||
* @property {String} text 描述文本
|
||||
* @property {Object | String} badgeStyle 控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
*/
|
||||
import { deepMerge, addStyle, sleep, $parent } from '@/sheep/helper';
|
||||
export default {
|
||||
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,
|
||||
parentData: {
|
||||
value: null,
|
||||
activeColor: '',
|
||||
color: '',
|
||||
},
|
||||
parent: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
getParentData(parentName = '') {
|
||||
// 避免在created中去定义parent变量
|
||||
if (!this.parent) this.parent = {};
|
||||
// 这里的本质原理是，通过获取父组件实例(也即类似u-radio的父组件u-radio-group的this)
|
||||
// 将父组件this中对应的参数，赋值给本组件(u-radio的this)的parentData对象中对应的属性
|
||||
// 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
|
||||
// 此处并不会自动更新子组件的数据，而是依赖父组件u-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
|
||||
this.parent = $parent.call(this, parentName);
|
||||
if (this.parent.children) {
|
||||
// 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
|
||||
this.parent.children.indexOf(this) === -1 && this.parent.children.push(this);
|
||||
}
|
||||
if (this.parent && this.parentData) {
|
||||
// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
|
||||
Object.keys(this.parentData).map((key) => {
|
||||
this.parentData[key] = this.parent[key];
|
||||
});
|
||||
}
|
||||
},
|
||||
init() {
|
||||
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
|
||||
this.updateParentData();
|
||||
if (!this.parent) {
|
||||
console.log('u-tabbar-item必须搭配u-tabbar组件使用');
|
||||
}
|
||||
// 本子组件在u-tabbar的children数组中的索引
|
||||
const index = this.parent.children.indexOf(this);
|
||||
// 判断本组件的name(如果没有定义name，就用index索引)是否等于父组件的value参数
|
||||
this.isActive = (this.name.split('?')[0] || index) === this.parentData.value;
|
||||
},
|
||||
updateParentData() {
|
||||
// 此方法在mixin中
|
||||
this.getParentData('su-tabbar');
|
||||
},
|
||||
// 此方法将会被父组件u-tabbar调用
|
||||
updateFromParent() {
|
||||
// 重新初始化
|
||||
this.init();
|
||||
},
|
||||
clickHandler() {
|
||||
this.$nextTick(() => {
|
||||
const index = this.parent.children.indexOf(this);
|
||||
const name = this.name || index;
|
||||
// 点击的item为非激活的item才发出change事件
|
||||
if (name !== this.parent.value) {
|
||||
this.parent.$emit('change', name);
|
||||
}
|
||||
this.$emit('click', name);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabbar-center-item {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background-color: rebeccapurple;
|
||||
transform: scale(1.3) translateY(-6px);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
.center-image {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.u-tabbar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&__icon {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 150rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--textSize);
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifdef MP */
|
||||
// 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
|
||||
:host {
|
||||
flex: 1;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
Reference in New Issue
Block a user