mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 15:04:06 +08:00
iconpicker 调整
This commit is contained in:
fofolee
parent
bc60eb9b3e
commit
64321fb03a
@ -18,7 +18,7 @@
|
|||||||
/>
|
/>
|
||||||
<q-img
|
<q-img
|
||||||
class="commandLogo"
|
class="commandLogo"
|
||||||
@click="showIconPicker"
|
@click="showIconPicker = true"
|
||||||
width="64px"
|
width="64px"
|
||||||
:src="currentCommand.features.icon"
|
:src="currentCommand.features.icon"
|
||||||
/>
|
/>
|
||||||
@ -257,11 +257,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<iconPicker
|
<q-dialog v-model="showIconPicker" position="left">
|
||||||
@iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
|
<iconPicker
|
||||||
position="left"
|
@iconChanged="(dataUrl) => (currentCommand.features.icon = dataUrl)"
|
||||||
ref="icon"
|
ref="icon"
|
||||||
/>
|
/>
|
||||||
|
</q-dialog>
|
||||||
</q-scroll-area>
|
</q-scroll-area>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -296,6 +297,7 @@ export default {
|
|||||||
outputTypesOptions: Object.keys(outputTypes),
|
outputTypesOptions: Object.keys(outputTypes),
|
||||||
specialVar: "{{}}",
|
specialVar: "{{}}",
|
||||||
allQuickCommandTags: this.$parent.allQuickCommandTags,
|
allQuickCommandTags: this.$parent.allQuickCommandTags,
|
||||||
|
showIconPicker: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -411,10 +413,6 @@ export default {
|
|||||||
}
|
}
|
||||||
return updateData;
|
return updateData;
|
||||||
},
|
},
|
||||||
|
|
||||||
showIconPicker() {
|
|
||||||
this.$refs.icon.showIconPicker = true;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,90 +1,82 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<q-card>
|
||||||
<q-dialog v-model="showIconPicker" class="q-gutter" :position="position">
|
<q-card-section class="text-h5 text-center">更改图标</q-card-section>
|
||||||
<q-card>
|
<q-card-section>
|
||||||
<q-card-section class="text-h5 text-center">更改图标</q-card-section>
|
<q-select
|
||||||
<q-card-section>
|
ref="icon8"
|
||||||
<q-select
|
v-model="icon8sIcon"
|
||||||
ref="icon8"
|
:options="options"
|
||||||
v-model="icon8sIcon"
|
label="搜索ICON8S"
|
||||||
:options="options"
|
options-dense
|
||||||
label="搜索ICON8S"
|
use-input
|
||||||
options-dense
|
:loading="loading"
|
||||||
use-input
|
input-debounce="1000"
|
||||||
:loading="loading"
|
@input-value="searchIcon8s"
|
||||||
input-debounce="1000"
|
@update:model-value="getIcon8sIcon"
|
||||||
@input-value="searchIcon8s"
|
transition-show="jump-down"
|
||||||
@update:model-value="getIcon8sIcon"
|
transition-hide="jump-up"
|
||||||
transition-show="jump-down"
|
virtual-scroll-slice-size="30"
|
||||||
transition-hide="jump-up"
|
standout="bg-primary text-white"
|
||||||
virtual-scroll-slice-size="30"
|
>
|
||||||
standout="bg-primary text-white"
|
<template v-slot:no-option>
|
||||||
>
|
<q-item>
|
||||||
<template v-slot:no-option>
|
<q-item-section class="text-grey"> 键入关键词搜索 </q-item-section>
|
||||||
<q-item>
|
</q-item>
|
||||||
<q-item-section class="text-grey">
|
</template>
|
||||||
键入关键词搜索
|
<template v-slot:selected>
|
||||||
</q-item-section>
|
<!-- {{ icon8sIcon?.name || "" }} -->
|
||||||
</q-item>
|
</template>
|
||||||
</template>
|
<template v-slot:prepend>
|
||||||
<template v-slot:selected>
|
<q-avatar size="24px" v-if="dataUrl && icon8sIcon">
|
||||||
<!-- {{ icon8sIcon?.name || "" }} -->
|
<q-img :src="dataUrl" />
|
||||||
</template>
|
</q-avatar>
|
||||||
<template v-slot:prepend>
|
<q-icon v-else name="image" />
|
||||||
<q-avatar size="24px" v-if="dataUrl && icon8sIcon">
|
</template>
|
||||||
<q-img :src="dataUrl" />
|
<template v-slot:option="scope">
|
||||||
</q-avatar>
|
<q-item v-bind="scope.itemProps">
|
||||||
<q-icon v-else name="image" />
|
<q-item-section avatar>
|
||||||
</template>
|
<q-img :src="getIcon8sIconUrl(scope.opt, 1)" />
|
||||||
<template v-slot:option="scope">
|
</q-item-section>
|
||||||
<q-item v-bind="scope.itemProps">
|
<q-item-section>
|
||||||
<q-item-section avatar>
|
<q-item-label v-html="scope.opt.name" />
|
||||||
<q-img :src="getIcon8sIconUrl(scope.opt, 1)" />
|
</q-item-section>
|
||||||
</q-item-section>
|
</q-item> </template
|
||||||
<q-item-section>
|
></q-select>
|
||||||
<q-item-label v-html="scope.opt.name" />
|
</q-card-section>
|
||||||
</q-item-section>
|
<q-card-section>
|
||||||
</q-item> </template
|
<q-file
|
||||||
></q-select>
|
standout="bg-primary text-white"
|
||||||
</q-card-section>
|
:display-value="localIconFile || ''"
|
||||||
<q-card-section>
|
@click="getLocalIcon"
|
||||||
<q-file
|
label="选择本地资源"
|
||||||
standout="bg-primary text-white"
|
>
|
||||||
:display-value="localIconFile || ''"
|
<template v-slot:prepend>
|
||||||
@click="getLocalIcon"
|
<q-avatar size="24px" v-if="dataUrl && localIconFile">
|
||||||
label="选择本地资源"
|
<q-img :src="dataUrl" />
|
||||||
>
|
</q-avatar>
|
||||||
<template v-slot:prepend>
|
<q-icon v-else name="folder" />
|
||||||
<q-avatar size="24px" v-if="dataUrl && localIconFile">
|
</template>
|
||||||
<q-img :src="dataUrl" />
|
</q-file>
|
||||||
</q-avatar>
|
</q-card-section>
|
||||||
<q-icon v-else name="folder" />
|
<q-card-section>
|
||||||
</template>
|
<q-input
|
||||||
</q-file>
|
standout="bg-primary text-white"
|
||||||
</q-card-section>
|
v-model="netWorkIconUrl"
|
||||||
<q-card-section>
|
@blur="getRemoteIcon"
|
||||||
<q-input
|
type="text"
|
||||||
standout="bg-primary text-white"
|
label="网络图片地址"
|
||||||
v-model="netWorkIconUrl"
|
>
|
||||||
@blur="getRemoteIcon"
|
<template v-slot:prepend>
|
||||||
type="text"
|
<q-avatar size="24px" v-if="dataUrl && netWorkIconUrl">
|
||||||
label="网络图片地址"
|
<q-img :src="dataUrl" />
|
||||||
>
|
</q-avatar>
|
||||||
<template v-slot:prepend>
|
<q-icon v-else name="cloud" /> </template
|
||||||
<q-avatar size="24px" v-if="dataUrl && netWorkIconUrl">
|
></q-input>
|
||||||
<q-img :src="dataUrl" />
|
</q-card-section>
|
||||||
</q-avatar>
|
<q-card-actions align="right">
|
||||||
<q-icon v-else name="cloud" /> </template
|
<q-btn flat color="primary" v-close-popup>确定</q-btn>
|
||||||
></q-input>
|
</q-card-actions>
|
||||||
</q-card-section>
|
</q-card>
|
||||||
<q-card-actions align="right">
|
|
||||||
<q-btn flat color="primary" @click="showIconPicker = false"
|
|
||||||
>确定</q-btn
|
|
||||||
>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -94,7 +86,6 @@ import pictureCompress from "picture-compressor";
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showIconPicker: false,
|
|
||||||
localIconFile: ref(null),
|
localIconFile: ref(null),
|
||||||
icon8sIcon: ref(null),
|
icon8sIcon: ref(null),
|
||||||
netWorkIconUrl: "",
|
netWorkIconUrl: "",
|
||||||
|
|||||||
@ -4,9 +4,7 @@
|
|||||||
<div class="row q-gutter-md">
|
<div class="row q-gutter-md">
|
||||||
<div class="col-auto justify-center content-center flex q-pa-md">
|
<div class="col-auto justify-center content-center flex q-pa-md">
|
||||||
<q-avatar square class="commandLogo">
|
<q-avatar square class="commandLogo">
|
||||||
<q-img
|
<q-img :src="features.icon" @click="showIconPicker = true"
|
||||||
:src="features.icon"
|
|
||||||
@click="$refs.icon.showIconPicker = true"
|
|
||||||
/></q-avatar>
|
/></q-avatar>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
@ -42,11 +40,12 @@
|
|||||||
<q-btn flat label="取消" color="grey" v-close-popup />
|
<q-btn flat label="取消" color="grey" v-close-popup />
|
||||||
<q-btn flat label="确定" color="primary" v-close-popup @click="markTag" />
|
<q-btn flat label="确定" color="primary" v-close-popup @click="markTag" />
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
<IconPicker
|
<q-dialog v-model="showIconPicker" position="right">
|
||||||
ref="icon"
|
<iconPicker
|
||||||
@iconChanged="(dataUrl) => (features.icon = dataUrl)"
|
@iconChanged="(dataUrl) => (features.icon = dataUrl)"
|
||||||
position="right"
|
ref="icon"
|
||||||
/>
|
/>
|
||||||
|
</q-dialog>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -64,6 +63,7 @@ export default {
|
|||||||
platform: ["win32", "darwin", "linux"],
|
platform: ["win32", "darwin", "linux"],
|
||||||
code: `panel_${window.hexEncode(this.currentTag)}`,
|
code: `panel_${window.hexEncode(this.currentTag)}`,
|
||||||
},
|
},
|
||||||
|
showIconPicker: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user