|
@@ -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>
|