From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 30 Nov 2023 16:36:45 +0800
Subject: [PATCH] fix:是否修改
---
uni_modules/uview-ui/components/u-read-more/u-read-more.vue | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 157 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-read-more/u-read-more.vue b/uni_modules/uview-ui/components/u-read-more/u-read-more.vue
new file mode 100644
index 0000000..9104e40
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-read-more/u-read-more.vue
@@ -0,0 +1,157 @@
+<template>
+ <view class="u-read-more">
+ <view
+ class="u-read-more__content"
+ :style="{
+ height: isLongContent && status === 'close' ? $u.addUnit(showHeight) : $u.addUnit(contentHeight),
+ textIndent: textIndent
+ }"
+ >
+ <view
+ class="u-read-more__content__inner"
+ ref="u-read-more__content__inner"
+ :class="[elId]"
+ >
+ <slot></slot>
+ </view>
+ </view>
+ <view
+ class="u-read-more__toggle"
+ :style="[innerShadowStyle]"
+ v-if="isLongContent"
+ >
+ <slot name="toggle">
+ <view
+ class="u-read-more__toggle__text"
+ @tap="toggleReadMore"
+ >
+ <u--text
+ :text="status === 'close' ? closeText : openText"
+ :color="color"
+ :size="fontSize"
+ :lineHeight="fontSize"
+ margin="0 5px 0 0"
+ ></u--text>
+ <view class="u-read-more__toggle__icon">
+ <u-icon
+ :color="color"
+ :size="fontSize + 2"
+ :name="status === 'close' ? 'arrow-down' : 'arrow-up'"
+ ></u-icon>
+ </view>
+ </view>
+ </slot>
+ </view>
+ </view>
+</template>
+
+<script>
+ // #ifdef APP-NVUE
+ const dom = uni.requireNativePlugin('dom')
+ // #endif
+ import props from './props.js';
+ /**
+ * readMore ������������
+ * @description ������������������������������������������������������������������������������������������������
+ * @tutorial https://www.uviewui.com/components/readMore.html
+ * @property {String | Number} showHeight ������������������������������������������������������������px��������� 400 ���
+ * @property {Boolean} toggle ������������������������������������������ false ���
+ * @property {String} closeText ��������������������������������� '������������������' ���
+ * @property {String} openText ��������������������������������� '������' ���
+ * @property {String} color ������������������������������ '#2979ff' ���
+ * @property {String | Number} fontSize ������������������������������px ��������� 14 ���
+ * @property {Object} shadowStyle ���������������������
+ * @property {String} textIndent ��������������������������������� ��������� '2em' ���
+ * @property {String | Number} name ��������� open ��� close ���������������������������������
+ * @event {Function} open ������������������������
+ * @event {Function} close ������������������������
+ * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
+ */
+ export default {
+ name: 'u-read-more',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+ isLongContent: false, // ���������������������������������
+ status: 'close', // ���������������������������������close-���������������open-������������
+ elId: uni.$u.guid(), // ������������class
+ contentHeight: 100, // ������������
+ }
+ },
+ computed: {
+ // ������������������������������������������������������
+ innerShadowStyle() {
+ if (this.status === 'open') return {}
+ else return this.shadowStyle
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ async init() {
+ this.getContentHeight().then(height => {
+ this.contentHeight = height
+ // ���������������������������������������������������������������������������������������������������
+ if (height > uni.$u.getPx(this.showHeight)) {
+ this.isLongContent = true
+ this.status = 'close'
+ }
+ })
+ },
+ // ���������������������
+ async getContentHeight() {
+ // ���������������������������������
+ await uni.$u.sleep(30)
+ return new Promise(resolve => {
+ // #ifndef APP-NVUE
+ this.$uGetRect('.' + this.elId).then(res => {
+ resolve(res.height)
+ })
+ // #endif
+
+ // #ifdef APP-NVUE
+ const ref = this.$refs['u-read-more__content__inner']
+ dom.getComponentRect(ref, (res) => {
+ resolve(res.size.height)
+ })
+ // #endif
+ })
+ },
+ // ������������������
+ toggleReadMore() {
+ this.status = this.status === 'close' ? 'open' : 'close'
+ // ������toggle���false���������"������"���������������
+ if (this.toggle == false) this.isLongContent = false
+ // ���������������������������������
+ this.$emit(this.status, this.name)
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.u-read-more {
+
+ &__content {
+ overflow: hidden;
+ color: $u-content-color;
+ font-size: 15px;
+ text-align: left;
+ }
+
+ &__toggle {
+ @include flex;
+ justify-content: center;
+
+ &__text {
+ @include flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 5px;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0