1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| import { Component, defineComponent, h } from 'vue'
| import styles from './Text.module.scss'
| export default defineComponent({
| name: '文本',
| props: {
| truncated: {
| type: Boolean,
| default: false,
| },
| tag: {
| type: String,
| default: 'span',
| },
| lineClamp: {
| type: Number,
| default: 1,
| },
| tip: {
| type: String,
| default: '',
| },
| fontSize: {
| type: String,
| default: '',
| },
| color: {
| type: String,
| default: '',
| },
| },
| emits: ['click'],
| setup(props, { attrs, slots, emit }) {
| const tag: string = props.tag
| const style = {
| color: props.color,
| fontSize: props.fontSize,
| }
| const RenderComponent = () => {
| return h(
| tag,
| {
| class: props.truncated ? styles.truncated : '',
| style: { '-webkit-line-clamp': props.lineClamp, ...style },
| ...attrs,
| },
| {
| ...slots,
| }
| )
| }
| return () => {
| if (props.tip) {
| return (
| <el-tooltip
| effect="dark"
| content={`<div style="max-width:300px">${props.tip}</div>`}
| raw-content
| placement="top"
| >
| <RenderComponent />
| </el-tooltip>
| )
| }
| return <RenderComponent />
| }
| },
| })
|
|
