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.

300 lines
9.8 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"
ref="u-subsection"
:class="[`u-subsection--${mode}`]"
:style="[$u.addStyle(customStyle), wrapperStyle]"
>
<view
class="u-subsection__bar"
ref="u-subsection__bar"
:style="[barStyle]"
:class="[
mode === 'button' && 'u-subsection--button__bar',
current === 0 &&
mode === 'subsection' &&
'u-subsection__bar--first',
current > 0 &&
current < list.length - 1 &&
mode === 'subsection' &&
'u-subsection__bar--center',
current === list.length - 1 &&
mode === 'subsection' &&
'u-subsection__bar--last',
]"
></view>
<view
class="u-subsection__item"
:class="[
`u-subsection__item--${index}`,
index < list.length - 1 &&
'u-subsection__item--no-border-right',
index === 0 && 'u-subsection__item--first',
index === list.length - 1 && 'u-subsection__item--last',
]"
:ref="`u-subsection__item--${index}`"
:style="[itemStyle(index)]"
@tap="clickHandler(index)"
v-for="(item, index) in list"
:key="index"
>
<text
class="u-subsection__item__text"
:style="[textStyle(index)]"
>{{ getText(item) }}</text
>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin("dom");
const animation = uni.requireNativePlugin("animation");
// #endif
import props from "./props.js";
/**
* Subsection 分段器
* @description 该分段器一般用于用户从几个选项中选择某一个的场景
* @tutorial https://www.uviewui.com/components/subsection.html
* @property {Array} list tab的数据
* @property {String Number} current 当前活动的tab的index默认 0
* @property {String} activeColor 激活时的颜色(默认 '#3c9cff'
* @property {String} inactiveColor 未激活时的颜色(默认 '#303133'
* @property {String} mode 模式选择mode=button为按钮形式mode=subsection时为分段模式默认 'button'
* @property {String Number} fontSize 字体大小单位px默认 12
* @property {Boolean} bold 激活选项的字体是否加粗(默认 true
* @property {String} bgColor 组件背景颜色mode为button时有效默认 '#eeeeef'
* @property {Object} customStyle 定义需要用到的外部样式
* @property {String} keyName 从`list`元素对象中读取的键名(默认 'name'
*
* @event {Function} change 分段器选项发生改变时触发 回调 index选项的index索引值从0开始
* @example <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
*/
export default {
name: "u-subsection",
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
// 组件尺寸
itemRect: {
width: 0,
height: 0,
},
};
},
watch: {
list(newValue, oldValue) {
this.init();
},
current: {
immediate: true,
handler(n) {
// #ifdef APP-NVUE
// 在安卓nvue上如果通过translateX进行位移到最后一个时会导致右侧无法绘制圆角
// 故用animation模块进行位移
const ref = this.$refs?.["u-subsection__bar"]?.ref;
// 不存在ref的时候(理解为第一次初始化时需要渲染dom进行一定延时再获取ref)这里的100ms是经过测试得出的结果(某些安卓需要延时久一点),勿随意修改
uni.$u.sleep(ref ? 0 : 100).then(() => {
animation.transition(this.$refs["u-subsection__bar"].ref, {
styles: {
transform: `translateX(${
n * this.itemRect.width
}px)`,
transformOrigin: "center center",
},
duration: 300,
});
});
// #endif
},
},
},
computed: {
wrapperStyle() {
const style = {};
// button模式时设置背景色
if (this.mode === "button") {
style.backgroundColor = this.bgColor;
}
return style;
},
// 滑块的样式
barStyle() {
const style = {};
style.width = `${this.itemRect.width}px`;
style.height = `${this.itemRect.height}px`;
// 通过translateX移动滑块其移动的距离为索引*item的宽度
// #ifndef APP-NVUE
style.transform = `translateX(${
this.current * this.itemRect.width
}px)`;
// #endif
if (this.mode === "subsection") {
// 在subsection模式下需要动态设置滑块的圆角因为移动滑块使用的是translateX无法通过父元素设置overflow: hidden隐藏滑块的直角
style.backgroundColor = this.activeColor;
}
return style;
},
// 分段器item的样式
itemStyle(index) {
return (index) => {
const style = {};
if (this.mode === "subsection") {
// 设置border的样式
style.borderColor = this.activeColor;
style.borderWidth = "1px";
style.borderStyle = "solid";
}
return style;
};
},
// 分段器文字颜色
textStyle(index) {
return (index) => {
const style = {};
style.fontWeight =
this.bold && this.current === index ? "bold" : "normal";
style.fontSize = uni.$u.addUnit(this.fontSize);
// subsection模式下激活时默认为白色的文字
if (this.mode === "subsection") {
style.color =
this.current === index ? "#fff" : this.inactiveColor;
} else {
// button模式下激活时文字颜色默认为activeColor
style.color =
this.current === index
? this.activeColor
: this.inactiveColor;
}
return style;
};
},
},
mounted() {
this.init();
},
methods: {
init() {
uni.$u.sleep().then(() => this.getRect());
},
// 判断展示文本
getText(item) {
return typeof item === 'object' ? item[this.keyName] : item
},
// 获取组件的尺寸
getRect() {
// #ifndef APP-NVUE
this.$uGetRect(".u-subsection__item--0").then((size) => {
this.itemRect = size;
});
// #endif
// #ifdef APP-NVUE
const ref = this.$refs["u-subsection__item--0"][0];
ref &&
dom.getComponentRect(ref, (res) => {
this.itemRect = res.size;
});
// #endif
},
clickHandler(index) {
this.$emit("change", index);
},
},
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-subsection {
@include flex;
position: relative;
overflow: hidden;
/* #ifndef APP-NVUE */
width: 100%;
box-sizing: border-box;
/* #endif */
&--button {
height: 32px;
background-color: rgb(238, 238, 239);
padding: 3px;
border-radius: 3px;
align-items: stretch;
&__bar {
background-color: #ffffff;
border-radius: 3px !important;
}
}
&--subsection {
height: 30px;
}
&__bar {
position: absolute;
/* #ifndef APP-NVUE */
transition-property: transform, color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
/* #endif */
&--first {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
&--center {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
&--last {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
}
&__item {
@include flex;
flex: 1;
justify-content: center;
align-items: center;
// vue环境下需要设置相对定位因为滑块为绝对定位item需要在滑块的上面
position: relative;
&--no-border-right {
border-right-width: 0 !important;
}
&--first {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
&--last {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
&__text {
font-size: 12px;
line-height: 12px;
@include flex;
align-items: center;
transition-property: color;
transition-duration: 0.3s;
}
}
}
</style>