From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
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 鍐呭瓒呭嚭姝ら珮搴︽墠浼氭樉绀哄睍寮�鍏ㄦ枃鎸夐挳锛屽崟浣峱x锛堥粯璁� 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涓篺alse锛岄殣钘�"鏀惰捣"閮ㄥ垎鐨勫唴瀹�
+ 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.9.3