157 lines
4.1 KiB
Vue
157 lines
4.1 KiB
Vue
<template>
|
|
<view class="u-sidebar" :style="[sidebarStyle]">
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import props from './props.js';
|
|
import mixin from '../../libs/mixin/mixin'
|
|
import mpMixin from '../../libs/mixin/mpMixin';
|
|
|
|
/**
|
|
* Sidebar 侧边栏
|
|
* @description 垂直展示的导航栏，用于在不同的内容区域之间进行切换
|
|
* @tutorial https://uview.d3u.cn/components/sidebar.html
|
|
*
|
|
* @property {Number | String} value 当前导航项的索引
|
|
* @property {Number | String} modelValue Vue3模式下当前导航项的索引
|
|
* @property {String} width 宽度
|
|
* @property {String} fontSize 字体大小
|
|
* @property {String} lineHeight 行高
|
|
* @property {String} textColor 文本颜色
|
|
* @property {String} disabledColor 禁用文本颜色
|
|
* @property {String} disabledBgColor 禁用背景颜色
|
|
* @property {String} bgColor 背景色
|
|
* @property {String} activeColor 激活时文本颜色
|
|
* @property {String} activeBgColor 激活时背景颜色
|
|
* @property {Boolean} activeBold 激活时是否加粗
|
|
* @property {String | Object} activeStyle 激活时的样式
|
|
* @property {String | Object} inactiveStyle 非激活时的样式
|
|
* @property {String | Number} lineWidth 滑块长度
|
|
* @property {String | Number} lineHeight 滑块高度
|
|
* @property {String} lineColor 滑块颜色
|
|
* @property {String} lineBgSize 滑块背景显示大小，当滑块背景设置为图片时使用
|
|
* @property {Boolean} showLine 是否显示滑块
|
|
*
|
|
* @event {Function(Object)} change 切换导航项时触发，返回包含index、label、value的对象
|
|
* @example
|
|
* <u-sidebar v-model="current" :width="'200px'" :fontSize="'16px'">
|
|
* <u-sidebar-item label="标签名称" badge="5" />
|
|
* </u-sidebar>
|
|
*/
|
|
export default {
|
|
name: 'u-sidebar',
|
|
mixins: [mpMixin, mixin, props],
|
|
data() {
|
|
return {
|
|
innerCurrent: 0
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
immediate: true,
|
|
handler(newValue) {
|
|
if (newValue !== this.innerCurrent) {
|
|
this.innerCurrent = parseInt(newValue) || 0
|
|
this.updateChildData()
|
|
}
|
|
}
|
|
},
|
|
// #ifdef VUE3
|
|
modelValue: {
|
|
immediate: true,
|
|
handler(newValue) {
|
|
if (newValue !== this.innerCurrent) {
|
|
this.innerCurrent = parseInt(newValue) || 0
|
|
this.updateChildData()
|
|
}
|
|
}
|
|
}
|
|
// #endif
|
|
},
|
|
computed: {
|
|
sidebarStyle() {
|
|
const style = {}
|
|
if (this.width) style.width = this.$u.addUnit(this.width)
|
|
if (this.fontSize) style.fontSize = this.$u.addUnit(this.fontSize)
|
|
if (this.lineHeight) style.lineHeight = this.$u.addUnit(this.lineHeight)
|
|
if (this.bgColor) style.backgroundColor = this.bgColor
|
|
return style
|
|
},
|
|
// 监听参数的变化，通过watch中，手动去更新子组件的数据，否则子组件不会自动变化
|
|
parentData() {
|
|
return [
|
|
this.innerCurrent,
|
|
this.width,
|
|
this.fontSize,
|
|
this.lineHeight,
|
|
this.textColor,
|
|
this.disabledColor,
|
|
this.disabledBgColor,
|
|
this.bgColor,
|
|
this.activeColor,
|
|
this.activeBgColor,
|
|
this.activeBold,
|
|
this.activeStyle,
|
|
this.inactiveStyle,
|
|
this.lineWidth,
|
|
this.lineHeight,
|
|
this.lineColor,
|
|
this.lineBgSize,
|
|
this.showLine
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.children = []
|
|
},
|
|
// #ifdef VUE3
|
|
emits: ["update:modelValue", "change"],
|
|
// #endif
|
|
methods: {
|
|
init() {
|
|
// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
|
|
// 以保证数据的正确性
|
|
this.children.map(child => {
|
|
child.init();
|
|
})
|
|
},
|
|
// 更新子组件的数据
|
|
updateChildData() {
|
|
this.children.map(child => {
|
|
uni.$u.test.func((child || {}).updateFromParent) && child.updateFromParent()
|
|
})
|
|
},
|
|
// 处理子组件点击
|
|
handleItemClick(index) {
|
|
const child = this.children[index]
|
|
if (child && !child.disabled) {
|
|
this.innerCurrent = index
|
|
// #ifdef VUE2
|
|
this.$emit('input', index)
|
|
// #endif
|
|
|
|
// #ifdef VUE3
|
|
this.$emit('update:modelValue', index)
|
|
// #endif
|
|
|
|
this.$emit('change', {
|
|
index: index,
|
|
label: child.label,
|
|
value: child.value
|
|
})
|
|
|
|
this.updateChildData()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.u-sidebar {
|
|
|
|
}
|
|
</style>
|