261 lines
6.4 KiB
Vue
261 lines
6.4 KiB
Vue
<template>
|
||
<view
|
||
class="u-sidebar-item"
|
||
:class="[`u-sidebar-item-${index}`]"
|
||
:style="[itemStyle]"
|
||
@click="handleClick"
|
||
hover-class="none"
|
||
>
|
||
<view class="u-sidebar-item__content" :class="[`u-sidebar-item__icon-${iconPosition}`]">
|
||
<slot>
|
||
<u-icon
|
||
v-if="icon"
|
||
:name="icon"
|
||
:size="iconSize"
|
||
:color="iconColor"
|
||
class="u-sidebar-item__icon"
|
||
></u-icon>
|
||
<text class="u-sidebar-item__text" >
|
||
{{ label }}
|
||
</text>
|
||
<u-badge
|
||
:isDot="propsBadge.isDot"
|
||
:value="propsBadge.value"
|
||
:type="propsBadge.type"
|
||
:max="propsBadge.max"
|
||
:showZero="propsBadge.showZero"
|
||
:bgColor="propsBadge.bgColor"
|
||
:color="propsBadge.color"
|
||
:shape="propsBadge.shape"
|
||
:numberType="propsBadge.numberType"
|
||
:inverted="propsBadge.inverted"
|
||
:customStyle="{
|
||
position: 'absolute',
|
||
right: '0',
|
||
top: '0',
|
||
transform: 'translate(50%, -50%)'
|
||
}"
|
||
></u-badge>
|
||
</slot>
|
||
</view>
|
||
<view
|
||
v-if="active && parentData.showLine"
|
||
class="u-sidebar-item__line"
|
||
:style="[lineStyle]"
|
||
></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import props from './props.js';
|
||
import mixin from '../../libs/mixin/mixin'
|
||
import mpMixin from '../../libs/mixin/mpMixin';
|
||
|
||
/**
|
||
* SidebarItem 侧边栏项
|
||
* @description 侧边栏的子组件，用于定义侧边栏的每一项
|
||
* @tutorial https://uview.d3u.cn/components/sidebar.html
|
||
*
|
||
* @property {String} label 内容
|
||
* @property {String | Number} value 值，用于标识该项
|
||
* @property {String} icon 图标名称
|
||
* @property {String | Number} iconSize 图标大小
|
||
* @property {String} iconColor 图标颜色
|
||
* @property {String} iconPosition 图标位置，支持 left 和 top
|
||
* @property {String | Number | Object} badge 右上角的角标提示信息，支持字符串、数字、对象类型
|
||
* @property {Boolean} dot 是否显示圆点，将会覆盖badge参数
|
||
* @property {Boolean} disabled 是否禁用该项
|
||
*
|
||
* @example
|
||
* <u-sidebar-item
|
||
* label="标签名称"
|
||
* icon="home"
|
||
* iconPosition="top"
|
||
* :badge="{ isDot: true, value: '5', type: 'error' }"
|
||
* />
|
||
*/
|
||
export default {
|
||
name: 'u-sidebar-item',
|
||
mixins: [mpMixin, mixin, props],
|
||
data() {
|
||
return {
|
||
index: 0,
|
||
parent: false, // 父组件实例
|
||
propsBadge: {
|
||
isDot: false,
|
||
value: '',
|
||
type: 'error',
|
||
max: 99,
|
||
showZero: false,
|
||
bgColor: '',
|
||
color: '',
|
||
shape: 'circle',
|
||
numberType: 'number',
|
||
inverted: false,
|
||
},
|
||
parentData: {
|
||
innerCurrent: 0,
|
||
width: '100px',
|
||
fontSize: '14px',
|
||
lineHeight: '22px',
|
||
textColor: '',
|
||
disabledColor: '',
|
||
disabledBgColor: '',
|
||
bgColor: '',
|
||
activeColor: '',
|
||
activeBgColor: 'white',
|
||
activeBold: true,
|
||
activeStyle: {},
|
||
inactiveStyle: {},
|
||
lineWidth: '4px',
|
||
lineHeight: '16px',
|
||
lineColor: '#1677ff',
|
||
lineBgSize: 'cover',
|
||
showLine: true,
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
'parentData'(newValue, oldValue) {
|
||
// 父组件数据变化时的处理
|
||
},
|
||
badge: {
|
||
immediate: true,
|
||
handler(newVal) {
|
||
if (uni.$u.test.object(this.badge)) {
|
||
this.propsBadge = uni.$u.deepMerge(uni.$u.props.badge, this.badge);
|
||
} else {
|
||
this.propsBadge.value = this.badge || '';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
// 父组件的实例
|
||
this.parent = false;
|
||
},
|
||
computed: {
|
||
active() {
|
||
return this.index === this.parentData.innerCurrent
|
||
},
|
||
itemStyle() {
|
||
const style = {}
|
||
|
||
if (this.disabled) {
|
||
// 禁用状态样式
|
||
if (this.parentData.disabledColor) style.color = this.parentData.disabledColor
|
||
if (this.parentData.disabledBgColor) style.backgroundColor = this.parentData.disabledBgColor
|
||
} else if (this.active) {
|
||
// 激活状态样式
|
||
if (this.parentData.activeBold) style.fontWeight = 'bold'
|
||
if (this.parentData.activeColor) style.color = this.parentData.activeColor
|
||
if (this.parentData.activeBgColor) style.backgroundColor = this.parentData.activeBgColor
|
||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.parentData.activeStyle));
|
||
} else {
|
||
// 非激活状态样式
|
||
if (this.parentData.textColor) style.color = this.parentData.textColor
|
||
return uni.$u.deepMerge(style, uni.$u.addStyle(this.parentData.inactiveStyle));
|
||
}
|
||
|
||
return style
|
||
},
|
||
lineStyle() {
|
||
const style = {}
|
||
style.width = this.$u.addUnit(this.parentData.lineWidth)
|
||
style.height = this.$u.addUnit(this.parentData.lineHeight )
|
||
style.backgroundColor = this.parentData.lineColor
|
||
if (this.parentData.lineBgSize) {
|
||
style.backgroundSize = this.parentData.lineBgSize
|
||
}
|
||
return style
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods: {
|
||
init() {
|
||
// 获取父组件u-sidebar
|
||
let parent = this.$u.$parent.call(this, 'u-sidebar');
|
||
if (parent) {
|
||
this.parent = parent;
|
||
// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
|
||
// push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
|
||
let exist = parent.children.find(val => {
|
||
return this === val;
|
||
})
|
||
if (!exist) parent.children.push(this);
|
||
|
||
// 更新父组件数据
|
||
this.updateParentData();
|
||
|
||
// 设置当前项的索引
|
||
this.index = parent.children.indexOf(this);
|
||
} else {
|
||
uni.$u.error('u-sidebar-item必须要搭配u-sidebar组件使用');
|
||
}
|
||
},
|
||
updateParentData() {
|
||
// 此方法在mixin中
|
||
this.getParentData('u-sidebar');
|
||
},
|
||
// 父组件数据发生变化
|
||
updateFromParent() {
|
||
this.init();
|
||
},
|
||
handleClick() {
|
||
if (this.disabled) return
|
||
// 优先使用value，如果没有value则使用index
|
||
const clickValue = this.value !== '' ? this.value : this.index;
|
||
// 通知父组件，参考u-dropdown-item的实现方式
|
||
if (this.parent && this.parent.handleItemClick) {
|
||
this.parent.handleItemClick(this.index);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.u-sidebar-item {
|
||
position: relative;
|
||
padding: 20px 10px;
|
||
cursor: pointer;
|
||
-webkit-tap-highlight-color: transparent;
|
||
user-select: none;
|
||
|
||
&__content {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
&__icon {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__icon-top {
|
||
flex-direction: column;
|
||
}
|
||
|
||
&__icon-left {
|
||
flex-direction: row;
|
||
}
|
||
|
||
&__text {
|
||
text-align: center;
|
||
}
|
||
|
||
&__line {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 4px;
|
||
height: 16px;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
</style>
|