shuolol/kccharge-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
dev
2025-10-28 09:25:46 +08:00
commit 9431e325df
1089 changed files with 143917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uni_modules/uv-tabs/changelog.md
+22
View File
@@ -0,0 +1,22 @@
## 1.0.9（2023-12-01）
1. 修复current为字符串activeStyle不生效的BUG
2. 优化文档
## 1.0.8（2023-10-13）
1. 优化点击一个选项，change事件重复派发的问题
## 1.0.7（2023-09-14）
1. 优化首次加载时，处理下划线会有左到右的过渡效果
## 1.0.6（2023-09-13）
1. 修复设置lineWidth未带单位产生的误差BUG
## 1.0.5（2023-06-23）
添加uv-icon依赖
## 1.0.4（2023-06-16）
1. 增加customStyle参数
## 1.0.3（2023-06-12）
1. activeStyle设置字体大小，导致下划线位置不对的BUG，增加this.$nextTick机制
## 1.0.2（2023-05-23）
1. 修复nvue中不滚动的BUG
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-tabs 标签选项卡
uni_modules/uv-tabs/components/uv-tabs/props.js
+71
View File
@@ -0,0 +1,71 @@
export default {
props: {
// 滑块的移动过渡时间，单位ms
duration: {
type: Number,
default: 300
},
// tabs标签数组
list: {
type: Array,
default: () => []
},
// 滑块颜色
lineColor: {
type: String,
default: '#3c9cff'
},
// 菜单选择中时的样式
activeStyle: {
type: [String, Object],
default: () => ({
color: '#303133'
})
},
// 菜单非选中时的样式
inactiveStyle: {
type: [String, Object],
default: () => ({
color: '#606266'
})
},
// 滑块长度
lineWidth: {
type: [String, Number],
default: 20
},
// 滑块高度
lineHeight: {
type: [String, Number],
default: 3
},
// 滑块背景显示大小，当滑块背景设置为图片时使用
lineBgSize: {
type: String,
default: 'cover'
},
// 菜单item的样式
itemStyle: {
type: [String, Object],
default: () => ({
height: '44px'
})
},
// 菜单是否可滚动
scrollable: {
type: Boolean,
default: true
},
// 当前选中标签的索引
current: {
type: [Number, String],
default: 0
},
// 默认读取的键名
keyName: {
type: String,
default: 'name'
},
...uni.$uv?.props?.tabs
}
}
uni_modules/uv-tabs/components/uv-tabs/uv-tabs.vue
+390
View File
@@ -0,0 +1,390 @@
<template>
<view class="uv-tabs" :style="[$uv.addStyle(customStyle)]">
<view class="uv-tabs__wrapper">
<slot name="left" />
<view class="uv-tabs__wrapper__scroll-view-wrapper">
<scroll-view
:scroll-x="scrollable"
:scroll-left="scrollLeft"
scroll-with-animation
class="uv-tabs__wrapper__scroll-view"
:show-scrollbar="false"
ref="uv-tabs__wrapper__scroll-view"
>
<view
class="uv-tabs__wrapper__nav"
ref="uv-tabs__wrapper__nav"
:style="{
flex: scrollable ? '' : 1
}"
>
<view
class="uv-tabs__wrapper__nav__item"
v-for="(item, index) in list"
:key="index"
@tap="clickHandler(item, index)"
:ref="`uv-tabs__wrapper__nav__item-${index}`"
:style="[{flex: scrollable ? '' : 1},$uv.addStyle(itemStyle)]"
:class="[`uv-tabs__wrapper__nav__item-${index}`, item.disabled && 'uv-tabs__wrapper__nav__item--disabled']"
>
<text
:class="[item.disabled && 'uv-tabs__wrapper__nav__item__text--disabled']"
class="uv-tabs__wrapper__nav__item__text"
:style="[textStyle(index)]"
>{{ item[keyName] }}</text>
<uv-badge
:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
:isDot="item.badge && item.badge.isDot || propsBadge.isDot"
:value="item.badge && item.badge.value || propsBadge.value"
:max="item.badge && item.badge.max || propsBadge.max"
:type="item.badge && item.badge.type || propsBadge.type"
:showZero="item.badge && item.badge.showZero || propsBadge.showZero"
:bgColor="item.badge && item.badge.bgColor || propsBadge.bgColor"
:color="item.badge && item.badge.color || propsBadge.color"
:shape="item.badge && item.badge.shape || propsBadge.shape"
:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
customStyle="margin-left: 4px;"
></uv-badge>
</view>
<!-- #ifdef APP-NVUE -->
<view
class="uv-tabs__wrapper__nav__line"
ref="uv-tabs__wrapper__nav__line"
:style="[{
width: $uv.addUnit(lineWidth),
height: firstTime?0:$uv.addUnit(lineHeight),
background: lineColor,
backgroundSize: lineBgSize
}]"
>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view
class="uv-tabs__wrapper__nav__line"
ref="uv-tabs__wrapper__nav__line"
:style="[{
width: $uv.addUnit(lineWidth),
transform: `translate(${lineOffsetLeft}px)`,
transitionDuration: `${firstTime ? 0 : duration}ms`,
height: firstTime?0:$uv.addUnit(lineHeight),
background: lineColor,
backgroundSize: lineBgSize,
}]"
>
<!-- #endif -->
</view>
</view>
</scroll-view>
</view>
<slot name="right" />
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import uvBadgeProps from '@/uni_modules/uv-badge/components/uv-badge/props.js'
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation')
const dom = uni.requireNativePlugin('dom')
// #endif
import props from './props.js';
/**
* Tabs 标签
* @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
* @tutorial https://www.uvui.cn/components/tabs.html
* @property {Array} list 标签数组，元素为对象，如[{name: '推荐'}]
* @property {String | Number} duration 滑块移动一次所需的时间，单位秒（默认 200 ）
* @property {String | Object} activeStyle 菜单选择中时的样式（默认{ color: '#303133' }）
* @property {String | Object} inactiveStyle 菜单非选择中时的样式（默认{ color: '#606266' }）
* @property {String | Number} lineWidth 滑块长度（默认 20）
* @property {String | Number} lineHeight 滑块高度（默认 3）
* @property {String} lineColor 滑块颜色（默认：'#3c9cff'）
* @property {String} lineBgSize 滑块背景显示大小，当滑块背景设置为图片时使用（默认 cover）
* @property {String | Number} itemStyle 菜单item的样式（默认 { height: '44px' }）
* @property {String} scrollable 菜单是否可滚动，选项很少的时候设置为false整个tabs自动居中显示（默认：true）
* @property {String | Number} current 当前选中标签的索引（默认 0 ）
* @property {String} keyName 从list元素对象中读取的键名（默认 'name' ）
* @property {String | Number} swierWidth swiper的宽度（默认 '750rpx' ）
* @property {String | Object} customStyle 自定义外部样式
*
* @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
* @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
* @example <uv-tabs :list="list" :is-scroll="false" :current="current" @change="change"></uv-tabs>
*/
export default {
name: 'uv-tabs',
emits: ['click','change'],
mixins: [mpMixin, mixin, props],
data() {
return {
firstTime: true,
scrollLeft: 0,
scrollViewWidth: 0,
lineOffsetLeft: 0,
tabsRect: {
left: 0
},
innerCurrent: 0,
moving: false,
}
},
watch: {
current: {
immediate: true,
handler (newValue, oldValue) {
// 内外部值不相等时，才尝试移动滑块
if (newValue !== this.innerCurrent) {
this.innerCurrent = newValue
this.$nextTick(() => {
this.resize()
})
}
}
},
// list变化时，重新渲染list各项信息
list() {
this.$nextTick(() => {
this.resize()
})
}
},
computed: {
textStyle() {
return index => {
const style = {}
// 取当期是否激活的样式
const customeStyle = index == this.innerCurrent ? this.$uv.addStyle(this.activeStyle) : this.$uv
.addStyle(
this.inactiveStyle)
// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
if (this.list[index].disabled) {
style.color = '#c8c9cc'
}
return this.$uv.deepMerge(customeStyle, style)
}
},
propsBadge() {
return uvBadgeProps
}
},
async mounted() {
this.init()
},
methods: {
setLineLeft() {
const tabItem = this.list[this.innerCurrent];
if (!tabItem) {
return;
}
// 获取滑块该移动的位置
let lineOffsetLeft = this.list
.slice(0, this.innerCurrent)
.reduce((total, curr) => total + curr.rect.width, 0);
// 获取下划线的数值px表示法
let lineWidth = this.$uv.getPx(this.lineWidth);
// 如果传的值未带单位+设置了全局单位，则带上单位计算，这样才没有误差
if (this.$uv.test.number(this.lineWidth) && this.$uv.unit) {
lineWidth = this.$uv.getPx(`${this.lineWidth}${this.$uv.unit}`);
}
this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
// #ifdef APP-NVUE
// 第一次移动滑块，无需过渡时间
this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
// #endif
// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
if (this.firstTime) {
setTimeout(() => {
this.firstTime = false
}, 20);
}
},
// nvue下设置滑块的位置
animation(x, duration = 0) {
// #ifdef APP-NVUE
const ref = this.$refs['uv-tabs__wrapper__nav__line']
animation.transition(ref, {
styles: {
transform: `translateX(${x}px)`
},
duration
})
// #endif
},
// 点击某一个标签
clickHandler(item, index) {
// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
this.$emit('click', {
...item,
index
})
// 如果disabled状态，返回
if (item.disabled) return
if(this.innerCurrent != index) {
this.$emit('change', {
...item,
index
})
}
this.innerCurrent = index
// #ifndef APP-NVUE
this.$nextTick(()=>{
this.resize()
})
// #endif
// #ifdef APP-NVUE
this.$nextTick(()=>{
// nvue模式下再给点延时，确保万无一失
this.$uv.sleep(30).then(res=>{
this.resize()
});
})
// #endif
},
init() {
this.$uv.sleep().then(() => {
this.resize()
})
},
setScrollLeft() {
// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
const tabRect = this.list[this.innerCurrent]
// 累加得到当前item到左边的距离
const offsetLeft = this.list
.slice(0, this.innerCurrent)
.reduce((total, curr) => {
return total + curr.rect.width
}, 0)
// 此处为屏幕宽度
const windowWidth = this.$uv.sys().windowWidth
// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
.right) / 2 + this.tabsRect.left / 2
// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
this.scrollLeft = Math.max(0, scrollLeft)
},
// 获取所有标签的尺寸
resize() {
// 如果不存在list，则不处理
if(this.list.length === 0) {
return
}
Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
this.tabsRect = tabsRect
this.scrollViewWidth = 0
itemRect.map((item, index) => {
// 计算scroll-view的宽度，这里
this.scrollViewWidth += item.width
// 另外计算每一个item的中心点X轴坐标
this.list[index].rect = item
})
// 获取了tabs的尺寸之后，设置滑块的位置
this.setLineLeft()
this.setScrollLeft()
})
},
// 获取导航菜单的尺寸
getTabsRect() {
return new Promise(resolve => {
this.queryRect('uv-tabs__wrapper__scroll-view').then(size => resolve(size))
})
},
// 获取所有标签的尺寸
getAllItemRect() {
return new Promise(resolve => {
const promiseAllArr = this.list.map((item, index) => this.queryRect(
`uv-tabs__wrapper__nav__item-${index}`, true))
Promise.all(promiseAllArr).then(sizes => resolve(sizes))
})
},
// 获取各个标签的尺寸
queryRect(el, item) {
// #ifndef APP-NVUE
// $uvGetRect为uni-ui自带的节点查询简化方法，详见文档介绍：https://www.uvui.cn/js/getRect.html
// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
return new Promise(resolve => {
this.$uvGetRect(`.${el}`).then(size => {
resolve(size)
})
})
// #endif
// #ifdef APP-NVUE
// nvue下，使用dom模块查询元素高度
// 返回一个promise，让调用此方法的主体能使用then回调
return new Promise(resolve => {
dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], res => {
resolve(res.size)
})
})
// #endif
},
},
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-tabs {
&__wrapper {
@include flex;
align-items: center;
&__scroll-view-wrapper {
flex: 1;
/* #ifndef APP-NVUE */
overflow: auto hidden;
/* #endif */
}
&__scroll-view {
@include flex;
flex: 1;
}
&__nav {
@include flex;
position: relative;
&__item {
padding: 0 11px;
@include flex;
align-items: center;
justify-content: center;
&--disabled {
/* #ifndef APP-NVUE */
cursor: not-allowed;
/* #endif */
}
&__text {
font-size: 15px;
color: $uv-content-color;
&--disabled {
color: $uv-disabled-color !important;
}
}
}
&__line {
height: 3px;
background: $uv-primary;
width: 30px;
position: absolute;
bottom: 2px;
border-radius: 100px;
transition-property: transform;
transition-duration: 300ms;
}
}
}
}
</style>
uni_modules/uv-tabs/package.json
+90
View File
@@ -0,0 +1,90 @@
{
"id": "uv-tabs",
"displayName": "uv-tabs 标签选项卡 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.9",
"description": "标签选项卡组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。",
"keywords": [
"选项卡",
"uvui",
"uv-ui",
"tab",
"标签"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-badge",
"uv-sticky",
"uv-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
uni_modules/uv-tabs/readme.md
+19
View File
@@ -0,0 +1,19 @@
## Tabs 标签选项卡
> **组件名：uv-tabs**
标签选项卡组件，是一个`tabs`标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的`tab`会自动移动到组件的中间位置。
# <a href="https://www.uvui.cn/components/tabs.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>