iconpicker 调整

This commit is contained in:
fofolee 2022-04-16 22:46:41 +08:00
parent bc60eb9b3e
commit 64321fb03a
3 changed files with 94 additions and 105 deletions

View File

@ -18,7 +18,7 @@
/>
<q-img
class="commandLogo"
@click="showIconPicker"
@click="showIconPicker = true"
width="64px"
:src="currentCommand.features.icon"
/>
@ -257,11 +257,12 @@
</div>
</div>
</div>
<iconPicker
@iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
position="left"
ref="icon"
/>
<q-dialog v-model="showIconPicker" position="left">
<iconPicker
@iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
ref="icon"
/>
</q-dialog>
</q-scroll-area>
</template>
@ -296,6 +297,7 @@ export default {
outputTypesOptions: Object.keys(outputTypes),
specialVar: "{{}}",
allQuickCommandTags: this.$parent.allQuickCommandTags,
showIconPicker: false,
};
},
props: {
@ -411,10 +413,6 @@ export default {
}
return updateData;
},
showIconPicker() {
this.$refs.icon.showIconPicker = true;
},
},
};
</script>

View File

@ -1,90 +1,82 @@
<template>
<div>
<q-dialog v-model="showIconPicker" class="q-gutter" :position="position">
<q-card>
<q-card-section class="text-h5 text-center">更改图标</q-card-section>
<q-card-section>
<q-select
ref="icon8"
v-model="icon8sIcon"
:options="options"
label="搜索ICON8S"
options-dense
use-input
:loading="loading"
input-debounce="1000"
@input-value="searchIcon8s"
@update:model-value="getIcon8sIcon"
transition-show="jump-down"
transition-hide="jump-up"
virtual-scroll-slice-size="30"
standout="bg-primary text-white"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
键入关键词搜索
</q-item-section>
</q-item>
</template>
<template v-slot:selected>
<!-- {{ icon8sIcon?.name || "" }} -->
</template>
<template v-slot:prepend>
<q-avatar size="24px" v-if="dataUrl && icon8sIcon">
<q-img :src="dataUrl" />
</q-avatar>
<q-icon v-else name="image" />
</template>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps">
<q-item-section avatar>
<q-img :src="getIcon8sIconUrl(scope.opt, 1)" />
</q-item-section>
<q-item-section>
<q-item-label v-html="scope.opt.name" />
</q-item-section>
</q-item> </template
></q-select>
</q-card-section>
<q-card-section>
<q-file
standout="bg-primary text-white"
:display-value="localIconFile || ''"
@click="getLocalIcon"
label="选择本地资源"
>
<template v-slot:prepend>
<q-avatar size="24px" v-if="dataUrl && localIconFile">
<q-img :src="dataUrl" />
</q-avatar>
<q-icon v-else name="folder" />
</template>
</q-file>
</q-card-section>
<q-card-section>
<q-input
standout="bg-primary text-white"
v-model="netWorkIconUrl"
@blur="getRemoteIcon"
type="text"
label="网络图片地址"
>
<template v-slot:prepend>
<q-avatar size="24px" v-if="dataUrl && netWorkIconUrl">
<q-img :src="dataUrl" />
</q-avatar>
<q-icon v-else name="cloud" /> </template
></q-input>
</q-card-section>
<q-card-actions align="right">
<q-btn flat color="primary" @click="showIconPicker = false"
>确定</q-btn
>
</q-card-actions>
</q-card>
</q-dialog>
</div>
<q-card>
<q-card-section class="text-h5 text-center">更改图标</q-card-section>
<q-card-section>
<q-select
ref="icon8"
v-model="icon8sIcon"
:options="options"
label="搜索ICON8S"
options-dense
use-input
:loading="loading"
input-debounce="1000"
@input-value="searchIcon8s"
@update:model-value="getIcon8sIcon"
transition-show="jump-down"
transition-hide="jump-up"
virtual-scroll-slice-size="30"
standout="bg-primary text-white"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> 键入关键词搜索 </q-item-section>
</q-item>
</template>
<template v-slot:selected>
<!-- {{ icon8sIcon?.name || "" }} -->
</template>
<template v-slot:prepend>
<q-avatar size="24px" v-if="dataUrl && icon8sIcon">
<q-img :src="dataUrl" />
</q-avatar>
<q-icon v-else name="image" />
</template>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps">
<q-item-section avatar>
<q-img :src="getIcon8sIconUrl(scope.opt, 1)" />
</q-item-section>
<q-item-section>
<q-item-label v-html="scope.opt.name" />
</q-item-section>
</q-item> </template
></q-select>
</q-card-section>
<q-card-section>
<q-file
standout="bg-primary text-white"
:display-value="localIconFile || ''"
@click="getLocalIcon"
label="选择本地资源"
>
<template v-slot:prepend>
<q-avatar size="24px" v-if="dataUrl && localIconFile">
<q-img :src="dataUrl" />
</q-avatar>
<q-icon v-else name="folder" />
</template>
</q-file>
</q-card-section>
<q-card-section>
<q-input
standout="bg-primary text-white"
v-model="netWorkIconUrl"
@blur="getRemoteIcon"
type="text"
label="网络图片地址"
>
<template v-slot:prepend>
<q-avatar size="24px" v-if="dataUrl && netWorkIconUrl">
<q-img :src="dataUrl" />
</q-avatar>
<q-icon v-else name="cloud" /> </template
></q-input>
</q-card-section>
<q-card-actions align="right">
<q-btn flat color="primary" v-close-popup>确定</q-btn>
</q-card-actions>
</q-card>
</template>
<script>
@ -94,7 +86,6 @@ import pictureCompress from "picture-compressor";
export default {
data() {
return {
showIconPicker: false,
localIconFile: ref(null),
icon8sIcon: ref(null),
netWorkIconUrl: "",

View File

@ -4,9 +4,7 @@
<div class="row q-gutter-md">
<div class="col-auto justify-center content-center flex q-pa-md">
<q-avatar square class="commandLogo">
<q-img
:src="features.icon"
@click="$refs.icon.showIconPicker = true"
<q-img :src="features.icon" @click="showIconPicker = true"
/></q-avatar>
</div>
<div class="col">
@ -42,11 +40,12 @@
<q-btn flat label="取消" color="grey" v-close-popup />
<q-btn flat label="确定" color="primary" v-close-popup @click="markTag" />
</q-card-actions>
<IconPicker
ref="icon"
@iconChanged="(dataUrl) => (features.icon = dataUrl)"
position="right"
/>
<q-dialog v-model="showIconPicker" position="right">
<iconPicker
@iconChanged="(dataUrl) => (features.icon = dataUrl)"
ref="icon"
/>
</q-dialog>
</q-card>
</template>
@ -64,6 +63,7 @@ export default {
platform: ["win32", "darwin", "linux"],
code: `panel_${window.hexEncode(this.currentTag)}`,
},
showIconPicker: false,
};
},
props: {