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-list/changelog.md
+25
View File
@@ -0,0 +1,25 @@
## 1.0.9（2023-11-10）
1. 修复设置ellipsis不生效的BUG
## 1.0.8（2023-09-20）
1. listItem优化可使用customStyle变量进行样式控制
## 1.0.7（2023-08-29）
1. 修复边框的BUG
## 1.0.6（2023-08-16）
1. 修复switch开关返回undefined的问题
2. 优化初始化可能导致的闪动
## 1.0.5（2023-08-07）
1. 修复分包页面在ios端，nvue编译不能滚动的BUG
## 1.0.4（2023-08-04）
1. nvue修复 触底不触发事件的BUG
2. 更新文档说明事件触发
## 1.0.3（2023-07-28）
1. 修改可能造成样式污染的BUG
## 1.0.2（2023-07-26）
1. 全面重构，用法与之前保持一致，参数全部变化
2. 新增多个功能参数，方便一键构建列表
3. List列表组件，包含基本列表样式、默认插槽机制、可扩展插槽机制、长列表性能优化、多端兼容。
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-list 列表
uni_modules/uv-list/components/uv-list-item/uv-list-item.vue
+535
View File
@@ -0,0 +1,535 @@
<template>
<!-- #ifdef APP-NVUE -->
<cell :keep-scroll-position="keepScrollPosition">
<!-- #endif -->
<view
:class="{ 'uv-list-item--disabled': disabled }"
:style="[$uv.addStyle(customStyle),{'background-color':customStyle.backgroundColor?customStyle.backgroundColor:'#fff'}]"
:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uv-list-item--hover'"
class="uv-list-item" @click="onClick">
<view v-if="!isFirstChild" class="border--left" :class="{ 'uv-list--border': border }"></view>
<view class="uv-list-item__wrapper">
<slot>
<view class="uv-list-item__container"
:class="{ 'container--right': showArrow || link, 'flex--direction': directionData === 'column'}"
:style="{paddingTop:padding.top,paddingLeft:padding.left,paddingRight:padding.right,paddingBottom:padding.bottom}">
<slot name="header">
<view class="uv-list-item__header">
<view v-if="thumb" class="uv-list-item__icon">
<image :src="thumb" class="uv-list-item__icon-img" :class="['uv-list--' + thumbSize]" />
</view>
<view v-else-if="showExtraIcon" class="uv-list-item__icon">
<uv-icon :name="extraIcon.icon" :customPrefix="extraIcon.customPrefix" :color="extraIcon.color" :size="extraIcon.size" />
</view>
</view>
</slot>
<slot name="body">
<view class="uv-list-item__content"
:class="{ 'uv-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
<text v-if="title" class="uv-list-item__content-title"
:class="[ellipsis && `uv-line-${ellipsis}`]">{{ title }}</text>
<text v-if="note" class="uv-list-item__content-note">{{ note }}</text>
</view>
</slot>
<slot name="footer">
<view v-if="rightText || showBadge || showSwitch" class="uv-list-item__extra"
:class="{ 'flex--justify': directionData === 'column' }">
<text v-if="rightText" class="uv-list-item__extra-text">{{ rightText }}</text>
<uv-badge
v-if="showBadge"
:show="!!(badge.show || badge.isDot || badge.value)"
:isDot="badge.isDot"
:value="badge.value"
:max="badge.max"
:type="badge.type"
:showZero="badge.showZero"
:bgColor="badge.bgColor"
:color="badge.color"
:shape="badge.shape"
:numberType="badge.numberType"
:inverted="badge.inverted"
customStyle="margin-left: 4px;"
></uv-badge>
<uv-switch v-if="showSwitch" :value="switchChecked" :disabled="disabled" @change="onSwitchChange"></uv-switch>
</view>
</slot>
</view>
</slot>
</view>
<uv-icon v-if="showArrow || link" size="34rpx" class="uv-icon-wrapper" color="#bbb" name="arrow-right" />
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</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'
/**
* ListItem 列表子组件
* @description 列表子组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
* @property {String} title 标题
* @property {String} note 描述
* @property {String} thumb 左侧缩略图，若thumb有值，则不会显示扩展图标
* @property {String} thumbSize = [lg|base|sm] 略缩图大小
* @value lg 大图
* @value base 一般
* @value sm 小图
* @property {String} rightText 右侧文字内容
* @property {Boolean} disabled = [true|false] 是否禁用
* @property {Boolean} clickable = [true|false] 是否开启点击反馈
* @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
* @value navigateTo 同 uni.navigateTo()
* @value redirectTo 同 uni.redirectTo()
* @value reLaunch 同 uni.reLaunch()
* @value switchTab 同 uni.switchTab()
* @property {String | PageURIString} to 跳转目标页面
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
* @property {Object} badge 扩展数字角标的参数，格式为 :badge="{value: 122}"
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
* @property {Object} extraIcon 扩展图标参数，格式为 :extraIcon="{icon: 'photo',size: '30px'}"
* @property {String} direction = [row|column] 排版方向
* @value row 水平排列
* @value column 垂直排列
* @event {Function} click 点击 uniListItem 触发事件
* @event {Function} switchChange 点击切换 Switch 时触发
*/
export default {
name: 'uv-list-item',
mixins: [mpMixin, mixin],
emits: ['click', 'switchChange'],
props: {
direction: {
type: String,
default: 'row'
},
title: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
ellipsis: {
type: [Number, String],
default: 0
},
disabled: {
type: [Boolean, String],
default: false
},
clickable: {
type: Boolean,
default: false
},
showArrow: {
type: [Boolean, String],
default: false
},
link: {
type: [Boolean, String],
default: false
},
to: {
type: String,
default: ''
},
showSwitch: {
type: [Boolean, String],
default: false
},
switchChecked: {
type: [Boolean, String],
default: false
},
showBadge: {
type: [Boolean, String],
default: false
},
badge: {
type: Object,
default () {
return {}
}
},
rightText: {
type: String,
default: ''
},
thumb: {
type: String,
default: ''
},
thumbSize: {
type: String,
default: 'base'
},
showExtraIcon: {
type: [Boolean, String],
default: false
},
extraIcon: {
type: Object,
default () {
return {
name: '',
color: '#000000',
size: 20,
customPrefix: ''
};
}
},
border: {
type: Boolean,
default: false
},
customStyle: {
type: Object,
default () {
return {
padding: '',
backgroundColor: '#FFFFFF'
}
}
},
keepScrollPosition: {
type: Boolean,
default: false
}
},
computed: {
directionData(){
return this.direction ? this.direction : (this.parentData.direction ? this.parentData.direction : 'row');
}
},
watch: {
'customStyle.padding': {
handler(padding) {
if(padding) this.setPadding(padding);
},
immediate: true
}
},
data() {
return {
isFirstChild: false,
padding: {
top: "",
right: "",
bottom: "",
left: ""
},
parentData: {
direction: 'row',
padding: 0
}
};
},
created() {
this.updateParentData();
},
mounted() {
this.init();
this.list = this.getForm()
// 判断是否存在 uv-list 组件
if (this.list) {
if (!this.list.firstChildAppend) {
this.list.firstChildAppend = true;
this.isFirstChild = true;
}
}
},
methods: {
init(){
if (!this.parent) {
this.$uv.error('uv-list-item必须搭配uv-list组件使用');
}
this.$nextTick(()=>{
if(!(this.padding.top || this.padding.right|| this.padding.bottom|| this.padding.left)){
this.setPadding(this.parentData.padding);
}
})
},
updateParentData() {
this.getParentData('uv-list');
},
setPadding(padding){
if(typeof padding == 'number'){
padding += ''
}
let paddingArr = padding.split(' ')
if (paddingArr.length === 1) {
const allPadding = paddingArr[0]
this.padding = {
"top": allPadding,
"right": allPadding,
"bottom": allPadding,
"left": allPadding
}
} else if (paddingArr.length === 2) {
const [verticalPadding, horizontalPadding] = paddingArr;
this.padding = {
"top": verticalPadding,
"right": horizontalPadding,
"bottom": verticalPadding,
"left": horizontalPadding
}
} else if (paddingArr.length === 4) {
const [topPadding, rightPadding, bottomPadding, leftPadding] = paddingArr;
this.padding = {
"top": topPadding,
"right": rightPadding,
"bottom": bottomPadding,
"left": leftPadding
}
}
},
/**
* 获取父元素实例
*/
getForm(name = 'uniList') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
onClick() {
if (this.to !== '') {
this.openPage();
return;
}
if (this.clickable || this.link) {
this.$emit('click', {
data: {}
});
}
},
onSwitchChange(e) {
this.$emit('switchChange', e);
},
openPage() {
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
this.pageApi(this.link);
} else {
this.pageApi('navigateTo');
}
},
pageApi(api) {
let callback = {
url: this.to,
success: res => {
this.$emit('click', {
data: res
});
},
fail: err => {
this.$emit('click', {
data: err
});
}
}
switch (api) {
case 'navigateTo':
uni.navigateTo(callback)
break
case 'redirectTo':
uni.redirectTo(callback)
break
case 'reLaunch':
uni.reLaunch(callback)
break
case 'switchTab':
uni.switchTab(callback)
break
default:
uni.navigateTo(callback)
}
}
}
};
</script>
<style lang="scss" scoped>
$show-lines: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
$uv-font-size-sm:12px;
$uv-font-size-base:14px;
$uv-font-size-lg:16px;
$uv-spacing-col-lg: 12px;
$uv-spacing-row-lg: 15px;
$uv-img-size-sm:20px;
$uv-img-size-base:26px;
$uv-img-size-lg:40px;
$uv-border-color:#e5e5e5;
$uv-bg-color-hover:#f1f1f1;
$uv-text-color-grey:#999;
$list-item-pd: $uv-spacing-col-lg $uv-spacing-row-lg;
.uv-list-item {
@include flex(row);
font-size: $uv-font-size-lg;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #fff;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uv-list-item--disabled {
opacity: 0.3;
}
.uv-list-item--hover {
background-color: $uv-bg-color-hover !important;
}
.uv-list-item__wrapper {
@include flex(column);
flex: 1;
}
.uv-list-item__container {
position: relative;
@include flex(row);
padding: $list-item-pd;
padding-left: $uv-spacing-row-lg;
flex: 1;
overflow: hidden;
}
.container--right {
padding-right: 0;
}
.uv-list--border {
position: absolute;
top: 0;
right: 0;
left: 0;
/* #ifdef APP-NVUE */
border-top-color: $uv-border-color;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
}
/* #ifndef APP-NVUE */
.uv-list--border:after {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uv-border-color;
}
/* #endif */
.uv-list-item__content {
@include flex(column);
padding-right: 8px;
flex: 1;
color: #3b4144;
justify-content: space-between;
overflow: hidden;
}
.uv-list-item__content--center {
justify-content: center;
}
.uv-list-item__content-title {
font-size: $uv-font-size-base;
color: #3b4144;
overflow: hidden;
}
.uv-list-item__content-note {
margin-top: 6rpx;
color: $uv-text-color-grey;
font-size: $uv-font-size-sm;
overflow: hidden;
}
.uv-list-item__extra {
@include flex(row);
justify-content: flex-end;
align-items: center;
}
.uv-list-item__header {
@include flex(row);
align-items: center;
}
.uv-list-item__icon {
margin-right: 18rpx;
flex-direction: row;
justify-content: center;
align-items: center;
}
.uv-list-item__icon-img {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
height: $uv-img-size-base;
width: $uv-img-size-base;
margin-right: 10px;
}
.uv-icon-wrapper {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
padding: 0 10px;
}
.flex--direction {
flex-direction: column;
/* #ifndef APP-NVUE */
align-items: initial;
/* #endif */
}
.flex--justify {
/* #ifndef APP-NVUE */
justify-content: initial;
/* #endif */
}
.uv-list--lg {
height: $uv-img-size-lg;
width: $uv-img-size-lg;
}
.uv-list--base {
height: $uv-img-size-base;
width: $uv-img-size-base;
}
.uv-list--sm {
height: $uv-img-size-sm;
width: $uv-img-size-sm;
}
.uv-list-item__extra-text {
color: $uv-text-color-grey;
font-size: $uv-font-size-sm;
}
</style>
uni_modules/uv-list/components/uv-list/uv-list.vue
+147
View File
@@ -0,0 +1,147 @@
<template>
<!-- #ifndef APP-NVUE -->
<view
class="uv-list"
:style="[$uv.addStyle(customStyle)]"
>
<view
v-if="border"
class="uv-list--border-top"
:style="[{ 'background-color': borderColor }]"
></view>
<slot />
<view
v-if="border"
class="uv-list--border-bottom"
:style="[{ 'background-color': borderColor }]"
></view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<list
:bounce="true"
:scrollable="true"
show-scrollbar
:render-reverse="false"
class="uv-list"
:class="{ 'uv-list--border': border }"
:style="[
{ 'border-top-color': borderColor, 'border-bottom-color':borderColor },
$uv.addStyle(customStyle)
]"
:enableBackToTop="false"
:loadmoreoffset="15"
@scroll="scroll"
@loadmore="loadMore">
<slot />
</list>
<!-- #endif -->
</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'
/**
* List 列表
* @description 列表组件
* @tutorial https://www.uvui.cn/components/list.html
* @property {Boolean} border = [true|false] 是否显示边框
* @property {String} borderColor 边框颜色
* @property {String} direction 排版方向，默认row，列表里面使用其他组件 最好设置成column
*/
export default {
name: 'uv-list',
mixins: [mpMixin, mixin],
'mp-weixin': {
options: {
multipleSlots: false
}
},
props: {
border: {
type: Boolean,
default: false
},
borderColor: {
type: String,
default: '#dadbde'
},
// 排版方向，默认row，列表里面使用其他组件 最好设置成column
direction: {
type: String,
default: 'row'
},
// 内边距
padding: {
type: [String,Number],
default: '20rpx 30rpx'
}
},
created() {
this.firstChildAppend = false;
},
computed: {
parentData() {
return [this.direction,this.padding];
}
},
methods: {
loadMore(e) {
this.$emit('scrolltolower');
},
scroll(e) {
this.$emit('scroll', e);
}
}
};
</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-list {
position: relative;
@include flex(column);
background-color: #fff;
}
.uv-list--border {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: $uv-border-color;
border-top-style: solid;
border-top-width: 0.5px;
border-bottom-color: $uv-border-color;
border-bottom-style: solid;
border-bottom-width: 0.5px;
/* #endif */
z-index: -1;
}
/* #ifndef APP-NVUE */
.uv-list--border-top {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uv-border-color;
z-index: 1;
}
.uv-list--border-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
background-color: $uv-border-color;
}
/* #endif */
</style>
uni_modules/uv-list/package.json
+87
View File
@@ -0,0 +1,87 @@
{
"id": "uv-list",
"displayName": "uv-list 列表 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.9",
"description": "uv-list 多功能高性能列表组件",
"keywords": [
"uv-list",
"uvui",
"uv-ui",
"list",
"列表"
],
"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"
],
"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-list/readme.md
+27
View File
@@ -0,0 +1,27 @@
## List 列表
> **组件名：uv-list**
List列表组件，包含基本列表样式、默认插槽机制、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里，它默认使用页面级滚动，这样做的目的是性能更加友好。在app-nvue页面里，它默认使用原生list组件滚动，这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
uv-list组件是父容器，里面的核心是uv-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
uv-list-item有很多风格，uv-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容，插槽包括：默认插槽（完全自定义内容）、具名插槽（header | body | footer），根据需求进行扩展。
内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表等，其他不能满足的场景使用插槽进行扩展。
# <a href="https://www.uvui.cn/components/list.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>