@ebiz/designer-components 0.0.19-beta.3 → 0.0.19-beta.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/dist/designer-components.css +1 -1
- package/dist/index.mjs +19572 -19123
- package/package.json +1 -1
- package/src/components/EbizPopconfirm.vue +48 -0
- package/src/components/TdesignDescriptions.vue +81 -0
- package/src/components/TdesignDescriptionsItem.vue +55 -0
- package/src/components/examples/PopconfirmExample.vue +150 -0
- package/src/index.js +177 -169
- package/src/router/index.js +18 -19
- package/src/views/Home.vue +4 -4
- package/src/views/PopconfirmDemo.vue +81 -0
- package/src/views/TdesignDescriptions.vue +102 -0
package/package.json
CHANGED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<t-popconfirm
|
|
3
|
+
:content="content"
|
|
4
|
+
@cancel="handleCancel"
|
|
5
|
+
@confirm="handleConfirm"
|
|
6
|
+
>
|
|
7
|
+
<slot></slot>
|
|
8
|
+
</t-popconfirm>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
export default {
|
|
13
|
+
name: "EbizPopconfirm"
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<script setup>
|
|
18
|
+
import { Popconfirm as TPopconfirm } from 'tdesign-vue-next';
|
|
19
|
+
|
|
20
|
+
// 定义属性
|
|
21
|
+
const props = defineProps({
|
|
22
|
+
// 确认框内容
|
|
23
|
+
content: {
|
|
24
|
+
type: [String, Function],
|
|
25
|
+
default: ''
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// 定义事件
|
|
30
|
+
const emit = defineEmits([
|
|
31
|
+
'cancel',
|
|
32
|
+
'confirm'
|
|
33
|
+
]);
|
|
34
|
+
|
|
35
|
+
// 取消按钮点击事件
|
|
36
|
+
const handleCancel = ({ e }) => {
|
|
37
|
+
emit('cancel', { e });
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// 确认按钮点击事件
|
|
41
|
+
const handleConfirm = ({ e }) => {
|
|
42
|
+
emit('confirm', { e });
|
|
43
|
+
};
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<style lang="less" scoped>
|
|
47
|
+
/* 自定义样式可在此处添加 */
|
|
48
|
+
</style>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<t-descriptions
|
|
3
|
+
v-bind="$attrs"
|
|
4
|
+
:border="border"
|
|
5
|
+
:colon="colon"
|
|
6
|
+
:column="column"
|
|
7
|
+
:layout="layout"
|
|
8
|
+
:item-layout="itemLayout"
|
|
9
|
+
:size="size"
|
|
10
|
+
:title="title"
|
|
11
|
+
:table-layout="tableLayout"
|
|
12
|
+
:table-border-color="tableBorderColor"
|
|
13
|
+
>
|
|
14
|
+
<slot></slot>
|
|
15
|
+
<slot name="title"></slot>
|
|
16
|
+
<slot name="itemClassName"></slot>
|
|
17
|
+
<slot name="labelClassName"></slot>
|
|
18
|
+
<slot name="contentClassName"></slot>
|
|
19
|
+
</t-descriptions>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script setup>
|
|
23
|
+
import { defineProps, defineEmits } from 'vue';
|
|
24
|
+
import { Descriptions as TDescriptions } from 'tdesign-vue-next';
|
|
25
|
+
|
|
26
|
+
const props = defineProps({
|
|
27
|
+
border: {
|
|
28
|
+
type: Boolean,
|
|
29
|
+
default: false
|
|
30
|
+
},
|
|
31
|
+
colon: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
default: false
|
|
34
|
+
},
|
|
35
|
+
column: {
|
|
36
|
+
type: Number,
|
|
37
|
+
default: 2
|
|
38
|
+
},
|
|
39
|
+
layout: {
|
|
40
|
+
type: String,
|
|
41
|
+
default: 'horizontal',
|
|
42
|
+
validator(val) {
|
|
43
|
+
return ['horizontal', 'vertical'].includes(val);
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
itemLayout: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: 'horizontal',
|
|
49
|
+
validator(val) {
|
|
50
|
+
return ['horizontal', 'vertical'].includes(val);
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
size: {
|
|
54
|
+
type: String,
|
|
55
|
+
default: 'medium',
|
|
56
|
+
validator(val) {
|
|
57
|
+
return ['small', 'medium', 'large'].includes(val);
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
title: {
|
|
61
|
+
type: String,
|
|
62
|
+
default: ''
|
|
63
|
+
},
|
|
64
|
+
tableLayout: {
|
|
65
|
+
type: String,
|
|
66
|
+
default: 'fixed',
|
|
67
|
+
validator(val) {
|
|
68
|
+
return ['auto', 'fixed'].includes(val);
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
tableBorderColor: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: ''
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
defineEmits([]);
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
<style scoped>
|
|
81
|
+
</style>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<t-descriptions-item
|
|
3
|
+
v-bind="$attrs"
|
|
4
|
+
:label="label"
|
|
5
|
+
:span="span"
|
|
6
|
+
:layout="layout"
|
|
7
|
+
:className="className"
|
|
8
|
+
:labelClassName="labelClassName"
|
|
9
|
+
:contentClassName="contentClassName"
|
|
10
|
+
>
|
|
11
|
+
<slot></slot>
|
|
12
|
+
<slot name="label"></slot>
|
|
13
|
+
</t-descriptions-item>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script setup>
|
|
17
|
+
import { defineProps, defineEmits } from 'vue';
|
|
18
|
+
import { DescriptionsItem as TDescriptionsItem } from 'tdesign-vue-next';
|
|
19
|
+
|
|
20
|
+
const props = defineProps({
|
|
21
|
+
label: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: ''
|
|
24
|
+
},
|
|
25
|
+
span: {
|
|
26
|
+
type: Number,
|
|
27
|
+
default: 1
|
|
28
|
+
},
|
|
29
|
+
layout: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: '',
|
|
32
|
+
validator(val) {
|
|
33
|
+
if (!val) return true;
|
|
34
|
+
return ['horizontal', 'vertical'].includes(val);
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
className: {
|
|
38
|
+
type: String,
|
|
39
|
+
default: ''
|
|
40
|
+
},
|
|
41
|
+
labelClassName: {
|
|
42
|
+
type: String,
|
|
43
|
+
default: ''
|
|
44
|
+
},
|
|
45
|
+
contentClassName: {
|
|
46
|
+
type: String,
|
|
47
|
+
default: ''
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
defineEmits([]);
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<style scoped>
|
|
55
|
+
</style>
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="popconfirm-example">
|
|
3
|
+
<h2>气泡确认框示例</h2>
|
|
4
|
+
|
|
5
|
+
<h3>1. 基础用法</h3>
|
|
6
|
+
<div class="example-item">
|
|
7
|
+
<ebiz-popconfirm content="确定要删除这条数据吗？">
|
|
8
|
+
<ebiz-tdesign-button>删除</ebiz-tdesign-button>
|
|
9
|
+
</ebiz-popconfirm>
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<h3>2. 不同主题</h3>
|
|
13
|
+
<div class="example-item">
|
|
14
|
+
<ebiz-space>
|
|
15
|
+
<ebiz-popconfirm content="这是默认主题" theme="default">
|
|
16
|
+
<ebiz-tdesign-button>默认主题</ebiz-tdesign-button>
|
|
17
|
+
</ebiz-popconfirm>
|
|
18
|
+
|
|
19
|
+
<ebiz-popconfirm content="这是警告主题" theme="warning">
|
|
20
|
+
<ebiz-tdesign-button>警告主题</ebiz-tdesign-button>
|
|
21
|
+
</ebiz-popconfirm>
|
|
22
|
+
|
|
23
|
+
<ebiz-popconfirm content="这是危险主题" theme="danger">
|
|
24
|
+
<ebiz-tdesign-button>危险主题</ebiz-tdesign-button>
|
|
25
|
+
</ebiz-popconfirm>
|
|
26
|
+
</ebiz-space>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<h3>3. 不同位置</h3>
|
|
30
|
+
<div class="example-item">
|
|
31
|
+
<ebiz-space>
|
|
32
|
+
<ebiz-popconfirm content="这是顶部弹出" placement="top">
|
|
33
|
+
<ebiz-tdesign-button>顶部</ebiz-tdesign-button>
|
|
34
|
+
</ebiz-popconfirm>
|
|
35
|
+
|
|
36
|
+
<ebiz-popconfirm content="这是左侧弹出" placement="left">
|
|
37
|
+
<ebiz-tdesign-button>左侧</ebiz-tdesign-button>
|
|
38
|
+
</ebiz-popconfirm>
|
|
39
|
+
|
|
40
|
+
<ebiz-popconfirm content="这是右侧弹出" placement="right">
|
|
41
|
+
<ebiz-tdesign-button>右侧</ebiz-tdesign-button>
|
|
42
|
+
</ebiz-popconfirm>
|
|
43
|
+
|
|
44
|
+
<ebiz-popconfirm content="这是底部弹出" placement="bottom">
|
|
45
|
+
<ebiz-tdesign-button>底部</ebiz-tdesign-button>
|
|
46
|
+
</ebiz-popconfirm>
|
|
47
|
+
</ebiz-space>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<h3>4. 自定义按钮文本</h3>
|
|
51
|
+
<div class="example-item">
|
|
52
|
+
<ebiz-popconfirm
|
|
53
|
+
content="确定要执行此操作吗？"
|
|
54
|
+
confirm-btn="执行"
|
|
55
|
+
cancel-btn="取消执行"
|
|
56
|
+
>
|
|
57
|
+
<ebiz-tdesign-button>自定义按钮文本</ebiz-tdesign-button>
|
|
58
|
+
</ebiz-popconfirm>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<h3>5. 事件处理</h3>
|
|
62
|
+
<div class="example-item">
|
|
63
|
+
<ebiz-popconfirm
|
|
64
|
+
content="确定要继续吗？"
|
|
65
|
+
@confirm="handleConfirm"
|
|
66
|
+
@cancel="handleCancel"
|
|
67
|
+
>
|
|
68
|
+
<ebiz-tdesign-button>点击触发事件</ebiz-tdesign-button>
|
|
69
|
+
</ebiz-popconfirm>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<h3>6. 不同触发方式</h3>
|
|
73
|
+
<div class="example-item">
|
|
74
|
+
<ebiz-space>
|
|
75
|
+
<ebiz-popconfirm content="点击触发" trigger="click">
|
|
76
|
+
<ebiz-tdesign-button>点击触发</ebiz-tdesign-button>
|
|
77
|
+
</ebiz-popconfirm>
|
|
78
|
+
|
|
79
|
+
<ebiz-popconfirm content="悬浮触发" trigger="hover">
|
|
80
|
+
<ebiz-tdesign-button>悬浮触发</ebiz-tdesign-button>
|
|
81
|
+
</ebiz-popconfirm>
|
|
82
|
+
|
|
83
|
+
<ebiz-popconfirm content="获得焦点触发" trigger="focus">
|
|
84
|
+
<ebiz-tdesign-input placeholder="点击输入框"></ebiz-tdesign-input>
|
|
85
|
+
</ebiz-popconfirm>
|
|
86
|
+
</ebiz-space>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<h3>7. 控制显示状态</h3>
|
|
90
|
+
<div class="example-item">
|
|
91
|
+
<ebiz-tdesign-button @click="visible = !visible">
|
|
92
|
+
{{ visible ? '隐藏' : '显示' }}气泡确认框
|
|
93
|
+
</ebiz-tdesign-button>
|
|
94
|
+
|
|
95
|
+
<ebiz-popconfirm
|
|
96
|
+
v-model:visible="visible"
|
|
97
|
+
content="这是一个受控的气泡确认框"
|
|
98
|
+
>
|
|
99
|
+
<ebiz-tdesign-button style="margin-left: 16px;">
|
|
100
|
+
受控组件
|
|
101
|
+
</ebiz-tdesign-button>
|
|
102
|
+
</ebiz-popconfirm>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</template>
|
|
106
|
+
|
|
107
|
+
<script setup>
|
|
108
|
+
import { ref } from 'vue';
|
|
109
|
+
import { EbizPopconfirm, EbizTdesignButton, EbizTdesignInput, EbizSpace, EbizMessage } from '../../index';
|
|
110
|
+
|
|
111
|
+
// 控制气泡确认框显示状态
|
|
112
|
+
const visible = ref(false);
|
|
113
|
+
|
|
114
|
+
// 确认事件处理
|
|
115
|
+
const handleConfirm = () => {
|
|
116
|
+
EbizMessage.success('确认操作');
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
// 取消事件处理
|
|
120
|
+
const handleCancel = () => {
|
|
121
|
+
EbizMessage.info('取消操作');
|
|
122
|
+
};
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
<style lang="less" scoped>
|
|
126
|
+
.popconfirm-example {
|
|
127
|
+
padding: 20px;
|
|
128
|
+
|
|
129
|
+
h2 {
|
|
130
|
+
margin-bottom: 24px;
|
|
131
|
+
font-weight: bold;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
h3 {
|
|
135
|
+
margin-top: 24px;
|
|
136
|
+
margin-bottom: 16px;
|
|
137
|
+
font-weight: bold;
|
|
138
|
+
font-size: 16px;
|
|
139
|
+
border-left: 4px solid #0052d9;
|
|
140
|
+
padding-left: 12px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.example-item {
|
|
144
|
+
margin-bottom: 24px;
|
|
145
|
+
padding: 16px;
|
|
146
|
+
border: 1px solid #eee;
|
|
147
|
+
border-radius: 6px;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
</style>
|