wangxy vor 4 Monaten
Ursprung
Commit
00144099a2

+ 6 - 0
uni_modules/c-progress-circle/changelog.md

@@ -0,0 +1,6 @@
+## 1.0.2(2023-04-13)
+新增boderWidth属性 可设置边框宽度
+## 1.0.1(2023-03-27)
+兼容vue2
+## 1.0.0(2023-01-05)
+初次提交

+ 185 - 0
uni_modules/c-progress-circle/components/c-progress-circle/c-progress-circle.vue

@@ -0,0 +1,185 @@
+<template>
+	<view class='container' :style="{width:size,height:size}">
+		<view class="left">
+			<view class="leftcircle" :style="leftcircleStyle">
+			</view>
+		</view>
+		<view class="right">
+			<view class="rightcircle" :style="rightcircleStyle"></view>
+		</view>
+		<view class="cneter-box">
+			<slot>
+				{{progress*100}}%
+			</slot>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * c-lockScreen 环形进度条
+	 * @property {Number} progress 进度 0-1 默认0
+	 * @property {String} color 进度条颜色 默认#3ec3c1
+	 * @property {String} size 进度条尺寸 单位rpx 默认200rpx
+	 * @property {String} boderWidth 边框宽度 单位rpx 默认200rpx
+	 * */
+	 export default {
+	 	props:{
+			progress: {
+				type: Number,
+				default: 0
+			},
+			color: {
+				type: String,
+				default: '#3ec3c1'
+			},
+			size: {
+				type: String,
+				default: "200rpx"
+			},
+			boderWidth:{
+				type: String,
+				default: "200rpx"
+			}
+		},
+		computed:{
+			leftcircleStyle(){
+				return `border-width: calc(${this.boderWidth} * 0.1);
+				border-bottom-color:${this.color};
+				border-left-color:${this.color};
+				transform: rotate(${this.leftAngle});
+				`
+			},
+			rightcircleStyle(){
+				return `border-width: calc(${this.boderWidth} * 0.1);
+				border-top-color:${this.color};
+				border-right-color:${this.color};
+				transform: rotate(${this.rightAngle});`
+			},
+			rightAngle(){
+				if (this.progress >= 0.5) {
+					return 45+'deg'
+				} else {
+					return -135 + 180 * this.progress * 2+'deg'
+				}
+			},
+			leftAngle(){
+				if (this.progress < 0.5) {
+					return -135+'deg'
+				} else {
+					return -315 + 180 * this.progress * 2+'deg'
+				}
+			}
+		}
+	 }
+</script>
+<style lang="scss" scoped>
+	view{
+		box-sizing: border-box;
+	}
+	.container {
+		display: flex;
+		position: relative;
+		// width: v-bind(size);
+		// height: v-bind(size);
+		.left {
+			width: 50%;
+			height: 100%;
+			position: relative;
+			overflow: hidden;
+			top: 0;
+			left: 0;
+
+			.leftcircle {
+				width: 200%;
+				height: 100%;
+				border-color:white;
+				border-style: solid;
+				position: absolute;
+				border-radius: 50%;
+				left: 0px;
+				top: 0px;
+				transition: transform 0.2s;
+				//vue3
+				// border-width: calc(v-bind(size) * 0.1);
+				// border-bottom-color:v-bind(color);
+				// border-left-color:v-bind(color);
+				// transform: rotate(v-bind(leftAngle));
+
+				// animation-name: circle_left;
+				// animation-duration: 2s;
+				// animation-timing-function: linear;
+				// animation-iteration-count: infinite;
+
+			}
+
+		}
+
+		.right {
+			width: 50%;
+			height: 100%;
+			position: relative;
+			overflow: hidden;
+			top: 0;
+			right: 0;
+		}
+
+		.rightcircle {
+			width: 200%;
+			height: 100%;
+			border-radius: 50%;
+			border-color:white;
+			border-style: solid;
+			position: absolute;
+			
+			right: 0px;
+			top: 0px;
+			// animation-name: circle_right;
+			// animation-duration: 2s;
+			// animation-timing-function: linear;
+			// animation-iteration-count: infinite;
+			transition: transform 0.2s;
+			//vue3
+			// border-width: calc(v-bind(size) * 0.1);
+			// border-top-color:v-bind(color);
+			// border-right-color:v-bind(color);
+			// transform: rotate(v-bind(rightAngle));
+		}
+		.cneter-box{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			font-size: 24rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+
+
+
+
+
+	// @keyframes circle_right {
+	// 	0% {
+	// 		transform: rotate(-135deg);
+	// 	}
+
+	// 	50%,
+	// 	100% {
+	// 		transform: rotate(45deg);
+	// 	}
+	// }
+
+	// @keyframes circle_left {
+
+	// 	0%,
+	// 	50% {
+	// 		transform: rotate(-135deg);
+	// 	}
+
+	// 	100% {
+	// 		transform: rotate(45deg);
+	// 	}
+	// }
+</style>

+ 82 - 0
uni_modules/c-progress-circle/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "c-progress-circle",
+  "displayName": "c-design c-progress-circle",
+  "version": "1.0.2",
+  "description": "环形进度条",
+  "keywords": [
+    "c-progress-circle",
+    "环形进度条"
+],
+  "repository": "https://gitee.com/wangziwl/c-designc.git",
+  "engines": {
+    "HBuilderX": "^3.6.15"
+  },
+  "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": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "n"
+        },
+        "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"
+        }
+      }
+    }
+  }
+}

+ 98 - 0
uni_modules/c-progress-circle/readme.md

@@ -0,0 +1,98 @@
+# c-progress-circle
+
+### 
+- c-progress-circle 环形进度条
+
+### c-design交流群号:330647926
+
+### 示例预览
+[https://cloud.vuedata.wang/cdesign/#/pages/progress-circle/progress-circle](https://cloud.vuedata.wang/cdesign/#/pages/progress-circle/progress-circle)
+
+### 一、使用示例
+```html
+<template>
+	<view class="content">
+		<c-progress-circle :progress='progress' :color='color' :size='size' :boderWidth="boderWidth"></c-progress-circle>
+		<view class="btnBox">
+			<button size="mini" @click="add">+</button>
+			<view style="width: 100rpx;text-align: center;">
+				{{progress}}
+			</view>
+			<button size="mini" @click="reduce" type="default">-</button>
+		</view>
+		<view class="btnBox" style="padding-left: 100rpx;">边框颜色</view>
+		<view class="btnBox">
+			<button size="mini" @click="color='red'">红色</button>
+			<button size="mini" @click="color='green'">绿色</button>
+			<button size="mini" @click="color='orange'">橙色</button>
+		</view>
+		<view class="btnBox" style="padding-left: 100rpx;">进度条尺寸</view>
+		<view class="btnBox">
+			<button size="mini" @click="size='200rpx'">200rpx</button>
+			<button size="mini" @click="size='400rpx'">400rpx</button>
+			<button size="mini" @click="size='600rpx'">600rpx</button>
+		</view>
+		<view class="btnBox" style="padding-left: 100rpx;">边框宽度</view>
+		<view class="btnBox">
+			<button  size="mini" @click="boderWidth='200rpx'">200rpx</button>
+			<button  size="mini" @click="boderWidth='400rpx'">400rpx</button>
+			<button  size="mini" @click="boderWidth='600rpx'">600rpx</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				progress: 0.2,
+				color:'red',
+				size:'200rpx',
+				boderWidth:'200rpx'
+			}
+		},
+		methods: {
+			add() {
+				if(this.progress<1){
+					this.progress +=0.1
+					this.progress=this.progress.toFixed(1)*1
+				}
+			},
+			reduce(){
+				if(this.progress>0){
+					this.progress -=0.1
+					this.progress=this.progress.toFixed(1)*1	
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.content{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-top: 20rpx;
+		font-size: 28rpx;
+	}
+	.btnBox{
+		width: 100%;
+		display: flex;
+		align-items: center;
+		margin-top:30rpx;
+	}
+</style>
+```
+
+
+
+
+### 二、属性介绍
+
+| 字段			| 类型		| 必填	| 默认值				| 描述								|
+| -----------	| --------	| ----	| ----------------------| -------------------------------	|
+| progress		| Number	| 否	|  0					| 进度 0-1							|
+| color			| String	| 否	|  #3ec3c1				| 进度条颜色						|
+| size			| String	| 否	|  200rpx				| 进度条尺寸 单位rpx				|
+| boderWidth	| String	| 否	|  200rpx				| 边框宽度 单位rpx					|