123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- <template>
- <view class="u-circle-progress">
- <view class="u-circle-progress__left">
- <view
- class="u-circle-progress__left__circle"
- :style="[leftSyle]"
- ref="left-circle"
- >
- </view>
- </view>
- <view
- class="u-circle-progress__right"
- >
- <view
- class="u-circle-progress__right__circle"
- ref="right-circle"
- :style="[rightSyle]"
- >
- </view>
- </view>
- <view class="u-circle-progress__circle">
- </view>
- </view>
- </template>
- <script>
- import props from './props.js';
- //
- const animation = uni.requireNativePlugin('animation')
- //
- /**
- * CircleProgress 圆形进度条 TODO: 待完善
- * @description 展示操作或任务的当前进度,比如上传文件,是一个圆形的进度环。
- * @tutorial https://www.uviewui.com/components/circleProgress.html
- * @property {String | Number} percentage 圆环进度百分比值,为数值类型,0-100 (默认 30 )
- * @example
- */
- export default {
- name: 'u-circle-progress',
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- data() {
- return {
- leftBorderColor: 'rgb(200, 200, 200)',
- rightBorderColor: 'rgb(200, 200, 200)',
- }
- },
- computed: {
- leftSyle() {
- const style = {}
- style.borderTopColor = this.leftBorderColor
- style.borderRightColor = this.leftBorderColor
- return style
- },
- rightSyle() {
- const style = {}
- style.borderLeftColor = this.rightBorderColor
- style.borderBottomColor = this.rightBorderColor
- return style
- }
- },
- mounted() {
- uni.$u.sleep().then(() => {
- this.rightBorderColor = 'rgb(66, 185, 131)'
- // this.init()
- })
- },
- methods: {
- init() {
- animation.transition(this.$refs['right-circle'].ref, {
- styles: {
- transform: 'rotate(45deg)',
- transformOrigin: 'center center'
- },
- }, () => {
- this.rightBorderColor = 'rgb(66, 185, 131)'
- // animation.transition(this.$refs['right-circle'].ref, {
- // styles: {
- // transform: 'rotate(225deg)',
- // transformOrigin: 'center center'
- // },
- // duration: 3000,
- // }, () => {
- // animation.transition(this.$refs['left-circle'].ref, {
- // styles: {
- // transform: 'rotate(45deg)',
- // transformOrigin: 'center center'
- // },
- // }, () => {
- // this.leftBorderColor = 'rgb(66, 185, 131)'
- // animation.transition(this.$refs['left-circle'].ref, {
- // styles: {
- // transform: 'rotate(225deg)',
- // transformOrigin: 'center center'
- // },
- // duration: 1500,
- // }, () => {
- // })
- // })
- // })
- })
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-circle-progress {
- @include flex(row);
- position: relative;
- border-radius: 100px;
- height: 100px;
- width: 100px;
- // transform: rotate(0deg);
- // background-color: rgb(66, 185, 131);
- background-color: rgb(200, 200, 200);
- overflow: hidden;
- justify-content: space-between;
- &__circle {
- border-radius: 100px;
- height: 90px;
- width: 90px;
- transform: translate(-50%, -50%);
- background-color: rgb(255, 255, 255);
- left: 50px;
- top: 50px;
- position: absolute;
- }
- &__left {
- position: absolute;
- left: 0;
- width: 50px;
- height: 100px;
- overflow: hidden;
- box-sizing: border-box;
- // background-color: rgb(66, 185, 131);
- // background-color: rgb(200, 200, 200);
- // transform-origin: left center;
- &__circle {
- box-sizing: border-box;
- // background-color: red;
- border-left-color: transparent;
- border-bottom-color: transparent;
- border-top-left-radius: 50px;
- border-top-right-radius: 50px;
- border-bottom-right-radius: 50px;
- // border-left-color: rgb(66, 185, 131);
- // border-bottom-color: rgb(66, 185, 131);
- border-top-color: rgb(66, 185, 131);
- border-right-color: rgb(66, 185, 131);
- border-width: 5px;
- width: 100px;
- height: 100px;
- transform: rotate(225deg);
- // border-radius: 100px;
- }
- }
- &__right {
- position: absolute;
- right: 0;
- width: 50px;
- height: 100px;
- overflow: hidden;
- &__circle {
- position: absolute;
- right: 0;
- box-sizing: border-box;
- // background-color: red;
- border-top-color: transparent;
- border-right-color: transparent;
- border-top-left-radius: 50px;
- border-bottom-left-radius: 50px;
- border-bottom-right-radius: 50px;
- // border-left-color: rgb(66, 185, 131);
- // border-bottom-color: rgb(66, 185, 131);
- border-left-color: rgb(200, 200, 200);
- border-bottom-color: rgb(200, 200, 200);
- border-width: 5px;
- width: 100px;
- height: 100px;
- transform: rotate(45deg);
- transform-origin: center center;
- // border-radius: 100px;
- }
- }
- }
- </style>
|