|
@@ -1,8 +1,50 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <FlexView position="relative" v-bind="outerProps">
|
|
|
|
|
+ <FlexCol
|
|
|
|
|
+ :height="customContent && !open ? collapsedHeight : undefined"
|
|
|
|
|
+ overflow="hidden"
|
|
|
|
|
+ >
|
|
|
|
|
+ <slot>
|
|
|
|
|
+ <Text
|
|
|
|
|
+ v-bind="props"
|
|
|
|
|
+ :ellipsis="true"
|
|
|
|
|
+ :lines="currentLines"
|
|
|
|
|
+ :text="text"
|
|
|
|
|
+ wrap
|
|
|
|
|
+ />
|
|
|
|
|
+ </slot>
|
|
|
|
|
+ <BackgroundBox
|
|
|
|
|
+ v-if="!open && (showMask || customContent)"
|
|
|
|
|
+ :height="collapsedHeight"
|
|
|
|
|
+ color1="transparent"
|
|
|
|
|
+ :color2="maskColor"
|
|
|
|
|
+ :innerStyle="{
|
|
|
|
|
+ position: 'absolute',
|
|
|
|
|
+ bottom: '36rpx',
|
|
|
|
|
+ left: 0,
|
|
|
|
|
+ right: 0,
|
|
|
|
|
+ }"
|
|
|
|
|
+ />
|
|
|
|
|
+ </FlexCol>
|
|
|
|
|
+ <slot v-if="expandable" name="button" :onClick="handleClick">
|
|
|
|
|
+ <Text
|
|
|
|
|
+ v-bind="props"
|
|
|
|
|
+ innerClass="nana-text-ellipsis-expand"
|
|
|
|
|
+ touchable
|
|
|
|
|
+ :text="open ? closeText : openText"
|
|
|
|
|
+ color="primary"
|
|
|
|
|
+ @click="handleClick"
|
|
|
|
|
+ />
|
|
|
|
|
+ </slot>
|
|
|
|
|
+ </FlexView>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { computed, ref } from 'vue';
|
|
import { computed, ref } from 'vue';
|
|
|
import type { TextProps } from '../basic/Text.vue';
|
|
import type { TextProps } from '../basic/Text.vue';
|
|
|
import Text from '../basic/Text.vue';
|
|
import Text from '../basic/Text.vue';
|
|
|
import FlexCol from '../layout/FlexCol.vue';
|
|
import FlexCol from '../layout/FlexCol.vue';
|
|
|
|
|
+import FlexView, { type FlexProps } from '../layout/FlexView.vue';
|
|
|
import BackgroundBox from './block/BackgroundBox.vue';
|
|
import BackgroundBox from './block/BackgroundBox.vue';
|
|
|
|
|
|
|
|
export interface TextEllipsisProps extends TextProps {
|
|
export interface TextEllipsisProps extends TextProps {
|
|
@@ -12,6 +54,10 @@ export interface TextEllipsisProps extends TextProps {
|
|
|
*/
|
|
*/
|
|
|
lines?: number;
|
|
lines?: number;
|
|
|
/**
|
|
/**
|
|
|
|
|
+ * 外层样式
|
|
|
|
|
+ */
|
|
|
|
|
+ outerProps?: FlexProps;
|
|
|
|
|
+ /**
|
|
|
* 是否可展开
|
|
* 是否可展开
|
|
|
* @default true
|
|
* @default true
|
|
|
*/
|
|
*/
|
|
@@ -54,7 +100,6 @@ export interface TextEllipsisProps extends TextProps {
|
|
|
customContent?: boolean;
|
|
customContent?: boolean;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
const emit = defineEmits(['expand', 'collapse']);
|
|
const emit = defineEmits(['expand', 'collapse']);
|
|
|
const props = withDefaults(defineProps<TextEllipsisProps>(), {
|
|
const props = withDefaults(defineProps<TextEllipsisProps>(), {
|
|
|
lines: 1,
|
|
lines: 1,
|
|
@@ -63,6 +108,9 @@ const props = withDefaults(defineProps<TextEllipsisProps>(), {
|
|
|
customContent: false,
|
|
customContent: false,
|
|
|
showMask: false,
|
|
showMask: false,
|
|
|
maskColor: 'white',
|
|
maskColor: 'white',
|
|
|
|
|
+ outerProps: () => ({
|
|
|
|
|
+ direction: 'column'
|
|
|
|
|
+ }),
|
|
|
collapsedHeight: 140,
|
|
collapsedHeight: 140,
|
|
|
openText: '展开',
|
|
openText: '展开',
|
|
|
closeText: '收起',
|
|
closeText: '收起',
|
|
@@ -88,50 +136,12 @@ defineOptions({
|
|
|
})
|
|
})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<template>
|
|
|
|
|
- <FlexCol position="relative">
|
|
|
|
|
- <FlexCol
|
|
|
|
|
- :height="customContent && !open ? collapsedHeight : undefined"
|
|
|
|
|
- overflow="hidden"
|
|
|
|
|
- >
|
|
|
|
|
- <slot>
|
|
|
|
|
- <Text
|
|
|
|
|
- v-bind="props"
|
|
|
|
|
- :ellipsis="true"
|
|
|
|
|
- :lines="currentLines"
|
|
|
|
|
- :text="text"
|
|
|
|
|
- />
|
|
|
|
|
- </slot>
|
|
|
|
|
- <BackgroundBox
|
|
|
|
|
- v-if="!open && (showMask || customContent)"
|
|
|
|
|
- :height="collapsedHeight"
|
|
|
|
|
- color1="transparent"
|
|
|
|
|
- :color2="maskColor"
|
|
|
|
|
- :innerStyle="{
|
|
|
|
|
- position: 'absolute',
|
|
|
|
|
- bottom: '36rpx',
|
|
|
|
|
- left: 0,
|
|
|
|
|
- right: 0,
|
|
|
|
|
- }"
|
|
|
|
|
- />
|
|
|
|
|
- </FlexCol>
|
|
|
|
|
- <slot v-if="expandable" name="button" :onClick="handleClick">
|
|
|
|
|
- <Text
|
|
|
|
|
- innerClass="nana-text-ellipsis-expand"
|
|
|
|
|
- touchable
|
|
|
|
|
- :text="open ? closeText : openText"
|
|
|
|
|
- color="primary"
|
|
|
|
|
- @click="handleClick"
|
|
|
|
|
- />
|
|
|
|
|
- </slot>
|
|
|
|
|
- </FlexCol>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
<style>
|
|
<style>
|
|
|
.nana-text-ellipsis-expand {
|
|
.nana-text-ellipsis-expand {
|
|
|
/* #ifndef APP-NVUE */
|
|
/* #ifndef APP-NVUE */
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
/* #endif */
|
|
/* #endif */
|
|
|
text-align: right;
|
|
text-align: right;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|