From 66d2c8d8c97e19fdbd969f97dd3d6a28f27c415f Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 01 Nov 2023 16:07:03 +0800
Subject: [PATCH] fix:小程序分享功能和秒级数据
---
uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue | 144 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 144 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue b/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue
new file mode 100644
index 0000000..4e27931
--- /dev/null
+++ b/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 ���������������������������px ( ������ 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
+ // ������������promise
+ 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
+ // ���������������percentage������������������������������������������
+ 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.8.0