@bsgoal/common 1.4.9 → 1.5.0
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,63 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
* @Author: canlong.shen
|
|
3
|
+
* @Date: 2023-04-28 16:01:11
|
|
4
|
+
* @LastEditors: canlong.shen
|
|
5
|
+
* @LastEditTime: 2023-04-28 16:37:14
|
|
6
|
+
* @FilePath: \common\src\components\bsgoal-base-tabs\demo.vue
|
|
7
|
+
* @Description: tabs 标签切页 公共组件演示
|
|
8
|
+
-->
|
|
9
|
+
<script>
|
|
10
|
+
export default {
|
|
11
|
+
name: 'BsgoalBaseTabsDemo'
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
14
|
+
<script setup>
|
|
15
|
+
/* setup模板
|
|
16
|
+
---------------------------------------------------------------- */
|
|
17
|
+
import { ref } from 'vue'
|
|
18
|
+
import BsgoalBaseTabs from './index.vue'
|
|
19
|
+
// props
|
|
20
|
+
const props = defineProps({})
|
|
21
|
+
const activeTabName = ref('tab1')
|
|
22
|
+
const config = ref([
|
|
23
|
+
{
|
|
24
|
+
label:'tab1',
|
|
25
|
+
value:'tab1'
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label:'tab2',
|
|
29
|
+
value:'tab2'
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
label:'tab3',
|
|
33
|
+
value:'tab3'
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label:'tab4',
|
|
37
|
+
value:'tab4'
|
|
38
|
+
},
|
|
39
|
+
|
|
40
|
+
])
|
|
41
|
+
</script>
|
|
42
|
+
<template>
|
|
43
|
+
<div class="bsgoal-base-tabs-demo">
|
|
44
|
+
<div class="base_tabs_demo">
|
|
45
|
+
{{ activeTabName }}
|
|
46
|
+
<BsgoalBaseTabs v-model="activeTabName" :config-options="config" >
|
|
47
|
+
<template #tab1>
|
|
48
|
+
<div>
|
|
49
|
+
这是 tab1
|
|
50
|
+
</div>
|
|
51
|
+
</template>
|
|
52
|
+
</BsgoalBaseTabs>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</template>
|
|
56
|
+
<style lang="scss" scoped>
|
|
57
|
+
/* 自定义样式
|
|
58
|
+
---------------------------------------------------------------- */
|
|
59
|
+
</style>
|
|
60
|
+
<style lang="scss">
|
|
61
|
+
/* 覆盖样式
|
|
62
|
+
---------------------------------------------------------------- */
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
* @Author: canlong.shen
|
|
3
|
+
* @Date: 2023-04-28 16:01:06
|
|
4
|
+
* @LastEditors: canlong.shen
|
|
5
|
+
* @LastEditTime: 2023-04-28 16:39:10
|
|
6
|
+
* @FilePath: \common\src\components\bsgoal-base-tabs\index.vue
|
|
7
|
+
* @Description: tabs 标签页公共组件
|
|
8
|
+
*
|
|
9
|
+
-->
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
export default {
|
|
13
|
+
name: 'BsgoalBaseTabs'
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
<script setup>
|
|
17
|
+
/* setup模板
|
|
18
|
+
---------------------------------------------------------------- */
|
|
19
|
+
import { ref } from 'vue'
|
|
20
|
+
const props = defineProps({
|
|
21
|
+
/**
|
|
22
|
+
* 配置项
|
|
23
|
+
* [
|
|
24
|
+
* {
|
|
25
|
+
* label: '' // 对应 label值
|
|
26
|
+
* value: '' // 对应 name值
|
|
27
|
+
* }
|
|
28
|
+
* ]
|
|
29
|
+
*/
|
|
30
|
+
configOptions: {
|
|
31
|
+
type: [Array],
|
|
32
|
+
default: () => []
|
|
33
|
+
},
|
|
34
|
+
/**
|
|
35
|
+
* 风格
|
|
36
|
+
* card : 卡片风格
|
|
37
|
+
* border-card : 带有边框的卡片风格
|
|
38
|
+
*/
|
|
39
|
+
type: {
|
|
40
|
+
type: [String],
|
|
41
|
+
default: '',
|
|
42
|
+
validator: (v) => ['card', 'border-card'].includes(v)
|
|
43
|
+
},
|
|
44
|
+
/**
|
|
45
|
+
* 组件绑定的值
|
|
46
|
+
*/
|
|
47
|
+
modelValue: {
|
|
48
|
+
type: [String],
|
|
49
|
+
default: ''
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* update:modelValue // 更新 modelValue 的方法
|
|
56
|
+
*/
|
|
57
|
+
const emits = defineEmits(['update:modelValue'])
|
|
58
|
+
|
|
59
|
+
// ---> S tab的切换 <---
|
|
60
|
+
const changeTab = (activeValue = '') => {
|
|
61
|
+
emits('update:modelValue', activeValue)
|
|
62
|
+
}
|
|
63
|
+
// ---> E tab的切换 <---
|
|
64
|
+
</script>
|
|
65
|
+
<template>
|
|
66
|
+
<div class="bsgoal-base-tabs">
|
|
67
|
+
<el-tabs
|
|
68
|
+
stretch
|
|
69
|
+
class="bsgoal_base_tabs"
|
|
70
|
+
:type="type"
|
|
71
|
+
:model-value="modelValue"
|
|
72
|
+
@tab-change="changeTab"
|
|
73
|
+
>
|
|
74
|
+
<template v-for="({ label, value }, key) of configOptions" :key="key">
|
|
75
|
+
<el-tab-pane :label="label" :name="value">
|
|
76
|
+
<slot :name="value">{{ label }}</slot>
|
|
77
|
+
</el-tab-pane>
|
|
78
|
+
</template>
|
|
79
|
+
</el-tabs>
|
|
80
|
+
</div>
|
|
81
|
+
</template>
|
|
82
|
+
<style lang="scss">
|
|
83
|
+
/* 覆盖样式
|
|
84
|
+
---------------------------------------------------------------- */
|
|
85
|
+
</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-04-28 16:17:42
|
|
6
6
|
* @FilePath: \common\src\router\index.js
|
|
7
7
|
* @Description: 路由配置
|
|
8
8
|
*
|
|
@@ -68,6 +68,11 @@ const router = createRouter({
|
|
|
68
68
|
name: '级联选择',
|
|
69
69
|
component: import('@/components/bsgoal-base-cascader/demo.vue')
|
|
70
70
|
},
|
|
71
|
+
{
|
|
72
|
+
path: '/bsgoal-base-tabs-demo',
|
|
73
|
+
name: 'tabs标签',
|
|
74
|
+
component: import('@/components/bsgoal-base-tabs/demo.vue')
|
|
75
|
+
},
|
|
71
76
|
]
|
|
72
77
|
}
|
|
73
78
|
]
|