@ebiz/designer-components 0.0.18-beta.37 → 0.0.18-beta.38
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 +1 -1
- package/src/components/Button.vue +80 -25
- package/src/components/EbizTreeSelector.vue +512 -509
- package/src/index.js +1 -4
- package/src/router/index.js +0 -12
- package/src/views/Button.vue +7 -3
- package/src/views/Home.vue +1 -3
- package/src/views/TreeSelectorDemo.vue +245 -245
- package/dist/designer-components.css +0 -1
- package/dist/favicon.ico +0 -0
- package/dist/index.mjs +0 -124200
- package/src/components/EbizTimePicker.vue +0 -144
- package/src/views/TimePickerDemo.vue +0 -147
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<t-time-picker
|
|
3
|
-
v-bind="$attrs"
|
|
4
|
-
:value="modelValue"
|
|
5
|
-
:allow-input="allowInput"
|
|
6
|
-
:clearable="clearable"
|
|
7
|
-
:disabled="disabled"
|
|
8
|
-
:disable-time="disableTime"
|
|
9
|
-
:format="format"
|
|
10
|
-
:input-props="inputProps"
|
|
11
|
-
:placeholder="placeholder"
|
|
12
|
-
:popup-props="popupProps"
|
|
13
|
-
:size="size"
|
|
14
|
-
:steps="steps"
|
|
15
|
-
:range="range"
|
|
16
|
-
:range-separator="rangeSeparator"
|
|
17
|
-
:tips="tips"
|
|
18
|
-
@change="handleChange"
|
|
19
|
-
@blur="$emit('blur', $event)"
|
|
20
|
-
@focus="$emit('focus', $event)"
|
|
21
|
-
@close="$emit('close', $event)"
|
|
22
|
-
@open="$emit('open', $event)"
|
|
23
|
-
@dayclick="$emit('dayclick', $event)"
|
|
24
|
-
@pick="$emit('pick', $event)"
|
|
25
|
-
>
|
|
26
|
-
<template v-if="$slots.suffixIcon" #suffixIcon>
|
|
27
|
-
<slot name="suffixIcon"></slot>
|
|
28
|
-
</template>
|
|
29
|
-
<template v-if="$slots.panel" #panel="slotProps">
|
|
30
|
-
<slot name="panel" v-bind="slotProps"></slot>
|
|
31
|
-
</template>
|
|
32
|
-
<template v-if="$slots.prepend" #prepend>
|
|
33
|
-
<slot name="prepend"></slot>
|
|
34
|
-
</template>
|
|
35
|
-
<template v-if="$slots.tips" #tips>
|
|
36
|
-
<slot name="tips"></slot>
|
|
37
|
-
</template>
|
|
38
|
-
</t-time-picker>
|
|
39
|
-
</template>
|
|
40
|
-
|
|
41
|
-
<script setup>
|
|
42
|
-
import { TimePicker as TTimePicker } from 'tdesign-vue-next';
|
|
43
|
-
import { computed } from 'vue';
|
|
44
|
-
|
|
45
|
-
const props = defineProps({
|
|
46
|
-
// 选中值
|
|
47
|
-
modelValue: {
|
|
48
|
-
type: [String, Array],
|
|
49
|
-
default: '',
|
|
50
|
-
},
|
|
51
|
-
// 是否允许直接输入时间
|
|
52
|
-
allowInput: {
|
|
53
|
-
type: Boolean,
|
|
54
|
-
default: true,
|
|
55
|
-
},
|
|
56
|
-
// 是否允许清除选中值
|
|
57
|
-
clearable: {
|
|
58
|
-
type: Boolean,
|
|
59
|
-
default: true,
|
|
60
|
-
},
|
|
61
|
-
// 是否禁用组件
|
|
62
|
-
disabled: {
|
|
63
|
-
type: Boolean,
|
|
64
|
-
default: false,
|
|
65
|
-
},
|
|
66
|
-
// 禁用时间项
|
|
67
|
-
disableTime: {
|
|
68
|
-
type: Function,
|
|
69
|
-
default: null,
|
|
70
|
-
},
|
|
71
|
-
// 时间格式
|
|
72
|
-
format: {
|
|
73
|
-
type: String,
|
|
74
|
-
default: 'HH:mm:ss',
|
|
75
|
-
},
|
|
76
|
-
// 透传给输入框的属性
|
|
77
|
-
inputProps: {
|
|
78
|
-
type: Object,
|
|
79
|
-
default: () => ({}),
|
|
80
|
-
},
|
|
81
|
-
// 输入框占位文本
|
|
82
|
-
placeholder: {
|
|
83
|
-
type: String,
|
|
84
|
-
default: '请选择时间',
|
|
85
|
-
},
|
|
86
|
-
// 透传给 popup 组件的属性
|
|
87
|
-
popupProps: {
|
|
88
|
-
type: Object,
|
|
89
|
-
default: () => ({}),
|
|
90
|
-
},
|
|
91
|
-
// 尺寸
|
|
92
|
-
size: {
|
|
93
|
-
type: String,
|
|
94
|
-
default: 'medium',
|
|
95
|
-
validator(val) {
|
|
96
|
-
return ['small', 'medium', 'large'].includes(val);
|
|
97
|
-
},
|
|
98
|
-
},
|
|
99
|
-
// 时间间隔步数
|
|
100
|
-
steps: {
|
|
101
|
-
type: Array,
|
|
102
|
-
default: () => [1, 1, 1],
|
|
103
|
-
},
|
|
104
|
-
// 是否为时间范围选择
|
|
105
|
-
range: {
|
|
106
|
-
type: Boolean,
|
|
107
|
-
default: false,
|
|
108
|
-
},
|
|
109
|
-
// 范围分隔符
|
|
110
|
-
rangeSeparator: {
|
|
111
|
-
type: String,
|
|
112
|
-
default: ' - ',
|
|
113
|
-
},
|
|
114
|
-
// 提示文本
|
|
115
|
-
tips: {
|
|
116
|
-
type: [String, Function],
|
|
117
|
-
default: '',
|
|
118
|
-
},
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
const emit = defineEmits([
|
|
122
|
-
'update:modelValue',
|
|
123
|
-
'change',
|
|
124
|
-
'blur',
|
|
125
|
-
'focus',
|
|
126
|
-
'close',
|
|
127
|
-
'open',
|
|
128
|
-
'dayclick',
|
|
129
|
-
'pick',
|
|
130
|
-
]);
|
|
131
|
-
|
|
132
|
-
// 处理值变更事件
|
|
133
|
-
const handleChange = (value) => {
|
|
134
|
-
emit('update:modelValue', value);
|
|
135
|
-
emit('change', value);
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
</script>
|
|
139
|
-
|
|
140
|
-
<style>
|
|
141
|
-
.t-time-picker {
|
|
142
|
-
width: 100%;
|
|
143
|
-
}
|
|
144
|
-
</style>
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="time-picker-demo">
|
|
3
|
-
<h2>时间选择器 EbizTimePicker</h2>
|
|
4
|
-
|
|
5
|
-
<h3>基本用法</h3>
|
|
6
|
-
<div class="demo-section">
|
|
7
|
-
<EbizTimePicker v-model="value1" placeholder="请选择时间" />
|
|
8
|
-
<div class="demo-value">选中值: {{ value1 }}</div>
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
<h3>时间格式</h3>
|
|
12
|
-
<div class="demo-section">
|
|
13
|
-
<EbizTimePicker v-model="value2" format="HH:mm" placeholder="时分格式 HH:mm" />
|
|
14
|
-
<div class="demo-value">选中值: {{ value2 }}</div>
|
|
15
|
-
</div>
|
|
16
|
-
|
|
17
|
-
<h3>禁用状态</h3>
|
|
18
|
-
<div class="demo-section">
|
|
19
|
-
<EbizTimePicker v-model="value3" disabled placeholder="禁用状态" />
|
|
20
|
-
</div>
|
|
21
|
-
|
|
22
|
-
<h3>时间范围选择</h3>
|
|
23
|
-
<div class="demo-section">
|
|
24
|
-
<EbizTimePicker v-model="value4" range placeholder="请选择时间范围" />
|
|
25
|
-
<div class="demo-value">选中值: {{ value4 }}</div>
|
|
26
|
-
</div>
|
|
27
|
-
|
|
28
|
-
<h3>步长设置</h3>
|
|
29
|
-
<div class="demo-section">
|
|
30
|
-
<EbizTimePicker v-model="value5" :steps="[2, 10, 15]" placeholder="步长：时(2) 分(10) 秒(15)" />
|
|
31
|
-
<div class="demo-value">选中值: {{ value5 }}</div>
|
|
32
|
-
</div>
|
|
33
|
-
|
|
34
|
-
<h3>禁用时间</h3>
|
|
35
|
-
<div class="demo-section">
|
|
36
|
-
<EbizTimePicker v-model="value6" :disable-time="disableTime" placeholder="上午禁用" />
|
|
37
|
-
<div class="demo-value">选中值: {{ value6 }}</div>
|
|
38
|
-
</div>
|
|
39
|
-
|
|
40
|
-
<h3>不同尺寸</h3>
|
|
41
|
-
<div class="demo-section">
|
|
42
|
-
<div class="size-row">
|
|
43
|
-
<EbizTimePicker v-model="value7" size="small" placeholder="小尺寸" />
|
|
44
|
-
<EbizTimePicker v-model="value7" size="medium" placeholder="中尺寸(默认)" />
|
|
45
|
-
<EbizTimePicker v-model="value7" size="large" placeholder="大尺寸" />
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
|
|
49
|
-
<h3>提示信息</h3>
|
|
50
|
-
<div class="demo-section">
|
|
51
|
-
<EbizTimePicker v-model="value8" tips="这是一个提示文本" placeholder="带提示信息" />
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
<h3>前置/后置插槽</h3>
|
|
55
|
-
<div class="demo-section">
|
|
56
|
-
<EbizTimePicker v-model="value9" placeholder="带前置内容">
|
|
57
|
-
<template #prepend>
|
|
58
|
-
<span class="prepend-content">时间:</span>
|
|
59
|
-
</template>
|
|
60
|
-
</EbizTimePicker>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
</template>
|
|
64
|
-
|
|
65
|
-
<script setup>
|
|
66
|
-
import { ref } from 'vue';
|
|
67
|
-
import { EbizTimePicker } from '../index.js';
|
|
68
|
-
|
|
69
|
-
// 基本用法
|
|
70
|
-
const value1 = ref('');
|
|
71
|
-
|
|
72
|
-
// 时间格式
|
|
73
|
-
const value2 = ref('');
|
|
74
|
-
|
|
75
|
-
// 禁用状态
|
|
76
|
-
const value3 = ref('12:30:00');
|
|
77
|
-
|
|
78
|
-
// 时间范围选择
|
|
79
|
-
const value4 = ref(['09:00:00', '18:00:00']);
|
|
80
|
-
|
|
81
|
-
// 步长设置
|
|
82
|
-
const value5 = ref('');
|
|
83
|
-
|
|
84
|
-
// 禁用时间
|
|
85
|
-
const value6 = ref('');
|
|
86
|
-
const disableTime = (h) => {
|
|
87
|
-
// 禁用上午时间段 (0-12点)
|
|
88
|
-
return h < 12;
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
// 不同尺寸
|
|
92
|
-
const value7 = ref('');
|
|
93
|
-
|
|
94
|
-
// 提示信息
|
|
95
|
-
const value8 = ref('');
|
|
96
|
-
|
|
97
|
-
// 前置/后置插槽
|
|
98
|
-
const value9 = ref('');
|
|
99
|
-
</script>
|
|
100
|
-
|
|
101
|
-
<style scoped>
|
|
102
|
-
.time-picker-demo {
|
|
103
|
-
padding: 20px;
|
|
104
|
-
max-width: 800px;
|
|
105
|
-
margin: 0 auto;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
h2 {
|
|
109
|
-
margin-bottom: 30px;
|
|
110
|
-
font-weight: 500;
|
|
111
|
-
border-bottom: 1px solid #eee;
|
|
112
|
-
padding-bottom: 10px;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
h3 {
|
|
116
|
-
margin-top: 30px;
|
|
117
|
-
margin-bottom: 15px;
|
|
118
|
-
font-weight: 400;
|
|
119
|
-
font-size: 18px;
|
|
120
|
-
color: #333;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.demo-section {
|
|
124
|
-
margin-bottom: 30px;
|
|
125
|
-
padding: 20px;
|
|
126
|
-
background-color: #f9f9f9;
|
|
127
|
-
border-radius: 4px;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.demo-value {
|
|
131
|
-
margin-top: 10px;
|
|
132
|
-
color: #606060;
|
|
133
|
-
font-size: 14px;
|
|
134
|
-
padding: 5px 0;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
.size-row {
|
|
138
|
-
display: flex;
|
|
139
|
-
gap: 20px;
|
|
140
|
-
align-items: center;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.prepend-content {
|
|
144
|
-
padding: 0 10px;
|
|
145
|
-
color: #0052D9;
|
|
146
|
-
}
|
|
147
|
-
</style>
|