Skip to content

Commit fddc396

Browse files
dirkhe1051931999dirkhe1051931999
committed
update
1 parent 3884a60 commit fddc396

File tree

8 files changed

+203
-44
lines changed

8 files changed

+203
-44
lines changed

‎quasar.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ module.exports = configure((ctx) => {
161161

162162
// animations: 'all', // --- includes all animations
163163
// https://quasar.dev/options/animations
164-
animations: ['fadeIn', 'fadeOut', 'fadeInUp', 'fadeOutDown'],
164+
animations: ['fadeIn', 'fadeOut', 'fadeInUp', 'fadeOutDown', 'slideInLeft', 'slideOutRight'],
165165

166166
// https://v2.quasar.dev/quasar-cli-webpack/developing-ssr/configuring-ssr
167167
ssr: {

‎src/components/myDialog/index.vue‎

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
<template>
22
<div>
3-
<q-dialog transition-show="jump-down" transition-hide="jump-up" v-model="myDialogParams.visible" persistent @before-hide="handlerBeforeHide">
3+
<q-dialog
4+
transition-show="slide-left"
5+
transition-hide="slide-right"
6+
v-model="myDialogParams.visible"
7+
@before-hide="handlerBeforeHide"
8+
position="right"
9+
full-height
10+
:persistent="myDialogParams.persistent"
11+
>
412
<q-card class="my-dialog" :style="calcMyDialogWidth">
5-
<div class="title f-bold q-pa-md text-h6">
6-
{{ myDialogParams.title }}
13+
<div class="title q-pa-md row items-center">
14+
<span class="text-h6 f-bold">{{ myDialogParams.title }}</span>
15+
<q-icon class="q-ml-auto" name="close" @click="handlerClickCancel" size="20px" v-if="myDialogParams.showClose" />
716
</div>
817
<div class="split-line h-1"></div>
918
<div class="scroll content" style="max-height: 500px">
@@ -14,11 +23,20 @@
1423
<div class="q-px-md q-pb-md">
1524
<slot name="extra-description" />
1625
</div>
17-
<div class="split-line h-1"></div>
18-
<div class="text-center q-pa-md row justify-end">
19-
<q-btn :label="$t(`action.cancel`)" :disable="myDialogParams.clickLoading" @click="handlerClickCancel()" outline color="primary" />
20-
<q-btn :label="$t(`action.confirm`)" color="primary" class="q-ml-md" @click="handlerClickDialogConfirmButton()" :loading="myDialogParams.clickLoading" v-show="myDialogParams.showConfirm" />
21-
</div>
26+
<q-card-actions class="actions q-pa-none">
27+
<div class="q-pa-md full-width text-right">
28+
<div class="split-line h-1 q-my-md"></div>
29+
<q-btn :label="$t(`action.cancel`)" :disable="myDialogParams.clickLoading" @click="handlerClickCancel()" outline color="primary" />
30+
<q-btn
31+
:label="$t(`action.confirm`)"
32+
color="primary"
33+
class="q-ml-md"
34+
@click="handlerClickDialogConfirmButton()"
35+
:loading="myDialogParams.clickLoading"
36+
v-show="myDialogParams.showConfirm"
37+
/>
38+
</div>
39+
</q-card-actions>
2240
</q-card>
2341
</q-dialog>
2442
</div>
@@ -40,6 +58,8 @@ interface IOption {
4058
params: any;
4159
customComfirm: boolean;
4260
noTwiceConfirm: boolean;
61+
persistent?: boolean;
62+
showClose?: boolean;
4363
}
4464
4565
const DEFAULT_OPTION: IOption = {
@@ -53,6 +73,8 @@ const DEFAULT_OPTION: IOption = {
5373
params: {},
5474
customComfirm: false,
5575
noTwiceConfirm: false,
76+
persistent: true,
77+
showClose: true,
5678
};
5779
5880
@Component({
@@ -176,6 +198,9 @@ export default class MyDialogComponent extends Vue {
176198
type: this.myDialogParams.dialogType,
177199
params: this.myDialogParams.params,
178200
});
201+
if (!this.myDialogParams.persistent) {
202+
this.$emit('close', { type: this.myDialogParams.dialogType });
203+
}
179204
}
180205
181206
public validForm() {
@@ -198,6 +223,10 @@ export default class MyDialogComponent extends Vue {
198223
}
199224
}
200225
}
226+
227+
.actions {
228+
background: #000000;
229+
}
201230
}
202231
203232
.body--light {
@@ -212,10 +241,16 @@ export default class MyDialogComponent extends Vue {
212241
}
213242
}
214243
}
244+
245+
.actions {
246+
background: #ffffff;
247+
}
215248
}
216249
217250
.my-dialog {
218-
border-radius: 12px;
251+
border-radius: 12px 0 0 12px !important;
252+
display: flex;
253+
flex-direction: column;
219254
220255
.title {
221256
padding: 16px;
@@ -226,5 +261,10 @@ export default class MyDialogComponent extends Vue {
226261
.content {
227262
padding: 16px;
228263
}
264+
265+
.actions {
266+
width: 100%;
267+
margin-top: auto;
268+
}
229269
}
230270
</style>

‎src/components/textToInput/index.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<q-input outlined class="text-to-input" v-model="text" :loading="_loading" dense :readonly="_loading">
33
<template v-slot:append v-if="!_loading">
4-
<q-icon name="o_cancel" class="cursor-pointer text-grey" @click.stop.prevent="close"> </q-icon>
5-
<q-icon name="o_check_circle" class="cursor-pointer text-black" @click.stop.prevent="confirm"> </q-icon>
4+
<q-icon name="app:text-to-input-close" class="cursor-pointer text-grey" @click.stop.prevent="close"> </q-icon>
5+
<q-icon name="app:text-to-input-confirm" class="cursor-pointer text-black" @click.stop.prevent="confirm"> </q-icon>
66
</template>
77
</q-input>
88
</template>
@@ -28,16 +28,16 @@ export default class TextToInputComponent extends Vue {
2828
this.text = newVal;
2929
}
3030
31-
private text = '';
31+
public text = '';
3232
private oldText = '';
33-
private _loading = false;
33+
public _loading = false;
3434
35-
private close() {
35+
public close() {
3636
this.text = this.oldText;
3737
this.$emit('close', { value: this.text, that: this.that });
3838
}
3939
40-
private confirm() {
40+
public confirm() {
4141
this.oldText = this.text;
4242
this.$emit('confirm', { value: this.text, that: this.that });
4343
}

‎src/components/textToSelect/index.vue‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
<template>
2-
<q-select outlined class="text-to-input" v-model="text" :loading="_loading" dense :options="_options" emit-value map-options options-dense>
2+
<q-select
3+
outlined
4+
class="text-to-input"
5+
v-model="text"
6+
:loading="_loading"
7+
dense
8+
:options="_options"
9+
emit-value
10+
map-options
11+
options-dense
12+
dropdown-icon="app:topbar-arrow-bottom"
13+
clear-icon="app:clear"
14+
>
315
<template v-slot:append>
4-
<q-icon name="o_cancel" class="cursor-pointer text-grey" @click.stop.prevent="close"></q-icon>
5-
<q-icon name="o_check_circle" class="cursor-pointer text-black" @click.stop.prevent="confirm"></q-icon>
16+
<q-icon name="app:text-to-input-close" class="cursor-pointer text-grey" @click.stop.prevent="close"></q-icon>
17+
<q-icon name="app:text-to-input-confirm" class="cursor-pointer text-black" @click.stop.prevent="confirm"></q-icon>
618
</template>
719
</q-select>
820
</template>
@@ -32,22 +44,22 @@ export default class TextToInputComponent extends Vue {
3244
private text = '';
3345
private oldText = '';
3446
private _options = [];
35-
private _loading = false;
47+
public _loading = false;
3648
37-
private close() {
49+
public close() {
3850
this.text = this.oldText;
3951
this.$emit('close', { value: this.text, that: this.that });
4052
}
4153
42-
private confirm() {
54+
public confirm() {
4355
this.oldText = this.text;
4456
this.$emit('confirm', { value: this.text, that: this.that });
4557
}
4658
4759
mounted() {
4860
this.oldText = this.$props.value;
4961
this.text = this.$props.value;
50-
this._options = JSON.parse(JSON.stringify(this.$props.options));
62+
this._options = JSON.parse(JSON.stringify(this.options));
5163
}
5264
}
5365
</script>

‎src/css/reset-quasar.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@
4242
.upload-limit {
4343
color: rgba($color: #ffffff, $alpha: 0.541);
4444
}
45+
46+
.center.ondrag {
47+
background: #000000;
48+
}
4549
}
4650
}
4751

@@ -86,6 +90,10 @@
8690
.upload-limit {
8791
color: rgba($color: #000000, $alpha: 0.541);
8892
}
93+
94+
.center.ondrag {
95+
background: #f5f5f5;
96+
}
8997
}
9098
}
9199

@@ -107,24 +115,53 @@
107115
display: grid;
108116
grid-template-columns: 80% 20%;
109117
grid-gap: 16px;
118+
align-items: flex-start;
110119

111120
.query {
112121
display: grid;
113122
// 每行4个，间距20
114123
grid-template-columns: repeat(6, 1fr);
115124
grid-gap: 16px;
125+
@media (min-width: 1440px) and (max-width: 1920px) {
126+
grid-template-columns: repeat(4, 1fr);
127+
}
128+
@media (min-width: 960px) and (max-width: 1440px) {
129+
grid-template-columns: repeat(3, 1fr);
130+
}
131+
@media (min-width: 600px) and (max-width: 960px) {
132+
grid-template-columns: repeat(2, 1fr);
133+
}
134+
@media (max-width: 600px) {
135+
grid-template-columns: repeat(1, 1fr);
136+
}
116137
}
117138

118139
.action {
119140
display: flex;
141+
flex-wrap: wrap;
142+
align-items: flex-start;
120143

121144
.q-btn {
122145
height: 40px;
123146
border-radius: 8px;
124147
margin-right: 16px;
148+
margin-bottom: 16px;
149+
150+
.q-icon {
151+
@media (min-width: 960px) and (max-width: 1440px) {
152+
display: none;
153+
}
154+
@media (min-width: 600px) and (max-width: 960px) {
155+
display: none;
156+
}
157+
@media (max-width: 600px) {
158+
display: none;
159+
}
160+
}
125161

126162
&:last-child {
127163
margin-right: 0;
164+
margin-bottom: 0;
128165
}
129166
}
130167
}
@@ -309,6 +346,7 @@
309346
transform: translate(-50%, -50%);
310347
text-align: center;
311348
cursor: pointer;
349+
padding: 16px 0;
312350

313351
img {
314352
width: 48px;

‎src/i18n/en-US/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default {
8989
},
9090
account: {},
9191
charts: {},
92-
components: {},
92+
components2: {},
9393
copy: {},
9494
i18n: {},
9595
icon: {},

‎src/i18n/zh-CN/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export default {
8888
passwordRules: "包含10 - 20个字符{'{}'}包含大小写字母{'{}'}包含数字和特殊字符（{'#?!@+.$%^&*-'}）{'{}' }不能包含空格、中文和中文特殊字符",
8989
},
9090
charts: {},
91-
components: {},
91+
components2: {},
9292
copy: {},
9393
i18n: {},
9494
icon: {},

0 commit comments

Comments
 (0)