ct-component-plus 0.0.42 → 0.0.43
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 +36 -36
- package/packages/components/button/index.js +8 -8
- package/packages/components/button/src/button.vue +171 -171
- package/packages/components/cascader/index.js +7 -7
- package/packages/components/cascader/src/cascader.vue +247 -247
- package/packages/components/cascader/src/ct-cascader.vue +260 -260
- package/packages/components/cascader/src/index.js +50 -50
- package/packages/components/checkbox/index.js +7 -7
- package/packages/components/checkbox/src/checkbox.vue +51 -51
- package/packages/components/checkbox/src/index.js +12 -12
- package/packages/components/date-picker/index.js +8 -8
- package/packages/components/date-picker/src/clear-icon.vue +2 -2
- package/packages/components/date-picker/src/date-icon.vue +2 -2
- package/packages/components/date-picker/src/date-picker.vue +77 -77
- package/packages/components/date-picker/src/index.js +33 -33
- package/packages/components/dialog/index.js +8 -8
- package/packages/components/dialog/src/dialog.vue +103 -103
- package/packages/components/empty/index.js +8 -8
- package/packages/components/empty/src/empty.vue +97 -97
- package/packages/components/index.js +81 -81
- package/packages/components/input/index.js +7 -7
- package/packages/components/input/src/index.js +13 -13
- package/packages/components/input/src/input.vue +106 -106
- package/packages/components/input-range/index.js +7 -7
- package/packages/components/input-range/src/index.js +29 -29
- package/packages/components/input-range/src/input-range.vue +233 -233
- package/packages/components/loading/index.js +7 -7
- package/packages/components/loading/src/CtLoading.vue +74 -74
- package/packages/components/loading/src/beating.vue +71 -71
- package/packages/components/loading/src/progress.vue +120 -120
- package/packages/components/loading/src/spinner.vue +38 -38
- package/packages/components/menu/index.js +7 -7
- package/packages/components/menu/src/item.vue +46 -46
- package/packages/components/menu/src/link.vue +28 -28
- package/packages/components/menu/src/logo.vue +25 -25
- package/packages/components/menu/src/menu-item.vue +103 -103
- package/packages/components/menu/src/menu.vue +191 -191
- package/packages/components/menu/src/utils/index.js +4 -4
- package/packages/components/message/icon/ErrorIcon.vue +25 -25
- package/packages/components/message/icon/InfoIcon.vue +25 -25
- package/packages/components/message/icon/SuccessIcon.vue +25 -25
- package/packages/components/message/icon/WarningIcon.vue +25 -25
- package/packages/components/message/index.js +8 -8
- package/packages/components/message/src/method.js +54 -54
- package/packages/components/message-box/index.js +7 -7
- package/packages/components/message-box/src/message-box.vue +107 -107
- package/packages/components/page/index.js +7 -7
- package/packages/components/page/src/modules/DownloadButton.vue +21 -21
- package/packages/components/page/src/modules/TableTitle.vue +151 -151
- package/packages/components/page/src/page.vue +382 -382
- package/packages/components/pagination/index.js +7 -7
- package/packages/components/pagination/src/pagination.vue +36 -36
- package/packages/components/radio/index.js +7 -7
- package/packages/components/radio/src/index.js +12 -12
- package/packages/components/radio/src/radio.vue +47 -47
- package/packages/components/search-box/index.js +24 -24
- package/packages/components/search-box/src/index.js +29 -29
- package/packages/components/search-box/src/search-box.vue +250 -251
- package/packages/components/search-box/src/slot.vue +4 -4
- package/packages/components/select/index.js +7 -7
- package/packages/components/select/src/arrow-down.vue +2 -2
- package/packages/components/select/src/clear-icon.vue +2 -2
- package/packages/components/select/src/empty.vue +13 -13
- package/packages/components/select/src/index.js +51 -51
- package/packages/components/select/src/select.vue +380 -380
- package/packages/components/table/index.js +7 -7
- package/packages/components/table/src/TableSort.vue +179 -179
- package/packages/components/table/src/index.js +70 -66
- package/packages/components/table/src/table.vue +287 -287
- package/packages/components/tabs/index.js +7 -7
- package/packages/components/tabs/src/tabs.vue +225 -225
- package/packages/components/year-select/index.js +7 -7
- package/packages/components/year-select/src/index.js +44 -44
- package/packages/components/year-select/src/year-select.vue +273 -273
- package/packages/echarts/bar/index.js +63 -63
- package/packages/echarts/base.js +99 -99
- package/packages/echarts/line/index.js +106 -106
- package/packages/hooks/index.js +5 -5
- package/packages/hooks/use-buried/index.js +46 -46
- package/packages/hooks/use-checked-all/index.js +37 -37
- package/packages/hooks/use-echarts/index.js +1 -1
- package/packages/hooks/use-echarts/use-bar/index.js +72 -72
- package/packages/hooks/use-echarts/use-line/index.js +88 -88
- package/packages/hooks/use-namespace/index.js +65 -65
- package/packages/hooks/use-search-component/index.js +28 -28
- package/packages/style/element.less +725 -725
- package/packages/style/index.js +2 -2
- package/packages/style/init.less +114 -114
- package/packages/utils/index.js +1 -1
- package/packages/utils/operate.js +77 -77
- package/packages/utils/types.js +35 -35
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-checkbox-group :class="[ns.b()]" v-model="showValue" ref="checkboxRef">
|
|
3
|
-
<el-checkbox
|
|
4
|
-
:class="[ns.e('item')]"
|
|
5
|
-
v-for="item in optionList"
|
|
6
|
-
:key="item.value"
|
|
7
|
-
:label="item.value"
|
|
8
|
-
:disabled="item.disabled">
|
|
9
|
-
<template #default>
|
|
10
|
-
<slot v-bind="item">
|
|
11
|
-
{{ item.label }}
|
|
12
|
-
</slot>
|
|
13
|
-
</template>
|
|
14
|
-
</el-checkbox>
|
|
15
|
-
</el-checkbox-group>
|
|
16
|
-
</template>
|
|
17
|
-
|
|
18
|
-
<script setup>
|
|
19
|
-
import { computed, onMounted, ref } from "vue";
|
|
20
|
-
import { useNamespace, useBuriedParams } from "../../../hooks";
|
|
21
|
-
import { checkboxEmits, checkboxProps } from "./index";
|
|
22
|
-
const props = defineProps(checkboxProps);
|
|
23
|
-
const emit = defineEmits(checkboxEmits);
|
|
24
|
-
|
|
25
|
-
const ns = useNamespace("checkbox");
|
|
26
|
-
const checkboxRef = ref(null);
|
|
27
|
-
const showValue = computed({
|
|
28
|
-
get() {
|
|
29
|
-
return props.modelValue;
|
|
30
|
-
},
|
|
31
|
-
set(newValue) {
|
|
32
|
-
emit("update:modelValue", newValue);
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
const optionList = computed(() => {
|
|
36
|
-
return props.options;
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
useBuriedParams(props, emit, {
|
|
40
|
-
getContent: (value) => {
|
|
41
|
-
const item = optionList.value.find((item) => item.value === value);
|
|
42
|
-
return item ? item.label : "";
|
|
43
|
-
},
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
defineExpose({
|
|
47
|
-
ref: checkboxRef,
|
|
48
|
-
});
|
|
49
|
-
onMounted(() => {});
|
|
50
|
-
</script>
|
|
51
|
-
<style lang="less"></style>
|
|
1
|
+
<template>
|
|
2
|
+
<el-checkbox-group :class="[ns.b()]" v-model="showValue" ref="checkboxRef">
|
|
3
|
+
<el-checkbox
|
|
4
|
+
:class="[ns.e('item')]"
|
|
5
|
+
v-for="item in optionList"
|
|
6
|
+
:key="item.value"
|
|
7
|
+
:label="item.value"
|
|
8
|
+
:disabled="item.disabled">
|
|
9
|
+
<template #default>
|
|
10
|
+
<slot v-bind="item">
|
|
11
|
+
{{ item.label }}
|
|
12
|
+
</slot>
|
|
13
|
+
</template>
|
|
14
|
+
</el-checkbox>
|
|
15
|
+
</el-checkbox-group>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script setup>
|
|
19
|
+
import { computed, onMounted, ref } from "vue";
|
|
20
|
+
import { useNamespace, useBuriedParams } from "../../../hooks";
|
|
21
|
+
import { checkboxEmits, checkboxProps } from "./index";
|
|
22
|
+
const props = defineProps(checkboxProps);
|
|
23
|
+
const emit = defineEmits(checkboxEmits);
|
|
24
|
+
|
|
25
|
+
const ns = useNamespace("checkbox");
|
|
26
|
+
const checkboxRef = ref(null);
|
|
27
|
+
const showValue = computed({
|
|
28
|
+
get() {
|
|
29
|
+
return props.modelValue;
|
|
30
|
+
},
|
|
31
|
+
set(newValue) {
|
|
32
|
+
emit("update:modelValue", newValue);
|
|
33
|
+
},
|
|
34
|
+
});
|
|
35
|
+
const optionList = computed(() => {
|
|
36
|
+
return props.options;
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
useBuriedParams(props, emit, {
|
|
40
|
+
getContent: (value) => {
|
|
41
|
+
const item = optionList.value.find((item) => item.value === value);
|
|
42
|
+
return item ? item.label : "";
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
defineExpose({
|
|
47
|
+
ref: checkboxRef,
|
|
48
|
+
});
|
|
49
|
+
onMounted(() => {});
|
|
50
|
+
</script>
|
|
51
|
+
<style lang="less"></style>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { buriedParamsKey, searchComponentProps } from '../../../hooks';
|
|
2
|
-
|
|
3
|
-
export const checkboxEmits = ["update:modelValue", buriedParamsKey];
|
|
4
|
-
export const checkboxProps = {
|
|
5
|
-
...searchComponentProps,
|
|
6
|
-
modelValue: Array,
|
|
7
|
-
options: {
|
|
8
|
-
type: Array,
|
|
9
|
-
default() {
|
|
10
|
-
return []
|
|
11
|
-
}
|
|
12
|
-
}
|
|
1
|
+
import { buriedParamsKey, searchComponentProps } from '../../../hooks';
|
|
2
|
+
|
|
3
|
+
export const checkboxEmits = ["update:modelValue", buriedParamsKey];
|
|
4
|
+
export const checkboxProps = {
|
|
5
|
+
...searchComponentProps,
|
|
6
|
+
modelValue: Array,
|
|
7
|
+
options: {
|
|
8
|
+
type: Array,
|
|
9
|
+
default() {
|
|
10
|
+
return []
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
13
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import CtDatePicker from './src/date-picker.vue';
|
|
2
|
-
|
|
3
|
-
/* istanbul ignore next */
|
|
4
|
-
CtDatePicker.install = function (Vue) {
|
|
5
|
-
// TODO 这里D组件名是这这里写死的,不是使用CtdatePicker.name的形式,因为setup里面不可以直接什么组件的name属性,故而这里没有这个属性,后续可以考虑使用defineOptions(需要安装unplugin-vue-macros插件)
|
|
6
|
-
Vue.component('CtDatePicker', CtDatePicker);
|
|
7
|
-
};
|
|
8
|
-
|
|
1
|
+
import CtDatePicker from './src/date-picker.vue';
|
|
2
|
+
|
|
3
|
+
/* istanbul ignore next */
|
|
4
|
+
CtDatePicker.install = function (Vue) {
|
|
5
|
+
// TODO 这里D组件名是这这里写死的,不是使用CtdatePicker.name的形式,因为setup里面不可以直接什么组件的name属性,故而这里没有这个属性,后续可以考虑使用defineOptions(需要安装unplugin-vue-macros插件)
|
|
6
|
+
Vue.component('CtDatePicker', CtDatePicker);
|
|
7
|
+
};
|
|
8
|
+
|
|
9
9
|
export default CtDatePicker;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<ct-icon name="close_line"></ct-icon>
|
|
1
|
+
<template>
|
|
2
|
+
<ct-icon name="close_line"></ct-icon>
|
|
3
3
|
</template>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<ct-icon name="date_line"></ct-icon>
|
|
1
|
+
<template>
|
|
2
|
+
<ct-icon name="date_line"></ct-icon>
|
|
3
3
|
</template>
|
|
@@ -1,77 +1,77 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-date-picker
|
|
3
|
-
:class="[ns.b()]"
|
|
4
|
-
v-model="showValue"
|
|
5
|
-
:value-format="valueFormat"
|
|
6
|
-
:range-separator="rangeSeparator"
|
|
7
|
-
:clear-icon="clearIcon"
|
|
8
|
-
:prefix-icon="prefixIcon"
|
|
9
|
-
:unlink-panels="unlinkPanels"
|
|
10
|
-
v-bind="rawAttr">
|
|
11
|
-
<template #default="cell">
|
|
12
|
-
<slot v-bind="cell"></slot>
|
|
13
|
-
</template>
|
|
14
|
-
</el-date-picker>
|
|
15
|
-
</template>
|
|
16
|
-
|
|
17
|
-
<script setup>
|
|
18
|
-
import { computed, onMounted, useAttrs } from "vue";
|
|
19
|
-
import { useNamespace, useBuriedParams } from "../../../hooks";
|
|
20
|
-
import { isFunction, isArray } from "../../../utils";
|
|
21
|
-
import { datePickerEmits, datePickerProps } from "./index";
|
|
22
|
-
const props = defineProps(datePickerProps);
|
|
23
|
-
const emit = defineEmits(datePickerEmits);
|
|
24
|
-
const attr = useAttrs();
|
|
25
|
-
const ns = useNamespace("date-picker");
|
|
26
|
-
|
|
27
|
-
const showValue = computed({
|
|
28
|
-
get() {
|
|
29
|
-
return props.modelValue;
|
|
30
|
-
},
|
|
31
|
-
set(newValue) {
|
|
32
|
-
let val = newValue;
|
|
33
|
-
const defaultCount = 24 * 60 * 60 * 1000 - 1000;
|
|
34
|
-
const rawType = props.rawAttr?.type || attr.type;
|
|
35
|
-
try {
|
|
36
|
-
if (props.valueFormat === "x") {
|
|
37
|
-
if (isFunction(props.addTimestamp)) {
|
|
38
|
-
val = props.addTimestamp(val);
|
|
39
|
-
} else if (rawType?.includes && rawType.includes("time")) {
|
|
40
|
-
// 包含自己选时间的情况,不需要添加默认的时间戳
|
|
41
|
-
} else if (isArray(val)) {
|
|
42
|
-
if (isArray(props.addTimestamp)) {
|
|
43
|
-
val = val.map((item, index) => {
|
|
44
|
-
if (!item) return item;
|
|
45
|
-
return +props.addTimestamp[index] + item;
|
|
46
|
-
});
|
|
47
|
-
} else {
|
|
48
|
-
if (attr.type !== "dates") {
|
|
49
|
-
val[1] = val[1] ? val[1] + defaultCount : val[1];
|
|
50
|
-
} else {
|
|
51
|
-
val.forEach((item) => item + defaultCount);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
} else if (val) {
|
|
55
|
-
val = val + (props.addTimestamp || defaultCount);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
} catch (error) {
|
|
59
|
-
console.error(error);
|
|
60
|
-
}
|
|
61
|
-
emit("update:modelValue", val);
|
|
62
|
-
},
|
|
63
|
-
});
|
|
64
|
-
useBuriedParams(props, emit, {
|
|
65
|
-
getContent: (val) => {
|
|
66
|
-
if (!val) return "";
|
|
67
|
-
try {
|
|
68
|
-
return new Date(val).toLocaleString();
|
|
69
|
-
} catch (error) {
|
|
70
|
-
console.error(error);
|
|
71
|
-
return val;
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
});
|
|
75
|
-
onMounted(() => {});
|
|
76
|
-
</script>
|
|
77
|
-
<style lang="less"></style>
|
|
1
|
+
<template>
|
|
2
|
+
<el-date-picker
|
|
3
|
+
:class="[ns.b()]"
|
|
4
|
+
v-model="showValue"
|
|
5
|
+
:value-format="valueFormat"
|
|
6
|
+
:range-separator="rangeSeparator"
|
|
7
|
+
:clear-icon="clearIcon"
|
|
8
|
+
:prefix-icon="prefixIcon"
|
|
9
|
+
:unlink-panels="unlinkPanels"
|
|
10
|
+
v-bind="rawAttr">
|
|
11
|
+
<template #default="cell">
|
|
12
|
+
<slot v-bind="cell"></slot>
|
|
13
|
+
</template>
|
|
14
|
+
</el-date-picker>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup>
|
|
18
|
+
import { computed, onMounted, useAttrs } from "vue";
|
|
19
|
+
import { useNamespace, useBuriedParams } from "../../../hooks";
|
|
20
|
+
import { isFunction, isArray } from "../../../utils";
|
|
21
|
+
import { datePickerEmits, datePickerProps } from "./index";
|
|
22
|
+
const props = defineProps(datePickerProps);
|
|
23
|
+
const emit = defineEmits(datePickerEmits);
|
|
24
|
+
const attr = useAttrs();
|
|
25
|
+
const ns = useNamespace("date-picker");
|
|
26
|
+
|
|
27
|
+
const showValue = computed({
|
|
28
|
+
get() {
|
|
29
|
+
return props.modelValue;
|
|
30
|
+
},
|
|
31
|
+
set(newValue) {
|
|
32
|
+
let val = newValue;
|
|
33
|
+
const defaultCount = 24 * 60 * 60 * 1000 - 1000;
|
|
34
|
+
const rawType = props.rawAttr?.type || attr.type;
|
|
35
|
+
try {
|
|
36
|
+
if (props.valueFormat === "x") {
|
|
37
|
+
if (isFunction(props.addTimestamp)) {
|
|
38
|
+
val = props.addTimestamp(val);
|
|
39
|
+
} else if (rawType?.includes && rawType.includes("time")) {
|
|
40
|
+
// 包含自己选时间的情况,不需要添加默认的时间戳
|
|
41
|
+
} else if (isArray(val)) {
|
|
42
|
+
if (isArray(props.addTimestamp)) {
|
|
43
|
+
val = val.map((item, index) => {
|
|
44
|
+
if (!item) return item;
|
|
45
|
+
return +props.addTimestamp[index] + item;
|
|
46
|
+
});
|
|
47
|
+
} else {
|
|
48
|
+
if (attr.type !== "dates") {
|
|
49
|
+
val[1] = val[1] ? val[1] + defaultCount : val[1];
|
|
50
|
+
} else {
|
|
51
|
+
val.forEach((item) => item + defaultCount);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
} else if (val) {
|
|
55
|
+
val = val + (props.addTimestamp || defaultCount);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
} catch (error) {
|
|
59
|
+
console.error(error);
|
|
60
|
+
}
|
|
61
|
+
emit("update:modelValue", val);
|
|
62
|
+
},
|
|
63
|
+
});
|
|
64
|
+
useBuriedParams(props, emit, {
|
|
65
|
+
getContent: (val) => {
|
|
66
|
+
if (!val) return "";
|
|
67
|
+
try {
|
|
68
|
+
return new Date(val).toLocaleString();
|
|
69
|
+
} catch (error) {
|
|
70
|
+
console.error(error);
|
|
71
|
+
return val;
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
});
|
|
75
|
+
onMounted(() => {});
|
|
76
|
+
</script>
|
|
77
|
+
<style lang="less"></style>
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { buriedParamsKey, searchComponentProps } from '../../../hooks';
|
|
2
|
-
import clearIcon from './clear-icon.vue';
|
|
3
|
-
import dateIcon from './date-icon.vue';
|
|
4
|
-
|
|
5
|
-
export const datePickerEmits = ["update:modelValue", buriedParamsKey];
|
|
6
|
-
export const datePickerProps = {
|
|
7
|
-
...searchComponentProps,
|
|
8
|
-
modelValue: [Date, Number, String, Array],
|
|
9
|
-
valueFormat: {
|
|
10
|
-
type: String,
|
|
11
|
-
default: 'x'
|
|
12
|
-
},
|
|
13
|
-
addTimestamp: [Number, String, Array, Function],
|
|
14
|
-
rangeSeparator: {
|
|
15
|
-
type: String,
|
|
16
|
-
default: '至',
|
|
17
|
-
},
|
|
18
|
-
clearIcon: {
|
|
19
|
-
type: [String, Object],
|
|
20
|
-
default() {
|
|
21
|
-
return clearIcon
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
prefixIcon: {
|
|
25
|
-
type: [String, Object],
|
|
26
|
-
default() {
|
|
27
|
-
return dateIcon
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
unlinkPanels: {
|
|
31
|
-
type: Boolean,
|
|
32
|
-
default: true
|
|
33
|
-
}
|
|
1
|
+
import { buriedParamsKey, searchComponentProps } from '../../../hooks';
|
|
2
|
+
import clearIcon from './clear-icon.vue';
|
|
3
|
+
import dateIcon from './date-icon.vue';
|
|
4
|
+
|
|
5
|
+
export const datePickerEmits = ["update:modelValue", buriedParamsKey];
|
|
6
|
+
export const datePickerProps = {
|
|
7
|
+
...searchComponentProps,
|
|
8
|
+
modelValue: [Date, Number, String, Array],
|
|
9
|
+
valueFormat: {
|
|
10
|
+
type: String,
|
|
11
|
+
default: 'x'
|
|
12
|
+
},
|
|
13
|
+
addTimestamp: [Number, String, Array, Function],
|
|
14
|
+
rangeSeparator: {
|
|
15
|
+
type: String,
|
|
16
|
+
default: '至',
|
|
17
|
+
},
|
|
18
|
+
clearIcon: {
|
|
19
|
+
type: [String, Object],
|
|
20
|
+
default() {
|
|
21
|
+
return clearIcon
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
prefixIcon: {
|
|
25
|
+
type: [String, Object],
|
|
26
|
+
default() {
|
|
27
|
+
return dateIcon
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
unlinkPanels: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: true
|
|
33
|
+
}
|
|
34
34
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import CtDialog from './src/dialog.vue';
|
|
2
|
-
|
|
3
|
-
/* istanbul ignore next */
|
|
4
|
-
CtDialog.install = function (Vue) {
|
|
5
|
-
// TODO 这里的组件名是这这里写死的,不是使用CtButton.name的形式,因为setup里面不可以直接什么组件的name属性,故而这里没有这个属性,后续可以考虑使用defineOptions(需要安装unplugin-vue-macros插件)
|
|
6
|
-
Vue.component('CtDialog', CtDialog);
|
|
7
|
-
};
|
|
8
|
-
|
|
1
|
+
import CtDialog from './src/dialog.vue';
|
|
2
|
+
|
|
3
|
+
/* istanbul ignore next */
|
|
4
|
+
CtDialog.install = function (Vue) {
|
|
5
|
+
// TODO 这里的组件名是这这里写死的,不是使用CtButton.name的形式,因为setup里面不可以直接什么组件的name属性,故而这里没有这个属性,后续可以考虑使用defineOptions(需要安装unplugin-vue-macros插件)
|
|
6
|
+
Vue.component('CtDialog', CtDialog);
|
|
7
|
+
};
|
|
8
|
+
|
|
9
9
|
export default CtDialog;
|
|
@@ -1,104 +1,104 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-dialog
|
|
3
|
-
:class="[ns.b()]"
|
|
4
|
-
v-model="dialogVisible"
|
|
5
|
-
:title="title"
|
|
6
|
-
:width="width"
|
|
7
|
-
:show-close="false"
|
|
8
|
-
v-bind="$attrs"
|
|
9
|
-
>
|
|
10
|
-
<template #header="{ close, titleId, titleClass }">
|
|
11
|
-
<div :id="titleId" :class="[titleClass, ns.e('title')]">{{ title }}</div>
|
|
12
|
-
<ct-icon
|
|
13
|
-
:class="ns.e('close-btn')"
|
|
14
|
-
name="close_line"
|
|
15
|
-
size="16"
|
|
16
|
-
color="#d9dee7"
|
|
17
|
-
@click="close"
|
|
18
|
-
></ct-icon>
|
|
19
|
-
</template>
|
|
20
|
-
<slot></slot>
|
|
21
|
-
<template #footer>
|
|
22
|
-
<div :class="ns.e('footer')" v-if="!hasFooter">
|
|
23
|
-
<ct-button @click="handleConfirm">确定</ct-button>
|
|
24
|
-
</div>
|
|
25
|
-
<slot name="footer" v-else></slot>
|
|
26
|
-
</template>
|
|
27
|
-
</el-dialog>
|
|
28
|
-
</template>
|
|
29
|
-
|
|
30
|
-
<script setup>
|
|
31
|
-
import { ref, reactive, onMounted, computed } from "vue";
|
|
32
|
-
import { useNamespace } from "../../../hooks";
|
|
33
|
-
const ns = useNamespace("dialog");
|
|
34
|
-
|
|
35
|
-
const props = defineProps({
|
|
36
|
-
modelValue: {
|
|
37
|
-
type: Boolean,
|
|
38
|
-
required: true,
|
|
39
|
-
},
|
|
40
|
-
title: {
|
|
41
|
-
type: String,
|
|
42
|
-
},
|
|
43
|
-
width: {
|
|
44
|
-
type: [String, Number],
|
|
45
|
-
default: 480,
|
|
46
|
-
},
|
|
47
|
-
hasFooter: {
|
|
48
|
-
type: Boolean,
|
|
49
|
-
default: false,
|
|
50
|
-
},
|
|
51
|
-
});
|
|
52
|
-
const emit = defineEmits(["update:modelValue", "handleConfirm"]);
|
|
53
|
-
|
|
54
|
-
const dialogVisible = computed({
|
|
55
|
-
get() {
|
|
56
|
-
return props.modelValue;
|
|
57
|
-
},
|
|
58
|
-
set(val) {
|
|
59
|
-
emit("update:modelValue", val);
|
|
60
|
-
},
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
const handleConfirm = () => {
|
|
64
|
-
emit("handleConfirm");
|
|
65
|
-
dialogVisible.value = false;
|
|
66
|
-
};
|
|
67
|
-
</script>
|
|
68
|
-
|
|
69
|
-
<style lang='less'>
|
|
70
|
-
.el-dialog.ct-dialog {
|
|
71
|
-
@R: .el-dialog;
|
|
72
|
-
@{R}__header {
|
|
73
|
-
padding: 26px 40px !important;
|
|
74
|
-
margin-right: 0 !important;
|
|
75
|
-
position: relative;
|
|
76
|
-
}
|
|
77
|
-
@{R}__title {
|
|
78
|
-
display: flex;
|
|
79
|
-
align-items: center;
|
|
80
|
-
&::before {
|
|
81
|
-
content: "";
|
|
82
|
-
width: 8px;
|
|
83
|
-
height: 8px;
|
|
84
|
-
border-radius: var(--ct-border-radius-s);
|
|
85
|
-
margin-right: 12px;
|
|
86
|
-
background: var(--ct-color-primary);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
.ct-dialog__close-btn {
|
|
90
|
-
position: absolute;
|
|
91
|
-
top: 20px;
|
|
92
|
-
right: 20px;
|
|
93
|
-
cursor: pointer;
|
|
94
|
-
}
|
|
95
|
-
@{R}__body {
|
|
96
|
-
padding: 0 40px 32px !important;
|
|
97
|
-
font-size: 15px;
|
|
98
|
-
line-height: 28px;
|
|
99
|
-
}
|
|
100
|
-
@{R}__footer {
|
|
101
|
-
padding: 0 40px 32px !important;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
1
|
+
<template>
|
|
2
|
+
<el-dialog
|
|
3
|
+
:class="[ns.b()]"
|
|
4
|
+
v-model="dialogVisible"
|
|
5
|
+
:title="title"
|
|
6
|
+
:width="width"
|
|
7
|
+
:show-close="false"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template #header="{ close, titleId, titleClass }">
|
|
11
|
+
<div :id="titleId" :class="[titleClass, ns.e('title')]">{{ title }}</div>
|
|
12
|
+
<ct-icon
|
|
13
|
+
:class="ns.e('close-btn')"
|
|
14
|
+
name="close_line"
|
|
15
|
+
size="16"
|
|
16
|
+
color="#d9dee7"
|
|
17
|
+
@click="close"
|
|
18
|
+
></ct-icon>
|
|
19
|
+
</template>
|
|
20
|
+
<slot></slot>
|
|
21
|
+
<template #footer>
|
|
22
|
+
<div :class="ns.e('footer')" v-if="!hasFooter">
|
|
23
|
+
<ct-button @click="handleConfirm">确定</ct-button>
|
|
24
|
+
</div>
|
|
25
|
+
<slot name="footer" v-else></slot>
|
|
26
|
+
</template>
|
|
27
|
+
</el-dialog>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script setup>
|
|
31
|
+
import { ref, reactive, onMounted, computed } from "vue";
|
|
32
|
+
import { useNamespace } from "../../../hooks";
|
|
33
|
+
const ns = useNamespace("dialog");
|
|
34
|
+
|
|
35
|
+
const props = defineProps({
|
|
36
|
+
modelValue: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
required: true,
|
|
39
|
+
},
|
|
40
|
+
title: {
|
|
41
|
+
type: String,
|
|
42
|
+
},
|
|
43
|
+
width: {
|
|
44
|
+
type: [String, Number],
|
|
45
|
+
default: 480,
|
|
46
|
+
},
|
|
47
|
+
hasFooter: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
default: false,
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
const emit = defineEmits(["update:modelValue", "handleConfirm"]);
|
|
53
|
+
|
|
54
|
+
const dialogVisible = computed({
|
|
55
|
+
get() {
|
|
56
|
+
return props.modelValue;
|
|
57
|
+
},
|
|
58
|
+
set(val) {
|
|
59
|
+
emit("update:modelValue", val);
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
const handleConfirm = () => {
|
|
64
|
+
emit("handleConfirm");
|
|
65
|
+
dialogVisible.value = false;
|
|
66
|
+
};
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<style lang='less'>
|
|
70
|
+
.el-dialog.ct-dialog {
|
|
71
|
+
@R: .el-dialog;
|
|
72
|
+
@{R}__header {
|
|
73
|
+
padding: 26px 40px !important;
|
|
74
|
+
margin-right: 0 !important;
|
|
75
|
+
position: relative;
|
|
76
|
+
}
|
|
77
|
+
@{R}__title {
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
&::before {
|
|
81
|
+
content: "";
|
|
82
|
+
width: 8px;
|
|
83
|
+
height: 8px;
|
|
84
|
+
border-radius: var(--ct-border-radius-s);
|
|
85
|
+
margin-right: 12px;
|
|
86
|
+
background: var(--ct-color-primary);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
.ct-dialog__close-btn {
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: 20px;
|
|
92
|
+
right: 20px;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
}
|
|
95
|
+
@{R}__body {
|
|
96
|
+
padding: 0 40px 32px !important;
|
|
97
|
+
font-size: 15px;
|
|
98
|
+
line-height: 28px;
|
|
99
|
+
}
|
|
100
|
+
@{R}__footer {
|
|
101
|
+
padding: 0 40px 32px !important;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
104
|
</style>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import CtEmpty from './src/empty.vue';
|
|
2
|
-
|
|
3
|
-
/* istanbul ignore next */
|
|
4
|
-
CtEmpty.install = function (Vue) {
|
|
5
|
-
// TODO 这里的组件名是这这里写死的,不是使用CtButton.name的形式,因为setup里面不可以直接什么组件的name属性,故而这里没有这个属性,后续可以考虑使用defineOptions(需要安装unplugin-vue-macros插件)
|
|
6
|
-
Vue.component('CtEmpty', CtEmpty);
|
|
7
|
-
};
|
|
8
|
-
|
|
1
|
+
import CtEmpty from './src/empty.vue';
|
|
2
|
+
|
|
3
|
+
/* istanbul ignore next */
|
|
4
|
+
CtEmpty.install = function (Vue) {
|
|
5
|
+
// TODO 这里的组件名是这这里写死的,不是使用CtButton.name的形式,因为setup里面不可以直接什么组件的name属性,故而这里没有这个属性,后续可以考虑使用defineOptions(需要安装unplugin-vue-macros插件)
|
|
6
|
+
Vue.component('CtEmpty', CtEmpty);
|
|
7
|
+
};
|
|
8
|
+
|
|
9
9
|
export default CtEmpty;
|