ct-component-plus 0.0.41 → 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 -62
- package/packages/components/table/src/table.vue +287 -279
- 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 -95
- 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 -724
- 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,98 +1,98 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div :class="[ns.b(), ns.m(type)]">
|
|
3
|
-
<div :class="ns.e('container')">
|
|
4
|
-
<template v-if="imgSrc">
|
|
5
|
-
<img :src="imgSrc" alt="" :class="[ns.e('img')]" />
|
|
6
|
-
</template>
|
|
7
|
-
<template v-else>
|
|
8
|
-
<img :src="showSrc" alt="" :class="[ns.e('img')]" />
|
|
9
|
-
</template>
|
|
10
|
-
<div :class="ns.em('img', 'inner')" v-if="innerText">{{ innerText }}</div>
|
|
11
|
-
<div :class="ns.em('img', 'inner')" v-else>
|
|
12
|
-
<slot name="inner"></slot>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
<div :class="ns.e('hint')" v-if="outerText">{{ outerText }}</div>
|
|
16
|
-
<div :class="ns.e('hint')" v-else>
|
|
17
|
-
<slot name="outer"></slot>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
</template>
|
|
21
|
-
|
|
22
|
-
<script setup>
|
|
23
|
-
import { computed } from "vue";
|
|
24
|
-
import { useNamespace } from "../../../hooks/use-namespace";
|
|
25
|
-
|
|
26
|
-
const ns = useNamespace("empty");
|
|
27
|
-
|
|
28
|
-
const props = defineProps({
|
|
29
|
-
type: {
|
|
30
|
-
type: String,
|
|
31
|
-
default: "no-data",
|
|
32
|
-
},
|
|
33
|
-
imgSrc: {
|
|
34
|
-
type: String,
|
|
35
|
-
},
|
|
36
|
-
innerText: {
|
|
37
|
-
type: String,
|
|
38
|
-
},
|
|
39
|
-
outerText: {
|
|
40
|
-
type: String,
|
|
41
|
-
},
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
const srcList = [
|
|
45
|
-
{
|
|
46
|
-
type: "no-data",
|
|
47
|
-
src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/no_data.png",
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
type: "404",
|
|
51
|
-
src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/404.png",
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
type: "500",
|
|
55
|
-
src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/500.png",
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
type: "502",
|
|
59
|
-
src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/502.png",
|
|
60
|
-
},
|
|
61
|
-
];
|
|
62
|
-
const showSrc = computed(() => {
|
|
63
|
-
return srcList.find((item) => item.type === props.type)?.src;
|
|
64
|
-
});
|
|
65
|
-
</script>
|
|
66
|
-
|
|
67
|
-
<style lang='less'>
|
|
68
|
-
.ct-empty {
|
|
69
|
-
width: 100%;
|
|
70
|
-
height: 100%;
|
|
71
|
-
min-height: 300px;
|
|
72
|
-
display: flex;
|
|
73
|
-
flex-direction: column;
|
|
74
|
-
justify-content: center;
|
|
75
|
-
align-items: center;
|
|
76
|
-
&__container {
|
|
77
|
-
position: relative;
|
|
78
|
-
display: flex;
|
|
79
|
-
justify-content: center;
|
|
80
|
-
align-items: center;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
&__img {
|
|
84
|
-
width: 300px;
|
|
85
|
-
height: 300px;
|
|
86
|
-
|
|
87
|
-
&--inner {
|
|
88
|
-
position: absolute;
|
|
89
|
-
bottom: 10px;
|
|
90
|
-
color: var(--ct-color-grey-transition);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
&__hint {
|
|
94
|
-
margin-top: 10px;
|
|
95
|
-
color: var(--ct-color-grey-transition);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="[ns.b(), ns.m(type)]">
|
|
3
|
+
<div :class="ns.e('container')">
|
|
4
|
+
<template v-if="imgSrc">
|
|
5
|
+
<img :src="imgSrc" alt="" :class="[ns.e('img')]" />
|
|
6
|
+
</template>
|
|
7
|
+
<template v-else>
|
|
8
|
+
<img :src="showSrc" alt="" :class="[ns.e('img')]" />
|
|
9
|
+
</template>
|
|
10
|
+
<div :class="ns.em('img', 'inner')" v-if="innerText">{{ innerText }}</div>
|
|
11
|
+
<div :class="ns.em('img', 'inner')" v-else>
|
|
12
|
+
<slot name="inner"></slot>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
<div :class="ns.e('hint')" v-if="outerText">{{ outerText }}</div>
|
|
16
|
+
<div :class="ns.e('hint')" v-else>
|
|
17
|
+
<slot name="outer"></slot>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script setup>
|
|
23
|
+
import { computed } from "vue";
|
|
24
|
+
import { useNamespace } from "../../../hooks/use-namespace";
|
|
25
|
+
|
|
26
|
+
const ns = useNamespace("empty");
|
|
27
|
+
|
|
28
|
+
const props = defineProps({
|
|
29
|
+
type: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: "no-data",
|
|
32
|
+
},
|
|
33
|
+
imgSrc: {
|
|
34
|
+
type: String,
|
|
35
|
+
},
|
|
36
|
+
innerText: {
|
|
37
|
+
type: String,
|
|
38
|
+
},
|
|
39
|
+
outerText: {
|
|
40
|
+
type: String,
|
|
41
|
+
},
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
const srcList = [
|
|
45
|
+
{
|
|
46
|
+
type: "no-data",
|
|
47
|
+
src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/no_data.png",
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
type: "404",
|
|
51
|
+
src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/404.png",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
type: "500",
|
|
55
|
+
src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/500.png",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
type: "502",
|
|
59
|
+
src: "http://ctfront.oss-cn-hangzhou.aliyuncs.com/Front/cingta-component/v2/502.png",
|
|
60
|
+
},
|
|
61
|
+
];
|
|
62
|
+
const showSrc = computed(() => {
|
|
63
|
+
return srcList.find((item) => item.type === props.type)?.src;
|
|
64
|
+
});
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
<style lang='less'>
|
|
68
|
+
.ct-empty {
|
|
69
|
+
width: 100%;
|
|
70
|
+
height: 100%;
|
|
71
|
+
min-height: 300px;
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
align-items: center;
|
|
76
|
+
&__container {
|
|
77
|
+
position: relative;
|
|
78
|
+
display: flex;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
align-items: center;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&__img {
|
|
84
|
+
width: 300px;
|
|
85
|
+
height: 300px;
|
|
86
|
+
|
|
87
|
+
&--inner {
|
|
88
|
+
position: absolute;
|
|
89
|
+
bottom: 10px;
|
|
90
|
+
color: var(--ct-color-grey-transition);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
&__hint {
|
|
94
|
+
margin-top: 10px;
|
|
95
|
+
color: var(--ct-color-grey-transition);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
98
|
</style>
|
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
import button from './button';
|
|
2
|
-
import radio from './radio';
|
|
3
|
-
import checkbox from './checkbox';
|
|
4
|
-
import input from './input';
|
|
5
|
-
import inputRange from './input-range';
|
|
6
|
-
import select from './select';
|
|
7
|
-
import yearSelect from './year-select';
|
|
8
|
-
import datePicker from './date-picker';
|
|
9
|
-
import cascader from './cascader';
|
|
10
|
-
import tabs from './tabs';
|
|
11
|
-
import pagination from './pagination';
|
|
12
|
-
import menu from './menu';
|
|
13
|
-
|
|
14
|
-
import searchBox from './search-box';
|
|
15
|
-
import table from './table';
|
|
16
|
-
import empty from "./empty";
|
|
17
|
-
import dialog from "./dialog";
|
|
18
|
-
import messageBox from './message-box';
|
|
19
|
-
import CtMessage from './message';
|
|
20
|
-
|
|
21
|
-
import CtLoading from './loading';
|
|
22
|
-
import CtPage from './page';
|
|
23
|
-
|
|
24
|
-
import ElementPlus from 'element-plus'
|
|
25
|
-
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
|
26
|
-
import cingtaIcon from 'cingta-icon';
|
|
27
|
-
// import cingtaIcon from '../../icon/components/index';
|
|
28
|
-
import { isObject } from '../utils';
|
|
29
|
-
// import '../style';
|
|
30
|
-
|
|
31
|
-
const components = [
|
|
32
|
-
button,
|
|
33
|
-
radio,
|
|
34
|
-
checkbox,
|
|
35
|
-
input,
|
|
36
|
-
inputRange,
|
|
37
|
-
select,
|
|
38
|
-
yearSelect,
|
|
39
|
-
datePicker,
|
|
40
|
-
cascader,
|
|
41
|
-
tabs,
|
|
42
|
-
pagination,
|
|
43
|
-
menu,
|
|
44
|
-
searchBox,
|
|
45
|
-
table,
|
|
46
|
-
empty,
|
|
47
|
-
dialog,
|
|
48
|
-
messageBox,
|
|
49
|
-
CtMessage,
|
|
50
|
-
CtLoading,
|
|
51
|
-
CtPage
|
|
52
|
-
]
|
|
53
|
-
|
|
54
|
-
const serviceConfig = {
|
|
55
|
-
defaultMethod: 'post'
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const install = function (app, options) {
|
|
59
|
-
components.forEach(c => app.use(c))
|
|
60
|
-
app.use(ElementPlus, { locale: zhCn, });
|
|
61
|
-
app.use(cingtaIcon)
|
|
62
|
-
let serviceOptions = {}
|
|
63
|
-
if (isObject(options)) {
|
|
64
|
-
const { tableEmptyDom, selectTooltip = false } = options;
|
|
65
|
-
if (!options.baseDao) {
|
|
66
|
-
console.warn('当前使用的组件库没有配置baseDao')
|
|
67
|
-
} else {
|
|
68
|
-
app.provide('$ctBaseDao', options.baseDao)
|
|
69
|
-
}
|
|
70
|
-
app.provide('$selectTooltip', selectTooltip)
|
|
71
|
-
if (isObject(options.serviceOptions)) serviceOptions = options.serviceOptions;
|
|
72
|
-
if (isObject(options.searchBoxComponent)) app.provide('$userDefinedSearchComponent', options.searchBoxComponent)
|
|
73
|
-
if (isObject(tableEmptyDom)) app.provide('$tableEmptyDom', tableEmptyDom)
|
|
74
|
-
}
|
|
75
|
-
app.provide('$ctServiceConfig', { ...serviceConfig, ...serviceOptions })
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export default {
|
|
79
|
-
install
|
|
80
|
-
}
|
|
81
|
-
export { CtMessage }
|
|
1
|
+
import button from './button';
|
|
2
|
+
import radio from './radio';
|
|
3
|
+
import checkbox from './checkbox';
|
|
4
|
+
import input from './input';
|
|
5
|
+
import inputRange from './input-range';
|
|
6
|
+
import select from './select';
|
|
7
|
+
import yearSelect from './year-select';
|
|
8
|
+
import datePicker from './date-picker';
|
|
9
|
+
import cascader from './cascader';
|
|
10
|
+
import tabs from './tabs';
|
|
11
|
+
import pagination from './pagination';
|
|
12
|
+
import menu from './menu';
|
|
13
|
+
|
|
14
|
+
import searchBox from './search-box';
|
|
15
|
+
import table from './table';
|
|
16
|
+
import empty from "./empty";
|
|
17
|
+
import dialog from "./dialog";
|
|
18
|
+
import messageBox from './message-box';
|
|
19
|
+
import CtMessage from './message';
|
|
20
|
+
|
|
21
|
+
import CtLoading from './loading';
|
|
22
|
+
import CtPage from './page';
|
|
23
|
+
|
|
24
|
+
import ElementPlus from 'element-plus'
|
|
25
|
+
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
|
26
|
+
import cingtaIcon from 'cingta-icon';
|
|
27
|
+
// import cingtaIcon from '../../icon/components/index';
|
|
28
|
+
import { isObject } from '../utils';
|
|
29
|
+
// import '../style';
|
|
30
|
+
|
|
31
|
+
const components = [
|
|
32
|
+
button,
|
|
33
|
+
radio,
|
|
34
|
+
checkbox,
|
|
35
|
+
input,
|
|
36
|
+
inputRange,
|
|
37
|
+
select,
|
|
38
|
+
yearSelect,
|
|
39
|
+
datePicker,
|
|
40
|
+
cascader,
|
|
41
|
+
tabs,
|
|
42
|
+
pagination,
|
|
43
|
+
menu,
|
|
44
|
+
searchBox,
|
|
45
|
+
table,
|
|
46
|
+
empty,
|
|
47
|
+
dialog,
|
|
48
|
+
messageBox,
|
|
49
|
+
CtMessage,
|
|
50
|
+
CtLoading,
|
|
51
|
+
CtPage
|
|
52
|
+
]
|
|
53
|
+
|
|
54
|
+
const serviceConfig = {
|
|
55
|
+
defaultMethod: 'post'
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const install = function (app, options) {
|
|
59
|
+
components.forEach(c => app.use(c))
|
|
60
|
+
app.use(ElementPlus, { locale: zhCn, });
|
|
61
|
+
app.use(cingtaIcon)
|
|
62
|
+
let serviceOptions = {}
|
|
63
|
+
if (isObject(options)) {
|
|
64
|
+
const { tableEmptyDom, selectTooltip = false } = options;
|
|
65
|
+
if (!options.baseDao) {
|
|
66
|
+
console.warn('当前使用的组件库没有配置baseDao')
|
|
67
|
+
} else {
|
|
68
|
+
app.provide('$ctBaseDao', options.baseDao)
|
|
69
|
+
}
|
|
70
|
+
app.provide('$selectTooltip', selectTooltip)
|
|
71
|
+
if (isObject(options.serviceOptions)) serviceOptions = options.serviceOptions;
|
|
72
|
+
if (isObject(options.searchBoxComponent)) app.provide('$userDefinedSearchComponent', options.searchBoxComponent)
|
|
73
|
+
if (isObject(tableEmptyDom)) app.provide('$tableEmptyDom', tableEmptyDom)
|
|
74
|
+
}
|
|
75
|
+
app.provide('$ctServiceConfig', { ...serviceConfig, ...serviceOptions })
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export default {
|
|
79
|
+
install
|
|
80
|
+
}
|
|
81
|
+
export { CtMessage }
|
|
82
82
|
export * from 'element-plus'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import CtInput from './src/input.vue';
|
|
2
|
-
|
|
3
|
-
/* istanbul ignore next */
|
|
4
|
-
CtInput.install = function (Vue) {
|
|
5
|
-
Vue.component('CtInput', CtInput);
|
|
6
|
-
};
|
|
7
|
-
|
|
1
|
+
import CtInput from './src/input.vue';
|
|
2
|
+
|
|
3
|
+
/* istanbul ignore next */
|
|
4
|
+
CtInput.install = function (Vue) {
|
|
5
|
+
Vue.component('CtInput', CtInput);
|
|
6
|
+
};
|
|
7
|
+
|
|
8
8
|
export default CtInput;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { buriedParamsKey, searchComponentProps } from '../../../hooks';
|
|
2
|
-
|
|
3
|
-
export const inputEmits = ["update:modelValue", buriedParamsKey];
|
|
4
|
-
export const inputProps = {
|
|
5
|
-
...searchComponentProps,
|
|
6
|
-
modelValue: String,
|
|
7
|
-
password: Boolean,
|
|
8
|
-
clearable: Boolean,
|
|
9
|
-
type: {
|
|
10
|
-
type: String,
|
|
11
|
-
default: "text",
|
|
12
|
-
},
|
|
13
|
-
unit: String,
|
|
1
|
+
import { buriedParamsKey, searchComponentProps } from '../../../hooks';
|
|
2
|
+
|
|
3
|
+
export const inputEmits = ["update:modelValue", buriedParamsKey];
|
|
4
|
+
export const inputProps = {
|
|
5
|
+
...searchComponentProps,
|
|
6
|
+
modelValue: String,
|
|
7
|
+
password: Boolean,
|
|
8
|
+
clearable: Boolean,
|
|
9
|
+
type: {
|
|
10
|
+
type: String,
|
|
11
|
+
default: "text",
|
|
12
|
+
},
|
|
13
|
+
unit: String,
|
|
14
14
|
}
|
|
@@ -1,107 +1,107 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<el-input
|
|
3
|
-
:class="[ns.b()]"
|
|
4
|
-
v-model="showValue"
|
|
5
|
-
:type="currType"
|
|
6
|
-
v-bind="rawAttr"
|
|
7
|
-
ref="inputRef"
|
|
8
|
-
>
|
|
9
|
-
<template #prefix>
|
|
10
|
-
<slot name="prefix"></slot>
|
|
11
|
-
</template>
|
|
12
|
-
<template #suffix>
|
|
13
|
-
<slot name="suffix"> </slot>
|
|
14
|
-
<span v-if="unit" :class="[ns.e('unit')]">{{ unit }}</span>
|
|
15
|
-
<ct-icon
|
|
16
|
-
v-if="clearable && showValue"
|
|
17
|
-
:class="[ns.e('clearable')]"
|
|
18
|
-
name="close_line"
|
|
19
|
-
@click="showValue = ''"
|
|
20
|
-
/>
|
|
21
|
-
<template v-if="password && showValue">
|
|
22
|
-
<span :class="[ns.e('password')]" @click="switchPassword">
|
|
23
|
-
<ct-icon v-if="currType === 'password'" name="preview-close2_line" />
|
|
24
|
-
<ct-icon v-else name="preview-open_line" />
|
|
25
|
-
</span>
|
|
26
|
-
</template>
|
|
27
|
-
</template>
|
|
28
|
-
</el-input>
|
|
29
|
-
</template>
|
|
30
|
-
|
|
31
|
-
<script setup>
|
|
32
|
-
import { onMounted, computed, ref } from "vue";
|
|
33
|
-
import { useNamespace, useBuriedParams } from "../../../hooks";
|
|
34
|
-
import { inputEmits, inputProps } from "./index";
|
|
35
|
-
const props = defineProps(inputProps);
|
|
36
|
-
const emit = defineEmits(inputEmits);
|
|
37
|
-
|
|
38
|
-
useBuriedParams(props, emit);
|
|
39
|
-
const ns = useNamespace("input");
|
|
40
|
-
|
|
41
|
-
const inputRef = ref(null);
|
|
42
|
-
const currType = ref(props.type);
|
|
43
|
-
const showValue = computed({
|
|
44
|
-
get() {
|
|
45
|
-
return props.modelValue;
|
|
46
|
-
},
|
|
47
|
-
set(newValue) {
|
|
48
|
-
emit("update:modelValue", newValue);
|
|
49
|
-
},
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
const switchPassword = () => {
|
|
53
|
-
currType.value = currType.value === "password" ? "text" : "password";
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
onMounted(() => {
|
|
57
|
-
if (props.password) {
|
|
58
|
-
currType.value = "password";
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
defineExpose({
|
|
62
|
-
ref: inputRef,
|
|
63
|
-
});
|
|
64
|
-
</script>
|
|
65
|
-
<style lang='less'>
|
|
66
|
-
.ct-input {
|
|
67
|
-
@R: .ct-input;
|
|
68
|
-
--ct-input-focus-color: var(--ct-color-primary);
|
|
69
|
-
--ct-input-focus-hover-color: var(--ct-color-primary);
|
|
70
|
-
--ct-input-default-width: var(--ct-component-width);
|
|
71
|
-
&.el-input {
|
|
72
|
-
width: var(--ct-input-default-width);
|
|
73
|
-
}
|
|
74
|
-
&__unit {
|
|
75
|
-
color: var(--ct-color-grey-sub);
|
|
76
|
-
}
|
|
77
|
-
&__clearable {
|
|
78
|
-
// --ct-input-focus-hover-color: var(--ct-color-danger);
|
|
79
|
-
}
|
|
80
|
-
& &__clearable {
|
|
81
|
-
cursor: pointer;
|
|
82
|
-
opacity: 0;
|
|
83
|
-
}
|
|
84
|
-
&__password {
|
|
85
|
-
cursor: pointer;
|
|
86
|
-
color: var(--ct-color-black);
|
|
87
|
-
}
|
|
88
|
-
.el-input__inner {
|
|
89
|
-
&:focus {
|
|
90
|
-
& + .el-input__suffix {
|
|
91
|
-
@{R}__clearable {
|
|
92
|
-
opacity: 1;
|
|
93
|
-
color: var(--ct-input-focus-color);
|
|
94
|
-
&:hover {
|
|
95
|
-
color: var(--ct-input-focus-hover-color);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
&:hover {
|
|
102
|
-
@{R}__clearable {
|
|
103
|
-
opacity: 1;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
1
|
+
<template>
|
|
2
|
+
<el-input
|
|
3
|
+
:class="[ns.b()]"
|
|
4
|
+
v-model="showValue"
|
|
5
|
+
:type="currType"
|
|
6
|
+
v-bind="rawAttr"
|
|
7
|
+
ref="inputRef"
|
|
8
|
+
>
|
|
9
|
+
<template #prefix>
|
|
10
|
+
<slot name="prefix"></slot>
|
|
11
|
+
</template>
|
|
12
|
+
<template #suffix>
|
|
13
|
+
<slot name="suffix"> </slot>
|
|
14
|
+
<span v-if="unit" :class="[ns.e('unit')]">{{ unit }}</span>
|
|
15
|
+
<ct-icon
|
|
16
|
+
v-if="clearable && showValue"
|
|
17
|
+
:class="[ns.e('clearable')]"
|
|
18
|
+
name="close_line"
|
|
19
|
+
@click="showValue = ''"
|
|
20
|
+
/>
|
|
21
|
+
<template v-if="password && showValue">
|
|
22
|
+
<span :class="[ns.e('password')]" @click="switchPassword">
|
|
23
|
+
<ct-icon v-if="currType === 'password'" name="preview-close2_line" />
|
|
24
|
+
<ct-icon v-else name="preview-open_line" />
|
|
25
|
+
</span>
|
|
26
|
+
</template>
|
|
27
|
+
</template>
|
|
28
|
+
</el-input>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<script setup>
|
|
32
|
+
import { onMounted, computed, ref } from "vue";
|
|
33
|
+
import { useNamespace, useBuriedParams } from "../../../hooks";
|
|
34
|
+
import { inputEmits, inputProps } from "./index";
|
|
35
|
+
const props = defineProps(inputProps);
|
|
36
|
+
const emit = defineEmits(inputEmits);
|
|
37
|
+
|
|
38
|
+
useBuriedParams(props, emit);
|
|
39
|
+
const ns = useNamespace("input");
|
|
40
|
+
|
|
41
|
+
const inputRef = ref(null);
|
|
42
|
+
const currType = ref(props.type);
|
|
43
|
+
const showValue = computed({
|
|
44
|
+
get() {
|
|
45
|
+
return props.modelValue;
|
|
46
|
+
},
|
|
47
|
+
set(newValue) {
|
|
48
|
+
emit("update:modelValue", newValue);
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
const switchPassword = () => {
|
|
53
|
+
currType.value = currType.value === "password" ? "text" : "password";
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
onMounted(() => {
|
|
57
|
+
if (props.password) {
|
|
58
|
+
currType.value = "password";
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
defineExpose({
|
|
62
|
+
ref: inputRef,
|
|
63
|
+
});
|
|
64
|
+
</script>
|
|
65
|
+
<style lang='less'>
|
|
66
|
+
.ct-input {
|
|
67
|
+
@R: .ct-input;
|
|
68
|
+
--ct-input-focus-color: var(--ct-color-primary);
|
|
69
|
+
--ct-input-focus-hover-color: var(--ct-color-primary);
|
|
70
|
+
--ct-input-default-width: var(--ct-component-width);
|
|
71
|
+
&.el-input {
|
|
72
|
+
width: var(--ct-input-default-width);
|
|
73
|
+
}
|
|
74
|
+
&__unit {
|
|
75
|
+
color: var(--ct-color-grey-sub);
|
|
76
|
+
}
|
|
77
|
+
&__clearable {
|
|
78
|
+
// --ct-input-focus-hover-color: var(--ct-color-danger);
|
|
79
|
+
}
|
|
80
|
+
& &__clearable {
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
opacity: 0;
|
|
83
|
+
}
|
|
84
|
+
&__password {
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
color: var(--ct-color-black);
|
|
87
|
+
}
|
|
88
|
+
.el-input__inner {
|
|
89
|
+
&:focus {
|
|
90
|
+
& + .el-input__suffix {
|
|
91
|
+
@{R}__clearable {
|
|
92
|
+
opacity: 1;
|
|
93
|
+
color: var(--ct-input-focus-color);
|
|
94
|
+
&:hover {
|
|
95
|
+
color: var(--ct-input-focus-hover-color);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
&:hover {
|
|
102
|
+
@{R}__clearable {
|
|
103
|
+
opacity: 1;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
107
|
</style>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import CtInputRange from './src/input-range.vue';
|
|
2
|
-
|
|
3
|
-
/* istanbul ignore next */
|
|
4
|
-
CtInputRange.install = function (Vue) {
|
|
5
|
-
Vue.component('CtInputRange', CtInputRange);
|
|
6
|
-
};
|
|
7
|
-
|
|
1
|
+
import CtInputRange from './src/input-range.vue';
|
|
2
|
+
|
|
3
|
+
/* istanbul ignore next */
|
|
4
|
+
CtInputRange.install = function (Vue) {
|
|
5
|
+
Vue.component('CtInputRange', CtInputRange);
|
|
6
|
+
};
|
|
7
|
+
|
|
8
8
|
export default CtInputRange;
|