更新 VariableInput 组件文档,新增 CSS 选择器功能

- 在 VariableInput 组件中添加了 CssSelector 组件,允许用户选择元素并获取其 CSS 选择器。
- 更新了 VariableInput 组件的 props 文档,增加了对 cssSelector 选项的支持。
- 修改 WindowSelector 组件,增加了窗口选择按钮的标签显示。
This commit is contained in:
fofolee 2025-01-22 15:20:38 +08:00
parent cc8cabf374
commit ab83bb3d5f
3 changed files with 121 additions and 27 deletions

View File

@ -33,6 +33,12 @@
@emit-value="updateValBySelect"
class="prepend-btn"
/>
<!-- css选择按钮 -->
<CssSelector
v-if="options.cssSelector"
@emit-value="updateValBySelect"
class="prepend-btn"
/>
<!-- 窗口选择按钮 -->
<WindowSelector
v-if="options.window"
@ -56,44 +62,100 @@ import ItemList from "./varinput/ItemList.vue";
import FileSelector from "./varinput/FileSelector.vue";
import VariableList from "./varinput/VariableList.vue";
import WindowSelector from "./varinput/WindowSelector.vue";
import CssSelector from "./varinput/CssSelector.vue";
/**
* 变量输入框组件
* @description 支持变量选择和字符串输入的输入框组件
*
* @property {Object} modelValue - 输入框的值对象
* @property {String} label - 输入框标签
* @property {String} icon - 输入框图标
* @property {String} placeholder - 输入框占位文本
* @property {Boolean} noIcon - 是否隐藏图标
* @property {Boolean} disableToggleType - 是否禁用类型切换
*
* @property {Object} [options] - 可选的配置对象
* @property {Array} [options.items] - 选项列表默认单选选中后插入值且设置为字符模式
* @property {Boolean} [options.multiSelect] - 选项列表支持多选选中后插入选择的数组且设置为变量模式
*
* @property {Boolean} [options.dialog] - 是否显示文件选择对话框
* @property {Object} [options.items] - 选项列表配置
* @property {Array<Object|String>} [options.items] - 选项数组每项可以是字符串或对象
* @property {String} [options.items[].label] - 选项显示文本(当选项为对象时)
* @property {String} [options.items[].value] - 选项值(当选项为对象时)
* @property {Boolean} [options.multiSelect] - 是否支持多选
* @property {Boolean} [options.appendItem] - 是否将选中项追加到现有值后
*
* @property {Object} [options.dialog] - 文件选择对话框配置
* @property {String} [options.dialog.type] - 对话框类型open save
* @property {Object} [options.dialog.options] - 对话框选项对应 utools.showOpenDialog utools.showSaveDialog options
* @property {String} [options.dialog.type] - 对话框类型: 'open' 'save'
* @property {Object} [options.dialog.options] - utools 对话框选项
* @property {String} [options.dialog.options.title] - 对话框标题
* @property {String} [options.dialog.options.defaultPath] - 默认路径
* @property {Array<String>} [options.dialog.options.properties] - 对话框属性 ['openFile', 'multiSelections']
*
* @property {Object} [options.cssSelector] - CSS选择器配置
* @property {Boolean} [options.cssSelector] - 设置为 true 启用CSS选择器功能
*
* @property {Object} [options.window] - 窗口选择器配置
* @property {Object} [options.window.props] - 要获取的窗口属性
* @property {Array<Object>} [options.window.props] - 属性列表每项包含label和value
* @property {String} [options.window.props[].label] - 属性显示名称
* @property {String} [options.window.props[].value] - 属性访问路径 'bounds.x'
*
* @example
* // modelValue
* {
* value: "", //
* isString: true, //
* __varInputVal__: true //
* }
* //
* <VariableInput
* v-model="value"
* label="输入框"
* icon="edit"
* placeholder="请输入"
* />
*
* @example
* // options
* {
* items: ["item1", "item2", "item3"], //
* dialog: {
* type: "open", // open save
* options: {
* title: "选择文件",
* defaultPath: "/",
* },
* },
* }
* //
* <VariableInput
* v-model="value"
* :options="{
* items: ['选项1', '选项2', {label: '选项3', value: 'value3'}],
* multiSelect: true
* }"
* />
*
* @example
* //
* <VariableInput
* v-model="value"
* :options="{
* dialog: {
* type: 'open',
* options: {
* title: '选择文件',
* defaultPath: '/',
* properties: ['openFile', 'multiSelections']
* }
* }
* }"
* />
*
* @example
* // CSS
* <VariableInput
* v-model="value"
* :options="{
* cssSelector: true
* }"
* />
*
* @example
* //
* <VariableInput
* v-model="value"
* :options="{
* window: {
* props: [
* {label: '窗口标题', value: 'title'},
* {label: 'X坐标', value: 'bounds.x'}
* ]
* }
* }"
* />
*/
export default defineComponent({
name: "VariableInput",
@ -103,6 +165,7 @@ export default defineComponent({
FileSelector,
VariableList,
WindowSelector,
CssSelector,
},
props: {

View File

@ -0,0 +1,22 @@
<template>
<q-btn @click="inspectElement" icon="my_location" flat dense size="sm">
<q-tooltip>选择元素获取选择器</q-tooltip>
</q-btn>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "CssSelector",
emits: ["emitValue"],
methods: {
async inspectElement() {
window.utools.hideMainWindow();
const selectElement = await quickcomposer.browser.getSelector();
window.utools.showMainWindow();
this.$emit("emitValue", "str", selectElement || "");
},
},
});
</script>

View File

@ -1,5 +1,14 @@
<template>
<q-btn @click="inspectWindow" icon="my_location" flat dense size="sm" />
<q-btn
@click="inspectWindow"
icon="my_location"
flat
dense
size="sm"
:label="window.label"
>
<q-tooltip>选择窗口获取属性</q-tooltip>
</q-btn>
</template>
<script>
@ -19,7 +28,7 @@ export default defineComponent({
const { props } = this.window;
window.utools.hideMainWindow();
const selectWindow = await quickcomposer.windows.automation.inspect();
window.utools.showMainWindow()
window.utools.showMainWindow();
let propKeys = [];
if (typeof props === "object") {
const result = await quickcommand.showButtonBox(