From 1e71dd86f6d0c4fc7e5143600d4bc4b50992a2a7 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 04 Jul 2024 14:51:28 +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