@bsgoal/common 1.5.3 → 1.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
* @Author: canlong.shen
|
|
3
|
+
* @Date: 2023-05-04 10:59:33
|
|
4
|
+
* @LastEditors: canlong.shen
|
|
5
|
+
* @LastEditTime: 2023-05-04 11:19:39
|
|
6
|
+
* @FilePath: \common\src\components\bsgoal-base-tooltip\demo.vue
|
|
7
|
+
* @Description: 文字提示公共组件演示
|
|
8
|
+
*
|
|
9
|
+
-->
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
export default {
|
|
13
|
+
name: "BsgoalBaseTooltipDemo",
|
|
14
|
+
};
|
|
15
|
+
</script>
|
|
16
|
+
<script setup>
|
|
17
|
+
/* setup模板
|
|
18
|
+
---------------------------------------------------------------- */
|
|
19
|
+
import { ref } from 'vue';
|
|
20
|
+
import BsgoalBaseTooltip from './index.vue'
|
|
21
|
+
// props
|
|
22
|
+
const props = defineProps({
|
|
23
|
+
|
|
24
|
+
})
|
|
25
|
+
</script>
|
|
26
|
+
<template>
|
|
27
|
+
<div class="bsgoal-base-tooltip-demo">
|
|
28
|
+
<div class="base_tooltip_demo">
|
|
29
|
+
<BsgoalBaseTooltip content="愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人愚蠢的地球人" />
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
<style lang="scss" scoped>
|
|
34
|
+
/* 自定义样式
|
|
35
|
+
---------------------------------------------------------------- */
|
|
36
|
+
</style>
|
|
37
|
+
<style lang="scss">
|
|
38
|
+
/* 覆盖样式
|
|
39
|
+
---------------------------------------------------------------- */
|
|
40
|
+
</style>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
* @Author: canlong.shen
|
|
3
|
+
* @Date: 2023-05-04 10:59:25
|
|
4
|
+
* @LastEditors: canlong.shen
|
|
5
|
+
* @LastEditTime: 2023-05-04 11:21:59
|
|
6
|
+
* @FilePath: \common\src\components\bsgoal-base-tooltip\index.vue
|
|
7
|
+
* @Description: 文字提示公共组件
|
|
8
|
+
*
|
|
9
|
+
-->
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
export default {
|
|
13
|
+
name: 'BsgoalBaseTooltip'
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
<script setup>
|
|
17
|
+
/* setup模板
|
|
18
|
+
---------------------------------------------------------------- */
|
|
19
|
+
import { ref, computed } from 'vue'
|
|
20
|
+
// props
|
|
21
|
+
const props = defineProps({
|
|
22
|
+
/**
|
|
23
|
+
* 文字提示内容
|
|
24
|
+
*/
|
|
25
|
+
content: {
|
|
26
|
+
type: [String],
|
|
27
|
+
default: ''
|
|
28
|
+
},
|
|
29
|
+
/**
|
|
30
|
+
* 类型
|
|
31
|
+
*/
|
|
32
|
+
type: {
|
|
33
|
+
type: [String],
|
|
34
|
+
default: 'text',
|
|
35
|
+
validator: (v) => ['text', 'custom'].includes(v)
|
|
36
|
+
},
|
|
37
|
+
/**
|
|
38
|
+
* 限定显示的字符
|
|
39
|
+
*/
|
|
40
|
+
limit: {
|
|
41
|
+
type: [Number],
|
|
42
|
+
default: 10
|
|
43
|
+
},
|
|
44
|
+
/**
|
|
45
|
+
* 最大内容宽度
|
|
46
|
+
*/
|
|
47
|
+
max: {
|
|
48
|
+
type: [Number, String],
|
|
49
|
+
default: '10em'
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
// ---> S 字符数限制 <---
|
|
54
|
+
const contentGet = computed(() => {
|
|
55
|
+
const { content = '', limit = 0 } = props
|
|
56
|
+
let contentString = content
|
|
57
|
+
const contentLength = content.length
|
|
58
|
+
if (contentLength > limit) {
|
|
59
|
+
contentString = `${contentString.substring(0, limit)}...`
|
|
60
|
+
}
|
|
61
|
+
return contentString
|
|
62
|
+
})
|
|
63
|
+
// ---> E 字符数限制 <---
|
|
64
|
+
</script>
|
|
65
|
+
<template>
|
|
66
|
+
<div class="bsgoal-base-tooltip">
|
|
67
|
+
<el-tooltip
|
|
68
|
+
class="base_tooltip"
|
|
69
|
+
effect="dark"
|
|
70
|
+
popper-class="base_tooltip_popper"
|
|
71
|
+
placement="top-start"
|
|
72
|
+
:content="content"
|
|
73
|
+
>
|
|
74
|
+
<slot>
|
|
75
|
+
{{ contentGet }}
|
|
76
|
+
</slot>
|
|
77
|
+
</el-tooltip>
|
|
78
|
+
</div>
|
|
79
|
+
</template>
|
|
80
|
+
<style lang="scss">
|
|
81
|
+
/* 覆盖样式
|
|
82
|
+
---------------------------------------------------------------- */
|
|
83
|
+
.bsgoal-base-tooltip {
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.base_tooltip_popper {
|
|
87
|
+
max-width: 20em;
|
|
88
|
+
}
|
|
89
|
+
</style>
|
package/src/router/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @Author: canlong.shen
|
|
3
3
|
* @Date: 2023-04-10 10:41:52
|
|
4
4
|
* @LastEditors: canlong.shen
|
|
5
|
-
* @LastEditTime: 2023-04
|
|
5
|
+
* @LastEditTime: 2023-05-04 11:12:13
|
|
6
6
|
* @FilePath: \common\src\router\index.js
|
|
7
7
|
* @Description: 路由配置
|
|
8
8
|
*
|
|
@@ -73,6 +73,11 @@ const router = createRouter({
|
|
|
73
73
|
name: 'tabs标签',
|
|
74
74
|
component: import('@/components/bsgoal-base-tabs/demo.vue')
|
|
75
75
|
},
|
|
76
|
+
{
|
|
77
|
+
path: '/bsgoal-base-tooltip-demo',
|
|
78
|
+
name: '文字提示',
|
|
79
|
+
component: import('@/components/bsgoal-base-tooltip/demo.vue')
|
|
80
|
+
},
|
|
76
81
|
]
|
|
77
82
|
}
|
|
78
83
|
]
|