mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
4b5a9bf279
* docs(components): [text] line-clamp prop and update example * test(components): [text] line-clamp test * fix(components): [text] not support multi-line ellipsis * docs: updata --------- Co-authored-by: qiang <qw13131wang@gmail.com>
35 lines
739 B
Vue
35 lines
739 B
Vue
<template>
|
|
<component
|
|
:is="tag"
|
|
:class="textKls"
|
|
:style="{ '-webkit-line-clamp': lineClamp }"
|
|
>
|
|
<slot />
|
|
</component>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
import { useNamespace } from '@element-plus/hooks'
|
|
import { useFormSize } from '@element-plus/components/form'
|
|
import { isUndefined } from '@element-plus/utils'
|
|
import { textProps } from './text'
|
|
|
|
defineOptions({
|
|
name: 'ElText',
|
|
})
|
|
|
|
const props = defineProps(textProps)
|
|
|
|
const textSize = useFormSize()
|
|
const ns = useNamespace('text')
|
|
|
|
const textKls = computed(() => [
|
|
ns.b(),
|
|
ns.m(props.type),
|
|
ns.m(textSize.value),
|
|
ns.is('truncated', props.truncated),
|
|
ns.is('line-clamp', !isUndefined(props.lineClamp)),
|
|
])
|
|
</script>
|