看板
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import type { ExtractPropTypes, PropType } from 'vue';
|
||||
import { baseProps } from '../common/props';
|
||||
import { getColor, useLocale } from '../../';
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
/**
|
||||
* ReadMoreProps 阅读更多 props 类型定义
|
||||
* @description 内容较长时收起/展开的场景
|
||||
*/
|
||||
export const ReadMoreProps = {
|
||||
...baseProps,
|
||||
/** 默认的显示占位高度，单位为rpx */
|
||||
showHeight: { type: [Number, String] as PropType<number | string>, default: 400 },
|
||||
/** 展开后是否显示"收起"按钮 */
|
||||
toggle: { type: Boolean, default: false },
|
||||
/** 关闭时的提示文字 */
|
||||
closeText: { type: String, default: () => t('uReadMore.closeText') },
|
||||
/** 展开时的提示文字 */
|
||||
openText: { type: String, default: () => t('uReadMore.openText') },
|
||||
/** 提示的文字颜色 */
|
||||
color: { type: String, default: () => getColor('primary') },
|
||||
/** 提示文字的大小 */
|
||||
fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
|
||||
/** 是否显示阴影 */
|
||||
shadowStyle: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => ({
|
||||
backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, var(--u-bg-white) 80%)',
|
||||
paddingTop: '300rpx',
|
||||
marginTop: '-300rpx'
|
||||
})
|
||||
},
|
||||
/** 段落首行缩进的字符个数 */
|
||||
textIndent: { type: String, default: '2em' },
|
||||
/** open和close事件时，将此参数返回在回调参数中 */
|
||||
index: { type: [Number, String] as PropType<number | string>, default: '' }
|
||||
};
|
||||
|
||||
export type ReadMoreProps = ExtractPropTypes<typeof ReadMoreProps>;
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<view>
|
||||
<view
|
||||
class="u-content"
|
||||
:class="[elId, customClass]"
|
||||
:style="
|
||||
$u.toStyle(
|
||||
{
|
||||
height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
|
||||
textIndent: textIndent
|
||||
},
|
||||
customStyle
|
||||
)
|
||||
"
|
||||
>
|
||||
<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 lang="ts">
|
||||
export default {
|
||||
name: 'u-read-more',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true,
|
||||
// #endif
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
|
||||
import { $u } from '../..';
|
||||
import { ReadMoreProps } from './types';
|
||||
|
||||
/**
|
||||
* readMore 阅读更多
|
||||
* @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
|
||||
* @tutorial https://uviewpro.cn/zh/components/readMore.html
|
||||
* @property {String|Number} showHeight 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
|
||||
* @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
|
||||
* @property {String} closeText 关闭时的提示文字（默认“展开阅读全文”）
|
||||
* @property {String|Number} fontSize 提示文字的大小，单位rpx（默认28）
|
||||
* @property {String} textIndent 段落首行缩进的字符个数（默认2em）
|
||||
* @property {String} openText 展开时的提示文字（默认“收起”）
|
||||
* @property {String} color 提示文字的颜色（默认主题色primary）
|
||||
* @property {Object} shadowStyle 是否显示阴影，样式对象
|
||||
* @property {String|Number} index open和close事件时，将此参数返回在回调参数中
|
||||
* @event open 展开时触发
|
||||
* @event close 收起时触发
|
||||
* @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
|
||||
*/
|
||||
|
||||
const props = defineProps(ReadMoreProps);
|
||||
|
||||
const emit = defineEmits(['open', 'close']);
|
||||
|
||||
// 是否需要隐藏一部分内容
|
||||
const isLongContent = ref(false);
|
||||
// 当前隐藏与显示的状态，true-显示，false-收起
|
||||
const showMore = ref(false);
|
||||
// 生成唯一class
|
||||
const elId = ref('');
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
// 展开后无需阴影，收起时才需要阴影样式
|
||||
const innerShadowStyle = computed(() => {
|
||||
return showMore.value ? {} : props.shadowStyle;
|
||||
});
|
||||
|
||||
// 监听 toggle 和 showHeight 变化，重新初始化
|
||||
watch(
|
||||
() => `${props.toggle}-${props.showHeight}`,
|
||||
() => {
|
||||
init();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
elId.value = $u.guid();
|
||||
nextTick(() => {
|
||||
init();
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 初始化内容高度判断
|
||||
* @description 判断内容是否超出指定高度，决定是否显示展开/收起按钮
|
||||
*/
|
||||
function init() {
|
||||
$u.getRect('.' + elId.value, instance).then((res: { height: number }) => {
|
||||
// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
|
||||
if (res.height > uni.upx2px(Number(props.showHeight))) {
|
||||
isLongContent.value = true;
|
||||
showMore.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 显式暴露init方法
|
||||
defineExpose({
|
||||
init
|
||||
});
|
||||
|
||||
/**
|
||||
* 展开或者收起内容
|
||||
* @description 切换显示状态，发出 open/close 事件
|
||||
*/
|
||||
function toggleReadMore() {
|
||||
showMore.value = !showMore.value;
|
||||
// 如果toggle为false，隐藏"收起"部分的内容
|
||||
if (props.toggle == false) isLongContent.value = false;
|
||||
// 发出打开或者收齐的事件
|
||||
emit(showMore.value ? 'open' : 'close', props.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>
|
||||
Reference in New Issue
Block a user