From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue | 144 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 144 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue b/minipro_standard/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue
index e69de29..4e27931 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue
@@ -0,0 +1,144 @@
+<template>
+ <view
+ class="u-line-progress"
+ :style="[$u.addStyle(customStyle)]"
+ >
+ <view
+ class="u-line-progress__background"
+ ref="u-line-progress__background"
+ :style="[{
+ backgroundColor: inactiveColor,
+ height: $u.addUnit(height),
+ }]"
+ >
+ </view>
+ <view
+ class="u-line-progress__line"
+ :style="[progressStyle]"
+ >
+ <slot>
+ <text v-if="showText && percentage >= 10" class="u-line-progress__text">{{innserPercentage + '%'}}</text>
+ </slot>
+ </view>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ // #ifdef APP-NVUE
+ const dom = uni.requireNativePlugin('dom')
+ // #endif
+ /**
+ * lineProgress 绾垮瀷杩涘害鏉�
+ * @description 灞曠ず鎿嶄綔鎴栦换鍔＄殑褰撳墠杩涘害锛屾瘮濡備笂浼犳枃浠讹紝鏄竴涓嚎褰㈢殑杩涘害鏉°��
+ * @tutorial https://www.uviewui.com/components/lineProgress.html
+ * @property {String} activeColor 婵�娲婚儴鍒嗙殑棰滆壊 ( 榛樿 '#19be6b' )
+ * @property {String} inactiveColor 鑳屾櫙鑹� ( 榛樿 '#ececec' )
+ * @property {String | Number} percentage 杩涘害鐧惧垎姣旓紝鏁板�� ( 榛樿 0 )
+ * @property {Boolean} showText 鏄惁鍦ㄨ繘搴︽潯鍐呴儴鏄剧ず鐧惧垎姣旂殑鍊� ( 榛樿 true )
+ * @property {String | Number} height 杩涘害鏉＄殑楂樺害锛屽崟浣峱x ( 榛樿 12 )
+ *
+ * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
+ */
+ export default {
+ name: "u-line-progress",
+ mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+ data() {
+ return {
+ lineWidth: 0,
+ }
+ },
+ watch: {
+ percentage(n) {
+ this.resizeProgressWidth()
+ }
+ },
+ computed: {
+ progressStyle() {
+ let style = {}
+ style.width = this.lineWidth
+ style.backgroundColor = this.activeColor
+ style.height = uni.$u.addUnit(this.height)
+ return style
+ },
+ innserPercentage() {
+ // 鎺у埗鑼冨洿鍦�0-100涔嬮棿
+ return uni.$u.range(0, 100, this.percentage)
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ init() {
+ uni.$u.sleep(20).then(() => {
+ this.resizeProgressWidth()
+ })
+ },
+ getProgressWidth() {
+ // #ifndef APP-NVUE
+ return this.$uGetRect('.u-line-progress__background')
+ // #endif
+
+ // #ifdef APP-NVUE
+ // 杩斿洖涓�涓猵romise
+ return new Promise(resolve => {
+ dom.getComponentRect(this.$refs['u-line-progress__background'], (res) => {
+ resolve(res.size)
+ })
+ })
+ // #endif
+ },
+ resizeProgressWidth() {
+ this.getProgressWidth().then(size => {
+ const {
+ width
+ } = size
+ // 閫氳繃璁剧疆鐨刾ercentage鍊硷紝璁＄畻鍏舵墍鍗犳�婚暱搴︾殑鐧惧垎姣�
+ this.lineWidth = width * this.innserPercentage / 100 + 'px'
+ })
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-line-progress {
+ align-items: stretch;
+ position: relative;
+ @include flex(row);
+ flex: 1;
+ overflow: hidden;
+ border-radius: 100px;
+
+ &__background {
+ background-color: #ececec;
+ border-radius: 100px;
+ flex: 1;
+ }
+
+ &__line {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ align-items: center;
+ @include flex(row);
+ color: #ffffff;
+ border-radius: 100px;
+ transition: width 0.5s ease;
+ justify-content: flex-end;
+ }
+
+ &__text {
+ font-size: 10px;
+ align-items: center;
+ text-align: right;
+ color: #FFFFFF;
+ margin-right: 5px;
+ transform: scale(0.9);
+ }
+ }
+</style>
--
Gitblit v1.9.3