完善ui组件注释

This commit is contained in:
fofolee
2025-01-06 09:04:40 +08:00
parent 94ba695fa9
commit d98966a5b0
6 changed files with 107 additions and 55 deletions

View File

@@ -1,20 +1,6 @@
<template>
<div class="array-editor">
<div v-for="(item, index) in items" :key="index" class="row items-center">
<!-- 如果传入options.keys则生成多键对象
示例
options: {
keys: ['name', 'age', 'email']
}
生成数据结构示例
[
{
name: { value: "张三", isString: true, __varInputVal__: true },
age: { value: "18", isString: false, __varInputVal__: true },
email: { value: "zhangsan@example.com", isString: true, __varInputVal__: true }
}
]
-->
<template v-if="options?.keys">
<div
v-for="key in options.keys"
@@ -31,12 +17,6 @@
</template>
<template v-else>
<div class="col">
<!-- 如果传入options.items则生成下拉选择
示例:
options: {
items: ['选项1', '选项2', '选项3']
}
-->
<template v-if="options?.items">
<q-select
:model-value="item.value"
@@ -57,14 +37,6 @@
</template>
</q-select>
</template>
<!-- 不传options情况下生成单值对象
生成数据结构示例:
[
"张三",
"李四",
"王五"
]
-->
<template v-else>
<VariableInput
:model-value="item"
@@ -122,6 +94,47 @@
</template>
<script>
/**
* 数组编辑器组件
* @description 支持单值数组和多键对象数组的编辑
*
* @property {Array} modelValue - 绑定的数组值
* @property {String} label - 输入框标签
* @property {String} icon - 输入框图标
* @property {Object} options - 配置选项
* @property {String[]} [options.keys] - 多键对象模式的键名列表
* @property {String[]} [options.items] - 下拉选择模式的选项列表
*
* @example
* // 基础数组
* [
* {
* value: "张三",
* isString: true,
* __varInputVal__: true
* }
* ]
*
* // 多键对象数组
* options.keys = ['name', 'age', 'email']
* [
* {
* name: { value: "张三", isString: true, __varInputVal__: true },
* age: { value: "18", isString: false, __varInputVal__: true },
* email: { value: "zhangsan@example.com", isString: true, __varInputVal__: true }
* }
* ]
*
* // 下拉选择模式
* options.items = ['选项1', '选项2', '选项3']
* [
* {
* value: "选项1",
* isString: true,
* __varInputVal__: true
* }
* ]
*/
import { defineComponent } from "vue";
import VariableInput from "components/composer/ui/VariableInput.vue";
@@ -143,14 +156,6 @@ export default defineComponent({
type: String,
default: "",
},
/**
* 配置选项,支持两种模式:
* 1. 选项模式:通过 items 提供选项列表
* 数组的每个元素都可以从选项中选择值
*
* 2. 多键模式:通过 keys 定义每个数组元素包含的键
* 数组的每个元素都是一个对象,包含指定的键,每个键对应一个输入框
*/
options: {
type: Object,
default: null,
@@ -179,12 +184,6 @@ export default defineComponent({
},
},
methods: {
/**
* 初始化数组项
* 1. 如果传入了初始值,直接使用
* 2. 如果配置了 keys创建包含所有键的对象
* 3. 默认创建单值对象
*/
initializeItems() {
if (this.modelValue.length) {
return this.modelValue;

View File

@@ -15,6 +15,13 @@
</template>
<script>
/**
* 边框标签组件
* @description 对指定元素进行包裹,显示一个定位在左上角的标签,点击标签可以折叠/展开内容
*
* @property {Boolean} modelValue - 控制内容的展开/折叠状态
* @property {String} label - 标签文本
*/
export default {
name: "BorderLabel",
props: {

View File

@@ -20,6 +20,13 @@
<script>
import { defineComponent } from "vue";
/**
* 控制流程输入框组件
* @description 调整了样式的输入框组件
*
* @property {String|Number} modelValue - 输入框的值
* @property {String} label - 输入框前置标签文本
*/
export default defineComponent({
name: "ControlInput",
inheritAttrs: false,

View File

@@ -6,12 +6,6 @@
class="row q-col-gutter-sm items-center"
>
<div class="col-4">
<!-- 如果传入options.items则键值支持下拉选择
示例
options: {
items: ['User-Agent', 'Content-Type', 'Accept']
}
-->
<q-select
v-if="options?.items"
:model-value="item.key"
@@ -31,7 +25,6 @@
<q-icon name="code" />
</template>
</q-select>
<!-- 不传options.items时键值为非VariableInput的输入框 -->
<q-input
v-else
:model-value="item.key"
@@ -46,7 +39,6 @@
</q-input>
</div>
<div class="col">
<!-- 值使用VariableInput组件 -->
<VariableInput
:model-value="item.value"
label=""
@@ -105,6 +97,34 @@
import { defineComponent } from "vue";
import VariableInput from "components/composer/ui/VariableInput.vue";
/**
* 字典编辑器组件
* @description 支持键值对编辑键支持变量选择和字符串输入值为VariableInput特有对象
*
* @property {Object} modelValue - 绑定的字典对象
* @property {Object} options - 配置选项
* @property {String[]} [options.items] - 键名的下拉选择选项
*
* @example
* // 基础字典对象
* {
* key: {
* value: "", // 输入框的值
* isString: true, // 是否是字符串
* __varInputVal__: true // 用于标识是变量输入框
* }
* }
*
* // 下拉选择模式
* options.items = ['User-Agent', 'Content-Type', 'Accept']
* {
* "User-Agent": {
* value: "Mozilla/5.0",
* isString: true,
* __varInputVal__: true
* }
* }
*/
export default defineComponent({
name: "DictEditor",
components: {
@@ -115,11 +135,6 @@ export default defineComponent({
type: Object,
required: true,
},
/**
* 配置选项,支持:
* 选项模式:通过 items 提供选项列表
* 字典的每个键都可以从选项中选择值
*/
options: {
type: Object,
default: null,

View File

@@ -37,6 +37,14 @@
<script>
import { defineComponent } from "vue";
/**
* 数字输入框组件
* @description 对加减按钮进行了美化的数字输入组件
*
* @property {Number} modelValue - 输入框的数值
* @property {String} label - 输入框标签
* @property {String} icon - 输入框图标
*/
export default defineComponent({
name: "NumberInput",
props: {

View File

@@ -86,6 +86,22 @@
<script>
import { defineComponent, inject } from "vue";
/**
* 变量输入框组件
* @description 支持变量选择和字符串输入的输入框组件
*
* @property {Object} modelValue - 输入框的值对象
* @property {String} label - 输入框标签
* @property {String} icon - 输入框图标
*
* @example
* // modelValue 对象格式
* {
* value: "", // 输入框的值
* isString: true, // 是否是字符串
* __varInputVal__: true // 用于标识是变量输入框
* }
*/
export default defineComponent({
name: "VariableInput",