You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

356 lines
13 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="u-subsection" :style="[subsectionStyle]">
<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
v-for="(item, index) in listInfo" :key="index">
<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
</view>
<view class="u-item-bg" :style="[itemBarStyle]"></view>
</view>
</template>
<script>
/**
* subsection 分段器
* @description 该分段器一般用于用户从几个选项中选择某一个的场景
* @tutorial https://www.uviewui.com/components/subsection.html
* @property {Array} list 选项的数组,形式见上方"基本使用"
* @property {String Number} current 初始化时默认选中的选项索引值默认0
* @property {String} active-color 激活时的颜色mode为subsection时固定为白色默认#303133
* @property {String} inactive-color 未激活时字体的颜色mode为subsection时无效默认#606266
* @property {String} mode 模式选择,见官网"模式选择"说明默认button
* @property {String Number} font-size 字体大小单位rpx默认28
* @property {String Number} height 组件高度单位rpx默认70
* @property {Boolean} animation 是否开启动画效果见上方说明默认true
* @property {Boolean} bold 激活选项的字体是否加粗默认true
* @property {String} bg-color 组件背景颜色mode为button时有效默认#eeeeef
* @property {String} button-color 按钮背景颜色mode为button时有效默认#ffffff
* @event {Function} change 分段器选项发生改变时触发
* @example <u-subsection active-color="#ff9900"></u-subsection>
*/
export default {
name: "u-subsection",
props: {
// tab的数据
list: {
type: Array,
default () {
return [];
}
},
// 当前活动的tab的index
current: {
type: [Number, String],
default: 0
},
// 激活的颜色
activeColor: {
type: String,
default: '#303133'
},
// 未激活的颜色
inactiveColor: {
type: String,
default: '#606266'
},
// 模式选择mode=button为按钮形式mode=subsection时为分段模式
mode: {
type: String,
default: 'button'
},
// 字体大小单位rpx
fontSize: {
type: [Number, String],
default: 28
},
// 是否开启动画效果
animation: {
type: Boolean,
default: true
},
// 组件的高度单位rpx
height: {
type: [Number, String],
default: 70
},
// 激活tab的字体是否加粗
bold: {
type: Boolean,
default: true
},
// mode=button时组件背景颜色
bgColor: {
type: String,
default: '#eeeeef'
},
// mode = button时滑块背景颜色
buttonColor: {
type: String,
default: '#ffffff'
},
// 在切换分段器的时候,是否让设备震一下
vibrateShort: {
type: Boolean,
default: false
}
},
data() {
return {
listInfo: [],
itemBgStyle: {
width: 0,
left: 0,
backgroundColor: '#ffffff',
height: '100%',
transition: ''
},
currentIndex: this.current,
buttonPadding: 3, // mode = button 时,组件的内边距
borderRadius: 5, // 圆角值
firstTimeVibrateShort: true // 组件初始化时会触发current变化此时不应震动
};
},
watch: {
current: {
immediate: true,
handler(nVal) {
this.currentIndex = nVal;
this.changeSectionStatus(nVal);
}
}
},
created() {
// 将list的数据传入listInfo数组因为不能修改props传递的list值
// 可以接受直接数组形式,或者数组元素为对象的形式,如:['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
this.listInfo = this.list.map((val, index) => {
if (typeof val != 'object') {
let obj = {
width: 0,
name: val
};
return obj;
} else {
val.width = 0;
return val;
}
});
},
computed: {
// 设置mode=subsection时滑块特有的样式
noBorderRight() {
return index => {
if (this.mode != 'subsection') return;
let classs = '';
// 不显示右边的边框
if (index < this.list.length - 1) classs += ' u-none-border-right';
// 显示整个组件的左右边圆角
if (index == 0) classs += ' u-item-first';
if (index == this.list.length - 1) classs += ' u-item-last';
return classs;
};
},
// 文字的样式
textStyle() {
return index => {
let style = {};
// 设置字体颜色
if (this.mode == 'subsection') {
if (index == this.currentIndex) {
style.color = '#ffffff';
} else {
style.color = this.activeColor;
}
} else {
if (index == this.currentIndex) {
style.color = this.activeColor;
} else {
style.color = this.inactiveColor;
}
}
// 字体加粗
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
// 文字大小
style.fontSize = this.fontSize + 'rpx';
return style;
};
},
// 每个分段器item的样式
itemStyle() {
return index => {
let style = {};
if (this.mode == 'subsection') {
// 设置border的样式
style.borderColor = this.activeColor;
style.borderWidth = '1px';
style.borderStyle = 'solid';
}
return style;
};
},
// mode=button时外层view的样式
subsectionStyle() {
let style = {};
style.height = uni.upx2px(this.height) + 'px';
if (this.mode == 'button') {
style.backgroundColor = this.bgColor;
style.padding = `${this.buttonPadding}px`;
style.borderRadius = `${this.borderRadius}px`;
}
return style;
},
// 滑块的样式
itemBarStyle() {
let style = {};
style.backgroundColor = this.activeColor;
style.zIndex = 1;
if (this.mode == 'button') {
style.backgroundColor = this.buttonColor;
style.borderRadius = `${this.borderRadius}px`;
style.bottom = `${this.buttonPadding}px`;
style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px';
style.zIndex = 0;
}
return Object.assign(this.itemBgStyle, style);
}
},
mounted() {
setTimeout(() => {
this.getTabsInfo();
}, 10);
},
methods: {
// 改变滑块的样式
changeSectionStatus(nVal) {
if (this.mode == 'subsection') {
// 根据滑块在最左边和最右边时,显示左边和右边的圆角
if (nVal == this.list.length - 1) {
this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
}
if (nVal == 0) {
this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
}
if (nVal > 0 && nVal < this.list.length - 1) {
this.itemBgStyle.borderRadius = '0';
}
}
// 更新滑块的位置
setTimeout(() => {
this.itemBgLeft();
}, 10);
if (this.vibrateShort && !this.firstTimeVibrateShort) {
// 使手机产生短促震动微信小程序有效APP(HX 2.6.8)和H5无效
// #ifndef H5
uni.vibrateShort();
// #endif
}
// 第一次过后设置firstTimeVibrateShort为false让其下一次可以震动(如果允许震动的话)
this.firstTimeVibrateShort = false;
},
click(index) {
// 不允许点击当前激活选项
if (index == this.currentIndex) return;
this.currentIndex = index;
this.changeSectionStatus(index);
this.$emit('change', Number(index));
},
// 获取各个tab的节点信息
getTabsInfo() {
let view = uni.createSelectorQuery().in(this);
for (let i = 0; i < this.list.length; i++) {
view.select('.u-item-' + i).boundingClientRect();
}
view.exec(res => {
if (!res.length) {
setTimeout(() => {
this.getTabsInfo();
return;
}, 10);
}
// 将分段器每个item的宽度放入listInfo数组
res.map((val, index) => {
this.listInfo[index].width = val.width;
});
// 初始化滑块的宽度
if (this.mode == 'subsection') {
this.itemBgStyle.width = this.listInfo[0].width + 'px';
} else if (this.mode == 'button') {
this.itemBgStyle.width = this.listInfo[0].width + 'px';
}
// 初始化滑块的位置
this.itemBgLeft();
});
},
itemBgLeft() {
// 根据是否开启动画效果,
if (this.animation) {
this.itemBgStyle.transition = 'all 0.35s';
} else {
this.itemBgStyle.transition = 'all 0s';
}
let left = 0;
// 计算当前活跃item到组件左边的距离
this.listInfo.map((val, index) => {
if (index < this.currentIndex) left += val.width;
});
// 根据mode不同模式计算滑块需要移动的距离
if (this.mode == 'subsection') {
this.itemBgStyle.left = left + 'px';
} else if (this.mode == 'button') {
this.itemBgStyle.left = left + this.buttonPadding + 'px';
}
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-subsection {
@include vue-flex;
align-items: center;
overflow: hidden;
position: relative;
}
.u-item {
flex: 1;
text-align: center;
font-size: 26rpx;
height: 100%;
@include vue-flex;
align-items: center;
justify-content: center;
color: $u-main-color;
padding: 0 6rpx;
}
.u-item-bg {
background-color: $u-type-primary;
position: absolute;
z-index: -1;
}
.u-none-border-right {
border-right: none !important;
}
.u-item-first {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
.u-item-last {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
.u-item-text {
transition: all 0.35s;
color: $u-main-color;
@include vue-flex;
align-items: center;
position: relative;
z-index: 3;
}
</style>