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
| <script lang="ts" setup>
| import { computed } from 'vue';
|
| defineOptions({ inheritAttrs: false, name: 'JnpfText' });
| const props = defineProps({
| content: { default: '', type: String },
| textStyle: {
| default: () => ({
| // 'font-size': ' 12px',
| // "color": '#00000',
| // 'text-align': 'center',
| // 'line-height': '32px',
| // 'font-weight': 'normal',
| // 'font-style': 'normal',
| // 'text-decoration': 'none',
| }),
| type: Object,
| },
| });
|
| const getStyle = computed(() => ({
| ...props.textStyle,
| 'font-size': `${props.textStyle['font-size']}px`,
| 'line-height': `${props.textStyle['line-height']}px`,
| }));
| const getContent = computed(() => props.content.replace(/\\n/g, '\n'));
| </script>
|
| <template>
| <p :style="getStyle" class="jnpf-text">{{ getContent }}</p>
| </template>
| <style lang="scss" scoped>
| .jnpf-text {
| padding: 3px 0;
| margin: 0;
| white-space: pre-wrap;
| }
| </style>
|
|
