You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

220 lines
7.0 KiB

3 years ago
  1. <template>
  2. <view
  3. class="u-circle-progress"
  4. :style="{
  5. width: widthPx + 'px',
  6. height: widthPx + 'px',
  7. backgroundColor: bgColor
  8. }"
  9. >
  10. <!-- 支付宝小程序不支持canvas-id属性必须用id属性 -->
  11. <canvas
  12. class="u-canvas-bg"
  13. :canvas-id="elBgId"
  14. :id="elBgId"
  15. :style="{
  16. width: widthPx + 'px',
  17. height: widthPx + 'px'
  18. }"
  19. ></canvas>
  20. <canvas
  21. class="u-canvas"
  22. :canvas-id="elId"
  23. :id="elId"
  24. :style="{
  25. width: widthPx + 'px',
  26. height: widthPx + 'px'
  27. }"
  28. ></canvas>
  29. <slot></slot>
  30. </view>
  31. </template>
  32. <script>
  33. /**
  34. * circleProgress 环形进度条
  35. * @description 展示操作或任务的当前进度比如上传文件是一个圆形的进度条注意此组件的percent值只能动态增加不能动态减少
  36. * @tutorial https://www.uviewui.com/components/circleProgress.html
  37. * @property {String Number} percent 圆环进度百分比值为数值类型0-100
  38. * @property {String} inactive-color 圆环的底色默认为灰色(该值无法动态变更)默认#ececec
  39. * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)默认#19be6b
  40. * @property {String Number} width 整个圆环组件的宽度高度默认等于宽度值单位rpx默认200
  41. * @property {String Number} border-width 圆环的边框宽度单位rpx默认14
  42. * @property {String Number} duration 整个圆环执行一圈的时间单位ms默认呢1500
  43. * @property {String} type 如设置active-color值将会失效
  44. * @property {String} bg-color 整个组件背景颜色默认为白色
  45. * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
  46. */
  47. export default {
  48. name: 'u-circle-progress',
  49. props: {
  50. // 圆环进度百分比值
  51. percent: {
  52. type: Number,
  53. default: 0,
  54. // 限制值在0到100之间
  55. validator: val => {
  56. return val >= 0 && val <= 100;
  57. }
  58. },
  59. // 底部圆环的颜色(灰色的圆环)
  60. inactiveColor: {
  61. type: String,
  62. default: '#ececec'
  63. },
  64. // 圆环激活部分的颜色
  65. activeColor: {
  66. type: String,
  67. default: '#19be6b'
  68. },
  69. // 圆环线条的宽度,单位rpx
  70. borderWidth: {
  71. type: [Number, String],
  72. default: 14
  73. },
  74. // 整个圆形的宽度,单位rpx
  75. width: {
  76. type: [Number, String],
  77. default: 200
  78. },
  79. // 整个圆环执行一圈的时间,单位ms
  80. duration: {
  81. type: [Number, String],
  82. default: 1500
  83. },
  84. // 主题类型
  85. type: {
  86. type: String,
  87. default: ''
  88. },
  89. // 整个圆环进度区域的背景色
  90. bgColor: {
  91. type: String,
  92. default: '#ffffff'
  93. }
  94. },
  95. data() {
  96. return {
  97. // #ifdef MP-WEIXIN
  98. elBgId: 'uCircleProgressBgId', // 微信小程序中不能使用this.$u.guid()形式动态生成id值,否则会报错
  99. elId: 'uCircleProgressElId',
  100. // #endif
  101. // #ifndef MP-WEIXIN
  102. elBgId: this.$u.guid(), // 非微信端的时候,需用动态的id,否则一个页面多个圆形进度条组件数据会混乱
  103. elId: this.$u.guid(),
  104. // #endif
  105. widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
  106. borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
  107. startAngle: -Math.PI / 2, // canvas画圆的起始角度,默认为3点钟方向,定位到12点钟方向
  108. progressContext: null, // 活动圆的canvas上下文
  109. newPercent: 0, // 当动态修改进度值的时候,保存进度值的变化前后值,用于比较用
  110. oldPercent: 0 // 当动态修改进度值的时候,保存进度值的变化前后值,用于比较用
  111. };
  112. },
  113. watch: {
  114. percent(nVal, oVal = 0) {
  115. if (nVal > 100) nVal = 100;
  116. if (nVal < 0) oVal = 0;
  117. // 此值其实等于this.percent,命名一个新
  118. this.newPercent = nVal;
  119. this.oldPercent = oVal;
  120. setTimeout(() => {
  121. // 无论是百分比值增加还是减少,需要操作还是原来的旧的百分比值
  122. // 将此值减少或者新增到新的百分比值
  123. this.drawCircleByProgress(oVal);
  124. }, 50);
  125. }
  126. },
  127. created() {
  128. // 赋值,用于加载后第一个画圆使用
  129. this.newPercent = this.percent;
  130. this.oldPercent = 0;
  131. },
  132. computed: {
  133. // 有type主题时,优先起作用
  134. circleColor() {
  135. if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
  136. else return this.activeColor;
  137. }
  138. },
  139. mounted() {
  140. // 在h5端,必须要做一点延时才起作用,this.$nextTick()无效(HX2.4.7)
  141. setTimeout(() => {
  142. this.drawProgressBg();
  143. this.drawCircleByProgress(this.oldPercent);
  144. }, 50);
  145. },
  146. methods: {
  147. drawProgressBg() {
  148. let ctx = uni.createCanvasContext(this.elBgId, this);
  149. ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
  150. ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
  151. ctx.beginPath(); // 开始描绘路径
  152. // 设置一个原点(110,110),半径为100的圆的路径到当前路径
  153. let radius = this.widthPx / 2;
  154. ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
  155. ctx.stroke(); // 对路径进行描绘
  156. ctx.draw();
  157. },
  158. drawCircleByProgress(progress) {
  159. // 第一次操作进度环时将上下文保存到了this.data中,直接使用即可
  160. let ctx = this.progressContext;
  161. if (!ctx) {
  162. ctx = uni.createCanvasContext(this.elId, this);
  163. this.progressContext = ctx;
  164. }
  165. // 表示进度的两端为圆形
  166. ctx.setLineCap('round');
  167. // 设置线条的宽度和颜色
  168. ctx.setLineWidth(this.borderWidthPx);
  169. ctx.setStrokeStyle(this.circleColor);
  170. // 将总过渡时间除以100,得出每修改百分之一进度所需的时间
  171. let time = Math.floor(this.duration / 100);
  172. // 结束角的计算依据为:将2π分为100份,乘以当前的进度值,得出终止点的弧度值,加起始角,为整个圆从默认的
  173. // 3点钟方向开始画图,转为更好理解的12点钟方向开始作图,这需要起始角和终止角同时加上this.startAngle值
  174. let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
  175. ctx.beginPath();
  176. // 半径为整个canvas宽度的一半
  177. let radius = this.widthPx / 2;
  178. ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
  179. ctx.stroke();
  180. ctx.draw();
  181. // 如果变更后新值大于旧值,意味着增大了百分比
  182. if (this.newPercent > this.oldPercent) {
  183. // 每次递增百分之一
  184. progress++;
  185. // 如果新增后的值,大于需要设置的值百分比值,停止继续增加
  186. if (progress > this.newPercent) return;
  187. } else {
  188. // 同理于上面
  189. progress--;
  190. if (progress < this.newPercent) return;
  191. }
  192. setTimeout(() => {
  193. // 定时器,每次操作间隔为time值,为了让进度条有动画效果
  194. this.drawCircleByProgress(progress);
  195. }, time);
  196. }
  197. }
  198. };
  199. </script>
  200. <style lang="scss" scoped>
  201. @import "../../libs/css/style.components.scss";
  202. .u-circle-progress {
  203. position: relative;
  204. /* #ifndef APP-NVUE */
  205. display: inline-flex;
  206. /* #endif */
  207. align-items: center;
  208. justify-content: center;
  209. }
  210. .u-canvas-bg {
  211. position: absolute;
  212. }
  213. .u-canvas {
  214. position: absolute;
  215. }
  216. </style>