森蓝小程序

2025-04-23 19:50:30 +08:00
parent 7776447ce3
commit 5205361ac0
111 changed files with 20504 additions and 0 deletions
--- a/uni_modules/liu-progressbar/changelog.md
+++ b/uni_modules/liu-progressbar/changelog.md
@@ -0,0 +1,8 @@
+## 1.0.3（2023-06-10）
+增加插件预览二维码
+## 1.0.2（2023-04-14）
+增加示例
+## 1.0.1（2023-03-30）
+优化功能
+## 1.0.0（2023-03-14）
+初版发布
--- a/uni_modules/liu-progressbar/components/liu-progressbar/liu-progressbar.vue
+++ b/uni_modules/liu-progressbar/components/liu-progressbar/liu-progressbar.vue
@@ -0,0 +1,139 @@
+<template>
+	<view>
+		<view class="progress-bar" :style="{height: height,backgroundColor:dsColor}" v-if="textInside">
+			<view class="progress" :style="{width: progressWidth,
+				borderTopLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius}">
+			</view>
+			<span class="percentage" :style="{color:color,fontSize:fontSize,left:percentage +'%' }">
+				{{ percentage }}%
+			</span>
+		</view>
+		<view class="card-item" v-else>
+			<view class="progress-bar1" :style="{height: height,backgroundColor:dsColor}">
+				<view class="progress1"
+					:style="{width: progressWidth, backgroundColor: bgColor,borderRadius: borderRadius}">
+				</view>
+			</view>
+			<view class="percentage1" :style="{color:color,fontSize:fontSize }">{{ percentage }}%</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			//文字是否内显
+			textInside: {
+				type: Boolean,
+				default: true
+			},
+			//当前进度
+			progress: {
+				type: Number,
+				required: true,
+				validator: (value) => value >= 0 && value <= 100,
+				default: 50
+			},
+			//文字颜色
+			color: {
+				type: String,
+				default: '#FFFFFF'
+			},
+			//文字大小
+			fontSize: {
+				type: String,
+				default: '24rpx'
+			},
+			//进度条颜色
+			bgColor: {
+				type: String,
+				default: '#5cb85c'
+			},
+			//进度条底色颜色
+			dsColor: {
+				type: String,
+				default: '#f2f2f2'
+			},
+			//进度条高度
+			height: {
+				type: String,
+				default: '28rpx'
+			},
+			//进度条圆角弧度
+			borderRadius: {
+				type: String,
+				default: '8rpx'
+			}
+		},
+		computed: {
+			progressWidth() {
+				return `${this.progress}%`
+			},
+			percentage() {
+				return Math.round(this.progress)
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.progress-bar {
+		position: relative;
+		width: 100%;
+		background-color: #f2f2f2;
+		border-radius: 16rpx;
+	}
+
+	.percentage {
+		position: absolute;
+		height: 150%;
+		top: 50%;
+		/* left: 50%; */
+		color: #666;
+		transform: translate(-50%, -50%);
+		font-size: 22rpx;
+		user-select: none;
+		z-index: 1;
+		background-color: #168cf8;
+		text-align: center;
+		line-height: 150%;
+		border-radius: 10px;
+		width: 12%;
+		border-color: azure;
+		border: #ffffff solid 1px;
+	}
+
+	.progress {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		border: #ffffff solid 1px;
+		background: linear-gradient(to left, rgba(75, 205, 255, 1.0) 10%, rgba(100, 198, 255, 1.0) 30%, rgba(118, 192, 255, 1.0) 60%);
+	}
+
+	.card-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.progress-bar1 {
+		position: relative;
+		width: 90%;
+		background-color: #f2f2f2;
+		border-radius: 16rpx;
+	}
+
+	.percentage1 {
+		color: #666;
+		font-size: 24rpx;
+	}
+
+	.progress1 {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+	}
+</style>
--- a/uni_modules/liu-progressbar/license.md
+++ b/uni_modules/liu-progressbar/license.md
@@ -0,0 +1,6 @@
+### 1、本插件可免费下载使用；
+### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
+### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
+### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。
+
+
--- a/uni_modules/liu-progressbar/package.json
+++ b/uni_modules/liu-progressbar/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "liu-progressbar",
+  "displayName": "进度条组件",
+  "version": "1.0.3",
+  "description": "自定义进度条组件，支持设置文字内显、当前进度、文字颜色、文字大小、进度条颜色、进度条底色、进度条高度、进度条圆角弧度",
+  "keywords": [
+    "进度条",
+    "百分比",
+    "进度"
+],
+  "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": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/liu-progressbar/readme.md
+++ b/uni_modules/liu-progressbar/readme.md
@@ -0,0 +1,44 @@
+### liu-progressbar适用于uni-app项目的进度条组件
+### 本组件目前兼容微信小程序、H5
+### 本组件支持自定义，支持设置文字内显、当前进度、文字颜色、文字大小、进度条颜色、进度条底色、进度条高度、进度条圆角弧度
+# --- 扫码预览、关注我们 ---
+
+## 扫码关注公众号，查看更多插件信息，预览插件效果！ 
+
+![](https://uni.ckapi.pro/uniapp/publicize.png)
+
+### 使用方式
+``` html
+<view class="title">文字内显</view>
+<liu-progressbar :progress="70" color="#FFFFFF" :height="'40rpx'" />
+<view class="title">文字外显</view>
+<liu-progressbar :textInside="false" :progress="70" color="#333333" :height="'40rpx'" />
+<view class="title">自定义高度</view>
+<liu-progressbar :progress="70" color="#FFFFFF" :height="'25rpx'" />
+<view class="title">自定义圆角弧度</view>
+<liu-progressbar :progress="70" color="#FFFFFF" :height="'40rpx'" :borderRadius="'40rpx'" />
+<view class="title">自定义进度条颜色</view>
+<liu-progressbar :progress="70" bgColor="red" color="#FFFFFF" :height="'40rpx'" />
+<view class="title">自定义底色</view>
+<liu-progressbar :progress="70" dsColor="red" color="#FFFFFF" :height="'40rpx'" />
+```
+
+### 属性说明
+| 名称                         | 类型            | 默认值                  | 描述             |
+| ----------------------------|---------------- | ---------------------- | ---------------|
+| textInside                  | Boolean         | true                   | 文字是否内显
+| progress                    | Number          | 50                     | 当前进度
+| color                       | String          | #FFFFFF                | 文字颜色
+| fontSize                    | String          | 24rpx                  | 文字大小
+| bgColor                     | String          | #5cb85c                | 进度条颜色
+| dsColor                     | String          | #f2f2f2                | 进度条底色颜色
+| height                      | String          | 28rpx                  | 进度条高度
+| borderRadius                | String          | 8rpx                   | 进度条圆角弧度
+
+
+
+
+
+
+
+