mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-29 20:32:44 +08:00
quickcommandUI样式统一调整
This commit is contained in:
fofolee
parent
e6bd6df550
commit
d64f00a8b4
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<q-card class="q-dialog-plugin">
|
||||
<q-card-section>
|
||||
<div class="text-h5" align="center" v-text="options.title"></div>
|
||||
<q-card class="q-dialog-plugin quickcommand-ui">
|
||||
<q-card-section v-if="options.title">
|
||||
<div class="text-h8" align="center" v-text="options.title"></div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-gutter-lg">
|
||||
<q-card-section class="q-gutter-md">
|
||||
<div v-for="(label, index) in options.labels" :key="index">
|
||||
<q-btn
|
||||
class="full-width"
|
||||
|
||||
@ -1,11 +1,19 @@
|
||||
<template>
|
||||
<q-card class="q-dialog-plugin" :style="{
|
||||
width: options.width ? options.width + 'px' : '450px'
|
||||
}">
|
||||
<q-card-section>
|
||||
<div class="text-h5" align="left" v-text="options.title"></div>
|
||||
<q-card
|
||||
class="quickcommand-ui q-dialog-plugin"
|
||||
:style="{
|
||||
width: options.width ? options.width + 'px' : '450px',
|
||||
}"
|
||||
>
|
||||
<q-card-section class="row items-center q-gutter-sm">
|
||||
<q-img src="logo.png" width="1.5rem" />
|
||||
<div class="text-h8" align="left" v-text="options.title"></div>
|
||||
</q-card-section>
|
||||
<q-card-section v-if="options.isHtml" v-html="options.message" class="content" />
|
||||
<q-card-section
|
||||
v-if="options.isHtml"
|
||||
v-html="options.message"
|
||||
class="content"
|
||||
/>
|
||||
<q-card-section v-else v-text="options.message" class="content" />
|
||||
<q-card-section class="flex justify-end q-gutter-sm">
|
||||
<q-btn flat label="取消" color="grey" @click="hide" />
|
||||
@ -36,4 +44,12 @@ export default {
|
||||
overflow: auto;
|
||||
max-height: 350px;
|
||||
}
|
||||
|
||||
.q-card {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.q-card--dark {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<q-card class="q-dialog-plugin">
|
||||
<q-card-section>
|
||||
<q-card class="quickcommand-ui q-dialog-plugin" style="width: 60vw">
|
||||
<q-card-section v-if="options.title">
|
||||
<div class="text-h5" align="center" v-text="options.title"></div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-gutter-sm">
|
||||
<q-card-section class="input-container">
|
||||
<div v-for="(label, index) in options.labels" :key="index">
|
||||
<div class="q-pa-xs">{{ label }}</div>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="results[index]"
|
||||
:label="label"
|
||||
:hint="options.hints[index]"
|
||||
hide-hint
|
||||
:autofocus="index === 0"
|
||||
@ -16,9 +17,9 @@
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn color="negative" label="取消" @click="hide" />
|
||||
<q-btn color="blue-9" label="确定" @click="clickOK" />
|
||||
<q-card-actions align="right" class="button-container">
|
||||
<q-btn label="取消" color="grey" flat @click="hide" />
|
||||
<q-btn color="primary" label="确定" flat @click="clickOK" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
@ -44,3 +45,16 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.input-container {
|
||||
padding: 15px 15px 0 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
*
|
||||
* 如需对每个选项单独注册点击事件，可以在initItems的元素中添加id和clickFn，如：
|
||||
* initItems = [{id:1, title: "1", description: "1", clickFn:function(e){console.log(e)}}, {id:2, title: "2", description: "2", clickFn:function(e){console.log(e)}}]
|
||||
*
|
||||
*
|
||||
* @example
|
||||
* initItems = ["<div>1</div>", "<div>2</div>", "<div>3</div>"]
|
||||
* options = {placeholder: "输入进行筛选，支持拼音", optionType: "html", enableSearch: true, showCancelButton: false, closeOnSelect: true}
|
||||
@ -315,3 +315,13 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.quickcommand-ui.q-card {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.body--dark .quickcommand-ui.q-card {
|
||||
background-color: var(--q-dark-page);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<q-card @mousewheel="mouseHandler">
|
||||
<q-card class="quickcommand-ui q-dialog-plugin" @mousewheel="mouseHandler">
|
||||
<q-virtual-scroll
|
||||
ref="scrollBar"
|
||||
@scroll="scrollHandler"
|
||||
@ -258,14 +258,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.q-card {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.q-card--dark {
|
||||
background: #303133;
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
user-select: none;
|
||||
transition: 0;
|
||||
|
||||
@ -1,25 +1,22 @@
|
||||
<template>
|
||||
<q-card class="q-dialog-plugin">
|
||||
<q-card class="quickcommand-ui q-dialog-plugin">
|
||||
<textarea
|
||||
v-model="result"
|
||||
:placeholder="options.placeholder"
|
||||
autofocus
|
||||
class="fixed container"
|
||||
:style="{
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
background: '#00000000',
|
||||
fontSize: '16px',
|
||||
outline: 'none',
|
||||
border: '3px solid #3577cb',
|
||||
borderRadius: '5px',
|
||||
}"
|
||||
/>
|
||||
<div class="fixed-bottom-right q-pa-md q-gutter-sm">
|
||||
<q-btn round color="blue-grey" icon="arrow_back" @click="hide" />
|
||||
<q-btn round color="primary" icon="done" @click="clickOK" />
|
||||
<div class="fixed-bottom-right q-gutter-xs button-container">
|
||||
<q-btn flat @click="hide" class="action-btn cancel-btn" label="取消" />
|
||||
<q-btn
|
||||
flat
|
||||
@click="clickOK"
|
||||
class="action-btn confirm-btn"
|
||||
label="确定"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
@ -45,3 +42,59 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
textarea {
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.body--dark textarea {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.body--dark textarea:focus {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.button-container {
|
||||
padding-bottom: 25px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
color: var(--q-primary);
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.body--dark .cancel-btn {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user