From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-read-more/u-read-more.vue | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 179 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-read-more/u-read-more.vue b/uview-ui/components/u-read-more/u-read-more.vue
new file mode 100644
index 0000000..affbb57
--- /dev/null
+++ b/uview-ui/components/u-read-more/u-read-more.vue
@@ -0,0 +1,179 @@
+<template>
+ <view class="">
+ <view class="u-content" :class="[elId]" :style="{
+ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
+ textIndent: textIndent
+ }">
+ <slot></slot>
+ </view>
+ <view @tap="toggleReadMore" v-if="isLongContent" class="u-content__showmore-wrap"
+ :class="{ 'u-content__show-more': showMore }"
+ :style="[innerShadowStyle]">
+ <text class="u-content__showmore-wrap__readmore-btn" :style="{
+ fontSize: fontSize + 'rpx',
+ color: color
+ }">
+ {{ showMore ? openText : closeText }}
+ </text>
+ <view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
+ <u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * readMore 闃呰鏇村
+ * @description 璇ョ粍浠朵竴鑸敤浜庡唴瀹硅緝闀匡紝棰勫厛鏀惰捣涓�閮ㄥ垎锛岀偣鍑诲睍寮�鍏ㄩ儴鍐呭鐨勫満鏅��
+ * @tutorial https://www.uviewui.com/components/readMore.html
+ * @property {String Number} show-height 鍐呭瓒呭嚭姝ら珮搴︽墠浼氭樉绀哄睍寮�鍏ㄦ枃鎸夐挳锛屽崟浣峳px锛堥粯璁�400锛�
+ * @property {Boolean} toggle 灞曞紑鍚庢槸鍚︽樉绀烘敹璧锋寜閽紙榛樿false锛�
+ * @property {String} close-text 鍏抽棴鏃剁殑鎻愮ず鏂囧瓧锛堥粯璁も�滃睍寮�闃呰鍏ㄦ枃鈥濓級
+ * @property {String Number} font-size 鎻愮ず鏂囧瓧鐨勫ぇ灏忥紝鍗曚綅rpx锛堥粯璁�28锛�
+ * @property {String} text-indent 娈佃惤棣栬缂╄繘鐨勫瓧绗︿釜鏁帮紙榛樿2em锛�
+ * @property {String} open-text 灞曞紑鏃剁殑鎻愮ず鏂囧瓧锛堥粯璁も�滄敹璧封�濓級
+ * @property {String} color 鎻愮ず鏂囧瓧鐨勯鑹诧紙榛樿#497bff锛�
+ * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
+ */
+ export default {
+ name: "u-read-more",
+ props: {
+ // 榛樿鐨勬樉绀哄崰浣嶉珮搴︼紝鍗曚綅涓簉px
+ showHeight: {
+ type: [Number, String],
+ default: 400
+ },
+ // 灞曞紑鍚庢槸鍚︽樉绀�"鏀惰捣"鎸夐挳
+ toggle: {
+ type: Boolean,
+ default: false
+ },
+ // 鍏抽棴鏃剁殑鎻愮ず鏂囧瓧
+ closeText: {
+ type: String,
+ default: '灞曞紑闃呰鍏ㄦ枃'
+ },
+ // 灞曞紑鏃剁殑鎻愮ず鏂囧瓧
+ openText: {
+ type: String,
+ default: '鏀惰捣'
+ },
+ // 鎻愮ず鐨勬枃瀛楅鑹�
+ color: {
+ type: String,
+ default: '#497bff'
+ },
+ // 鎻愮ず鏂囧瓧鐨勫ぇ灏�
+ fontSize: {
+ type: [String, Number],
+ default: 28
+ },
+ // 鏄惁鏄剧ず闃村奖
+ shadowStyle: {
+ type: Object,
+ default () {
+ return {
+ backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+ paddingTop: "300rpx",
+ marginTop: "-300rpx"
+ }
+ }
+ },
+ // 娈佃惤棣栬缂╄繘鐨勫瓧绗︿釜鏁�
+ textIndent: {
+ type: String,
+ default: '2em'
+ },
+ // open鍜宑lose浜嬩欢鏃讹紝灏嗘鍙傛暟杩斿洖鍦ㄥ洖璋冨弬鏁颁腑
+ index: {
+ type: [Number, String],
+ default: ''
+ }
+ },
+ watch: {
+ paramsChange(val) {
+ this.init();
+ }
+ },
+ computed: {
+ paramsChange() {
+ return `${this.toggle}-${this.showHeight}`;
+ },
+ // 灞曞紑鍚庢棤闇�闃村奖锛屾敹璧锋椂鎵嶉渶瑕侀槾褰辨牱寮�
+ innerShadowStyle() {
+ if (this.showMore) return {};
+ else return this.shadowStyle
+ }
+ },
+ data() {
+ return {
+ isLongContent: false, // 鏄惁闇�瑕侀殣钘忎竴閮ㄥ垎鍐呭
+ showMore: false, // 褰撳墠闅愯棌涓庢樉绀虹殑鐘舵�侊紝true-鏄剧ず锛宖alse-鏀惰捣
+ elId: this.$u.guid(), // 鐢熸垚鍞竴class
+ };
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.init();
+ })
+ },
+ methods: {
+ init() {
+ this.$uGetRect('.' + this.elId).then(res => {
+ // 鍒ゆ柇楂樺害锛屽鏋滅湡瀹炲唴瀹归珮搴﹀ぇ浜庡崰浣嶉珮搴︼紝鍒欐樉绀烘敹璧蜂笌灞曞紑鐨勬帶鍒舵寜閽�
+ if (res.height > uni.upx2px(this.showHeight)) {
+ this.isLongContent = true;
+ this.showMore = false;
+ }
+ })
+ },
+ // 灞曞紑鎴栬�呮敹璧�
+ toggleReadMore() {
+ this.showMore = !this.showMore;
+ // 濡傛灉toggle涓篺alse锛岄殣钘�"鏀惰捣"閮ㄥ垎鐨勫唴瀹�
+ if (this.toggle == false) this.isLongContent = false;
+ // 鍙戝嚭鎵撳紑鎴栬�呮敹榻愮殑浜嬩欢
+ this.$emit(this.showMore ? 'open' : 'close', this.index);
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-content {
+ font-size: 30rpx;
+ color: $u-content-color;
+ line-height: 1.8;
+ text-align: left;
+ overflow: hidden;
+
+ &__show-more {
+ padding-top: 0;
+ background: none;
+ margin-top: 20rpx;
+ }
+
+ &__showmore-wrap {
+ position: relative;
+ width: 100%;
+ padding-bottom: 26rpx;
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+
+ &__readmore-btn {
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 1;
+
+ &__icon {
+ margin-left: 14rpx;
+ }
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3