From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue | 144 ------------------------------------------------
1 files changed, 0 insertions(+), 144 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 4e27931..e69de29 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
@@ -1,144 +0,0 @@
-<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