u-circle-progress.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <view class="u-circle-progress">
  3. <view class="u-circle-progress__left">
  4. <view
  5. class="u-circle-progress__left__circle"
  6. :style="[leftSyle]"
  7. ref="left-circle"
  8. >
  9. </view>
  10. </view>
  11. <view
  12. class="u-circle-progress__right"
  13. >
  14. <view
  15. class="u-circle-progress__right__circle"
  16. ref="right-circle"
  17. :style="[rightSyle]"
  18. >
  19. </view>
  20. </view>
  21. <view class="u-circle-progress__circle">
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. import props from './props.js';
  27. // #ifdef APP-NVUE
  28. const animation = uni.requireNativePlugin('animation')
  29. // #endif
  30. /**
  31. * CircleProgress 圆形进度条 TODO: 待完善
  32. * @description 展示操作或任务的当前进度,比如上传文件,是一个圆形的进度环。
  33. * @tutorial https://www.uviewui.com/components/circleProgress.html
  34. * @property {String | Number} percentage 圆环进度百分比值,为数值类型,0-100 (默认 30 )
  35. * @example
  36. */
  37. export default {
  38. name: 'u-circle-progress',
  39. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  40. data() {
  41. return {
  42. leftBorderColor: 'rgb(200, 200, 200)',
  43. rightBorderColor: 'rgb(200, 200, 200)',
  44. }
  45. },
  46. computed: {
  47. leftSyle() {
  48. const style = {}
  49. style.borderTopColor = this.leftBorderColor
  50. style.borderRightColor = this.leftBorderColor
  51. return style
  52. },
  53. rightSyle() {
  54. const style = {}
  55. style.borderLeftColor = this.rightBorderColor
  56. style.borderBottomColor = this.rightBorderColor
  57. return style
  58. }
  59. },
  60. mounted() {
  61. uni.$u.sleep().then(() => {
  62. this.rightBorderColor = 'rgb(66, 185, 131)'
  63. // this.init()
  64. })
  65. },
  66. methods: {
  67. init() {
  68. animation.transition(this.$refs['right-circle'].ref, {
  69. styles: {
  70. transform: 'rotate(45deg)',
  71. transformOrigin: 'center center'
  72. },
  73. }, () => {
  74. this.rightBorderColor = 'rgb(66, 185, 131)'
  75. // animation.transition(this.$refs['right-circle'].ref, {
  76. // styles: {
  77. // transform: 'rotate(225deg)',
  78. // transformOrigin: 'center center'
  79. // },
  80. // duration: 3000,
  81. // }, () => {
  82. // animation.transition(this.$refs['left-circle'].ref, {
  83. // styles: {
  84. // transform: 'rotate(45deg)',
  85. // transformOrigin: 'center center'
  86. // },
  87. // }, () => {
  88. // this.leftBorderColor = 'rgb(66, 185, 131)'
  89. // animation.transition(this.$refs['left-circle'].ref, {
  90. // styles: {
  91. // transform: 'rotate(225deg)',
  92. // transformOrigin: 'center center'
  93. // },
  94. // duration: 1500,
  95. // }, () => {
  96. // })
  97. // })
  98. // })
  99. })
  100. }
  101. },
  102. }
  103. </script>
  104. <style lang="scss" scoped>
  105. @import "../../libs/css/components.scss";
  106. .u-circle-progress {
  107. @include flex(row);
  108. position: relative;
  109. border-radius: 100px;
  110. height: 100px;
  111. width: 100px;
  112. // transform: rotate(0deg);
  113. // background-color: rgb(66, 185, 131);
  114. background-color: rgb(200, 200, 200);
  115. overflow: hidden;
  116. justify-content: space-between;
  117. &__circle {
  118. border-radius: 100px;
  119. height: 90px;
  120. width: 90px;
  121. transform: translate(-50%, -50%);
  122. background-color: rgb(255, 255, 255);
  123. left: 50px;
  124. top: 50px;
  125. position: absolute;
  126. }
  127. &__left {
  128. position: absolute;
  129. left: 0;
  130. width: 50px;
  131. height: 100px;
  132. overflow: hidden;
  133. box-sizing: border-box;
  134. // background-color: rgb(66, 185, 131);
  135. // background-color: rgb(200, 200, 200);
  136. // transform-origin: left center;
  137. &__circle {
  138. box-sizing: border-box;
  139. // background-color: red;
  140. border-left-color: transparent;
  141. border-bottom-color: transparent;
  142. border-top-left-radius: 50px;
  143. border-top-right-radius: 50px;
  144. border-bottom-right-radius: 50px;
  145. // border-left-color: rgb(66, 185, 131);
  146. // border-bottom-color: rgb(66, 185, 131);
  147. border-top-color: rgb(66, 185, 131);
  148. border-right-color: rgb(66, 185, 131);
  149. border-width: 5px;
  150. width: 100px;
  151. height: 100px;
  152. transform: rotate(225deg);
  153. // border-radius: 100px;
  154. }
  155. }
  156. &__right {
  157. position: absolute;
  158. right: 0;
  159. width: 50px;
  160. height: 100px;
  161. overflow: hidden;
  162. &__circle {
  163. position: absolute;
  164. right: 0;
  165. box-sizing: border-box;
  166. // background-color: red;
  167. border-top-color: transparent;
  168. border-right-color: transparent;
  169. border-top-left-radius: 50px;
  170. border-bottom-left-radius: 50px;
  171. border-bottom-right-radius: 50px;
  172. // border-left-color: rgb(66, 185, 131);
  173. // border-bottom-color: rgb(66, 185, 131);
  174. border-left-color: rgb(200, 200, 200);
  175. border-bottom-color: rgb(200, 200, 200);
  176. border-width: 5px;
  177. width: 100px;
  178. height: 100px;
  179. transform: rotate(45deg);
  180. transform-origin: center center;
  181. // border-radius: 100px;
  182. }
  183. }
  184. }
  185. </style>