有效",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "popper-class",
+ "sample": "popper-class",
+ "type": "String",
+ "desc": "TimePicker 下拉框的 class 类名",
+ "defaultValue": ""
+ },
+ {
+ "name": "picker-options",
+ "sample": "basic-usage1",
+ "type": "Object",
+ "desc": "当前时间日期选择器特有的选项参考下表",
+ "defaultValue": "该属性的默认值为 {}"
+ },
+ {
+ "name": "range-separator",
+ "sample": "is-range",
+ "type": "String",
+ "desc": "选择范围时的分隔符",
+ "defaultValue": "该属性的默认值为 - "
+ },
+ {
+ "name": "default-value",
+ "sample": "default-value",
+ "type": "Date",
+ "desc": "可选,当选中的日期值为空时,选择器面板打开时默认显示的时间,需设置为可被new Date()解析的值",
+ "defaultValue": ""
+ },
+ {
+ "name": "name",
+ "sample": "name",
+ "type": "String",
+ "desc": "原生属性",
+ "defaultValue": ""
+ },
+ {
+ "name": "suffix-icon",
+ "sample": "suffix-icon",
+ "type": "String",
+ "desc": "自定义头部图标的类名",
+ "defaultValue": "该自定后置图标, 该属性的默认值为 IconCalendar"
+ },
+ {
+ "name": "clear-icon",
+ "sample": "clear-icon",
+ "type": "String",
+ "desc": "自定义清空图标",
+ "defaultValue": "该属性的默认值为 IconOperationfaild"
+ },
+ {
+ "name": "popper-append-to-body",
+ "sample": "",
+ "type": "Boolean",
+ "desc": "是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false",
+ "defaultValue": "该属性的默认值为 true"
+ }
+ ],
+ "methods": [
+ {
+ "name": "focus",
+ "sample": "event-blur",
+ "type": "",
+ "desc": "使 input 获取焦点",
+ "defaultValue": ""
+ }
+ ],
+ "events": [
+ {
+ "name": "change",
+ "sample": "event-blur",
+ "type": "Function(arg)",
+ "desc": "用户确认选定的值时触发;arg:{Date|Array 非范围选择时,是当前选定值的时间对象;范围选择时,是当前选定值的时间对象数组}",
+ "defaultValue": ""
+ },
+ {
+ "name": "blur",
+ "sample": "event-blur",
+ "type": "Function(arg)",
+ "desc": "当 input 失去焦点时触发;arg:{Object 时间组件Vue对象}",
+ "defaultValue": ""
+ },
+ {
+ "name": "focus",
+ "sample": "event-blur",
+ "type": "Function(arg)",
+ "desc": "当 input 获得焦点时触发;arg:{Object 时间组件Vue对象}",
+ "defaultValue": ""
+ }
+ ]
+}
diff --git a/examples/docs/resources/pc/api/zh-CN/time-select-options.json b/examples/docs/resources/pc/api/zh-CN/time-select-options.json
new file mode 100644
index 000000000..304e932fa
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/time-select-options.json
@@ -0,0 +1,39 @@
+{
+ "attrs": [
+ {
+ "name": "start",
+ "sample": "picker-options",
+ "type": "String",
+ "desc": "开始时间",
+ "defaultValue": "该属性的默认值为 9:00"
+ },
+ {
+ "name": "end",
+ "sample": "picker-options",
+ "type": "String",
+ "desc": "结束时间",
+ "defaultValue": "该属性的默认值为 18:00"
+ },
+ {
+ "name": "step",
+ "sample": "picker-options",
+ "type": "String",
+ "desc": "间隔时间",
+ "defaultValue": "该属性的默认值为 00:30"
+ },
+ {
+ "name": "minTime",
+ "sample": "picker-options",
+ "type": "String",
+ "desc": "最小时间,小于该时间的时间段将被禁用",
+ "defaultValue": "该属性的默认值为 00:00"
+ },
+ {
+ "name": "maxTime",
+ "sample": "picker-options",
+ "type": "String",
+ "desc": "最大时间,大于该时间的时间段将被禁用",
+ "defaultValue": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/time-select.json b/examples/docs/resources/pc/api/zh-CN/time-select.json
new file mode 100644
index 000000000..463909e3e
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/time-select.json
@@ -0,0 +1,127 @@
+{
+ "attrs": [
+ {
+ "name": "modelValue / v-model",
+ "sample": "basic-usage",
+ "type": "date(DatePicker) / array(DateRangePicker)",
+ "desc": "绑定值",
+ "defaultValue": "日期选择器选中的日期值,可设置选择器的初始值"
+ },
+ {
+ "name": "disabled",
+ "sample": "disabled",
+ "type": "Boolean",
+ "desc": "禁用",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "editable",
+ "sample": "basic-usage",
+ "type": "Boolean",
+ "desc": "文本框可输入",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "clearable",
+ "sample": "clear-icon",
+ "type": "Boolean",
+ "desc": "是否显示清除按钮",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "size",
+ "sample": "size-mini",
+ "type": "String",
+ "desc": "输入框尺寸;该属性的可选值为 medium,small, mini",
+ "defaultValue": ""
+ },
+ {
+ "name": "placeholder",
+ "sample": "basic-usage",
+ "type": "String",
+ "desc": "非范围选择时的占位内容",
+ "defaultValue": "该属性的默认值为空"
+ },
+ {
+ "name": "popper-class",
+ "sample": "popper-class",
+ "type": "String",
+ "desc": "TimePicker 下拉框的 class 类名",
+ "defaultValue": ""
+ },
+ {
+ "name": "picker-options",
+ "sample": "picker-options",
+ "type": "Object",
+ "desc": "当前时间日期选择器特有的选项参考下表",
+ "defaultValue": "该属性的默认值为 {}"
+ },
+ {
+ "name": "default-value",
+ "sample": "default-value",
+ "type": "Date",
+ "desc": "可选,当选中的日期值为空时,选择器面板打开时默认显示的时间,需设置为可被new Date()解析的值",
+ "defaultValue": ""
+ },
+ {
+ "name": "name",
+ "sample": "name",
+ "type": "String",
+ "desc": "原生属性",
+ "defaultValue": ""
+ },
+ {
+ "name": "suffix-icon",
+ "sample": "suffix-icon",
+ "type": "String",
+ "desc": "自定义头部图标",
+ "defaultValue": "该自定后置图标,该属性的默认值为 IconCalendar"
+ },
+ {
+ "name": "clear-icon",
+ "sample": "clear-icon",
+ "type": "String",
+ "desc": "自定义清空图标",
+ "defaultValue": "该属性的默认值为 IconOperationfaild"
+ },
+ {
+ "name": "popper-append-to-body",
+ "sample": "",
+ "type": "Boolean",
+ "desc": "是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false",
+ "defaultValue": "该属性的默认值为 true"
+ }
+ ],
+ "methods": [
+ {
+ "name": "focus",
+ "sample": "focus",
+ "type": "",
+ "desc": "使 input 获取焦点",
+ "defaultValue": ""
+ }
+ ],
+ "events": [
+ {
+ "name": "change",
+ "sample": "event-blur",
+ "type": "",
+ "desc": "用户确认选定的值时触发",
+ "defaultValue": ""
+ },
+ {
+ "name": "blur",
+ "sample": "event-blur",
+ "type": "",
+ "desc": "当 input 失去焦点时触发",
+ "defaultValue": ""
+ },
+ {
+ "name": "focus",
+ "sample": "event-blur",
+ "type": "",
+ "desc": "当 input 获得焦点时触发",
+ "defaultValue": ""
+ }
+ ]
+}
diff --git a/examples/docs/resources/pc/api/zh-CN/toggle-menu.json b/examples/docs/resources/pc/api/zh-CN/toggle-menu.json
new file mode 100644
index 000000000..f1fffacd3
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/toggle-menu.json
@@ -0,0 +1,169 @@
+{
+ "attrs": [
+ {
+ "name": "data",
+ "sample": "basic-usage",
+ "type": "Array",
+ "desc": "设置收缩菜单的数据。",
+ "defaultValue": ""
+ },
+ {
+ "name": "dragable",
+ "sample": "dragable",
+ "type": "Boolean",
+ "desc": "设置是否开启拖拽节点的功能,默认值为 `false`",
+ "defaultValue": ""
+ },
+ {
+ "name": "show-filter",
+ "sample": "show-filter",
+ "type": "Boolean",
+ "desc": "设置是否展示过滤搜索框,默认为 `true`。",
+ "defaultValue": ""
+ },
+ {
+ "name": "icon",
+ "sample": "custom-icon",
+ "type": "Object",
+ "desc": "自定义菜单左侧图标。",
+ "defaultValue": ""
+ },
+ {
+ "name": "default-expand-all",
+ "sample": "default-expand-all",
+ "type": "Boolean",
+ "desc": "设置菜单默认是否展开所有节点,默认为 false 。",
+ "defaultValue": ""
+ },
+ {
+ "name": "expand-on-click-node",
+ "sample": "default-expand-all",
+ "type": "Boolean",
+ "desc": "设置是否可以通过点击节点展开/收起菜单,默认为 false。",
+ "defaultValue": ""
+ },
+ {
+ "name": "placeholder",
+ "sample": "show-filter",
+ "type": "String",
+ "desc": "输入框占位符。",
+ "defaultValue": ""
+ },
+ {
+ "name": "ellipsis",
+ "sample": "dragable",
+ "type": "Boolean",
+ "desc": "菜单内容超长时省略显示,默认为 false 。",
+ "defaultValue": ""
+ },
+ {
+ "name": "wrap",
+ "sample": "show-filter",
+ "type": "Boolean",
+ "desc": "菜单内容超长时换行显示,默认为 false 。",
+ "defaultValue": ""
+ },
+ {
+ "name": "automatic-filtering",
+ "sample": "automatic-filtering",
+ "type": "Boolean",
+ "desc": "输入框输入内容时是否自动过滤内容,默认是 true 。",
+ "defaultValue": ""
+ },
+ {
+ "name": "props",
+ "sample": "toggle-props",
+ "type": "Object",
+ "desc": "配置数据选项的映射字段名称",
+ "defaultValue": "该属性的默认值为 {children: 'children',label: 'label',disabled: 'disabled'}"
+ },
+ {
+ "name": "get-menu-data-sync",
+ "sample": "get-menu-data-sync",
+ "type": "Function",
+ "desc": "自定义菜单数据服务,直接返回数据(deprecated v3.4.0废弃, v3.16.0移除;移除原因:如果是同步数据则和:data功能重复)",
+ "defaultValue": ""
+ },
+ {
+ "name": "get-menu-data-async",
+ "sample": "get-menu-data-aync",
+ "type": "Function",
+ "desc": "自定义菜单数据服务,返回异步数据,需返回Promise对象",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "node",
+ "sample": "toggle-props",
+ "type": "",
+ "desc": "自定义插槽",
+ "defaultValue": ""
+ }
+ ],
+ "events": [
+ {
+ "name": "node-click",
+ "sample": "node-click",
+ "type": "Function(arg1,arg2)",
+ "desc": "点击节点后的事件。;点击节点后触发的回调函数;//参数arg1:\n{children: 点击节点的子节点, id: 点击节点的id ,label: 点击节点的title} \n//参数arg2:\n Object 当前点击节点的数据信息对象 ",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-expand",
+ "sample": "node-expand",
+ "type": "Function(arg1,arg2,arg3)",
+ "desc": "展开节点后的事件。;节点被展开时触发的事件;//参数arg1:\n{children: 点击节点的子节点, id: 点击节点的id, label: 点击节点的title}\n//参数arg2:\nVueComponent 点击节点的componet对象信息\n//参数arg3:\n{ children: 点击节点的子节点id: 点击节点的id, label: 点击节点的title}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-collapse",
+ "sample": "node-collapse",
+ "type": "Function(arg1,arg2)",
+ "desc": "收缩节点后的事件。;节点被关闭时触发的事件;//参数arg1:Object \n{children: 点击节点的子节点,id: 点击节点的id,label: 点击节点的title}\n//参数arg2:Object 当前点击节点的数据信息对象",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-start",
+ "sample": "drag-events",
+ "type": "Function(arg1,arg2)",
+ "desc": "节点开始拖拽时触发的事件。;节点开始拖拽时触发的事件。;//参数: \narg1:Object 当前拖拽节点的数据信息对象\narg2:event ",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-enter",
+ "sample": "drag-events",
+ "type": "Function(arg1,arg2)",
+ "desc": "拖拽进入其他节点时触发的事件;拖拽进入其他节点时触发的事件;//参数\narg1:Object 当前拖拽节点的数据信息对象\narg2: Object 当前点击节点拖拽后位置的节点数据信息对象",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-leave",
+ "sample": "drag-events",
+ "type": "Function(arg1,arg2)",
+ "desc": "拖拽离开某个节点时触发的事件;拖拽离开某个节点时触发的事件;//参数\narg1:Object 当前拖拽节点的数据信息对象\narg2: Object 当前拖出后节点的数据信息对象",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-over",
+ "sample": "drag-events",
+ "type": "Function(arg1,arg2,arg3)",
+ "desc": "在拖拽节点时触发的事件(类似浏览器的 mouseover 事件);在拖拽节点时触发的事件(类似浏览器的 mouseover 事件);//参数\narg1:Object 当前拖拽节点的数据信息对象\narg2:Object 当前拖拽节点拖拽时节点的数据信息对象\n arg3:event ",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-end",
+ "sample": "drag-events",
+ "type": "Function(arg1,arg2,arg3,arg4)",
+ "desc": "拖拽结束时(r可能未成功)触发的事件;拖拽成功完成时触发的事件;//参数\narg1: Object当前拖拽节点的数据信息对象\narg2: Object当前点击节点拖拽后位置的节点数据信息对象\narg3: 拖拽的类型,如:'inner'\narg4:event ",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drop",
+ "sample": "node-drop",
+ "type": "Function(arg1,arg2)",
+ "desc": "拖放节点后的事件。开启 dragable 属性为 true 有效。;拖放节点后的事件。开启 dragable 属性为 true 有效。;//参数\narg1:Object 当前拖拽节点的数据信息对象\n arg2:Object 当前点击节点拖拽后的位置节点的数据信息对象\narg3: 拖拽的类型\narg4:event ",
+ "defaultValue": ""
+ }
+ ]
+}
diff --git a/examples/docs/resources/pc/api/zh-CN/tooltip.json b/examples/docs/resources/pc/api/zh-CN/tooltip.json
new file mode 100644
index 000000000..f4f10fe7c
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/tooltip.json
@@ -0,0 +1,146 @@
+{
+ "attrs": [
+ {
+ "name": "effect",
+ "sample": "tooltip-theme",
+ "type": "String",
+ "desc": "默认提供的主题;该属性的可选值为 dark/light",
+ "defaultValue": "该属性的默认值为 dark"
+ },
+ {
+ "name": "content",
+ "sample": "basic-usage",
+ "type": "String",
+ "desc": "显示的内容,也可以通过 slot#content 传入 DOM",
+ "defaultValue": ""
+ },
+ {
+ "name": "append-to-body",
+ "sample": "",
+ "type": "Boolean",
+ "desc": "是否添加到body上",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "placement",
+ "sample": "basic-usage",
+ "type": "String",
+ "desc": "Tooltip 的出现位置;该属性的可选值为 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end",
+ "defaultValue": "该属性的默认值为 bottom"
+ },
+ {
+ "name": "modelValue / v-model",
+ "sample": "manual-control-tip",
+ "type": "Boolean",
+ "desc": "状态是否可见",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "disabled",
+ "sample": "dynamic-disable",
+ "type": "Boolean",
+ "desc": "Tooltip 是否可用",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "offset",
+ "sample": "tooltip-offset",
+ "type": "Number",
+ "desc": "出现位置的偏移量",
+ "defaultValue": "该属性的默认值为 0"
+ },
+ {
+ "name": "transition",
+ "sample": "custom-transition",
+ "type": "String",
+ "desc": "定义渐变动画",
+ "defaultValue": "该属性的默认值为 tiny-fade-in-linear"
+ },
+ {
+ "name": "visible-arrow",
+ "sample": "visible-arrow",
+ "type": "Boolean",
+ "desc": "是否显示 Tooltip 箭头,popper.js 的参数",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "popper-options",
+ "sample": "popper-options",
+ "type": "Object",
+ "desc": "popper.js 的参数;该属性的可选值为 参考 popper.js 文档",
+ "defaultValue": "该属性的默认值为 { boundariesCBG XUI: 'body', gpuAcceleration: false }"
+ },
+ {
+ "name": "open-delay",
+ "sample": "open-delay",
+ "type": "Number",
+ "desc": "延迟出现,单位毫秒",
+ "defaultValue": "该属性的默认值为 0"
+ },
+ {
+ "name": "manual",
+ "sample": "manual-control-tip",
+ "type": "Boolean",
+ "desc": "手动控制模式,设置为 true 后,mouseenter 和 mouseleave 事件将不会生效",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "visible",
+ "sample": "visible-show",
+ "type": "String",
+ "desc": "提示的智能出现的模式;该属性的可选值为 auto/always",
+ "defaultValue": "该属性的默认值为 always"
+ },
+ {
+ "name": "popper-class",
+ "sample": "popper-class",
+ "type": "String",
+ "desc": "为 Tooltip 的 popper 添加类名",
+ "defaultValue": ""
+ },
+ {
+ "name": "enterable",
+ "sample": "enterable",
+ "type": "Boolean",
+ "desc": "鼠标是否可进入到 tooltip 中",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "hide-after",
+ "sample": "open-delay",
+ "type": "Number",
+ "desc": "Tooltip 出现后自动隐藏延时,单位毫秒,为 0 则不会自动隐藏",
+ "defaultValue": "该属性的默认值为 0"
+ },
+ {
+ "name": "tabindex",
+ "sample": "tabindex",
+ "type": "Number",
+ "desc": "配置该元素,配置的属性会自动添加到该组件的触发原上",
+ "defaultValue": ""
+ },
+ {
+ "name": "renderContent",
+ "sample": "tooltip-render-content",
+ "type": "Function(arg1,arg2)",
+ "desc": "自定义渲染函数,返回需要渲染的节点内容 arg1:Vue的渲染函数h arg2:传递给组件的content文本",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "sample": "tooltip-content",
+ "type": "",
+ "desc": "默认插槽",
+ "defaultValue": ""
+ },
+ {
+ "name": "content",
+ "sample": "tooltip-content",
+ "type": "",
+ "desc": "内容",
+ "defaultValue": ""
+ }
+ ]
+}
diff --git a/examples/docs/resources/pc/api/zh-CN/top-box.json b/examples/docs/resources/pc/api/zh-CN/top-box.json
new file mode 100644
index 000000000..9e26dfeeb
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/top-box.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/transfer.json b/examples/docs/resources/pc/api/zh-CN/transfer.json
new file mode 100644
index 000000000..6be53c3ff
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/transfer.json
@@ -0,0 +1,241 @@
+{
+ "attrs": [
+ {
+ "name": "data",
+ "sample": "data-source",
+ "type": "Array",
+ "desc": "Transfer 的数据源",
+ "defaultValue": ""
+ },
+ {
+ "name": "modelValue / v-model",
+ "sample": "data-source",
+ "type": "Array",
+ "desc": "绑定值",
+ "defaultValue": ""
+ },
+ {
+ "name": "filterable",
+ "sample": "filterable",
+ "type": "Boolean",
+ "desc": "是否可搜索",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "filter-placeholder",
+ "sample": "filter-placeholder",
+ "type": "String",
+ "desc": "搜索框占位符",
+ "defaultValue": "该属性的默认值为 请输入搜索内容"
+ },
+ {
+ "name": "filter-method",
+ "sample": "custom-filter-method",
+ "type": "Function(arg1,arg2)",
+ "desc": "设置穿梭框的搜索过滤字段, 此属性只在渲染类型(renderType)为 table 时生效;// 自定义搜索方法参数 \narg1:String 输入的过滤字串\narg2:Object 每一个数据项",
+ "defaultValue": ""
+ },
+ {
+ "name": "titles",
+ "sample": "custom-transfer-titles",
+ "type": "Array",
+ "desc": "自定义列表标题",
+ "defaultValue": "该属性的默认值为 ['列表 1', '列表 2']"
+ },
+ {
+ "name": "button-texts",
+ "sample": "custom-button-texts",
+ "type": "Array",
+ "desc": "自定义按钮文案",
+ "defaultValue": "该属性的默认值为 []"
+ },
+ {
+ "name": "render-content",
+ "sample": "custom-render-content",
+ "type": "Function(arg1,arg2)",
+ "desc": "自定义数据项渲染函数;arg1:{Function 创建虚拟节点的函数},arg2:{Object 数据项}",
+ "defaultValue": ""
+ },
+ {
+ "name": "format",
+ "sample": "checked-format-text",
+ "type": "Object",
+ "desc": "列表顶部勾选状态文案",
+ "defaultValue": "该属性的默认值为 { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }"
+ },
+ {
+ "name": "props",
+ "sample": "props-of-data-source",
+ "type": "Object",
+ "desc": "数据源的字段别名",
+ "defaultValue": ""
+ },
+ {
+ "name": "left-default-checked",
+ "sample": "default-checked",
+ "type": "Array",
+ "desc": "初始状态下左侧列表的已勾选项的 key 数组",
+ "defaultValue": "该属性的默认值为 []"
+ },
+ {
+ "name": "right-default-checked",
+ "sample": "default-checked",
+ "type": "Array",
+ "desc": "初始状态下右侧列表的已勾选项的 key 数组",
+ "defaultValue": "该属性的默认值为 []"
+ },
+ {
+ "name": "target-order",
+ "sample": "target-order",
+ "type": "String",
+ "desc": "右侧列表元素的排序策略:若为 original,则保持与数据源相同的顺序;若为 push,则新加入的元素排在最后;若为 unshift,则新加入的元素排在最前;该属性的可选值为 original / push / unshift",
+ "defaultValue": "该属性的默认值为 original"
+ },
+ {
+ "name": "to-left-disable",
+ "sample": "data-source",
+ "type": "Boolean",
+ "desc": "提供给用户控制穿梭框按钮禁用状态的属性,组件初始化状态下未选中时显示禁用状态,默认值为true",
+ "defaultValue": ""
+ },
+ {
+ "name": "to-right-disable",
+ "sample": "data-source",
+ "type": "Boolean",
+ "desc": "提供给用户控制穿梭框按钮禁用状态的属性,组件初始化状态下未选中时显示禁用状态,默认值为true",
+ "defaultValue": ""
+ },
+ {
+ "name": "show-all-btn",
+ "sample": "show-all-btn",
+ "type": "Boolean",
+ "desc": "展示全部移动按钮",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "drop-config",
+ "sample": "drop-config",
+ "type": "Object",
+ "desc": "设置穿梭框列表项可拖拽",
+ "defaultValue": ""
+ },
+ {
+ "name": "columns",
+ "sample": "nested-table",
+ "type": "Array",
+ "desc": "设置穿梭框的表格列配置, 此属性只在渲染类型(renderType)为 table 时生效;设置穿梭框的表格列配置, 此属性只在渲染类型(renderType)为 grid 时生效",
+ "defaultValue": ""
+ },
+ {
+ "name": "page-vo",
+ "sample": "nested-table",
+ "type": "Object",
+ "desc": "设置分页配置,此属性只在渲染类型为 grid 时生效,需要与 pager-op 一起使用",
+ "defaultValue": "该属性的默认值为 {currentPage:1,pageSize:10}"
+ },
+ {
+ "name": "show-pager",
+ "sample": "nested-table",
+ "type": "Boolean",
+ "desc": "设置是否显示分页,当渲染为表格时有效",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "pager-op",
+ "sample": "nested-table",
+ "type": "Object",
+ "desc": "设置分页配置,当渲染为表格时有效",
+ "defaultValue": "该属性的默认值为 {mode: 'fixed',pageVO: {currentPage: 1,pageSize: 10}"
+ },
+ {
+ "name": "render",
+ "sample": "nested-table",
+ "type": "Object",
+ "desc": "当plugin设置为Table时设置渲染为表格;当plugin设置为Tree渲染为树",
+ "defaultValue": ""
+ },
+ {
+ "name": "tree-op",
+ "sample": "nested-tree",
+ "type": "Object",
+ "desc": "当plugin设置为Tree渲染为树时,设置树的相关配置属性",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "left-footer",
+ "sample": "custom-footer",
+ "type": "",
+ "desc": "左侧列表底部的内容",
+ "defaultValue": ""
+ },
+ {
+ "name": "right-footer",
+ "sample": "custom-footer",
+ "type": "",
+ "desc": "右侧列表底部的内容",
+ "defaultValue": ""
+ },
+ {
+ "name": "button",
+ "sample": "panel-slot",
+ "type": "",
+ "desc": "自定义穿梭按钮",
+ "defaultValue": ""
+ },
+ {
+ "name": "default",
+ "sample": "custom-render-content",
+ "type": "",
+ "desc": "自定义数据项的内容,参数为 { option }",
+ "defaultValue": ""
+ },
+ {
+ "name": "leftPanel",
+ "sample": "",
+ "type": "",
+ "desc": "左侧自定义内容",
+ "defaultValue": ""
+ },
+ {
+ "name": "rightPanel",
+ "sample": "",
+ "type": "",
+ "desc": "右侧自定义内容",
+ "defaultValue": ""
+ }
+ ],
+ "methods": [
+ {
+ "name": "clearQuery",
+ "sample": "manual-clear-query",
+ "type": "",
+ "desc": "清空某个面板的搜索关键词",
+ "defaultValue": ""
+ }
+ ],
+ "events": [
+ {
+ "name": "change",
+ "sample": "transfer-events",
+ "type": "Function(arg1,arg2,arg3)",
+ "desc": "右侧列表元素变化时触发;//参数arg1:Array 穿梭框右侧数据值列表\n//参数arg2:String 数据移动方向,是left或者right\n//参数arg3:Array 被移动的数据值列表",
+ "defaultValue": ""
+ },
+ {
+ "name": "left-check-change",
+ "sample": "transfer-events",
+ "type": "Function(arg1,arg2)",
+ "desc": "左侧列表元素被用户选中 / 取消选中时触发;//参数arg1:Array 穿梭框左侧被选中的数据值列表\n//参数arg2:Array 穿梭框左侧选中状态发生变化的数据值列表",
+ "defaultValue": ""
+ },
+ {
+ "name": "right-check-change",
+ "sample": "transfer-events",
+ "type": "Function(arg1,arg2)",
+ "desc": "右侧列表元素被用户选中 / 取消选中时触发;//参数arg1:Array 穿梭框右侧被选中的数据值列表\n//参数arg2:Array 穿梭框右侧选中状态发生变化的数据值列表",
+ "defaultValue": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/tree-menu.json b/examples/docs/resources/pc/api/zh-CN/tree-menu.json
new file mode 100644
index 000000000..06dd6cff2
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/tree-menu.json
@@ -0,0 +1,232 @@
+{
+ "attrs": [
+ {
+ "name": "accordion",
+ "sample": "accordion",
+ "type": "Boolean",
+ "desc": "是否展示手风琴效果,默认值为 false",
+ "defaultValue": ""
+ },
+ {
+ "name": "allow-drag",
+ "sample": "",
+ "type": "Function(params)",
+ "desc": "拖拽菜单回调事件,需配置draggable使用,return false(阻止拖动),true(允许拖动);params1:拖拽的节点数据信息对象",
+ "defaultValue": ""
+ },
+ {
+ "name": "allow-drop",
+ "sample": "",
+ "type": "Function(params1,params2,params3)",
+ "desc": "拖拽菜单回调事件,需配置draggable使用,return false(阻止拖放),true(允许拖放);//params1:Object 拖拽的节点数据信息对象\n//params2:Object 拖拽的节点数据信息对象\n//params3:'prev'或者'inner'或者'next'",
+ "defaultValue": ""
+ },
+ {
+ "name": "show-title",
+ "sample": "text-wrap",
+ "type": "Boolean",
+ "desc": "是否显示节点的 title 提示,鼠标悬浮节点之上触发。",
+ "defaultValue": ""
+ },
+ {
+ "name": "show-filter",
+ "sample": "text-wrap",
+ "type": "Boolean",
+ "desc": "是否开启输入框进行输入筛选节点,默认值为 true",
+ "defaultValue": ""
+ },
+ {
+ "name": "data",
+ "sample": "data-resource",
+ "type": "Array",
+ "desc": "展示数据",
+ "defaultValue": ""
+ },
+ {
+ "name": "empty-text",
+ "sample": "empty-text",
+ "type": "String",
+ "desc": "内容为空的时候展示的文本",
+ "defaultValue": ""
+ },
+ {
+ "name": "filter-node-method",
+ "sample": "filter-node-method",
+ "type": "Function(value, data, node)",
+ "desc": "对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏",
+ "defaultValue": ""
+ },
+ {
+ "name": "expand-on-click-node",
+ "sample": "expand-on-click-node",
+ "type": "",
+ "desc": "配置点击菜单文字是否能展开菜单",
+ "defaultValue": ""
+ },
+ {
+ "name": "ellipsis",
+ "sample": "text-ellipsis",
+ "type": "Boolean",
+ "desc": "是否省略显示。优先级高于wrap。配置为 true,节点文字显示需要的宽度超过容器的宽度,节点文字不换行,也不会出现横向滚动条,超出部分文字显示为'...'",
+ "defaultValue": ""
+ },
+ {
+ "name": "indent",
+ "sample": "tree-menu-indent",
+ "type": "Number",
+ "desc": "相邻级节点间的水平缩进,单位为像素",
+ "defaultValue": ""
+ },
+ {
+ "name": "default-expand-all",
+ "sample": "default-expand-all",
+ "type": "",
+ "desc": "初始化展开所有子节点",
+ "defaultValue": ""
+ },
+ {
+ "name": "draggable",
+ "sample": "can-draggable",
+ "type": "",
+ "desc": "拖动菜单",
+ "defaultValue": ""
+ },
+ {
+ "name": "wrap",
+ "sample": "text-wrap",
+ "type": "Boolean",
+ "desc": "是否换行显示。",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "default-expanded-keys",
+ "sample": "default-expanded-keys",
+ "type": "Array",
+ "desc": "默认展开的节点的 key 的数组",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-key",
+ "sample": "default-expand-all",
+ "type": "String",
+ "desc": "每个树节点用来作为唯一标识的属性,整棵树应该是唯一的",
+ "defaultValue": ""
+ },
+ {
+ "name": "prefix-icon",
+ "sample": "text-ellipsis",
+ "type": "Object",
+ "desc": "自定义前置图标。",
+ "defaultValue": ""
+ },
+ {
+ "name": "search-icon",
+ "sample": "search-icon",
+ "type": "Object",
+ "desc": "自定义搜索图标。",
+ "defaultValue": ""
+ },
+ {
+ "name": "check-strictly",
+ "sample": "check-strictly",
+ "type": "Boolean",
+ "desc": "在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false, 需要与 show-checkbox 一起使用",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "lazy",
+ "sample": "lazy-load",
+ "type": "Boolean",
+ "desc": "是否懒加载子节点,需与 load 方法结合使用",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "load",
+ "sample": "lazy-load",
+ "type": "Function(node, resolve)",
+ "desc": "加载子树数据的方法,仅当 lazy 属性为true 时生效",
+ "defaultValue": ""
+ },
+ {
+ "name": "show-checkbox",
+ "sample": "check-strictly",
+ "type": "Boolean",
+ "desc": "节点是否可被选择",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "default-checked-keys",
+ "sample": "default-expand-all",
+ "type": "Array",
+ "desc": "默认勾选的节点的 key 的数组",
+ "defaultValue": ""
+ },
+ {
+ "name": "get-menu-data-sync",
+ "sample": "get-menu-data-sync",
+ "type": "Function",
+ "desc": "自定义菜单数据服务,返回一个Promise对象。",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "sample": "tree-menu-slot",
+ "type": "",
+ "desc": "自定义树节点的内容,参数为 { node, data }",
+ "defaultValue": ""
+ }
+ ],
+ "events": [
+ {
+ "name": "node-click",
+ "sample": "event-current-change",
+ "type": "Function(arg1,arg2)",
+ "desc": "节点被点击时的回调;//参数: arg1:Object \n{ children: 点击节点的子节点, id: 点击节点的id, label: 点击节点的title }\n// arg2:Object // 当前点击节点的数据信息对象",
+ "defaultValue": ""
+ },
+ {
+ "name": "current-change",
+ "sample": "event-current-change",
+ "type": "Function(arg1,arg2)",
+ "desc": "当前选中节点变化时触发的事件;//参数: arg1:Object \n{ children: 点击节点的子节点, id: 点击节点的id, label: 点击节点的title }\n// arg2:Object // 当前点击节点的数据信息对象",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-expand",
+ "sample": "event-node-expand",
+ "type": "Function(arg1,arg2)",
+ "desc": "节点被展开时触发的事件;//参数: arg1:Object \n{ children: 点击节点的子节点, id: 点击节点的id, label: 点击节点的title }\n// arg2:Object // 当前点击节点的数据信息对象",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-collapse",
+ "sample": "event-node-collapse",
+ "type": "Function(arg1,arg2)",
+ "desc": "节点被关闭时触发的事件;//参数: arg1:Object \n{ children: 点击节点的子节点, id: 点击节点的id, label: 点击节点的title }\n// arg2:Object // 当前点击节点的数据信息对象",
+ "defaultValue": ""
+ },
+ {
+ "name": "check-change",
+ "sample": "event-check-change",
+ "type": "Function(arg1,arg2,arg3)",
+ "desc": "节点选中状态发生变化时的回调;//参数: arg1:Object \n{ children: 点击节点的子节点, id: 点击节点的id, label: 点击节点的title }\n// arg2:Boolean // 当前点击节点的勾选状态\n // arg3:Boolean // 当前点击节点之前的勾选状态",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-start",
+ "sample": "event-allow-draggable",
+ "type": "Function(node, event)",
+ "desc": "节点开始拖拽时触发的事件;节点开始拖拽时触发的事件;node: 拖拽节点,event: 原生事件",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-end",
+ "sample": "event-allow-draggable",
+ "type": "Function(draggingNode, targetNode, dropType, event)",
+ "desc": "拖拽结束时(可能未成功)触发的事件;//参数\n{draggingNode: 拖拽节点,targetNode: 目标节点,dropType: 拖拽类型, //拖拽节点在目标节点对应关系(before/after/inner/none)\nevent: 原生事件}",
+ "defaultValue": ""
+ }
+ ]
+}
diff --git a/examples/docs/resources/pc/api/zh-CN/tree-node.json b/examples/docs/resources/pc/api/zh-CN/tree-node.json
new file mode 100644
index 000000000..9e26dfeeb
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/tree-node.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/tree.json b/examples/docs/resources/pc/api/zh-CN/tree.json
new file mode 100644
index 000000000..621ee0e07
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/tree.json
@@ -0,0 +1,444 @@
+{
+ "attrs": [
+ {
+ "name": "data",
+ "sample": "data-source",
+ "type": "Array",
+ "desc": "设置数据源。可配置静态数据源和动态数据源。;展示数据",
+ "defaultValue": ""
+ },
+ {
+ "name": "expand-icon",
+ "sample": "set-tree-icon",
+ "type": "Object",
+ "desc": "指示展开的图标",
+ "defaultValue": ""
+ },
+ {
+ "name": "icon-trigger-click-node",
+ "sample": "check-on-click-node",
+ "type": "Boolean",
+ "desc": "点击图标展开节点时是否触发 node-click 事件",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "show-contextmenu",
+ "sample": "contextmenu",
+ "type": "Boolean",
+ "desc": "右键点击节点是否弹窗自定义菜单,默认值为 false",
+ "defaultValue": ""
+ },
+ {
+ "name": "shrink-icon",
+ "sample": "set-tree-icon",
+ "type": "Object",
+ "desc": "指示收缩的图标",
+ "defaultValue": ""
+ },
+ {
+ "name": "empty-text",
+ "sample": "custom-empty-text",
+ "type": "String",
+ "desc": "内容为空的时候展示的文本",
+ "defaultValue": ""
+ },
+ {
+ "name": "render-after-expand",
+ "sample": "render-after-expand",
+ "type": "Boolean",
+ "desc": "是否在第一次展开某个树节点后才渲染其子节点",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "node-key",
+ "sample": "node-key",
+ "type": "String",
+ "desc": "节点唯一标识属性名称。;每个树节点用来作为唯一标识的属性,整棵树应该是唯一的",
+ "defaultValue": ""
+ },
+ {
+ "name": "check-strictly",
+ "sample": "check-strictly",
+ "type": "Boolean",
+ "desc": "在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "default-expand-all",
+ "sample": "default-expand-all",
+ "type": "Boolean",
+ "desc": "是否默认展开所有节点",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "expand-on-click-node",
+ "sample": "expand-on-click-node",
+ "type": "Boolean",
+ "desc": "点击节点展开收起开关。当设置为true: 点击节点内容时可展开/收起节点。设置为false: 只有点击节点名称前面的展开/收起图标才能进行节点展开/收起。;是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "check-on-click-node",
+ "sample": "check-on-click-node",
+ "type": "Boolean",
+ "desc": "是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "auto-expand-parent",
+ "sample": "auto-expand-parent",
+ "type": "Boolean",
+ "desc": "展开子节点的时候是否自动展开父节点",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "default-checked-keys",
+ "sample": "default-checked-keys",
+ "type": "Array",
+ "desc": "配置默认选中。取值为 key 在数据源 dataset 中所对应的值。组件生成后会默认将 defaultValue 中所对应的节点选中。;默认勾选的节点的 key 的数组",
+ "defaultValue": ""
+ },
+ {
+ "name": "default-expanded-keys",
+ "sample": "default-expanded-keys",
+ "type": "Array",
+ "desc": "默认展开的节点的 key 的数组",
+ "defaultValue": ""
+ },
+ {
+ "name": "render-content",
+ "sample": "render-content",
+ "type": "Function(h, { node, data, store }",
+ "desc": "树节点的内容区的渲染 Function",
+ "defaultValue": ""
+ },
+ {
+ "name": "show-checkbox",
+ "sample": "show-checkbox",
+ "type": "Boolean",
+ "desc": "节点是否可被选择",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "draggable",
+ "sample": "node-draggable",
+ "type": "Boolean",
+ "desc": "是否开启节点拖拽,节点的位置可任意拖放,改变原来的节点的父子结构。;是否开启拖拽节点功能",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "allow-drag",
+ "sample": "allow-drag",
+ "type": "Function(node)",
+ "desc": "判断节点能否被拖拽",
+ "defaultValue": ""
+ },
+ {
+ "name": "allow-drop",
+ "sample": "allow-drop",
+ "type": "Function(draggingNode, dropNode, type)",
+ "desc": "拖拽时判定目标节点能否被放置。type 参数有三种情况:'prev'、'inner' 和 'next',分别表示放置在目标节点前、插入至目标节点和放置在目标节点后",
+ "defaultValue": ""
+ },
+ {
+ "name": "props",
+ "sample": "node-props-config",
+ "type": "Object",
+ "desc": "配置选项,具体看下表",
+ "defaultValue": "该属性的默认值为 {children: 'children',label: 'label',disabled: 'disabled'}"
+ },
+ {
+ "name": "highlight-current",
+ "sample": "highlight-current",
+ "type": "Boolean",
+ "desc": "是否高亮当前选中节点",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "lazy",
+ "sample": "lazy-load-node",
+ "type": "Boolean",
+ "desc": "异步加载模式,展开节点时再请求数据。需要服务支持。;是否懒加载子节点,需与 load 方法结合使用",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "load",
+ "sample": "lazy-load-node",
+ "type": "Function(node, resolve)",
+ "desc": "加载子树数据的方法,仅当 lazy 属性为true 时生效",
+ "defaultValue": ""
+ },
+ {
+ "name": "filter-node-method",
+ "sample": "filter-node",
+ "type": "Function(value, data, node)",
+ "desc": "指定输入筛选时匹配的节点的字段值。showFilter 为 false时无效。;对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏",
+ "defaultValue": ""
+ },
+ {
+ "name": "accordion",
+ "sample": "accordion-mode",
+ "type": "Boolean",
+ "desc": "是否为单一路径。为 true 时,全部层级的节点同级互斥,为数字时,不大于该值的节点同级互斥。;是否每次只打开一个同级树节点展开",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "indent",
+ "sample": "indent",
+ "type": "Number",
+ "desc": "相邻级节点间的水平缩进,单位为像素",
+ "defaultValue": "该属性的默认值为 18"
+ },
+ {
+ "name": "icon",
+ "sample": "custom-node-icon",
+ "type": "Object",
+ "desc": "自定义图标。css : String(图标的总样式名),child : String(叶子节点图标),parent : String(父节点图标,open 打开,close,关闭),expand : String(展开节点图标),collapse : String(收缩节点图标);自定义树节点的图标",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "sample": "slot-deffault",
+ "type": "",
+ "desc": "自定义树节点的内容,参数为 { node, data }",
+ "defaultValue": ""
+ },
+ {
+ "name": "empty",
+ "sample": "custom-empty-text",
+ "type": "",
+ "desc": "自定义空数据文本",
+ "defaultValue": ""
+ }
+ ],
+ "methods": [
+ {
+ "name": "filter",
+ "sample": "filter-node",
+ "type": "(value) => void",
+ "desc": "对树节点进行筛选操作",
+ "defaultValue": ""
+ },
+ {
+ "name": "updateKeyChildren",
+ "sample": "show-checkbox",
+ "type": "(key, data) => void",
+ "desc": "通过 keys 设置节点子元素,使用此方法必须设置 node-key 属性",
+ "defaultValue": ""
+ },
+ {
+ "name": "getCheckedNodes",
+ "sample": "check-on-click-node",
+ "type": "(leafOnly, includeHalfChecked) => result",
+ "desc": "获取选中标识的数据。;若节点可被选择(即 show-checkbox 为 true),则返回目前被选中的节点所组成的数组,仅配置多选时生效",
+ "defaultValue": ""
+ },
+ {
+ "name": "setCheckedNodes",
+ "sample": "show-checkbox",
+ "type": "(keys, leafOnly) => void",
+ "desc": "设置目前勾选的节点,使用此方法必须设置 node-key 属性",
+ "defaultValue": ""
+ },
+ {
+ "name": "getCheckedKeys",
+ "sample": "check-on-click-node",
+ "type": "(leafOnly) => result",
+ "desc": "若节点可被选择(即 show-checkbox 为 true),则返回目前被选中的节点的 key 所组成的数组, 仅配置多选时生效",
+ "defaultValue": ""
+ },
+ {
+ "name": "setCheckedKeys",
+ "sample": "show-checkbox",
+ "type": "(keys, leafOnly) => void",
+ "desc": "通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性",
+ "defaultValue": ""
+ },
+ {
+ "name": "setChecked",
+ "sample": "show-checkbox",
+ "type": "(data,checked,deep) => void",
+ "desc": "通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性。通过第3个参数,可以递归设置所有子节点的勾选状态!",
+ "defaultValue": ""
+ },
+ {
+ "name": "closeMenu",
+ "sample": "contextmenu",
+ "type": "() => void",
+ "desc": "关闭右键点击节点弹窗自定义菜单",
+ "defaultValue": ""
+ },
+ {
+ "name": "getHalfCheckedNodes",
+ "sample": "check-on-click-node",
+ "type": "() => result",
+ "desc": "若节点可被选择(即 show-checkbox 为 true),则返回目前半选中的节点所组成的数组,仅配置多选时生效。",
+ "defaultValue": ""
+ },
+ {
+ "name": "getHalfCheckedKeys",
+ "sample": "check-on-click-node",
+ "type": "() => result",
+ "desc": "若节点可被选择(即 show-checkbox 为 true),则返回目前半选中的节点的 key 所组成的数组,仅配置多选时生效。",
+ "defaultValue": ""
+ },
+ {
+ "name": "getCurrentKey",
+ "sample": "node-key",
+ "type": "() => result",
+ "desc": "获取当前被选中节点的 key,使用此方法必须设置 node-key 属性,若没有节点被选中则返回 ,仅配置单选时生效",
+ "defaultValue": ""
+ },
+ {
+ "name": "getCurrentNode",
+ "sample": "node-key",
+ "type": "() => result",
+ "desc": "获得当前的选中的节点,仅单选模式下生效;获取当前被选中节点的 data,若没有节点被选中则返回 null",
+ "defaultValue": ""
+ },
+ {
+ "name": "setCurrentKey",
+ "sample": "node-key",
+ "type": "(key) => void",
+ "desc": "通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性",
+ "defaultValue": ""
+ },
+ {
+ "name": "setCurrentNode",
+ "sample": "node-key",
+ "type": "(key) => void",
+ "desc": "通过 node 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性",
+ "defaultValue": ""
+ },
+ {
+ "name": "getNode",
+ "sample": "show-checkbox",
+ "type": "(data) => result",
+ "desc": "根据 data 或者 key 拿到 Tree 组件中的 node",
+ "defaultValue": ""
+ },
+ {
+ "name": "remove",
+ "sample": "",
+ "type": "(data) => void",
+ "desc": "删除节点。;删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性",
+ "defaultValue": ""
+ },
+ {
+ "name": "append",
+ "sample": "node-key",
+ "type": "(data, parentNode) => void",
+ "desc": "为 Tree 中的一个节点追加一个子节点",
+ "defaultValue": ""
+ },
+ {
+ "name": "insertBefore",
+ "sample": "node-key",
+ "type": "(data, refNode) => void",
+ "desc": "为 Tree 的一个节点的前面增加一个节点",
+ "defaultValue": ""
+ },
+ {
+ "name": "insertAfter",
+ "sample": "node-key",
+ "type": "(data, refNode) => void",
+ "desc": "根据节点数据在父节点下插入一个子节点。为 Tree 的一个节点的后面增加一个节点",
+ "defaultValue": ""
+ }
+ ],
+ "events": [
+ {
+ "name": "node-click",
+ "sample": "check-on-click-node",
+ "type": "Function(data, node, vm)",
+ "desc": "点击节点后的事件。;节点被点击时的回调;//参数说明\n{data: 节点数据,node: 节点状态信息(包括数据),vm: 组件实例}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-contextmenu",
+ "sample": "node-contextmenu",
+ "type": "Function(event, data, node, vm)",
+ "desc": "当某一节点被鼠标右键点击时会触发该事件;//参数说明\n{data: 节点数据,node: 节点状态信息(包括数据),vm: 组件实例,event:原生事件}",
+ "defaultValue": ""
+ },
+ {
+ "name": "check-change",
+ "sample": "node-events",
+ "type": "Function(data, node, vm)",
+ "desc": "节点选中状态发生变化时的回调;//参数说明\n{node: 节点状态信息(包括数据),checked:当前点击节点的勾选状态,indeterminate}",
+ "defaultValue": ""
+ },
+ {
+ "name": "check",
+ "sample": "drag-events",
+ "type": "Function(data, currentNode)",
+ "desc": "勾选节点后的事件;当复选框被点击的时候触发;//回调参数:\n{data: Object,// 当前选中节点信息\ncurrentNode:Object//树组件目前的选中状态信息,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性}",
+ "defaultValue": ""
+ },
+ {
+ "name": "current-change",
+ "sample": "drag-events",
+ "type": "Function(data, currentNode)",
+ "desc": "当前选中节点变化时触发的事件;//参数说明\n{data: 节点数据,currentNode: 节点状态信息(包括数据)}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-expand",
+ "sample": "default-expanded-keys",
+ "type": "Function(data, node, vm)",
+ "desc": "展开节点后的事件。;节点被展开时触发的事件;//参数说明\n{data: 节点数据,node: 节点状态信息(包括数据,vm: 当前组件实例}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-collapse",
+ "sample": "default-expanded-keys",
+ "type": "Function(data, node, vm)",
+ "desc": "收缩节点后的事件;节点被关闭时触发的事件;//参数说明\n{data: 节点数据,node: 节点状态信息(包括数据),vm: 当前组件实例}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-start",
+ "sample": "drag-events",
+ "type": "Function(node, event)",
+ "desc": "节点开始拖拽时触发的事件;节点开始拖拽时触发的事件;node: 拖拽节点,event: 原生事件",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-enter",
+ "sample": "drag-events",
+ "type": "Function(draggingNode, targetNode, dropType, event)",
+ "desc": "拖拽进入其他节点时触发的事件;//参数\n{draggingNode: 拖拽节点,targetNode: 目标节点,dropType: 拖拽类型, //拖拽节点在目标节点对应关系(before/after/inner/none)\nevent: 原生事件}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-leave",
+ "sample": "drag-events",
+ "type": "Function(draggingNode, targetNode, dropType, event)",
+ "desc": "拖拽离开某个节点时触发的事件;//参数\n{draggingNode: 拖拽节点,targetNode: 目标节点,dropType: 拖拽类型,//拖拽节点在目标节点对应关系(before/after/inner/none)\nevent: 原生事件}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-over",
+ "sample": "drag-events",
+ "type": "Function(raggingNode, targetNode, dropType, event)",
+ "desc": "在拖拽节点时触发的事件(类似浏览器的 mouseover 事件);//参数\n{draggingNode: 拖拽节点,targetNode: 目标节点,dropType: 拖拽类型, //拖拽节点在目标节点对应关系(before/after/inner/none)\nevent: 原生事件}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drag-end",
+ "sample": "drag-events",
+ "type": "Function(draggingNode, targetNode, dropType, event)",
+ "desc": "拖拽结束时(可能未成功)触发的事件;//参数\n{draggingNode: 拖拽节点,targetNode: 目标节点,dropType: 拖拽类型, //拖拽节点在目标节点对应关系(before/after/inner/none)\nevent: 原生事件}",
+ "defaultValue": ""
+ },
+ {
+ "name": "node-drop",
+ "sample": "node-draggable",
+ "type": "Function(draggingNode, targetNode, dropType, event)",
+ "desc": "拖放节点后的事件。开启 dragable 属性为 true 有效。;拖拽成功完成时触发的事件;//参数\n{draggingNode: 拖拽节点,targetNode: 目标节点,dropType: 拖拽类型, //拖拽节点在目标节点对应关系(before/after/inner/none)\nevent: 原生事件}",
+ "defaultValue": ""
+ }
+ ]
+}
diff --git a/examples/docs/resources/pc/api/zh-CN/user-account.json b/examples/docs/resources/pc/api/zh-CN/user-account.json
new file mode 100644
index 000000000..46a5cf467
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/user-account.json
@@ -0,0 +1,55 @@
+{
+ "attrs": [
+ {
+ "name": "getUserInfo",
+ "sample": "custom-service",
+ "type": "Function",
+ "desc": "自定义配置用户查询服务",
+ "defaultValue": ""
+ },
+ {
+ "name": "popper-class",
+ "sample": "",
+ "type": "String",
+ "desc": "为 popper 添加类名(可参考 popover 组件)",
+ "defaultValue": ""
+ },
+ {
+ "name": "popper-append-to-body",
+ "sample": "",
+ "type": "Boolean",
+ "desc": "是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false (可参考 select 组件)",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "getUserImageUrl",
+ "sample": "custom-service",
+ "type": "Function",
+ "desc": "自定义配置获取用户头像服务",
+ "defaultValue": ""
+ },
+ {
+ "name": "showArrow",
+ "sample": "custom-service",
+ "type": "Boolean",
+ "desc": "设置为true时,箭头会与Roles组件的箭头方向保持一致",
+ "defaultValue": ""
+ },
+ {
+ "name": "beforeLogout",
+ "sample": "",
+ "type": "Function(params)",
+ "desc": "注销前的回调函数",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "sample": "custom-operation",
+ "type": "",
+ "desc": "默认插槽",
+ "defaultValue": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/user-contact.json b/examples/docs/resources/pc/api/zh-CN/user-contact.json
new file mode 100644
index 000000000..3cabbc278
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/user-contact.json
@@ -0,0 +1,62 @@
+{
+ "attrs": [
+ {
+ "name": "data",
+ "sample": "data-source",
+ "type": "Object",
+ "desc": "设置的数据;数据设置",
+ "defaultValue": ""
+ },
+ {
+ "name": "show-img",
+ "sample": "not-displayed-content",
+ "type": "Boolean",
+ "desc": "是否显示头像,默认 true",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "show-name",
+ "sample": "not-displayed-content",
+ "type": "Boolean",
+ "desc": "是否显示姓名 userName,默认 true",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "show-number",
+ "sample": "not-displayed-content",
+ "type": "Boolean",
+ "desc": "是否显示工号 roleNumber,默认 true",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "popper-class",
+ "sample": "",
+ "type": "String",
+ "desc": "为 popper 添加类名(可参考 popover 组件)",
+ "defaultValue": ""
+ },
+ {
+ "name": "popper-append-to-body",
+ "sample": "",
+ "type": "Boolean",
+ "desc": "是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false (可参考 select 组件)",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "espace",
+ "sample": "support-open-espace",
+ "type": "Array",
+ "desc": "espace 信息配置",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "sample": "slots-usercontact",
+ "type": "",
+ "desc": "默认插槽",
+ "defaultValue": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/user-head.json b/examples/docs/resources/pc/api/zh-CN/user-head.json
new file mode 100644
index 000000000..05c5ec0bc
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/user-head.json
@@ -0,0 +1,76 @@
+{
+ "attrs": [
+ {
+ "name": "background-color",
+ "sample": "custom-background-color",
+ "type": "String",
+ "desc": "背景色 。",
+ "defaultValue": "该属性的默认值为 #d9d9d9"
+ },
+ {
+ "name": "color",
+ "sample": "color",
+ "type": "String",
+ "desc": "文字颜色 。",
+ "defaultValue": "该属性的默认值为 #ffffff"
+ },
+ {
+ "name": "message-total",
+ "sample": "message-count-total",
+ "type": "Number",
+ "desc": "消息计数 。",
+ "defaultValue": ""
+ },
+ {
+ "name": "message-type",
+ "sample": "message-count-type",
+ "type": "String",
+ "desc": "消息类型 details|basic 可选 。;该属性的可选值为 details / basic",
+ "defaultValue": "该属性的默认值为 details"
+ },
+ {
+ "name": "message-upper-limit",
+ "sample": "message-count-limit",
+ "type": "Number",
+ "desc": "消息显示上限 。",
+ "defaultValue": "该属性的默认值为 0"
+ },
+ {
+ "name": "min",
+ "sample": "min-user-head",
+ "type": "Boolean",
+ "desc": "小尺寸模式 。",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "round",
+ "sample": "round-user-head",
+ "type": "Boolean",
+ "desc": "圆形模式 。",
+ "defaultValue": ""
+ },
+ {
+ "name": "type",
+ "sample": "image-user-head",
+ "type": "String",
+ "desc": "头像类型,icon|image|label 可选。;该属性的可选值为 icon / image / label",
+ "defaultValue": "该属性的默认值为 label"
+ },
+ {
+ "name": "value",
+ "sample": "icon-user-head",
+ "type": "String",
+ "desc": "type=icon 时为图标类名,type=label时为字体串,type=image时为资源路径",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "default",
+ "sample": "custom-user-head-content",
+ "type": "",
+ "desc": "自定义图像内容",
+ "defaultValue": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/user-link.json b/examples/docs/resources/pc/api/zh-CN/user-link.json
new file mode 100644
index 000000000..b9e0f4e68
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/user-link.json
@@ -0,0 +1,81 @@
+{
+ "attrs": [
+ {
+ "name": "value",
+ "sample": "custom-service",
+ "type": "String",
+ "desc": "配置默认值,默认为空",
+ "defaultValue": ""
+ },
+ {
+ "name": "cache",
+ "sample": "cache-users",
+ "type": "Boolean",
+ "desc": "是否开启用户数据缓存,默认为 ture 缓存用户数据",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "cache-key",
+ "sample": "cache-users",
+ "type": "String",
+ "desc": "自定义缓存 key 默认值为 tiny-user",
+ "defaultValue": "该属性的默认值为 tiny-user"
+ },
+ {
+ "name": "cache-fields",
+ "sample": "cache-users",
+ "type": "Array",
+ "desc": "自定义缓存的字段",
+ "defaultValue": ""
+ },
+ {
+ "name": "value-split",
+ "sample": "value-split",
+ "type": "String",
+ "desc": "在多选的情况下,设置输入框显示多个文本时的分隔符,默认为 ; 分号;在多选的情况下,设置输入框显示多个文本时的分隔符,默认为 , 逗号",
+ "defaultValue": "该属性的默认值为 ,"
+ },
+ {
+ "name": "value-field",
+ "sample": "value-field",
+ "type": "String",
+ "desc": "设置下拉框的值所对应数据源的字段名称",
+ "defaultValue": "该属性的默认值为 userId"
+ },
+ {
+ "name": "text-split",
+ "sample": "text-split",
+ "type": "String",
+ "desc": "在多选的情况下,设置输入框显示多个文本时的分隔符",
+ "defaultValue": "该属性的默认值为 ,"
+ },
+ {
+ "name": "text-field",
+ "sample": "text-field",
+ "type": "String",
+ "desc": "设置下拉框的文本对应的数据源的字段名称",
+ "defaultValue": "该属性的默认值为 userCN"
+ },
+ {
+ "name": "fetchUser",
+ "sample": "custom-service",
+ "type": "Function",
+ "desc": "配置通过员区号查询用户信息(展示在卡片上)",
+ "defaultValue": ""
+ },
+ {
+ "name": "fetchW3Accounts",
+ "sample": "custom-service",
+ "type": "Function",
+ "desc": "自定义配置批量查询用户信息服务",
+ "defaultValue": ""
+ },
+ {
+ "name": "getUserImageUrl",
+ "sample": "custom-service",
+ "type": "Function",
+ "desc": "自定义配置获取用户头像服务",
+ "defaultValue": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/user.json b/examples/docs/resources/pc/api/zh-CN/user.json
new file mode 100644
index 000000000..4295273dd
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/user.json
@@ -0,0 +1,197 @@
+{
+ "attrs": [
+ {
+ "name": "value",
+ "sample": "basic-usage",
+ "type": "String",
+ "desc": "配置默认值",
+ "defaultValue": ""
+ },
+ {
+ "name": "tag-selectable",
+ "sample": "tag-copy",
+ "type": "Boolean",
+ "desc": "是否开启输入框中已选择的选项可复制",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "multiple",
+ "sample": "multiple-users",
+ "type": "Boolean",
+ "desc": "是否开启多用户形式,默认为 false ",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "disabled",
+ "sample": "dynamic-disable",
+ "type": "Boolean",
+ "desc": "是否禁用户组件",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "value-split",
+ "sample": "value-split",
+ "type": "String",
+ "desc": "值分隔符",
+ "defaultValue": "该属性的默认值为 ,"
+ },
+ {
+ "name": "popper-class",
+ "sample": "",
+ "type": "String",
+ "desc": "为 popper 添加类名(可参考 popover 组件)",
+ "defaultValue": ""
+ },
+ {
+ "name": "popper-append-to-body",
+ "sample": "",
+ "type": "Boolean",
+ "desc": "是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false (可参考 select 组件)",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "sort-by-fetch-data",
+ "sample": "custom-service",
+ "type": "Boolean",
+ "desc": "联想时下拉框的数据顺序和接口返回的数据顺序一致",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "textSplit",
+ "sample": "value-split",
+ "type": "String",
+ "desc": "文本分隔符",
+ "defaultValue": "文本粘贴复制查询时的分割符,该属性的默认值为 ,"
+ },
+ {
+ "name": "value-field",
+ "sample": "value-field",
+ "type": "String",
+ "desc": "取值字段映射",
+ "defaultValue": "该属性的默认值为 userId"
+ },
+ {
+ "name": "text-field",
+ "sample": "text-field",
+ "type": "String",
+ "desc": "显示字段映射",
+ "defaultValue": "该属性的默认值为 userCN"
+ },
+ {
+ "name": "cache",
+ "sample": "cache-users",
+ "type": "Boolean",
+ "desc": "是否缓存用户数据",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "cache-key",
+ "sample": "cache-users",
+ "type": "String",
+ "desc": "设置缓存数据的 key 值",
+ "defaultValue": "该属性的默认值为 tiny-user"
+ },
+ {
+ "name": "delay",
+ "sample": "delay-load",
+ "type": "Number",
+ "desc": "设置延时加载的时间",
+ "defaultValue": "该属性的默认值为 600 毫秒"
+ },
+ {
+ "name": "suggest-length",
+ "sample": "load-after-input-the-length",
+ "type": "Number",
+ "desc": "设置输入指定长度完成后进行加载",
+ "defaultValue": "该属性的默认值为 3"
+ },
+ {
+ "name": "cache-fields",
+ "sample": "cache-users",
+ "type": "Array",
+ "desc": "设置需要缓存的用户数据",
+ "defaultValue": "该属性的默认值为 []"
+ },
+ {
+ "name": "fetchW3Accounts",
+ "sample": "custom-service",
+ "type": "Function",
+ "desc": "自定义批量查询用户服务",
+ "defaultValue": ""
+ },
+ {
+ "name": "fetchSuggestUser",
+ "sample": "custom-service",
+ "type": "Function",
+ "desc": "自定义输入查询服务",
+ "defaultValue": ""
+ },
+ {
+ "name": "placeholder",
+ "sample": "basic-usage",
+ "type": "String",
+ "desc": "设置输入框占位文本",
+ "defaultValue": ""
+ },
+ {
+ "name": "collapse-tags",
+ "sample": "multiple-users-tag",
+ "type": "Boolean",
+ "desc": "多用户时是否折叠标签",
+ "defaultValue": "该属性的默认值为 false"
+ },
+ {
+ "name": "collapse-show-overflow-tooltip",
+ "sample": "collapse-show-overflow-tooltip",
+ "type": "Boolean",
+ "desc": "是否省略显示超出一行的数据并有tooltip提示",
+ "defaultValue": "该属性的默认值为 true"
+ },
+ {
+ "name": "sortable",
+ "sample": "custom-sort",
+ "type": "Function",
+ "desc": "自定义用户拖拽排序,该属性引用 sortablejs 插件进行排序",
+ "defaultValue": ""
+ },
+ {
+ "name": "size",
+ "sample": "user-select-size",
+ "type": "String",
+ "desc": "设置用户组件尺寸",
+ "defaultValue": ""
+ },
+ {
+ "name": "allow-copy",
+ "sample": "",
+ "type": "Boolean",
+ "desc": "搜索单选场景,是否允许复制输入框的内容;属性会透传给内部的 Select 组件,参考 Select 示例",
+ "defaultValue": "该属性的默认值为 false,表示不能复制"
+ }
+ ],
+ "slots": [
+ {
+ "name": "options",
+ "sample": "user-options",
+ "type": "",
+ "desc": "选项文本",
+ "defaultValue": ""
+ }
+ ],
+ "events": [
+ {
+ "name": "error",
+ "sample": "event-error",
+ "type": "",
+ "desc": "输入未匹配到用户信息时触发",
+ "defaultValue": ""
+ },
+ {
+ "name": "change",
+ "sample": "event-change",
+ "type": "",
+ "desc": "值发生变化时触发",
+ "defaultValue": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/api/zh-CN/wizard.json b/examples/docs/resources/pc/api/zh-CN/wizard.json
new file mode 100644
index 000000000..06f1bb39f
--- /dev/null
+++ b/examples/docs/resources/pc/api/zh-CN/wizard.json
@@ -0,0 +1,55 @@
+{
+ "attrs": [
+ {
+ "name": "data",
+ "sample": "base-flow",
+ "type": "Array",
+ "desc": "设置流程图的数据",
+ "defaultValue": ""
+ },
+ {
+ "name": "base-flow",
+ "sample": "base-flow",
+ "type": "Boolean",
+ "desc": "设置流程图为基本流程图模式",
+ "defaultValue": ""
+ },
+ {
+ "name": "page-guide",
+ "sample": "page-guide",
+ "type": "Boolean",
+ "desc": "设置流程图为页向导流程图,配合 base-flow 属性使用",
+ "defaultValue": ""
+ },
+ {
+ "name": "vertical",
+ "sample": "vertical",
+ "type": "Boolean",
+ "desc": "设置流程图为垂直流程图",
+ "defaultValue": ""
+ },
+ {
+ "name": "time-line-flow",
+ "sample": "time-line-flow",
+ "type": "Boolean",
+ "desc": "设置流程图为时间线流程图",
+ "defaultValue": ""
+ }
+ ],
+ "slots": [
+ {
+ "name": "base",
+ "sample": "slot-base",
+ "type": "",
+ "desc": "基本流程图插槽",
+ "defaultValue": ""
+ },
+ {
+ "name": "stepbutton",
+ "sample": "slot-step-button",
+ "type": "",
+ "desc": "页向导流程图按钮插槽",
+ "defaultValue": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/action-menu.json b/examples/docs/resources/pc/demo-config/en-US/action-menu.json
new file mode 100644
index 000000000..495460ba6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/action-menu.json
@@ -0,0 +1,82 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Basic usage of the ActionMenu component.",
+ "link": "action-menu/basic-usage",
+ "component": " ActionMenu",
+ "findIntroStr": "ActionMenu",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Disabled",
+ "content": "Use the disabled
field to configure whether the current drop-down list box is disabled.",
+ "link": "action-menu/disabled",
+ "component": "ActionMenu button",
+ "findIntroStr": "ActionMenu",
+ "demoId": "disabled"
+ },
+ {
+ "title": "Display Text",
+ "content": "Use the text-field
attribute to configure the key value of the text to be displayed. The default value is label
.",
+ "link": "action-menu/text-field",
+ "component": " ActionMenu",
+ "findIntroStr": "ActionMenu",
+ "demoId": "text-field"
+ },
+ {
+ "title": "The text of the drop-down button is displayed.",
+ "content": "Use the attribute more-text
to configure the text to be displayed in the drop-down list box. The default value is More
spacing attribute is used to configure the spacing between menu buttons. The default value is 5px
.",
+ "link": "action-menu/spacing",
+ "component": " ActionMenu",
+ "findIntroStr": "ActionMenu",
+ "demoId": "spacing"
+ },
+ {
+ "title": "Customize drop-down panel style",
+ "content": "Set the class name and style of the drop-down panel through the popper-class
attribute.",
+ "link": "action-menu/popper-class",
+ "component": " ActionMenu",
+ "findIntroStr": "ActionMenu",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "Displayed Number",
+ "content": "The max-show-num
attribute specifies the maximum number of displayed menu buttons. The default value is 2
",
+ "link": "action-menu/max-show-num",
+ "component": " ActionMenu",
+ "findIntroStr": "ActionMenu",
+ "demoId": "max-show-num"
+ },
+ {
+ "title": "Menu Item Click Event",
+ "content": "When a menu item is selected, the item-click
event is triggered. The transferred parameter is the data of the selected item.",
+ "link": "action-menu/item-click",
+ "component": " ActionMenu",
+ "findIntroStr": "ActionMenu",
+ "demoId": "item-click"
+ },
+ {
+ "title": "More button click event",
+ "content": "The more-click
event is triggered when a drop-down list button is clicked.",
+ "link": "action-menu/more-click",
+ "component": " ActionMenu",
+ "findIntroStr": "ActionMenu",
+ "demoId": "more-click"
+ },
+ {
+ "title": "Menu Slot",
+ "content": "Use #item
to configure the template for the options in the drop-down list box.",
+ "link": "action-menu/slot-item",
+ "component": " ActionMenu",
+ "findIntroStr": "ActionMenu",
+ "demoId": "slot-item"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/alert.json b/examples/docs/resources/pc/demo-config/en-US/alert.json
new file mode 100644
index 000000000..f20d8574b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/alert.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "alert/base",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "base"
+ },
+ {
+ "title": "Type",
+ "content": "Set different types through type
. The options are success, warning, info, and error. The default value is info.
\n",
+ "link": "alert/type",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "type"
+ },
+ {
+ "title": "Large Size",
+ "content": "Set different sizes through the size
attribute. The options are nomal and large. The default value is nomal.
\n",
+ "link": "alert/size",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "size"
+ },
+ {
+ "title": "Custom Title",
+ "content": "When size
is set to large, the title is displayed. You can set title
or slot
to customize the title. The default title is displayed according to the set type
.
\n",
+ "link": "alert/title",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "title"
+ },
+ {
+ "title": "Center text",
+ "content": "You can use the center
property to center the text.
\n",
+ "link": "alert/center",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "center"
+ },
+ {
+ "title": "Customize the close button text",
+ "content": "Customize the close button text through the close-text
attribute.
\n",
+ "link": "alert/close-text",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "close-text"
+ },
+ {
+ "title": "Customized warning icon",
+ "content": "Customize the icon through the icon
attribute.
\n",
+ "link": "alert/icon",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "icon"
+ },
+ {
+ "title": "Cannot be closed",
+ "content": "You can set whether to display the close button through the closable
attribute. If there is no close button, the warning box cannot be closed.
\n",
+ "link": "alert/closable",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "closable"
+ },
+ {
+ "title": "Customized prompt content",
+ "content": "When size
is set to large, you can customize the prompt content through the description
attribute or slot.
\n",
+ "link": "alert/custom-description",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "custom-description"
+ },
+ {
+ "title": "Customized Interaction",
+ "content": "When size
is large, set the default slot custom interaction operation.
\n",
+ "link": "alert/slot-default",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "slot-default"
+ },
+ {
+ "title": "Close Event",
+ "content": "close
event, triggered when the warning dialog box is closed.
\n",
+ "link": "alert/close",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "close-events"
+ },
+ {
+ "title": "Form submission result feedback",
+ "content": "When size
is set to large, the description
attribute is used together with the default slot to render the feedback submission interface.
\n",
+ "link": "alert/feedback-of-result",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "feedback-of-result"
+ },
+ {
+ "title": "Display icon",
+ "content": "You can set the show-icon
attribute to control whether to display the icon.
\n",
+ "link": "alert/show-icon",
+ "component": "Alert",
+ "findIntroStr": "Alert alarms, including warning, error, info, and success.",
+ "demoId": "show-icon"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/amount.json b/examples/docs/resources/pc/demo-config/en-US/amount.json
new file mode 100644
index 000000000..df540ef7a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/amount.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example ",
+ "link": "amount/basic-usage",
+ "component": "Amount",
+ "findIntroStr": "Used to process currency, amount, and related time. Select a currency type and enter the number and time. You can also set the service. Customized currency type. ",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Set Date",
+ "content": "After the date is set through the date
attribute, the date box is displayed in the amount component. The value can be of the String or Date() type. \n Obtain the changed value through change
.
\n",
+ "link": "amount/set-date",
+ "component": "Amount",
+ "findIntroStr": "is used to process currency, amount, and related time. Select a currency type and enter the number and time. You can also customize the currency type by setting services. ",
+ "demoId": "set-date"
+ },
+ {
+ "title": "editing box size",
+ "content": "The options are as follows:medium
,small
, mini
\n",
+ "link": "amount/size",
+ "component": "Amount",
+ "findIntroStr": "Used to process currency, amount, and time. Select a currency type and enter the number and time. You can also customize the currency type by setting services. ",
+ "demoId": "size"
+ },
+ {
+ "title": "Specified Currency",
+ "content": "The default currency is CNY. You can use currency
to specify the currency. If the specified currency does not exist in the returned service data, the currency is not displayed in the Currency drop-down list box.
\n",
+ "link": "amount/custom-currency",
+ "component": "Amount",
+ "findIntroStr": "is used to process currency, amount, and related time. Select a currency type and enter the number and time. You can also customize the currency type by setting services. ",
+ "demoId": "custom-currency"
+ },
+ {
+ "title": "Amount Setting",
+ "content": "Set the digits
attribute to specify the number of decimal places of the amount. The default value is 2. Set the max-len
attribute to specify the maximum length of an integer. The default value is 15.
\n",
+ "link": "amount/digits-maxlen",
+ "component": "Amount",
+ "findIntroStr": "is used to process currency, amount, and related time. Select a currency type and enter the number and time. You can also customize the currency type by setting services. ",
+ "demoId": "digits-maxlen"
+ },
+ {
+ "title": "Custom Service ",
+ "content": "fetchCurrency
specifies the custom service. fields
can specify the field mapping of the display field and value settings in the service data.
\n",
+ "link": "amount/custom-service",
+ "component": "Amount",
+ "findIntroStr": "is used to process currency, amount, and related time. Select a currency type and enter the number and time. You can also customize the currency type by setting services. ",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "Disable",
+ "content": "You can disable the Amount component by using disabled
.
\n",
+ "link": "amount/amount-disable",
+ "component": "Amount",
+ "findIntroStr": "Used to process the currency, amount, and related time. Select the currency type and fill in the number and time. You can also customize the currency type by setting the service. ",
+ "demoId": "amount-disable"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/anchor.json b/examples/docs/resources/pc/demo-config/en-US/anchor.json
new file mode 100644
index 000000000..af1dfa2e7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/anchor.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Attribute links
: input data rendering",
+ "link": "anchor/basic-usage",
+ "component": "Anchor",
+ "findIntroStr": "Used to jump to the specified position on the page",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Fixed mode",
+ "content": "Set the is-affix
attribute to true so that the anchor does not scroll with the page.",
+ "link": "anchor/is-affix",
+ "component": "Anchor",
+ "findIntroStr": "Used to jump to the specified position on the page",
+ "demoId": "is-affix"
+ },
+ {
+ "title": "Rolling Container",
+ "content": "Use the container-id
attribute to specify the scrolling container. link-click
listens to anchor click events and prevents the default browser behavior. Implement intra-page redirection in single-page hash
routing mode so that the page scrolls only in the specified container. Set the custom class name through the mask-class
attribute to highlight the scrolling target element",
+ "link": "anchor/set-container",
+ "component": "Anchor",
+ "findIntroStr": "Used to jump to the specified position on the page",
+ "demoId": "set-container"
+ },
+ {
+ "title": "change event",
+ "content": "on-change
event. Callback is triggered when the anchor link changes.",
+ "link": "anchor/on-change",
+ "component": "Anchor",
+ "findIntroStr": "Used to jump to the specified position on the page",
+ "demoId": "on-change"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/area.json b/examples/docs/resources/pc/demo-config/en-US/area.json
new file mode 100644
index 000000000..69568184b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/area.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Sets the default value through the v-model / value
property.
\n",
+ "link": "area/basic-usage",
+ "component": "Area",
+ "findIntroStr": "Displays the region name. The options are obtained by configuring the region and data source.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can use fetch-jcr
to customize services to obtain regional JCR data, and fetch-rigion
to obtain regional region data. fetch-rep
is used to obtain the data of rep offices, and fetch-office
is used to obtain the data of offices. In addition, when the data field is not the default name_cn
org_id
, you can set the mapping field of the data through the props
attribute.
\n",
+ "link": "area/custom-service",
+ "component": "Area",
+ "findIntroStr": "Displays the region name. The options are obtained by configuring the region and data source.",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "Set Component Size",
+ "content": "The options are as follows: medium
, small
, mini
\n",
+ "link": "area/size",
+ "component": "Area",
+ "findIntroStr": "Displays the region name. The options are obtained by configuring the region and data source.",
+ "demoId": "size"
+ },
+ {
+ "title": "Event",
+ "content": "The change-region
event is triggered when the value of the Region drop-down list box changes. The change-rep
event is triggered when the value of the Rep drop-down list box changes. The change-office
event is triggered when the value of the Office drop-down list box changes. \n",
+ "link": "area/area-events",
+ "component": "Area",
+ "findIntroStr": "Displays the region name. The options are obtained by configuring the region and data source.",
+ "demoId": "area-events"
+ },
+ {
+ "title": "Set Component Size",
+ "content": "Use disabled
to disable the component. The default value is false.
\n",
+ "link": "area/disabled",
+ "component": "Area",
+ "findIntroStr": "Displays the region name. The options are obtained by configuring the region and data source.",
+ "demoId": "disabled"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/autocomplete.json b/examples/docs/resources/pc/demo-config/en-US/autocomplete.json
new file mode 100644
index 000000000..32957d1be
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/autocomplete.json
@@ -0,0 +1,154 @@
+[
+ {
+ "title": "Disabled",
+ "content": "The disabled
attribute can be set to the disabled state.
\n",
+ "link": "autocomplete/disabled",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "disabled1"
+ },
+ {
+ "title": "Native Attribute",
+ "content": "For details, see the following example.",
+ "link": "autocomplete/disabled",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "disabled"
+ },
+ {
+ "title": "Text box size",
+ "content": "The value can be medium, small, or mini
\n",
+ "link": "autocomplete/size",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "size"
+ },
+ {
+ "title": "Can be cleared",
+ "content": "After the clearable
attribute is configured, the clear icon is displayed after you enter content. You can click to clear the content in the text box.
\n",
+ "link": "autocomplete/clearable",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "clearable"
+ },
+ {
+ "title": "Pre-content in the text box",
+ "content": "Configure the prepend
attribute to set the front content of the text box.
\n",
+ "link": "autocomplete/append-prepend",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "append-prepend"
+ },
+ {
+ "title": "Content after the text box",
+ "content": "Configure the append
attribute to set the content behind the text box.
\n",
+ "link": "autocomplete/append-prepend",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "append-append"
+ },
+ {
+ "title": "Custom Icon",
+ "content": "Configure the prefix-icon
and suffix-icon
attributes to customize the icons before and after the text box.
\n",
+ "link": "autocomplete/custom-icon",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "custom-icon"
+ },
+ {
+ "title": "Customize icons by slot",
+ "content": "You can also customize the front and rear icons of the text box through the prefix
and suffix
slots.
\n",
+ "link": "autocomplete/prefix-suffix-slot",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "prefix-suffix-slot"
+ },
+ {
+ "title": "Debounce Delay",
+ "content": "You can set the dejitter delay for obtaining input suggestions through the debounce
attribute. The default value is 300 ms.
\n",
+ "link": "autocomplete/debounce",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "debounce"
+ },
+ {
+ "title": "Hide the loading icon",
+ "content": "Set hide-loading
to true to hide the loading icon.
\n",
+ "link": "autocomplete/hide-loading",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "hide-loading"
+ },
+ {
+ "title": "Placeholder text in the text box",
+ "content": "Use the placeholder
attribute to set the placeholder text in the text box.
\n",
+ "link": "autocomplete/hide-loading",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "hide-loading1"
+ },
+ {
+ "title": "Custom Template",
+ "content": "You can customize the input suggestion template through the scope slot.
\n",
+ "link": "autocomplete/cust-template",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "cust-template"
+ },
+ {
+ "title": "Remote Search",
+ "content": "Set the remote search through the fetch-suggestions
attribute.
\n",
+ "link": "autocomplete/remote-search",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "remote-search"
+ },
+ {
+ "title": "Specify the key name to be displayed.",
+ "content": "After you enter content, the value corresponding to the value key name of the input object is displayed in the suggestion list by default. If the object does not have a value key name, you can specify the key name by using the value-key
attribute.
\n",
+ "link": "autocomplete/value-key",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "value-key"
+ },
+ {
+ "title": "Custom List Style",
+ "content": "popper-class
property specifies a style class name to customize the style of the suggestion list. The \npopper-append-to-body
property sets whether the drop-down list is inserted into the body element. You can set this property to false when a problem occurs in locating the drop-down list.
\n",
+ "link": "autocomplete/popper-class",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "Set menu pop-up position",
+ "content": "placement
property can be used to set the menu pop-up position. The default value is bottom-start
. The options are top, top-start, top-end, bottom, bottom-start, and bottom-end.
\n",
+ "link": "autocomplete/placement",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "placement"
+ },
+ {
+ "title": "Highlight the first item",
+ "content": "Set the highlight-first-item
attribute to true to highlight the first item in the remote search suggestion.
\n",
+ "link": "autocomplete/highlight-first-item",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "highlight-first-item"
+ },
+ {
+ "title": "Focus does not display the suggestion list",
+ "content": " By default, all suggestions are displayed when the input box is focused. However, if trigger-on-focus
is set to false, the list of matched suggestions is displayed only after the input suggestions are matched.
\n",
+ "link": "autocomplete/no-trigger-on-focus",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "no-trigger-on-focus"
+ },
+ {
+ "title": "Event",
+ "content": "Autocomplete provides the select
event, which is triggered when a suggestion item is selected. The callback parameter is the suggestion item selected. \n Use select-when-unmatched
to set whether to trigger the select event when you press Enter when no matching value is entered. The default value is false.
\n",
+ "link": "autocomplete/select-event",
+ "component": "Autocomplete",
+ "findIntroStr": "Provide input suggestions based on the input content.",
+ "demoId": "select-event"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/badge.json b/examples/docs/resources/pc/demo-config/en-US/badge.json
new file mode 100644
index 000000000..713ce5b3c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/badge.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Badge Displays specified data, such as the number of to-do tasks and the number of new tasks.
\n",
+ "link": "badge/base",
+ "component": "Badge flag",
+ "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+ "demoId": "base"
+ },
+ {
+ "title": "Theme Style",
+ "content": "type
Set the display theme. The options are primary, success, warning, danger, and info. The default value is danger
\n",
+ "link": "badge/type",
+ "component": "Badge flag",
+ "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+ "demoId": "type"
+ },
+ {
+ "title": "Small dot mark",
+ "content": "is-dot
Display small dot mark
\n",
+ "link": "badge/is-dot",
+ "component": "Badge flag",
+ "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+ "demoId": "is-dot"
+ },
+ {
+ "title": "Maximum count value",
+ "content": "max
exceeds the maximum value, '{max}+'
\n is displayed",
+ "link": "badge/max",
+ "component": "Badge flag",
+ "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+ "demoId": "max"
+ },
+ {
+ "title": "Link",
+ "content": "href
Define Jump Link
\n",
+ "link": "badge/target",
+ "component": "Badge flag",
+ "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+ "demoId": "target"
+ },
+ {
+ "title": "Custom Tag Target",
+ "content": "default slot
Tag Content Custom
\n",
+ "link": "badge/slot-default",
+ "component": "Badge flag",
+ "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+ "demoId": "slot-default"
+ },
+ {
+ "title": "Customized prompt content",
+ "content": "content slot
Custom Prompt Content
\n",
+ "link": "badge/slot-content",
+ "component": "Badge flag",
+ "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+ "demoId": "slot-content"
+ },
+ {
+ "title": "Dynamic hiding flag of read messages",
+ "content": "hidden
Hide Tag
\n",
+ "link": "badge/dynamic-hidden",
+ "component": "Badge flag",
+ "findIntroStr": "Badge displays specified data, such as the number of to-do tasks and the number of new tasks.",
+ "demoId": "dynamic-hidden"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/breadcrumb.json b/examples/docs/resources/pc/demo-config/en-US/breadcrumb.json
new file mode 100644
index 000000000..aa0f844e2
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/breadcrumb.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "breadcrumb/base",
+ "component": "Breadcrumb",
+ "findIntroStr": "Breadcrumb navigation, which tells visitors where they are currently on the site and how to get back.",
+ "demoId": "base"
+ },
+ {
+ "title": "Custom Node",
+ "content": "Sets the default slot of the subcomponent BreadcrumbItem and customizes the node content. to
sets the object of route redirection. After replace
is set, no new record is added to history.
\n",
+ "link": "breadcrumb/slot-default",
+ "component": "Breadcrumb",
+ "findIntroStr": "Breadcrumb navigation, which tells visitors where they are currently on the site and how to get back.",
+ "demoId": "slot-default"
+ },
+ {
+ "title": "Custom separator",
+ "content": "Set the separator
or separator-icon
attribute to customize the separator.
\n",
+ "link": "breadcrumb/separator",
+ "component": "Breadcrumb",
+ "findIntroStr": "Breadcrumb navigation, which tells visitors where they are currently on the site and how to get back.",
+ "demoId": "separator"
+ },
+ {
+ "title": "options configuration",
+ "content": "Totally configure each BreadcrumbItem
via options
.
Set textField
to specify the field to be displayed. The default field to be displayed is label
\n",
+ "link": "breadcrumb/options",
+ "component": "Breadcrumb",
+ "findIntroStr": "Breadcrumb navigation, which tells visitors where they are currently on the site and how to get back.",
+ "demoId": "options"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/bulletin-board.json b/examples/docs/resources/pc/demo-config/en-US/bulletin-board.json
new file mode 100644
index 000000000..005e7dd06
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/bulletin-board.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "The data
attribute must be set to set the bulletin information data, and the tab-title
attribute must be set to set the title of each bulletin board.
\n",
+ "link": "bulletin-board/base",
+ "component": "BulletinBoard",
+ "findIntroStr": "BulletinBoard bulletin board component, which displays the information that needs to be paid attention to.",
+ "demoId": "base"
+ },
+ {
+ "title": "Billboard Title",
+ "content": "You can use title
to set the bulletin board title.
\n",
+ "link": "bulletin-board/title",
+ "component": "BulletinBoard",
+ "findIntroStr": "BulletinBoard bulletin board component, which displays the information that needs to be paid attention to.",
+ "demoId": "title"
+ },
+ {
+ "title": "Default Activated Tab",
+ "content": "You can set the default active tab by active-name
, starting from 1
.
\n",
+ "link": "bulletin-board/active-name",
+ "component": "BulletinBoard",
+ "findIntroStr": "BulletinBoard bulletin board component, which displays the information that needs to be paid attention to.",
+ "demoId": "active-name"
+ },
+ {
+ "title": "Tab Title",
+ "content": "You can customize the tab title by using the tab-title
attribute.
\n",
+ "link": "bulletin-board/tab-title",
+ "component": "BulletinBoard",
+ "findIntroStr": "BulletinBoard bulletin board component, which displays the information that needs to be paid attention to.",
+ "demoId": "tab-title"
+ },
+ {
+ "title": "URL-based redirection",
+ "content": "The URL-based redirection is based on the url
and target
fields in the data.
\n",
+ "link": "bulletin-board/url",
+ "component": "BulletinBoard",
+ "findIntroStr": "BulletinBoard bulletin board component, which displays the information that needs to be paid attention to.",
+ "demoId": "url"
+ },
+ {
+ "title": "Route-based redirection",
+ "content": "Route-based redirection is performed based on the route
field in the data.
\n",
+ "link": "bulletin-board/route",
+ "component": "BulletinBoard",
+ "findIntroStr": "BulletinBoard bulletin board component, which displays the information that needs to be paid attention to.",
+ "demoId": "route"
+ },
+ {
+ "title": "Show More links",
+ "content": "You can use more-link
to display and set more links. show-more
Sets whether to display the More button. The default value is true.
\n",
+ "link": "bulletin-board/more-link",
+ "component": "BulletinBoard",
+ "findIntroStr": "BulletinBoard bulletin board component, which displays the information that needs to be paid attention to.",
+ "demoId": "more-link"
+ },
+ {
+ "title": "User-defined bulletin prefix",
+ "content": "You can use icon
to customize the new bulletin prefix icon.
\n",
+ "link": "bulletin-board/icon",
+ "component": "BulletinBoard",
+ "findIntroStr": "BulletinBoard bulletin board component, which displays the information that needs to be paid attention to.",
+ "demoId": "icon"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/button-group.json b/examples/docs/resources/pc/demo-config/en-US/button-group.json
new file mode 100644
index 000000000..a92d9d136
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/button-group.json
@@ -0,0 +1,82 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Use v-model
to set the default selected button and implement bidirectional binding. You can also set the default selected button through value
, but bidirectional binding cannot be performed.
\n",
+ "link": "button-group/base",
+ "component": "ButtonGroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "base"
+ },
+ {
+ "title": "button group data",
+ "content": "Sets the button group data through the data
attribute. In the object, text is the button display text, and value is the value specified during bidirectional binding.
\n",
+ "link": "button-group/data",
+ "component": "Buttongroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "data"
+ },
+ {
+ "title": "Set Component Size",
+ "content": " can be set to medium
, small
, mini
\n",
+ "link": "button-group/size",
+ "component": "ButtonGroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "size"
+ },
+ {
+ "title": "Disabled",
+ "content": "Set disabled
to true to disable the entire button group.
\n",
+ "link": "button-group/disabled",
+ "component": "Buttongroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "disabled"
+ },
+ {
+ "title": "Simple button",
+ "content": "Set plain
to true to display the simple button style.
\n",
+ "link": "button-group/plain",
+ "component": "Buttongroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "plain"
+ },
+ {
+ "title": "Data Field Mapping",
+ "content": "If the fields in the button group data object are not the default text and value, the text-field
and value-field
attributes can be used for mapping.
\n",
+ "link": "button-group/text-value-field",
+ "component": "Buttongroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "text-value-field"
+ },
+ {
+ "title": "Display More Buttons",
+ "content": "Set the show-more
attribute to a value greater than 0 and less than the button group data to display more buttons.
\n",
+ "link": "button-group/show-more",
+ "component": "Buttongroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "show-more"
+ },
+ {
+ "title": "Display Edit Button",
+ "content": "Set show-edit
to true to display the edit button.
\n",
+ "link": "button-group/show-edit",
+ "component": "Buttongroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "show-edit"
+ },
+ {
+ "title": "Edit Event",
+ "content": "The edit
event is triggered when the value of the check box is changed.
\n",
+ "link": "button-group/event-edit",
+ "component": "Buttongroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "event-edit"
+ },
+ {
+ "title": "Default slot",
+ "content": "When the default slot mode is used, the data, text-field, value-field, value / v-model, and size
attributes of the ButtonGroup do not take effect for buttons in the slot. \n However, you can set different attributes for different buttons on the Button component tag based on the application scenario. For details, see Button Component Attributes.
\n",
+ "link": "button-group/slot-default",
+ "component": "Buttongroup",
+ "findIntroStr": "A button group is used for multiple similar operations.",
+ "demoId": "slot-default"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/button.json b/examples/docs/resources/pc/demo-config/en-US/button.json
new file mode 100644
index 000000000..8326dd606
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/button.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "button/base",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "base"
+ },
+ {
+ "title": "Icon Button",
+ "content": "Specify the icon
attribute value to display the icon as an icon button.
\nIcon Icon Usage
\n
Import the required Icon from @opentiny/vue-icon
, initialize the Icon component in the data function, and assign a value to an attribute. Use the icon
attribute to reference the template. \n Use native-type
to set the form type of the button and image buttons. This attribute is used only when type is set to button or image. The optional values of this attribute are button / submit / reset.
\n
\n",
+ "link": "button/icon",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "icon"
+ },
+ {
+ "title": "Text button",
+ "content": "Set the type
attribute to text
, which is a text button. You can set the content to be displayed at the tag child level or through the text
attribute.
\n",
+ "link": "button/text",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "text"
+ },
+ {
+ "title": "Button Fillet",
+ "content": "The round
attribute is used to set whether to round the button.
\n",
+ "link": "button/round",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "round"
+ },
+ {
+ "title": "Picture button",
+ "content": "Embeds the img tag with the default slot usage and introduces the image.
\n",
+ "link": "button/image",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "image"
+ },
+ {
+ "title": "Theme Style",
+ "content": "You can set different theme styles through the type
attribute, including primary, success, info, warning, danger, and text.
\n",
+ "link": "button/type",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "type"
+ },
+ {
+ "title": "Display Loading",
+ "content": "Set loading
to true to display the style being loaded.
\n",
+ "link": "button/loading",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "loading"
+ },
+ {
+ "title": "Dimension",
+ "content": "Use the size
attribute to set the button size, including large, medium, small, and mini. If this parameter is not set, the default size is used.
\n",
+ "link": "button/size",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "size"
+ },
+ {
+ "title": "Round Button",
+ "content": "Set the circle
attribute to true. The button is displayed as a round button.
\n",
+ "link": "button/circle",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "circle"
+ },
+ {
+ "title": "Simple button",
+ "content": "Set the plain
attribute to true. The button is displayed as a simple button.
\n",
+ "link": "button/plain",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "plain"
+ },
+ {
+ "title": "Prevent repeated submission of forms",
+ "content": "You can use the reset-time
attribute to set the duration for which the button is disabled. The default duration is 1000 ms. \n This parameter can be used to prevent repeated submission of the form when you click the button continuously.
\n",
+ "link": "button/reset-time",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "reset-time"
+ },
+ {
+ "title": "Default Focus",
+ "content": "The autofocus
attribute button is displayed in the focused state by default.
\n",
+ "link": "button/autofocus",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "autofocus"
+ },
+ {
+ "title": "Event",
+ "content": "Click event of the button. In this example, a message is displayed when a button is clicked.
\n",
+ "link": "button/click",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "click"
+ },
+ {
+ "title": "Dynamic Disable Button",
+ "content": "After disabled
is set to true, the button can be disabled.
\n",
+ "link": "button/dynamic-disabled",
+ "component": "Button",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "dynamic-disabled"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/calendar.json b/examples/docs/resources/pc/demo-config/en-US/calendar.json
new file mode 100644
index 000000000..64aad3e6c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/calendar.json
@@ -0,0 +1,50 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "By default, each day of the current month is displayed in the form of month.
\n",
+ "link": "calendar/basic-usage",
+ "component": "Calendar",
+ "findIntroStr": "Container for displaying data in calendar format.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Display mode",
+ "content": "The mode
attribute specifies that each month of the current year is displayed. The options are year and month.
\n",
+ "link": "calendar/calendar-mode",
+ "component": "Calendar",
+ "findIntroStr": "Container for displaying data in calendar format.",
+ "demoId": "calendar-mode"
+ },
+ {
+ "title": "Display Selected Date",
+ "content": "When the date is displayed in the format of month, the selected date is displayed above the calendar box after the show-selected attribute is specified and the date cell is clicked.
\n",
+ "link": "calendar/show-selected-date",
+ "component": "Calendar",
+ "findIntroStr": "Container for displaying data in calendar format.",
+ "demoId": "show-selected-date"
+ },
+ {
+ "title": "Custom Date Cell",
+ "content": "Customize the date cell through the scope slot day.
\n",
+ "link": "calendar/custom-day-cell",
+ "component": "Calendar",
+ "findIntroStr": "Container for displaying data in calendar format.",
+ "demoId": "custom-day-cell"
+ },
+ {
+ "title": "Custom Toolbar",
+ "content": "Customize the required toolbar through the scope slot tool.
\n",
+ "link": "calendar/custom-calendar-toolbar",
+ "component": "Calendar",
+ "findIntroStr": "Container for displaying data in calendar format.",
+ "demoId": "custom-calendar-toolbar"
+ },
+ {
+ "title": "Add Schedule Event",
+ "content": "You can use the events attribute to specify the event list. It is an object array that contains the following fields:
\nevents Description
\n
time: specifies the date of the event to be displayed.\ntitle: Specifies the event title. \ncontent: specifies the event content. type: specifies the theme of the dialog box that displays the event content when you hover the cursor over the event title. The options are warning, error, info, and success
\n
\n",
+ "link": "calendar/dynamic-add-schedule",
+ "component": "Calendar",
+ "findIntroStr": "Container for displaying data in calendar format.",
+ "demoId": "dynamic-add-schedule"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/carousel.json b/examples/docs/resources/pc/demo-config/en-US/carousel.json
new file mode 100644
index 000000000..3ef80fb89
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/carousel.json
@@ -0,0 +1,98 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "carousel/basic-usage",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Indicator and Trigger Mode",
+ "content": "The walk indicator is displayed on the slide by default. After indicator-position
is set to outside, the indicator is displayed outside. \n Set trigger
to click. You can change the indicator triggering mode to click. By default, when you hover the cursor over an indicator, the slideshow is switched accordingly.
\n",
+ "link": "carousel/indicator-trigger",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "indicator-trigger"
+ },
+ {
+ "title": "Manual Carousel",
+ "content": "Invoke the setActiveItem()
, next()
, and prev()
methods to perform NVOD as required. The initial-index
property specifies the slide index that is initially activated.
\n",
+ "link": "carousel/manual-play",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "manual-play"
+ },
+ {
+ "title": "Disable cyclic NVOD.",
+ "content": "After the loop
attribute is set to false, if the slide is switched to the last item, the slide cannot be switched cyclically from the first item. That is, when switching to the last item, the right toggle arrow is no longer displayed, and when switching to the first item, the left toggle arrow is no longer displayed.
\n",
+ "link": "carousel/close-loop",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "close-loop"
+ },
+ {
+ "title": "Automatic switchover",
+ "content": "After autoplay
is set to true, the slide content of the walk-through is automatically switched in rotation.
\n",
+ "link": "carousel/autoplay",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "autoplay"
+ },
+ {
+ "title": "NVOD Interval",
+ "content": "The interval is 3000 ms by default, which can be customized through the interval
attribute.
\n",
+ "link": "carousel/play-interval",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "play-interval"
+ },
+ {
+ "title": "vertical carousel",
+ "content": "Set type
to vertical to implement vertical rotation.
\n",
+ "link": "carousel/up-down-carousel",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "up-down-carousel"
+ },
+ {
+ "title": "Display Title",
+ "content": "Use title
to configure the display title. This parameter must be used together with show-title
.
\n",
+ "link": "carousel/show-title",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "show-title"
+ },
+ {
+ "title": "Always show the switch arrow",
+ "content": "For details, see the following example.",
+ "link": "carousel/carousel-arrow-always",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "carousel-arrow-always"
+ },
+ {
+ "title": "The switch arrow is displayed during Hover.",
+ "content": "For details, see the following example.",
+ "link": "carousel/carousel-arrow-hover",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "carousel-arrow-hover"
+ },
+ {
+ "title": "Hide the switch arrow",
+ "content": "For details, see the following example.",
+ "link": "carousel/carousel-arrow-never",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "carousel-arrow-never"
+ },
+ {
+ "title": "Card Mode",
+ "content": "After the type
attribute is set to card, the lantern is displayed as a card.
\n",
+ "link": "carousel/card-mode",
+ "component": "Carousel Horse Lantern",
+ "findIntroStr": "This mode is used to display a group of pictures or cards in carousel mode. When the content space is insufficient, you can store the pictures or cards in carousel mode.",
+ "demoId": "card-mode"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/cascader-panel.json b/examples/docs/resources/pc/demo-config/en-US/cascader-panel.json
new file mode 100644
index 000000000..f5445cfb2
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/cascader-panel.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Use options
to specify options. You can also use props
to set functions such as multiple selection and dynamic loading. For details, see the API table below.
\n",
+ "link": "cascader-panel/basic-usage",
+ "component": "CascaderPanel",
+ "findIntroStr": "Like the cascading selector, the cascading panel has multiple functions, such as single selection, multiple selection, and dynamic loading.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Selected node changes",
+ "content": "The event is triggered after a node is clicked through change
. The callback parameter is the value of the selected node.\nYou can clear the selected node through clearCheckedNodes
. \n Obtain the selected node through getCheckedNodes
.
\n",
+ "link": "cascader-panel/change",
+ "component": "CascaderPanel",
+ "findIntroStr": "Like the cascading selector, the cascading panel has multiple functions, such as single selection, multiple selection, and dynamic loading.",
+ "demoId": "change"
+ },
+ {
+ "title": "The expanded node changes.",
+ "content": "This event is triggered when you click expand-change
to expand a node. The callback parameter is an array consisting of parent option values
\n",
+ "link": "cascader-panel/expand-change",
+ "component": "CascaderPanel",
+ "findIntroStr": "Like the cascading selector, the cascading panel has multiple functions, such as single selection, multiple selection, and dynamic loading.",
+ "demoId": "expand-change"
+ },
+ {
+ "title": "Custom Node Content",
+ "content": "You can use scoped slot
to customize the node content of the options of the cascading panel. scoped slot
transfers two fields: node
and data
, indicating the node object and data of the current node, respectively.
\n",
+ "link": "cascader-panel/custom-option-content",
+ "component": "CascaderPanel",
+ "findIntroStr": "Like the cascading selector, the cascading panel has multiple functions, such as single selection, multiple selection, and dynamic loading.",
+ "demoId": "custom-option-content"
+ },
+ {
+ "title": "Props Options",
+ "content": "Props
\n
specifies child options with children
. The default value is children. \n Indicates whether to return an array consisting of the values of the menus where the node is located through emitPath
. \n Use label
to specify the label value of the display option. The default value is label. \n Use value
to specify the value of the value option. The default value is value
\n
\n",
+ "link": "cascader-panel/cascader-panel-props",
+ "component": "CascaderPanel",
+ "findIntroStr": "Like the cascading selector, the cascading panel has multiple functions, such as single selection, multiple selection, and dynamic loading.",
+ "demoId": "cascader-panel-props"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/cascader.json b/examples/docs/resources/pc/demo-config/en-US/cascader.json
new file mode 100644
index 000000000..d660344ba
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/cascader.json
@@ -0,0 +1,178 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Renders a cascade selector by specifying an array of options with the options
attribute.
\n",
+ "link": "cascader/basic-usage",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Hover Triggering Submenu",
+ "content": "You can use props.expandTrigger
to specify the triggering mode of expanding a submenu as hover
. The default triggering mode is click
.
\n",
+ "link": "cascader/expand-trigger",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "expand-trigger"
+ },
+ {
+ "title": "Disable Options",
+ "content": "declares that this option is disabled by setting the disabled
field in the data source, in this case, The first element in the array specified by options
contains a disabled: true
key-value pair and is therefore disabled. By default, Cascader checks whether the disabled
field of each item in the data is true
. If the name of the field that indicates the disabled meaning in your data is not disabled
, you can use the props.disabled
property to specify it. For details, see the API table of Cascader Props. Certainly, value
, label
, and children
may also be specified in the same way.
\n",
+ "link": "cascader/disabled-items",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "disabled-items"
+ },
+ {
+ "title": "Specify Attribute Value",
+ "content": "Sets the attribute value mapping through the props
attribute.
\n",
+ "link": "cascader/disabled-items",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "disabled-items1"
+ },
+ {
+ "title": "Can be cleared",
+ "content": "You can clear the text box by setting the clearable
attribute.
\n",
+ "link": "cascader/clearable",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "clearable"
+ },
+ {
+ "title": "Separator",
+ "content": "Set the separator through the separator
attribute.
\n",
+ "link": "cascader/clearable",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "clearable1"
+ },
+ {
+ "title": "Dimension",
+ "content": "Sets the size through the size
attribute.
\n",
+ "link": "cascader/clearable",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "clearable2"
+ },
+ {
+ "title": "Multiple Choices",
+ "content": "Use props.multiple = true
to enable the multi-selection mode.
\n",
+ "link": "cascader/default-multiple",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "default-multiple"
+ },
+ {
+ "title": "Fold Tag",
+ "content": "After the multi-selection mode is enabled, tags of all selected options are displayed by default. You can use collapse-tags
to collapse tags. \n Use disabled
to set whether to disable the component. The default value is false.
\n",
+ "link": "cascader/collapse-tags",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "collapse-tags"
+ },
+ {
+ "title": "The parent and child levels are not associated.",
+ "content": "The props.checkStrictly = true
is used to set the association between the parent and child nodes. In this way, any level of options can be selected. In the default single-choice mode, only leaf nodes can be selected.
\n",
+ "link": "cascader/check-strictly",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "check-strictly"
+ },
+ {
+ "title": "Select any level of options from multiple options.",
+ "content": "In multi-selection mode, cancel the association between parent and child nodes and select any level of options.
\n",
+ "link": "cascader/check-strictly-multiple",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "check-strictly-multiple"
+ },
+ {
+ "title": "Dynamic loading",
+ "content": "When a level is selected, the options under the level are dynamically loaded. Use lazy
in the props
attribute to enable dynamic loading, and use lazyload
to set the method for loading data sources. The lazyload
method has two parameters. The first parameter node is the node that is clicked currently, and the second parameter resolve is the callback for data loading completion (mandatory). To display the status of a node more accurately, a flag bit indicating whether the node is a leaf node may be added to the node data. (The default field is leaf, which can be modified using props.leaf.) Otherwise, the system determines whether a node is a leaf node based on whether there are subnodes.
\n",
+ "link": "cascader/auto-load",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "auto-load"
+ },
+ {
+ "title": "Dynamic loading with no parent-child association",
+ "content": "When a level is selected, the options under the level are dynamically loaded. Use lazy
in the props
attribute to enable dynamic loading, and use lazyload
to set the method for loading data sources. Use checkStrictly
in the props
attribute to enable parent-child disassociation.
\n",
+ "link": "cascader/auto-load-checkStrictly",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "auto-load-checkStrictly"
+ },
+ {
+ "title": "Specify Options",
+ "content": "Props
\n
uses children
to specify the sub-option of the option. The default value is children. \n Use value
to specify the value of a specified option. The default value is value. \nUse label
to specify the option label. The default value is label.
\n
\n",
+ "link": "cascader/props-children",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "When a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "props-children"
+ },
+ {
+ "title": "Searchable",
+ "content": "Set filterable
to true
to enable the search function. By default, the label
of the node or the options containing the input value in label
of all parent nodes (determined by show-all-levels
). empty
Content displayed when no matching option
\n",
+ "link": "cascader/filterable",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "If a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "filterable"
+ },
+ {
+ "title": "Search Delay",
+ "content": "For details, see the following example.",
+ "link": "cascader/filterable",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "If a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "filterable2"
+ },
+ {
+ "title": "Multiple choices can be searched",
+ "content": "Enable the search function in multi-choice mode.
\n",
+ "link": "cascader/filterable-multiple",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "If a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "filterable-multiple"
+ },
+ {
+ "title": "Customized search logic",
+ "content": "filter-method
customizes the search logic. The first parameter is node, and the second parameter is keyword. A Boolean value is returned to indicate whether the search is hit. To select a parent, set props.checkStrictly = true to deselect the parent and child nodes. In this way, the purpose of selecting any level of option is achieved. In the default single-choice mode, only leaf nodes can be selected.
\n",
+ "link": "cascader/filter-method",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "If a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "filter-method"
+ },
+ {
+ "title": "Placeholder Text",
+ "content": "For details, see the following example.",
+ "link": "cascader/filterable-multiple",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "If a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "filterable-multiple1"
+ },
+ {
+ "title": "Only the last level is displayed.",
+ "content": "The show-all-levels
attribute defines whether to display the complete path. If it is set to false
, only the last level is displayed. The default value is true
, indicating that the full path of the selected item is displayed.
\n",
+ "link": "cascader/show-all-levels",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "If a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "show-all-levels"
+ },
+ {
+ "title": "Event",
+ "content": "Cascader cascade selector events include: change
, expand-change
, blur
, focus
, < code>visible-change.
\n",
+ "link": "cascader/events",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "If a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "events"
+ },
+ {
+ "title": "Data type returned by a node",
+ "content": "For details, see the following example.",
+ "link": "cascader/events",
+ "component": "Cascader cascading selector",
+ "findIntroStr": "If a data set has a clear hierarchy, you can use the cascading selector to view and select a data set level by level.",
+ "demoId": "events1"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-attributes-demo.json b/examples/docs/resources/pc/demo-config/en-US/chart-attributes-demo.json
new file mode 100644
index 000000000..520e022c2
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-attributes-demo.json
@@ -0,0 +1,98 @@
+[
+ {
+ "title": "Attribute Configuration Example",
+ "content": " If an attribute does not take effect after being added or removed, it is likely that the corresponding module is not introduced. For example,
\n
When using the dataZoom component, you need to import the dataZoom module resource import'echarts/lib/component/dataZoom'
.
\n
\n1 Setting the Region Scaling Component
\nYou can run the init-options
command to configure the additional initialization parameters of the component. For details, see the document
\n",
+ "link": "chart/props/demo10",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo10"
+ },
+ {
+ "title": "1 Setting the Region Zoom Component",
+ "content": "For details, see the following example.",
+ "link": "chart/props/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-base"
+ },
+ {
+ "title": "2 Set the extend configuration item",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo12",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo12"
+ },
+ {
+ "title": "3 Modify the color list",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo4"
+ },
+ {
+ "title": "4 Set the status of no data.",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo5"
+ },
+ {
+ "title": "5 Add Custom Content",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo6"
+ },
+ {
+ "title": "6 Hide dialog box and legend",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo7",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo7"
+ },
+ {
+ "title": "7 Set chart container style",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo8",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo8"
+ },
+ {
+ "title": "8 Set the chart line and punctuation point",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo9",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo9"
+ },
+ {
+ "title": "9 Setting the Visual Mapping Component",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo2"
+ },
+ {
+ "title": "10 Set the afterConfig function",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo11",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo11"
+ },
+ {
+ "title": "11 Setting Toolbox",
+ "content": "For details, see the following example.",
+ "link": "chart/props/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "props-demo3"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-attributes.json b/examples/docs/resources/pc/demo-config/en-US/chart-attributes.json
new file mode 100644
index 000000000..fe51488c7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-attributes.json
@@ -0,0 +1 @@
+[]
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-autonavi-map.json b/examples/docs/resources/pc/demo-config/en-US/chart-autonavi-map.json
new file mode 100644
index 000000000..e83aab59d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-autonavi-map.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts. AutoNavi Map requires the access permission from the external network. \n
\n",
+ "link": "chart/amap/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "amap-base"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-baidu-map.json b/examples/docs/resources/pc/demo-config/en-US/chart-baidu-map.json
new file mode 100644
index 000000000..1aeb6f479
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-baidu-map.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts. \n Baidu Map requires the external network access permission. \n
\n",
+ "link": "chart/bmap/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "bmap-base"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-bar.json b/examples/docs/resources/pc/demo-config/en-US/chart-bar.json
new file mode 100644
index 000000000..0368fbe99
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-bar.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/bar/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "bar-base"
+ },
+ {
+ "title": "Specify Indicator Dimension",
+ "content": "For details, see the following example.",
+ "link": "chart/bar/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "bar-demo2"
+ },
+ {
+ "title": "Sort Bar",
+ "content": "For details, see the following example.",
+ "link": "chart/bar/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "bar-demo3"
+ },
+ {
+ "title": "The bar axis is configured with two y-axises.",
+ "content": "For details, see the following example.",
+ "link": "chart/bar/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "bar-demo4"
+ },
+ {
+ "title": "Set legend alias",
+ "content": "For details, see the following example.",
+ "link": "chart/bar/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "bar-demo5"
+ },
+ {
+ "title": "Stack Bar",
+ "content": "For details, see the following example.",
+ "link": "chart/bar/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "bar-demo6"
+ },
+ {
+ "title": "Set the vertical axis to a continuous value axis.",
+ "content": "For details, see the following example.",
+ "link": "chart/bar/demo7",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "bar-demo7"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-boxplot.json b/examples/docs/resources/pc/demo-config/en-US/chart-boxplot.json
new file mode 100644
index 000000000..5879f90d3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-boxplot.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Boxplot Chinese can be called box diagram, box diagram. A statistical chart used to show a set of data dispersion. It displays the maximum, minimum, median, lower quartile, and upper quartile of a set of data.
\n",
+ "link": "chart/boxplot/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "boxplot-base"
+ },
+ {
+ "title": "Multi-data display",
+ "content": "boxplot
provides the data conversion method prepareBoxplotData
to convert source data into {axisData: [...], boxData: [...], outliers: [...]}
formatted data.
\n",
+ "link": "chart/boxplot/multiple",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "boxplot-multiple"
+ },
+ {
+ "title": "vertical display",
+ "content": "The extend
attribute is used to configure the echarts
mode.
\n",
+ "link": "chart/boxplot/vertical",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "boxplot-vertical"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-candle.json b/examples/docs/resources/pc/demo-config/en-US/chart-candle.json
new file mode 100644
index 000000000..309b8b990
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-candle.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/candle/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "candle-base"
+ },
+ {
+ "title": "Use simplified data format",
+ "content": "For details, see the following example.",
+ "link": "chart/candle/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "candle-demo2"
+ },
+ {
+ "title": "Set the data format",
+ "content": "For details, see the following example.",
+ "link": "chart/candle/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "candle-demo3"
+ },
+ {
+ "title": "Display MA, VOL",
+ "content": "For details, see the following example.",
+ "link": "chart/candle/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "candle-demo4"
+ },
+ {
+ "title": "Modify the KQI/KPI Name and Legend Text",
+ "content": "For details, see the following example.",
+ "link": "chart/candle/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "candle-demo5"
+ },
+ {
+ "title": "Modify the MA display period",
+ "content": "For details, see the following example.",
+ "link": "chart/candle/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "candle-demo6"
+ },
+ {
+ "title": "Set the dataRoom control",
+ "content": "For details, see the following example.",
+ "link": "chart/candle/demo7",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "candle-demo7"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-data-config.json b/examples/docs/resources/pc/demo-config/en-US/chart-data-config.json
new file mode 100644
index 000000000..fe51488c7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-data-config.json
@@ -0,0 +1 @@
+[]
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-events.json b/examples/docs/resources/pc/demo-config/en-US/chart-events.json
new file mode 100644
index 000000000..0f597a5ce
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-events.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Event Listening",
+ "content": "A binding event is implemented by transferring an event name and an object of the corresponding callback function. The parameter in the callback function is the echarts module, which can be processed accordingly.
\nExample
\n",
+ "link": "chart/events/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "events-base"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-funnel.json b/examples/docs/resources/pc/demo-config/en-US/chart-funnel.json
new file mode 100644
index 000000000..53031ec40
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-funnel.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/funnel/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "funnel-base"
+ },
+ {
+ "title": "Specify Indicator Dimension",
+ "content": "For details, see the following example.",
+ "link": "chart/funnel/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "funnel-demo2"
+ },
+ {
+ "title": "Automatically sorted by value and filtered by value 0",
+ "content": "For details, see the following example.",
+ "link": "chart/funnel/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "funnel-demo3"
+ },
+ {
+ "title": "Customized sequence funnel chart",
+ "content": "For details, see the following example.",
+ "link": "chart/funnel/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "funnel-demo4"
+ },
+ {
+ "title": "Funnel chart of a specified data type",
+ "content": "For details, see the following example.",
+ "link": "chart/funnel/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "funnel-demo5"
+ },
+ {
+ "title": "Modify legend alias funnel chart",
+ "content": "For details, see the following example.",
+ "link": "chart/funnel/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "funnel-demo6"
+ },
+ {
+ "title": "Pyramid",
+ "content": "For details, see the following example.",
+ "link": "chart/funnel/demo7",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "funnel-demo7"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-gauge.json b/examples/docs/resources/pc/demo-config/en-US/chart-gauge.json
new file mode 100644
index 000000000..74e629ab3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-gauge.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/gauge/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "gauge-base"
+ },
+ {
+ "title": "KQI/KPI Dimension Configuration",
+ "content": "For details, see the following example.",
+ "link": "chart/gauge/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "gauge-demo2"
+ },
+ {
+ "title": "Set Data Type",
+ "content": "For details, see the following example.",
+ "link": "chart/gauge/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "gauge-demo3"
+ },
+ {
+ "title": "Set the counter alias and unit",
+ "content": "For details, see the following example.",
+ "link": "chart/gauge/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "gauge-demo4"
+ },
+ {
+ "title": "Set multiple watch faces and modify the style",
+ "content": "For details, see the following example.",
+ "link": "chart/gauge/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "gauge-demo5"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-graph.json b/examples/docs/resources/pc/demo-config/en-US/chart-graph.json
new file mode 100644
index 000000000..e8e7f31ad
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-graph.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "It can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts. The
\n\n diagram supports only the extend
configuration. The usage and attributes of the diagram are the same as those of the eCharts. For details, see the
\n
\n",
+ "link": "chart/graph/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "graph-base"
+ },
+ {
+ "title": "Graph in Cartesian coordinate system",
+ "content": "For details, see the following example.",
+ "link": "chart/graph/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "graph-demo2"
+ },
+ {
+ "title": "Extend events in the topology view",
+ "content": "For details, see the following example.",
+ "link": "chart/graph/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "graph-demo3"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-heatmap.json b/examples/docs/resources/pc/demo-config/en-US/chart-heatmap.json
new file mode 100644
index 000000000..bdeacd3c2
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-heatmap.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/heatmap/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "heatmap-base"
+ },
+ {
+ "title": "Configure the coordinate axis",
+ "content": "For details, see the following example.",
+ "link": "chart/heatmap/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "heatmap-demo2"
+ },
+ {
+ "title": "Customized visualMap",
+ "content": "For details, see the following example.",
+ "link": "chart/heatmap/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "heatmap-demo3"
+ },
+ {
+ "title": "Map heat map",
+ "content": "For details, see the following example.",
+ "link": "chart/heatmap/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "heatmap-demo4"
+ },
+ {
+ "title": "Baidu Map Heat Map",
+ "content": "Baidu Map and AutoNavi Map require the external network access permission.\n
\n",
+ "link": "chart/heatmap/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "heatmap-demo5"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-histogram.json b/examples/docs/resources/pc/demo-config/en-US/chart-histogram.json
new file mode 100644
index 000000000..9d987e865
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-histogram.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/histogram/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "histogram-base"
+ },
+ {
+ "title": "Set the KQI/KPI dimension to be displayed.",
+ "content": "For details, see the following example.",
+ "link": "chart/histogram/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "histogram-demo2"
+ },
+ {
+ "title": "Set the two y axes",
+ "content": "For details, see the following example.",
+ "link": "chart/histogram/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "histogram-demo3"
+ },
+ {
+ "title": "Bar chart + Line chart",
+ "content": "For details, see the following example.",
+ "link": "chart/histogram/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "histogram-demo4"
+ },
+ {
+ "title": "Stacked Bar Chart",
+ "content": "For details, see the following example.",
+ "link": "chart/histogram/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "histogram-demo5"
+ },
+ {
+ "title": "By default, bar chart data is displayed.",
+ "content": "For details, see the following example.",
+ "link": "chart/histogram/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "histogram-demo6"
+ },
+ {
+ "title": "Modify Alias",
+ "content": "For details, see the following example.",
+ "link": "chart/histogram/demo7",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "histogram-demo7"
+ },
+ {
+ "title": "Set the horizontal axis to a continuous value axis",
+ "content": "For details, see the following example.",
+ "link": "chart/histogram/demo8",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "histogram-demo8"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-line.json b/examples/docs/resources/pc/demo-config/en-US/chart-line.json
new file mode 100644
index 000000000..252b9ee6e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-line.json
@@ -0,0 +1,74 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/line/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-base"
+ },
+ {
+ "title": "Set the KQI/KPI dimension to be displayed",
+ "content": "For details, see the following example.",
+ "link": "chart/line/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-demo2"
+ },
+ {
+ "title": "Set the two y axes",
+ "content": "For details, see the following example.",
+ "link": "chart/line/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-demo3"
+ },
+ {
+ "title": "Slant of the horizontal coordinate",
+ "content": "For details, see the following example.",
+ "link": "chart/line/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-demo4"
+ },
+ {
+ "title": "Stack Area Chart",
+ "content": "For details, see the following example.",
+ "link": "chart/line/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-demo5"
+ },
+ {
+ "title": "Set Alias",
+ "content": "For details, see the following example.",
+ "link": "chart/line/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-demo6"
+ },
+ {
+ "title": "Display Indicator Value",
+ "content": "For details, see the following example.",
+ "link": "chart/line/demo7",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-demo7"
+ },
+ {
+ "title": "Set the horizontal axis to a continuous value axis",
+ "content": "For details, see the following example.",
+ "link": "chart/line/demo8",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-demo8"
+ },
+ {
+ "title": "Set the horizontal axis to a continuous time axis.",
+ "content": "For details, see the following example.",
+ "link": "chart/line/demo9",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "line-demo9"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-liquidfill.json b/examples/docs/resources/pc/demo-config/en-US/chart-liquidfill.json
new file mode 100644
index 000000000..4af09e91b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-liquidfill.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/liquidfill/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "liquidfill-base"
+ },
+ {
+ "title": "Layered water balloon chart",
+ "content": "For details, see the following example.",
+ "link": "chart/liquidfill/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "liquidfill-demo2"
+ },
+ {
+ "title": "Set multiple water balloons",
+ "content": "For details, see the following example.",
+ "link": "chart/liquidfill/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "liquidfill-demo3"
+ },
+ {
+ "title": "Set the shape of the water balloon chart",
+ "content": "For details, see the following example.",
+ "link": "chart/liquidfill/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "liquidfill-demo4"
+ },
+ {
+ "title": "Set the text label and style of the water balloon diagram",
+ "content": "For details, see the following example.",
+ "link": "chart/liquidfill/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "liquidfill-demo5"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-map.json b/examples/docs/resources/pc/demo-config/en-US/chart-map.json
new file mode 100644
index 000000000..85783c034
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-map.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "chart/map/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "map-base"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-pie.json b/examples/docs/resources/pc/demo-config/en-US/chart-pie.json
new file mode 100644
index 000000000..882fc7ac5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-pie.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/pie/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "pie-base"
+ },
+ {
+ "title": "Set KQI/KPI Dimension",
+ "content": "For details, see the following example.",
+ "link": "chart/pie/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "pie-demo2"
+ },
+ {
+ "title": "Rose",
+ "content": "For details, see the following example.",
+ "link": "chart/pie/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "pie-demo3"
+ },
+ {
+ "title": "Restrict the number of pie charts to be displayed.",
+ "content": "For details, see the following example.",
+ "link": "chart/pie/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "pie-demo4"
+ },
+ {
+ "title": "Multi-Round Pie Chart",
+ "content": "For details, see the following example.",
+ "link": "chart/pie/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "pie-demo5"
+ },
+ {
+ "title": "Set Data Type",
+ "content": "For details, see the following example.",
+ "link": "chart/pie/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "pie-demo6"
+ },
+ {
+ "title": "Set the radius margin of the pie chart",
+ "content": "For details, see the following example.",
+ "link": "chart/pie/demo7",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "pie-demo7"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-question.json b/examples/docs/resources/pc/demo-config/en-US/chart-question.json
new file mode 100644
index 000000000..54f08397c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-question.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Frequently Asked Questions",
+ "content": "The initial width of the parent element is unknown
\nWhen drawing a chart in a container whose initial width is unknown, the chart fails to be drawn because the width cannot be obtained. The solution is to obtain the width after the container width is known. \nInvoke the resize method of echarts. \n cancel-resize-check
is used to check whether a component element exists and whether the element has width and height before resize. If no, the component element does not have width and height.
\n",
+ "link": "chart/question/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "question-base"
+ },
+ {
+ "title": "The initial width of the parent element is unknown.",
+ "content": "For details, see the following example.",
+ "link": "chart/question/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "question-demo5"
+ },
+ {
+ "title": "Automatically update the data change view",
+ "content": "The chart is developed based on the Vue and also supports bidirectional data binding
. If the chart data (chartData.row in the example)
is changed, the view is automatically updated.
\n",
+ "link": "chart/question/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "question-demo4"
+ },
+ {
+ "title": "Decimal display precision",
+ "content": "When processing data types, two valid digits are reserved by default. However, when the number is small and the percentage type is set, this method may cause display problems, for example,
\n",
+ "link": "chart/question/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "question-demo2"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-radar.json b/examples/docs/resources/pc/demo-config/en-US/chart-radar.json
new file mode 100644
index 000000000..6b717f772
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-radar.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/radar/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "radar-base"
+ },
+ {
+ "title": "Set the KQI/KPI dimension to be displayed",
+ "content": "For details, see the following example.",
+ "link": "chart/radar/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "radar-demo2"
+ },
+ {
+ "title": "Change KQI/KPI Name",
+ "content": "For details, see the following example.",
+ "link": "chart/radar/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "radar-demo3"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-ring.json b/examples/docs/resources/pc/demo-config/en-US/chart-ring.json
new file mode 100644
index 000000000..fcb0210c2
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-ring.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/ring/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "ring-base"
+ },
+ {
+ "title": "Set KQI/KPI Dimension",
+ "content": "For details, see the following example.",
+ "link": "chart/ring/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "ring-demo2"
+ },
+ {
+ "title": "Rose",
+ "content": "For details, see the following example.",
+ "link": "chart/ring/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "ring-demo3"
+ },
+ {
+ "title": "Restrict the number of records to be displayed.",
+ "content": "For details, see the following example.",
+ "link": "chart/ring/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "ring-demo4"
+ },
+ {
+ "title": "Set Data Type",
+ "content": "For details, see the following example.",
+ "link": "chart/ring/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "ring-demo5"
+ },
+ {
+ "title": "Set ring radius",
+ "content": "For details, see the following example.",
+ "link": "chart/ring/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "ring-demo6"
+ },
+ {
+ "title": "Set the position of the ring chart title.",
+ "content": "For details, see the following example.",
+ "link": "chart/ring/ring-title",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "ring-ring-title"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-sankey.json b/examples/docs/resources/pc/demo-config/en-US/chart-sankey.json
new file mode 100644
index 000000000..ce52b7559
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-sankey.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/sankey/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "sankey-base"
+ },
+ {
+ "title": "Set Data Type",
+ "content": "For details, see the following example.",
+ "link": "chart/sankey/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "sankey-demo2"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-scatter.json b/examples/docs/resources/pc/demo-config/en-US/chart-scatter.json
new file mode 100644
index 000000000..fe877ea20
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-scatter.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/scatter/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "scatter-base"
+ },
+ {
+ "title": "Example of a two-dimensional multi-indicator scatter chart",
+ "content": "For details, see the following example.",
+ "link": "chart/scatter/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "scatter-demo2"
+ },
+ {
+ "title": "KQI/KPI Dimension Configuration",
+ "content": "For details, see the following example.",
+ "link": "chart/scatter/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "scatter-demo3"
+ },
+ {
+ "title": "Data Type Configuration",
+ "content": "For details, see the following example.",
+ "link": "chart/scatter/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "scatter-demo4"
+ },
+ {
+ "title": "Attribute Name Configuration",
+ "content": "For details, see the following example.",
+ "link": "chart/scatter/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "scatter-demo5"
+ },
+ {
+ "title": "Zooming Configuration",
+ "content": "For details, see the following example.",
+ "link": "chart/scatter/demo6",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "scatter-demo6"
+ },
+ {
+ "title": "Scatter Style Configuration",
+ "content": "For details, see the following example.",
+ "link": "chart/scatter/demo7",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "scatter-demo7"
+ },
+ {
+ "title": "When the scatter is overwritten, the dialog box can be triggered by the coordinate axis.",
+ "content": "For details, see the following example.",
+ "link": "chart/scatter/demo8",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "scatter-demo8"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-sunburst.json b/examples/docs/resources/pc/demo-config/en-US/chart-sunburst.json
new file mode 100644
index 000000000..0e79e442c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-sunburst.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts. The
\n\n diagram supports only the extend
configuration. The usage and attributes of the diagram are the same as those of the eCharts. For details, see the
\n
\n configuration of the eCharts",
+ "link": "chart/sunburst/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "sunburst-base"
+ },
+ {
+ "title": "Complex Example",
+ "content": "For details, see the following example.",
+ "link": "chart/sunburst/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "sunburst-demo2"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-tree.json b/examples/docs/resources/pc/demo-config/en-US/chart-tree.json
new file mode 100644
index 000000000..83bc0d73f
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-tree.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/tree/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "tree-base"
+ },
+ {
+ "title": "Multi-Tree",
+ "content": "For details, see the following example.",
+ "link": "chart/tree/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "tree-demo2"
+ },
+ {
+ "title": "Radial Tree",
+ "content": "For details, see the following example.",
+ "link": "chart/tree/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "tree-demo3"
+ },
+ {
+ "title": "Longitudinal tree view",
+ "content": "For details, see the following example.",
+ "link": "chart/tree/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "tree-demo4"
+ },
+ {
+ "title": "Customized dialog box content",
+ "content": "For details, see the following example.",
+ "link": "chart/tree/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "tree-demo5"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-waterfall.json b/examples/docs/resources/pc/demo-config/en-US/chart-waterfall.json
new file mode 100644
index 000000000..9ed7d0ca5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-waterfall.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/waterfall/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "waterfall-base"
+ },
+ {
+ "title": "Set KQI/KPI Dimension",
+ "content": "For details, see the following example.",
+ "link": "chart/waterfall/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "waterfall-demo2"
+ },
+ {
+ "title": "Set Data Type",
+ "content": "For details, see the following example.",
+ "link": "chart/waterfall/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "waterfall-demo3"
+ },
+ {
+ "title": "Change Indicator Name",
+ "content": "For details, see the following example.",
+ "link": "chart/waterfall/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "waterfall-demo4"
+ },
+ {
+ "title": "Set the total and remaining names",
+ "content": "For details, see the following example.",
+ "link": "chart/waterfall/demo5",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "waterfall-demo5"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart-wordcloud.json b/examples/docs/resources/pc/demo-config/en-US/chart-wordcloud.json
new file mode 100644
index 000000000..534cf910a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart-wordcloud.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts.
\n",
+ "link": "chart/wordcloud/base",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "wordcloud-base"
+ },
+ {
+ "title": "Set the color of the word cloud map",
+ "content": "For details, see the following example.",
+ "link": "chart/wordcloud/demo2",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "wordcloud-demo2"
+ },
+ {
+ "title": "Set the shape of the word cloud map",
+ "content": "For details, see the following example.",
+ "link": "chart/wordcloud/demo3",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "wordcloud-demo3"
+ },
+ {
+ "title": "Set the font size range of the word cloud map",
+ "content": "For details, see the following example.",
+ "link": "chart/wordcloud/demo4",
+ "component": "Chart",
+ "findIntroStr": "Encapsulated based on eCharts, a pure Javascript chart library.",
+ "demoId": "wordcloud-demo4"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/chart.json b/examples/docs/resources/pc/demo-config/en-US/chart.json
new file mode 100644
index 000000000..e19c693b6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/chart.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "The chart component supports bidirectional data binding, which can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts. \nYou can use theme
to customize themes. \nBaidu Maps and AutoNavi Maps require external network access. \n
\n",
+ "link": "chart/base",
+ "component": "Chart",
+ "findIntroStr": "A pure JavaScript chart library encapsulated based on `eCharts v5.2.1`.",
+ "demoId": "base"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/checkbox.json b/examples/docs/resources/pc/demo-config/en-US/checkbox.json
new file mode 100644
index 000000000..bed9c5c4d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/checkbox.json
@@ -0,0 +1,122 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "checkbox/basic-usage",
+ "component": "Checkbox check box",
+ "findIntroStr": "Used to configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Checkbox Group",
+ "content": "Manages multiple checkbox
elements into a group through the checkbox-group
element. In checkbox-group
, use v-model
to bind variables of the Array type to implement bidirectional binding. The label
attribute of the checkbox
is its corresponding value. If there is no content in the tag, the attribute also serves as the introduction after the checkbox. label
corresponds to the element value in the array. If the specified value exists, the value is selected. Otherwise, the value is not selected.
\n",
+ "link": "checkbox/checkbox-group",
+ "component": "Checkbox check box",
+ "findIntroStr": "Used to configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "checkbox-group"
+ },
+ {
+ "title": "Profile Checkbox Group",
+ "content": "Provides the options
attribute. You can render a check box group by configuring object array data. With this attribute, you no longer need to insert the checkbox
or checkbox-button
element as a slot in the tag. \n\nThe options
object array contains three fields: label
, text
, and events
. \n\n The type
attribute is also provided, which is used with the options
attribute. The default value is checkbox
. You can also set this parameter to button
. After the configuration, the check box group is displayed as a button.
\n",
+ "link": "checkbox/group-options",
+ "component": "Checkbox check box",
+ "findIntroStr": "Used to configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "group-options"
+ },
+ {
+ "title": "All and Half",
+ "content": "After the indeterminate
attribute is set to true in the checkbox
element, the check box is displayed as half-selected.
\n",
+ "link": "checkbox/indeterminate",
+ "component": "Checkbox check box",
+ "findIntroStr": "Used to configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "indeterminate"
+ },
+ {
+ "title": "Quantity Limit",
+ "content": "On the checkbox-group
, the min
and max
attributes can be used to specify the minimum and maximum values of the options that can be selected.
\n",
+ "link": "checkbox/min-max",
+ "component": "Checkbox check box",
+ "findIntroStr": "Used to configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "min-max"
+ },
+ {
+ "title": "Currently selected",
+ "content": "Whether to select checked
. You can set disabled
to disable the component.
\n",
+ "link": "checkbox/checked",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "checked"
+ },
+ {
+ "title": "button form check box",
+ "content": "Embed checkbox-button
into the checkbox-group
element to implement a checkbox group in the form of a button. \n Fill color and border color when the checkbox is activated by pressing the fill
button. The default value is #409EFF.
\n",
+ "link": "checkbox/checkbox-button",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "checkbox-button"
+ },
+ {
+ "title": "vertical layout",
+ "content": "Set vertical
to true on the checkbox-group
element, The checkbox-button
or checkbox
managed by it is displayed as a vertical layout.
\n",
+ "link": "checkbox/vertical-checkbox",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "vertical-checkbox"
+ },
+ {
+ "title": "Dynamicly generate check box groups",
+ "content": "The data required by the check box group can be obtained from the background through the request service and then dynamically generated.
\n",
+ "link": "checkbox/dynamic-create-checkbox",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "dynamic-create-checkbox"
+ },
+ {
+ "title": "Prompt message when the content exceeds the upper limit",
+ "content": "If the introduction text next to the check box exceeds the limit, you can use the Tooltip component to add a prompt. When you hover the cursor over the tooltip component, you can prompt all the contents. \n\n Set the border
attribute to true on the checkbox
element to display the border.
\n",
+ "link": "checkbox/content-overflow",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "content-overflow"
+ },
+ {
+ "title": "Text",
+ "content": "Set the text content in the text
attribute.\nUse true-label
to set the selected value, and false-label
to set the unselected value.
\n",
+ "link": "checkbox/text",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "text"
+ },
+ {
+ "title": "Text Selection",
+ "content": " uses true-label
to set the selected value and false-label
to set the unselected value.
\n",
+ "link": "checkbox/button-chek-box",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "button-chek-box"
+ },
+ {
+ "title": "Dimension",
+ "content": "When the check box is a button, you can set the size of the button through the size
attribute. The options are medium, small, and mini. \n\n Setting the disabled
property on checkbox-button
will disable a check button. If the disabled
attribute is configured on the checkbox-group
tab, all check buttons are disabled.
\n",
+ "link": "checkbox/with-border",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "with-border"
+ },
+ {
+ "title": "Event",
+ "content": "The change
event is triggered when the value of the check box is changed.
\n",
+ "link": "checkbox/checkbox-events",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "checkbox-events"
+ },
+ {
+ "title": "Slot",
+ "content": "Content of Checkbox
\n",
+ "link": "checkbox/checkbox-slot",
+ "component": "Checkbox check box",
+ "findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
+ "demoId": "checkbox-slot"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/collapse.json b/examples/docs/resources/pc/demo-config/en-US/collapse.json
new file mode 100644
index 000000000..78156532b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/collapse.json
@@ -0,0 +1,74 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "collapse/basic-usage",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Accordion Effect",
+ "content": "After accordion
is set to true, the collapsed panel displays the accordion effect. \nConfigure v-model
to set the currently active panel. (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.) \nchange
event, which is triggered when the current active panel changes. The parameter is the current value.\n Configure the name
attribute as the unique identifier of each collapse-item.
\n",
+ "link": "collapse/accordion",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "accordion"
+ },
+ {
+ "title": "Disabled",
+ "content": "When the disabled
attribute is set to true on the collapse-item
element, the specified collapse panel item is disabled.
\n",
+ "link": "collapse/dynamic-disable",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "Custom Panel Title",
+ "content": "Configure the title
attribute on the collapse-item
element to specify the title of each collapse panel item. However, you can also customize the panel title by using the title
slot, for example, adding an icon before the title.
\n",
+ "link": "collapse/custom-collapse-title",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "custom-collapse-title"
+ },
+ {
+ "title": "Customize the expansion and collapse icon",
+ "content": "On the collapse-item
element, you can customize the folding icon icon by using the icon
slot.
\n",
+ "link": "collapse/custom-collapse-icon",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "custom-collapse-icon"
+ },
+ {
+ "title": "Fold Panel Event",
+ "content": "When the value of the active panel changes, the change
event is triggered.
\n",
+ "link": "collapse/collapse-events",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "collapse-events"
+ },
+ {
+ "title": "Prevent the event of closing the folding panel",
+ "content": ":before-close event before closing the folding panel. In the method, return true/false indicates whether the folding panel can be closed.
\n",
+ "link": "collapse/block-close",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "block-close"
+ },
+ {
+ "title": "Nested Table",
+ "content": "Embeds the table through the default slot of the collapse-item
element.
\n",
+ "link": "collapse/nested-grid",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "nested-grid"
+ },
+ {
+ "title": "Nested Form",
+ "content": "Embed the form through the default slot of the collapse-item
element.
\n",
+ "link": "collapse/nested-form",
+ "component": "Collapse Panel",
+ "findIntroStr": "You can specify dynamic pages or customized HTML files in the content area. The content area can be expanded and collapsed.",
+ "demoId": "nested-form"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/color.json b/examples/docs/resources/pc/demo-config/en-US/color.json
new file mode 100644
index 000000000..3398f831c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/color.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Main Color",
+ "content": "For details, see the following example.",
+ "link": "color/main-color",
+ "component": "Color",
+ "findIntroStr": "Color",
+ "demoId": "main-color"
+ },
+ {
+ "title": "Auxiliary Color",
+ "content": "For details, see the following example.",
+ "link": "color/auxiliary-color",
+ "component": "Color",
+ "findIntroStr": "Color",
+ "demoId": "auxiliary-color"
+ },
+ {
+ "title": "Neutral Color",
+ "content": "For details, see the following example.",
+ "link": "color/neutral-color",
+ "component": "Color",
+ "findIntroStr": "Color",
+ "demoId": "neutral-color"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/company.json b/examples/docs/resources/pc/demo-config/en-US/company.json
new file mode 100644
index 000000000..ae616c058
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/company.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "company/basic-usage",
+ "component": "Company",
+ "findIntroStr": "Company gadget, which is used to display and select company names. The options are obtained by configuring the data source.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "User-defined number of data to be displayed",
+ "content": "You can set the maximum number of records displayed in the drop-down list box through the max
attribute. clearable
Indicates whether to display the Clear button. The default value is true.
\n",
+ "link": "company/custom-show-num",
+ "component": "Company",
+ "findIntroStr": "Company gadget, which is used to display and select company names. The options are obtained by configuring the data source.",
+ "demoId": "custom-show-num"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can use the fetch-company
attribute to specify a method in which the service customized by the request can be implemented.
\n",
+ "link": "company/custom-service",
+ "component": "Company",
+ "findIntroStr": "Company gadget, which is used to display and select company names. The options are obtained by configuring the data source.",
+ "demoId": "custom-service"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/container.json b/examples/docs/resources/pc/demo-config/en-US/container.json
new file mode 100644
index 000000000..6e4ef0b11
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/container.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Default Layout",
+ "content": "For details, see the following example.",
+ "link": "container/basic-usage",
+ "component": "Container dimension",
+ "findIntroStr": "Container component for layout, which facilitates page layout creation.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Simple Layout",
+ "content": "For details, see the following example.",
+ "link": "container/simple",
+ "component": "Container dimension",
+ "findIntroStr": "Container component for layout, which facilitates page layout creation.",
+ "demoId": "simple"
+ },
+ {
+ "title": "Classic Layout",
+ "content": "For details, see the following example.",
+ "link": "container/classic",
+ "component": "Container dimension",
+ "findIntroStr": "Container component for layout, which facilitates page layout creation.",
+ "demoId": "classic"
+ },
+ {
+ "title": "Fashion Layout",
+ "content": "For details, see the following example.",
+ "link": "container/fashion",
+ "component": "Container dimension",
+ "findIntroStr": "Container component for layout, which facilitates page layout creation.",
+ "demoId": "fashionid"
+ },
+ {
+ "title": "Legendary Layout",
+ "content": "For details, see the following example.",
+ "link": "container/legend",
+ "component": "Container dimension",
+ "findIntroStr": "Container component for layout, which facilitates page layout creation.",
+ "demoId": "legend"
+ },
+ {
+ "title": "Custom width and height",
+ "content": "Container layout container allows users to control header by setting attributes such as headerHeight
, footerHeight
, and asideWidth
(Header area)
, footer (bottom area)
, and aside (left area)
. The width and height of main (main area)
are adaptive.
\n",
+ "link": "container/custom-with-height",
+ "component": "Container dimension",
+ "findIntroStr": "Container component for layout, which facilitates page layout creation.",
+ "demoId": "custom-with-height"
+ },
+ {
+ "title": "Switch",
+ "content": "For details, see the following example.",
+ "link": "container/custom-container",
+ "component": "Container dimension",
+ "findIntroStr": "Container component for layout, which facilitates page layout creation.",
+ "demoId": "custom-container"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/country.json b/examples/docs/resources/pc/demo-config/en-US/country.json
new file mode 100644
index 000000000..bac2d301c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/country.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "country/basic-usage",
+ "component": "Country",
+ "findIntroStr": "Country: country/region component, which is used to display and select country/region names. The options are obtained by configuring the data source.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can use the fetch-country
attribute to specify a method in which the service customized by the request can be implemented. clearable
: indicates whether data can be cleared. The default value is true.
\n",
+ "link": "country/custom-service",
+ "component": "Country",
+ "findIntroStr": "Country: country/region component, which is used to display and select country/region names. The options are obtained by configuring the data source.",
+ "demoId": "custom-service"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/credit-card-form.json b/examples/docs/resources/pc/demo-config/en-US/credit-card-form.json
new file mode 100644
index 000000000..e228d6726
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/credit-card-form.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "credit-card-form/basic-usage",
+ "component": "CreditCardForm",
+ "findIntroStr": "Change information about credit cards in real time through form input.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Background Image",
+ "content": "Use background-image
to set the credit card background image.
\n",
+ "link": "credit-card-form/background-image",
+ "component": "CreditCardForm",
+ "findIntroStr": "Change information about credit cards in real time through form input.",
+ "demoId": "background-image"
+ },
+ {
+ "title": "Event",
+ "content": "For details, see the following example.",
+ "link": "credit-card-form/credit-card-form-events",
+ "component": "CreditCardForm",
+ "findIntroStr": "Change information about credit cards in real time through form input.",
+ "demoId": "credit-card-form-events"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/crop.json b/examples/docs/resources/pc/demo-config/en-US/crop.json
new file mode 100644
index 000000000..af00e7c9e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/crop.json
@@ -0,0 +1,170 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "The src
attribute is used to set the default cropping image source path, and the cropvisible
attribute is used to control whether the cropping dialog box is visible.
\n",
+ "link": "crop/basic-usage",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Aspect-to-height ratio of the crop box",
+ "content": "You can use the aspect-ratio
attribute to set the aspect ratio of the crop box. The default value is 16 / 9
. You can also set the aspect ratio of the trim box by calling the setAspectRatio
method. \nThe center
attribute can be used to set whether the crop frame is in the center of the image.
\n",
+ "link": "crop/aspect-ratio",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "aspect-ratio"
+ },
+ {
+ "title": "Minimum width and height of the crop box",
+ "content": "Set the minimum width and height of the cropping frame through the min-crop-box-width
and min-crop-box-height
attributes. After this parameter is set, the width and height of the cropping box cannot be adjusted after the width and height are adjusted to the minimum value. \n Set the minimum width and height of the container through the mmin-container-width
and min-container-height
attributes.
\n",
+ "link": "crop/min-crop-box-width-height",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "min-crop-box-width-height"
+ },
+ {
+ "title": "Do not display the grid background.",
+ "content": "When background
is set to false
, the grid background of the container is not displayed.
\n",
+ "link": "crop/no-background",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "no-background"
+ },
+ {
+ "title": "Do not display dotted lines.",
+ "content": "Setting guides
to false
will cancel the dotted line above the crop box.
\n",
+ "link": "crop/no-guides",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "no-guides"
+ },
+ {
+ "title": "Do not display modal",
+ "content": "Setting modal
to false
cancels the display of the modal layer above the image below the crop box.
\n",
+ "link": "crop/no-modal",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "no-modal"
+ },
+ {
+ "title": "View mode",
+ "content": "You can set the view mode of the crop box through the view-mode
attribute. There are four options: 0
, 1
, 2
, and 3
. The default value is 0
.
\nview-mode option description
\n
0
: The crop box can be moved outside the image. \n1
: The crop box can only be moved within the image. \n2
: The image is not completely covered in the container. A gap may appear on one side when the image is zoomed out. \n3
: fills the entire container with an image.
\n
\n",
+ "link": "crop/view-mode",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "view-mode"
+ },
+ {
+ "title": "Drag Mode",
+ "content": "You can set the drag mode of the crop box through the drag-mode
attribute. There are three options: crop
, move
, and none
. The default value is crop
.
\ndrag-mode Option Description
\n
crop
: After the cropping box is canceled, hold down the left mouse button and drag it in the image area to generate a new cropping box. \nmove
: After the cropping box is canceled, hold down the left mouse button to move the image. \nnone
: After the crop box is canceled, the image cannot be cropped or moved. \nmovable
specifies whether an image can be moved. The default value is true.
\n
\n",
+ "link": "crop/drag-mode",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "drag-mode"
+ },
+ {
+ "title": "Automatically Cropped Area",
+ "content": "During initialization, the auto-crop-area
attribute can be used to set the area of the cropping box. The default value is 0.8
. This parameter is valid only when auto-crop
is set to true
.
\n",
+ "link": "crop/auto-crop-area",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "auto-crop-area"
+ },
+ {
+ "title": "Obtain container data",
+ "content": "Invoke the getContainerData
method to obtain the container size data.
\n",
+ "link": "crop/get-container-data",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "get-container-data"
+ },
+ {
+ "title": "Obtain clip box data",
+ "content": "Invoke the getCropBoxData
method to obtain the position and size of the clip box.
\n",
+ "link": "crop/get-crop-box-data",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "get-crop-box-data"
+ },
+ {
+ "title": "Obtain the cropped image data",
+ "content": "Invoke the getCroppedCanvas
method to obtain the cropped image data. Use the toDataURL
method to convert the cropped image data to Base64 image data. Use the toBlob
method to generate Blob image data.
\n",
+ "link": "crop/get-cropped-canvas",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "get-cropped-canvas"
+ },
+ {
+ "title": "Obtain crop area data",
+ "content": "Invoke the getData
method to obtain the position and size of the cropping area.
\n",
+ "link": "crop/get-data",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "get-data"
+ },
+ {
+ "title": "Obtain Image Data",
+ "content": "Invoke the getImageData
method to obtain the image position, size, and other related data. To obtain the canvas position and size data, call the getCanvasData
method.
\n",
+ "link": "crop/get-image-data",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "get-image-data"
+ },
+ {
+ "title": "Replace Image",
+ "content": "Invoke the replace
method to replace the image src and rebuild the cropper. The rotatable
attribute is used to control image rotation. The default value is true.
\n",
+ "link": "crop/replace-image",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "replace-image"
+ },
+ {
+ "title": "Enlarge Image",
+ "content": "For details, see the following example.",
+ "link": "crop/replace-image",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "replace-image1"
+ },
+ {
+ "title": "Scale when the mouse wheel is used to zoom in or out an image",
+ "content": "zoom-on-wheel
attribute is set to true
, you can use the wheel-zoom-ratio
attribute to set the scaling ratio. The default value is 0.1
.
\n",
+ "link": "crop/wheel-zoom-ratio",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "wheel-zoom-ratio"
+ },
+ {
+ "title": "Disable the mouse wheel to zoom in or out the image.",
+ "content": "After the zoom-on-wheel
attribute is set to false
, the image cannot be zoomed in or out by scrolling the mouse wheel.
\n",
+ "link": "crop/zoom-on-wheel",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "zoom-on-wheel"
+ },
+ {
+ "title": "ready event",
+ "content": "When a cropper instance is completely built, the ready
event is triggered.
\n",
+ "link": "crop/event-ready",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "event-ready"
+ },
+ {
+ "title": "Crop box method event",
+ "content": "When a cropper instance is completely built, the disable
method is triggered to disable the cropping box. When the enable
method is triggered to enable the cropping box
\n",
+ "link": "crop/crop-meth",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "crop-meth"
+ },
+ {
+ "title": "Cutout Event",
+ "content": "TIP
\n
Description: The cropstart
event is triggered when the canvas or clipping box starts to change.\nThe cropmove
event is triggered when the canvas or clipping box is changed.\nThe cropen event is triggered when the canvas or clipping box ends. d
Event\nThe crop
event is triggered when the canvas or crop box changes. \nThe getCanvasData
event is triggered to obtain the position and size data of the canvas (image wrapper)
\n
\n",
+ "link": "crop/event-about-crop",
+ "component": "Crop Image Crop",
+ "findIntroStr": "Crop image cropping, preview, JPG and PNG formats are supported. You can manually adjust the selected avatar area when browsing images.",
+ "demoId": "event-about-crop"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/currency.json b/examples/docs/resources/pc/demo-config/en-US/currency.json
new file mode 100644
index 000000000..233bdfefa
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/currency.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "currency/basic-usage",
+ "component": "Currency",
+ "findIntroStr": "Currency component, which is used to display and select currency names. The options are obtained by configuring the data source.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Disabled",
+ "content": "The disabled
attribute is used to set whether to disable the component. The default value is false.
\n",
+ "link": "currency/disable-currency",
+ "component": "Currency",
+ "findIntroStr": "Currency component, which is used to display and select currency names. The options are obtained by configuring the data source.",
+ "demoId": "disable-currency"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can use the fetch-currency
attribute to specify a method in which the service customized by the request can be implemented. \n The clearable
attribute is used to set whether data can be cleared. The default value is true.
\n",
+ "link": "currency/custom-service",
+ "component": "Currency",
+ "findIntroStr": "Currency component, which is used to display and select currency names. The options are obtained by configuring the data source.",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "Set Component Size",
+ "content": " can be set to medium
, small
, mini
\n",
+ "link": "currency/size",
+ "component": "Currency",
+ "findIntroStr": "Currency component, which is used to display and select currency names. The options are obtained by configuring the data source.",
+ "demoId": "size"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/date-picker.json b/examples/docs/resources/pc/demo-config/en-US/date-picker.json
new file mode 100644
index 000000000..7be9dbe74
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/date-picker.json
@@ -0,0 +1,218 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "date-picker/basic-usage",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Select the shortcut option of the day band",
+ "content": "With the picker-options
attribute, which is an object in which you specify an array of shortcuts
objects to set shortcut options. In addition, you can set the date when the disabledDate
method is disabled as required.
\n",
+ "link": "date-picker/date-shortcuts",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "date-shortcuts"
+ },
+ {
+ "title": "Other date units",
+ "content": "You can set different date units through the type
attribute. In the following example, the date units are week, year, month, and dates.
\n",
+ "link": "date-picker/other-picker-type",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "other-picker-type"
+ },
+ {
+ "title": "Time Zone Selection",
+ "content": "You can set the time zone of the date selection panel through the show-timezone
attribute, and import timezoneData time zone data
\n",
+ "link": "date-picker/timezone",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "timezone"
+ },
+ {
+ "title": "Select Date Range",
+ "content": "Set type
to daterange. You can select a date range. \n Callback that will be executed after the selected date is obtained through onPick
. The callback takes effect only when daterange
or datetimerange
is used. This parameter must be configured in picker-options
.
\n",
+ "link": "date-picker/date-range",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "date-range"
+ },
+ {
+ "title": "Date Range Shortcut Options",
+ "content": "Sets the date range shortcut through the picker-options
object. \n firstDayOfWeek
. The value ranges from 1 to 7. The default value is 7.
\n",
+ "link": "date-picker/date-range-shortcuts",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "date-range-shortcuts"
+ },
+ {
+ "title": "Default Time of the Date Range",
+ "content": "When using datetimerange
to set the date range, you can use default-time
to set the start and end time. The default time is 00:00 on the selected date. 00 as the start and end time. default-time
takes an array. Each item in the array is a string. The first item controls the time of the start date and the second item controls the time of the end date.
\n",
+ "link": "date-picker/default-time-of-range",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "default-time-of-range"
+ },
+ {
+ "title": "Select Month Range",
+ "content": "Set the type
attribute to monthrange. You can set the value to a month range.
\n",
+ "link": "date-picker/month-range",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "month-range"
+ },
+ {
+ "title": "Month Range Shortcut Options",
+ "content": "Also, the picker-options
object is used to set the month range shortcut options.
\n",
+ "link": "date-picker/month-range-shortcuts",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "month-range-shortcuts"
+ },
+ {
+ "title": "Read-only",
+ "content": "Sets whether the calendar component is read-only through the readonly
property.
\n",
+ "link": "date-picker/readonly",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "readonly"
+ },
+ {
+ "title": "Maximum/Minimum",
+ "content": "Configure the picker-options
attribute to disable the specified date segment based on the date in the disabledDate
method of the object. In this way, the maximum and minimum values are implemented.
\n",
+ "link": "date-picker/max-min",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "max-min"
+ },
+ {
+ "title": "Alignment",
+ "content": "You can use the align
attribute to set the alignment mode between the date selection panel and the text box. The options are left, right, and center. The default value is left.
\n",
+ "link": "date-picker/align",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "align"
+ },
+ {
+ "title": "Size Settings",
+ "content": "You can set the size of the date text box through the size
attribute. The options are medium, small, and mini.
\n",
+ "link": "date-picker/set-size",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "set-size"
+ },
+ {
+ "title": "Clear Input",
+ "content": "After you select a date, the clear icon is displayed by default when you hover the cursor over the text box. You can click the icon to clear the text box. If clearable
is set to false, the clear icon is not displayed and cannot be cleared. The clear-icon
property allows you to customize the clear icon.
\n",
+ "link": "date-picker/about-clear",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "about-clear"
+ },
+ {
+ "title": "Formatting",
+ "content": " uses the format
attribute to set the format of the text box, and the value-format
attribute to set the format of the bound value. Date Format Attribute List
",
+ "link": "date-picker/about-format",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "about-format"
+ },
+ {
+ "title": "timeFormat formatting",
+ "content": "Set the time display format of the date selection panel through the time-format
attribute
",
+ "link": "date-picker/time-format",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "time-format"
+ },
+ {
+ "title": "Customized rear icon",
+ "content": " uses the suffix-icon
attribute to set the icon behind the date text box. An icon is imported from the @opentiny/vue-icon
, initialized, and transferred to the suffix-icon
.
\n",
+ "link": "date-picker/custom-suffix-icon",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "custom-suffix-icon"
+ },
+ {
+ "title": "Class name of the customized drop-down list box",
+ "content": "For details, see the following example.",
+ "link": "date-picker/custom-suffix-icon",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "custom-suffix-icon1"
+ },
+ {
+ "title": "Select Customized",
+ "content": "When the range is selected, the start-placeholder
and end-placeholder
attributes can specify the placeholders of the start date and end date text boxes, respectively. The range-separator
property specifies the separator between the start date and end date input boxes.
\n",
+ "link": "date-picker/custom-range",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "custom-range"
+ },
+ {
+ "title": "Select a range to cancel panel linkage",
+ "content": "When the range is selected, by default, when you click the previous month or previous year arrow icon in the start date panel, the date in the end date panel is also switched to the previous month or previous year. When you switch the next month or the next year in the end date panel, the start date panel is also linked. However, if unlink-panels
is set to true, panels are not associated with each other. When the year and month are changed, the change takes effect only for the current panel.
\n",
+ "link": "date-picker/unlink-panels",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "unlink-panels"
+ },
+ {
+ "title": "Default time setting when the selector is enabled",
+ "content": "default-value
property specifies the date that is selected by default when the date picker panel opens.
\n",
+ "link": "date-picker/default-value",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "default-value"
+ },
+ {
+ "title": "The text box cannot be entered.",
+ "content": "By default, you can enter a date in the Date text box. If you set editable
to false, you cannot enter a date in the
Date text box.
\n",
+ "link": "date-picker/editable",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "editable"
+ },
+ {
+ "title": "Event",
+ "content": "The main events include change, blur, and focus.
\n",
+ "link": "date-picker/date-picker-events",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "date-picker-events"
+ },
+ {
+ "title": "Focus",
+ "content": "Use the focus
method to enable the input to obtain the focus.
\n",
+ "link": "date-picker/focus",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "focus"
+ },
+ {
+ "title": "The arrow button controls the time selection.",
+ "content": "When type
is set to datetime or datetimerange, set time-arrow-control
to true. The arrow button is displayed on the time panel to control the time selection. By default, the scrolling selection time is selected.
\n",
+ "link": "date-picker/time-arrow-control",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "time-arrow-control"
+ },
+ {
+ "title": "Do not trigger form validation",
+ "content": "The date selector triggers form validation by default. The triggering modes include blur and change. If validate-event
is set to false, form validation is not triggered.
\n",
+ "link": "date-picker/validate-event",
+ "component": "DatePicker Date Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "validate-event"
+ },
+ {
+ "title": "Set whether to display the GMT+8 time",
+ "content": "You can use the isutc8
attribute to set whether to display the GMT+8 time.
\n",
+ "link": "date-picker/utc8",
+ "component": "DatePicker displays the GMT+8 time outside China",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "utc8"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/dept.json b/examples/docs/resources/pc/demo-config/en-US/dept.json
new file mode 100644
index 000000000..c23bf8549
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/dept.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "dept/basic-usage",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "open and change events",
+ "content": "For details, see the following example.",
+ "link": "dept/dept-events",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "dept-events"
+ },
+ {
+ "title": "selected event",
+ "content": "For details, see the following example.",
+ "link": "dept/dept-selected",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "dept-selected"
+ },
+ {
+ "title": "close event",
+ "content": "For details, see the following example.",
+ "link": "dept/dept-close",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "dept-close"
+ },
+ {
+ "title": "confirm event",
+ "content": "For details, see the following example.",
+ "link": "dept/dept-confirm",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "dept-confirm"
+ },
+ {
+ "title": "cancel event",
+ "content": "For details, see the following example.",
+ "link": "dept/dept-cancel",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "dept-cancel"
+ },
+ {
+ "title": "Set Component Size",
+ "content": " can be set to medium
, small
, mini
\n",
+ "link": "dept/size",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "size"
+ },
+ {
+ "title": "Prevent pop-up dialog box closing",
+ "content": "before-confirm (callback event before confirmation). In the method, return true/false indicates whether to close the dialog box.
\n",
+ "link": "dept/before-confirm",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "before-confirm"
+ },
+ {
+ "title": "Department information is automatically selected.",
+ "content": "The default value of auto-select
is true. If this parameter is set to false, the system automatically supplements the selected information when there is only one department.
\n",
+ "link": "dept/auto-select",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "auto-select"
+ },
+ {
+ "title": "Customized Service Data",
+ "content": " provides the fetch-dept-by-value
, fetch-dept, and fetch-dept-list
attributes for customizing department services.
\n",
+ "link": "dept/custom-service",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "Disabled",
+ "content": "You can use disabled
to set whether to disable the function. The default value is fase
\n",
+ "link": "dept/dynamic-disable",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "Set the dialog box title.",
+ "content": "Customized dialog box title. The default value of this attribute is null.
\n",
+ "link": "dept/title",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "title"
+ },
+ {
+ "title": "Approval Slot",
+ "content": "For details, see the following example.",
+ "link": "dept/slot-hrapprover",
+ "component": "Department",
+ "findIntroStr": "The department component is used to query and select Huawei departments. The default value is the department to which the current login user belongs.",
+ "demoId": "slot-hrapprover"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/detail-page.json b/examples/docs/resources/pc/demo-config/en-US/detail-page.json
new file mode 100644
index 000000000..c1cedf4f2
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/detail-page.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "You can set hidden: true
in the data object to specify the data to be hidden by default.
\n",
+ "link": "detail-page/basic-usage",
+ "component": "DetailPage header details column",
+ "findIntroStr": "DetailPage detail bar component with a table header.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom Text",
+ "content": " via title
, text-split
, dialog-title
, label-title
, value-title The
, tips
, save-button
, and cancel-button
attributes specify the display text in different positions of the header details bar component.
\n",
+ "link": "detail-page/custom-show-text",
+ "component": "DetailPage header details column",
+ "findIntroStr": "DetailPage detail bar component with a table header.",
+ "demoId": "custom-show-text"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/dialog-box.json b/examples/docs/resources/pc/demo-config/en-US/dialog-box.json
new file mode 100644
index 000000000..abe7f6c93
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/dialog-box.json
@@ -0,0 +1,154 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "dialog-box/basic-usage",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Level-2 pop-up window",
+ "content": "The default slot and buttons in the operation area at the bottom are used to implement the level-2 pop-up window. After the append-to-body
attribute is set, the entity DOM structure of the level-2 pop-up window is appended to the body element.
\n",
+ "link": "dialog-box/secondary-dialog",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "secondary-dialog"
+ },
+ {
+ "title": "Custom Title",
+ "content": "In addition to the title
attribute, you can set the pop-up window title and customize the content in the pop-up window title area through the title
slot.
\n",
+ "link": "dialog-box/custom-dialog-title",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "custom-dialog-title"
+ },
+ {
+ "title": "Custom Content",
+ "content": "The default slot is used to customize the content of the main part of the pop-up window.
\n",
+ "link": "dialog-box/custom-dialog-content",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "custom-dialog-content"
+ },
+ {
+ "title": "Custom bottom",
+ "content": "Customize the content in the operation area at the bottom of the pop-up window through the footer
slot.
\n",
+ "link": "dialog-box/custom-dialog-footer",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "custom-dialog-footer"
+ },
+ {
+ "title": "Hide the close button",
+ "content": "The close icon is displayed in the upper right corner of the default pop-up window. You can click this icon to close the pop-up window. If show-close
is set to false, the close icon is hidden. To close the pop-up window, you can switch the value of visible
to false by clicking the button in the operation area.
\n",
+ "link": "dialog-box/hidden-close-buttons",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "hidden-close-buttons"
+ },
+ {
+ "title": "Disable ESC.",
+ "content": "After the default pop-up window is opened, you can press Esc to close the pop-up window. If close-on-press-escape
is set to false, this function is disabled.
\n",
+ "link": "dialog-box/close-on-press-escape",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "close-on-press-escape"
+ },
+ {
+ "title": "Height between the pop-up window and the top",
+ "content": "The top
attribute specifies the height of the pop-up window from the top of the window. The default value is 15% of the screen height.
\n",
+ "link": "dialog-box/dialog-top-height",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "dialog-top-height"
+ },
+ {
+ "title": "Wideness of the pop-up window",
+ "content": "The width
attribute specifies the width of the pop-up window.
\n",
+ "link": "dialog-box/dialog-width",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "dialog-width"
+ },
+ {
+ "title": "The pop-up window is not closed when the mask is clicked.",
+ "content": "After the default pop-up window is opened, you can click the mask layer to close the pop-up window. If close-on-click-modal
is set to false, this function is disabled.
\n",
+ "link": "dialog-box/close-on-click-modal",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "close-on-click-modal"
+ },
+ {
+ "title": "Disable the mask layer",
+ "content": "The mask layer is displayed when the pop-up window is opened by default. If modal
is set to false, the mask layer is not enabled. If there is no mask layer, you can click the outer area of the pop-up window to close the pop-up window.
\n",
+ "link": "dialog-box/no-modal",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "no-modal"
+ },
+ {
+ "title": "Right pop-up window",
+ "content": "After right-slide
is set to true, a pop-up window is displayed from the right of the window. \nSet the modal-append-to-body
attribute to true by default. The mask layer is applied to the body.
\n",
+ "link": "dialog-box/right-dialog",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "right-dialog"
+ },
+ {
+ "title": "Hidden title area",
+ "content": "The pop-up window has a title area by default. If show-header
is set to false, the title area is hidden.
\n",
+ "link": "dialog-box/hidden-header",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "hidden-header"
+ },
+ {
+ "title": "Disable scrolling when pop-up",
+ "content": "After a pop-up window is displayed, the background page cannot be scrolled by default. If lock-scroll
is set to fasle, the scrolling of the masked content is not locked.
\n",
+ "link": "dialog-box/lock-scroll",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "lock-scroll"
+ },
+ {
+ "title": "The head and bottom are horizontally centered",
+ "content": "The header is displayed on the left of the area by default. If center
is set to true, the header is displayed in the center.
\n",
+ "link": "dialog-box/center",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "center"
+ },
+ {
+ "title": "Dragable pop-up window",
+ "content": " By default, the pop-up window cannot be dragged. Set draggable
to true and move the cursor to the title area to drag the pop-up window. Drag events include @drag-start
, drag-move
, and drag-end
.
\n",
+ "link": "dialog-box/draggable",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "draggable"
+ },
+ {
+ "title": "Full-screen pop-up window",
+ "content": "Set fullscreen
to true to display the full-screen pop-up window. The default pop-up window width is 500px. In this case, the width setting does not take effect.
\n",
+ "link": "dialog-box/fullscreen",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "fullscreen"
+ },
+ {
+ "title": "Pop-up and Close Event",
+ "content": "open
: triggered when the dialog box is opened. opened
: triggered when the animation ends. close
: triggered when the dialog box is closed. closed
: triggered when the animation ends.
\n",
+ "link": "dialog-box/open-close-events",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "open-close-events"
+ },
+ {
+ "title": "Pop-up Window Form",
+ "content": "The default slot is used to implement nested forms and form submission logic.
\n By default, the form is reset when the pop-up window is closed. If is-form-reset
is set to false, the form is not reset when the pop-up window is closed.
",
+ "link": "dialog-box/form-in-dialog",
+ "component": "DialogBox",
+ "findIntroStr": "The modal dialog box is displayed in the floating layer to guide users to perform related operations.",
+ "demoId": "form-in-dialog"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/drop-roles.json b/examples/docs/resources/pc/demo-config/en-US/drop-roles.json
new file mode 100644
index 000000000..5d27c2eb6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/drop-roles.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "drop-roles/basic-usage",
+ "component": "DropRoles drop-down role",
+ "findIntroStr": "DropRoles: provides the role list of the current user and allows users to switch between roles.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "change event",
+ "content": "The change event is triggered when the drop-down role is switched. The change event callback method needs to be used to send the request.
\n",
+ "link": "drop-roles/change-role-event",
+ "component": "DropRoles drop-down role",
+ "findIntroStr": "DropRoles: provides the role list of the current user and allows users to switch between roles.",
+ "demoId": "change-role-event"
+ },
+ {
+ "title": "Set Component Size",
+ "content": " can be set to medium
, small
, mini
\n",
+ "link": "drop-roles/size",
+ "component": "DropRoles drop-down role",
+ "findIntroStr": "DropRoles: provides the role list of the current user and allows users to switch between roles.",
+ "demoId": "size"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can use the fetch-role
and fetch-current-role
methods to customize services. In addition, you can use the fields
attribute to specify the fields corresponding to the display and binding values. \n You can use placeholder
to display placeholders.
\n",
+ "link": "drop-roles/custom-service",
+ "component": "DropRoles drop-down role",
+ "findIntroStr": "DropRoles: provides the role list of the current user and allows users to switch between roles.",
+ "demoId": "custom-service"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/drop-times.json b/examples/docs/resources/pc/demo-config/en-US/drop-times.json
new file mode 100644
index 000000000..6a965a4d9
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/drop-times.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "drop-times/basic-usage",
+ "component": "dropTimes drop-down time",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Step and Time Range",
+ "content": "start
: indicates the start time of the interval. The default value is 0. end
indicates the end time of the interval. The default value is 24 x 60. step
indicates the step of the interval. The default value is 15.
\n",
+ "link": "drop-times/start-end-step",
+ "component": "dropTimes drop-down time",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "start-end-step"
+ },
+ {
+ "title": "Set the size attribute of the component size",
+ "content": "The value can be medium, small, or mini
\n",
+ "link": "drop-times/size",
+ "component": "dropTimes drop-down time",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "size"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/dropdown.json b/examples/docs/resources/pc/demo-config/en-US/dropdown.json
new file mode 100644
index 000000000..73933790b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/dropdown.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Basic Usage
\n",
+ "link": "dropdown/basic-usage",
+ "component": "Dropdown drop-down list",
+ "findIntroStr": "Dropdown drop-down list.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Trigger Object",
+ "content": "Configure the split-button
attribute. You can use the built-in button to trigger the drop-down menu. In addition, you can use the type
attribute to configure the button status. The usage is the same as that of the Button
component
\n",
+ "link": "dropdown/split-button",
+ "component": "Dropdown drop-down list",
+ "findIntroStr": "Dropdown drop-down list.",
+ "demoId": "split-button"
+ },
+ {
+ "title": "Trigger Mode",
+ "content": "You can configure click
or hover
to activate
\n",
+ "link": "dropdown/trigger",
+ "component": "Dropdown drop-down list",
+ "findIntroStr": "Dropdown drop-down list.",
+ "demoId": "trigger"
+ },
+ {
+ "title": "Menu hiding mode",
+ "content": "The drop-down menu is hidden by default after a menu item is clicked. You can disable this function by setting hide-on-click
to false
.
\n",
+ "link": "dropdown/hide-on-click",
+ "component": "Dropdown drop-down list",
+ "findIntroStr": "Dropdown drop-down list.",
+ "demoId": "hide-on-click"
+ },
+ {
+ "title": "Disabled",
+ "content": "The Dropdown and DropdownItem components can be disabled through the disabled
attribute.
\n",
+ "link": "dropdown/disabled",
+ "component": "Dropdown drop-down list",
+ "findIntroStr": "Dropdown drop-down list.",
+ "demoId": "disabled"
+ },
+ {
+ "title": "Different Sizes",
+ "content": "Additional sizes: medium
, small
, mini
, configured by setting the size
property.
\n",
+ "link": "dropdown/size",
+ "component": "Dropdown drop-down list",
+ "findIntroStr": "Dropdown drop-down list.",
+ "demoId": "size"
+ },
+ {
+ "title": "Use Profile",
+ "content": "DropdownYou can configure the attributes of DropdownMenu through the menu-options
attribute. title
Configure the name of the trigger source
DropdownMenu You can configure the attributes of DropdownItem through the options
attribute. text-field
is used in conjunction with options
to specify the fields displayed in the menu copywriting. text-field
The default value is label
\n",
+ "link": "dropdown/options",
+ "component": "Dropdown drop-down list",
+ "findIntroStr": "Dropdown drop-down list.",
+ "demoId": "options"
+ },
+ {
+ "title": "Internal Event",
+ "content": "The built-in events include the button-click
, item-click
, and visible-change
events.
\n",
+ "link": "dropdown/events",
+ "component": "Dropdown drop-down list",
+ "findIntroStr": "Dropdown drop-down list.",
+ "demoId": "events"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/espace.json b/examples/docs/resources/pc/demo-config/en-US/espace.json
new file mode 100644
index 000000000..b7ed8ed60
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/espace.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "The data
attribute sets the component data. The array object contains the options type, value, and icon. The value of type can be im, sip, or mailto. Click to open the external application corresponding to the value of type.
\n",
+ "link": "espace/data",
+ "component": "Espace message dialog box",
+ "findIntroStr": "Used together with the UserContact component to quickly open the eSpace pop-up window, eSpace call, and email applications of the corresponding user.",
+ "demoId": "data"
+ },
+ {
+ "title": "User Contacts Use eSpace",
+ "content": "The UserContact component provides the data required for configuring the espace
attribute. This component actually uses the eSpace component.
\n",
+ "link": "user-contact/support-open-espace",
+ "component": "Espace message dialog box",
+ "findIntroStr": "Used together with the UserContact component to quickly open the eSpace pop-up window, eSpace call, and email applications of the corresponding user.",
+ "demoId": "support-open-espace"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/fall-menu.json b/examples/docs/resources/pc/demo-config/en-US/fall-menu.json
new file mode 100644
index 000000000..4f167e191
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/fall-menu.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "fall-menu/data-resource",
+ "component": "FallMenu Waterfall Menu",
+ "findIntroStr": "The FallMenu waterfall menu is displayed horizontally and supports three-level menu configuration. It is applicable to version customization and is displayed in pop-up mode.",
+ "demoId": "data-resource"
+ },
+ {
+ "title": "Data Source",
+ "content": "Set the data of the waterfall menu through data
.
\n",
+ "link": "fall-menu/data-resource",
+ "component": "FallMenu Waterfall Menu",
+ "findIntroStr": "The FallMenu waterfall menu is displayed horizontally and supports three-level menu configuration. It is applicable to version customization and is displayed in pop-up mode.",
+ "demoId": "data-resource1"
+ },
+ {
+ "title": "Customizing Left/Right Icons",
+ "content": "Use the left
slot to set the left switch icon to IconLeft, and use the right
slot to set the right switch icon to IconRight.
\n",
+ "link": "fall-menu/custom-slider-icon",
+ "component": "FallMenu Waterfall Menu",
+ "findIntroStr": "The FallMenu waterfall menu is displayed horizontally and supports three-level menu configuration. It is applicable to version customization and is displayed in pop-up mode.",
+ "demoId": "custom-slider-icon"
+ },
+ {
+ "title": "Custom Content",
+ "content": "The level-1 menu content is customized through the level1
slot, the level-2 menu content is customized through the level2
slot, and the level-3 menu content is customized through the level3
slot.
\n",
+ "link": "fall-menu/custom-menuitem",
+ "component": "FallMenu Waterfall Menu",
+ "findIntroStr": "The FallMenu waterfall menu is displayed horizontally and supports three-level menu configuration. It is applicable to version customization and is displayed in pop-up mode.",
+ "demoId": "custom-menuitem"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/file-upload.json b/examples/docs/resources/pc/demo-config/en-US/file-upload.json
new file mode 100644
index 000000000..f392b87af
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/file-upload.json
@@ -0,0 +1,234 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Attribute action (type: String) upload server address.
\n",
+ "link": "file-upload/basic-usage",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Set Component Size",
+ "content": "The options are large
, medium
, small
, and mini
\n",
+ "link": "file-upload/size",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "size"
+ },
+ {
+ "title": "File types that can be uploaded",
+ "content": "You can configure accept(image) to restrict the format of uploaded files to image
\n",
+ "link": "file-upload/accept-file-image",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "accept-file-image"
+ },
+ {
+ "title": "Manual Upload",
+ "content": "Configure the upload address through action and manually upload through submit
\n",
+ "link": "file-upload/manual-upload",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "manual-upload"
+ },
+ {
+ "title": "Do not delete files",
+ "content": ":before-remove (callback event before removing a file). In the method, return true/false indicates whether the file can be deleted.
\n",
+ "link": "file-upload/prevent-delete-file",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "prevent-delete-file"
+ },
+ {
+ "title": "Do not upload files",
+ "content": "before-upload (callback event before upload). In the method, return true/false indicates whether files can be uploaded.
\n",
+ "link": "file-upload/prevent-upload-file",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "prevent-upload-file"
+ },
+ {
+ "title": "Upload Request",
+ "content": "You can set action to the upload address and headers to the header request information
\n",
+ "link": "file-upload/upload-request",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "upload-request"
+ },
+ {
+ "title": "mini mode",
+ "content": "\nYou can configure mini-mode to set the display mode.
\n",
+ "link": "file-upload/mini-mode",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "mini-mode"
+ },
+ {
+ "title": "Whether files can be uploaded by dragging",
+ "content": " drag(type:boolean)
can be configured to control whether a component can drag files to upload. If the accept
attribute is configured, the @drop-error
event can be used to obtain non-compliant dragged files.
\n",
+ "link": "file-upload/drag-upload",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "drag-upload"
+ },
+ {
+ "title": "Drag Upload",
+ "content": "The drag(type:boolean) parameter can be set to control whether the component can drag files.
\n",
+ "link": "file-upload/drag-select-file",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "drag-select-file"
+ },
+ {
+ "title": "Uploaded File List",
+ "content": "You can use show-file-list
to configure whether to display the list of uploaded files. The default value is true. This parameter must be used together with file-list.\nYou can configure :file-list (type: Object)
to display the name and address of the uploaded file
\n",
+ "link": "file-upload/upload-file-list",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "upload-file-list"
+ },
+ {
+ "title": "The list of uploaded files is displayed.",
+ "content": "Use list-type = thumb
to enable the display of the file list pop-up window, and thumbOption
to set the data related to the pop-up window.
\n",
+ "link": "file-upload/upload-file-list-thumb",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "upload-file-list-thumb"
+ },
+ {
+ "title": "Customized upload request",
+ "content": "Configure headers
to customize the upload request header information
\n",
+ "link": "file-upload/custom-upload-request",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "custom-upload-request"
+ },
+ {
+ "title": "Override the default request",
+ "content": "You can configure http-request
to overwrite the default upload behavior. You can customize the upload implementation
\n",
+ "link": "file-upload/http-request",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "http-request"
+ },
+ {
+ "title": "Maximum Upload Limit",
+ "content": "Configurable: before-upload (event callback before upload), restricting the file type and size
\n",
+ "link": "file-upload/upload-limit",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "upload-limit"
+ },
+ {
+ "title": "Photo Wall",
+ "content": "Set list-type to 'picture-card' to enable the photo wall mode
\n",
+ "link": "file-upload/picture-card",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "picture-card"
+ },
+ {
+ "title": "File Thumbnail",
+ "content": "For details, see the following example.",
+ "link": "file-upload/file-picture-card",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "file-picture-card"
+ },
+ {
+ "title": "Image List Thumbnail",
+ "content": "\nYou can set list-type to "picture" to display the picture list thumbnail
\n",
+ "link": "file-upload/picture-list",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "picture-list"
+ },
+ {
+ "title": "Maximum number of files to be uploaded",
+ "content": "\nYou can set limit (type:Number, an integer greater than 0) to limit the number of files to be uploaded.
\n",
+ "link": "file-upload/max-file-count",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "max-file-count"
+ },
+ {
+ "title": "Multiple File Selection",
+ "content": "The default file selection is single. \nYou can set multiple to'true' to select multiple files.
\n",
+ "link": "file-upload/multiple-file",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "multiple-file"
+ },
+ {
+ "title": "Hook Function",
+ "content": "before-remove
: indicates the hook before deleting files. The parameters are the uploaded files and file list. If false is returned or Promise is returned and rejected, the deletion stops. before-upload
Hook before uploading a file. The parameter is the uploaded file. If false is returned or Promise is returned and rejected, the upload stops.
\n",
+ "link": "file-upload/custom-prefix",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "custom-prefix"
+ },
+ {
+ "title": "Event",
+ "content": "preview
Event triggered when an uploaded file is clicked in the file list. \nremove
Event triggered when a file is removed from the file list. \nerror
Event triggered when a file fails to be uploaded. \nexceed
Event triggered when the number of files exceeds the upper limit. \nprogress
Event triggered when a file is uploaded. \nchange
This event is triggered when the file status changes. It is triggered when a file is added, uploaded successfully, or uploaded unsuccessfully. \nsuccess
Event triggered when a file is successfully uploaded.
\n",
+ "link": "file-upload/upload-events",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "upload-events"
+ },
+ {
+ "title": "Cookie credential information can be sent.",
+ "content": "You can set with-credentials ='true' to enable the server to carry cookies. The default value is false.
\n",
+ "link": "file-upload/upload-request",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "upload-request1"
+ },
+ {
+ "title": "Manually clear the list of uploaded files.",
+ "content": "Invoke the clearFiles method of the component to clear the list of uploaded files. (This method cannot be invoked in before-upload.)
\n",
+ "link": "file-upload/clear-files",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "clear-files"
+ },
+ {
+ "title": "Manually cancel the upload request",
+ "content": "Invoke the abort method of the component to cancel the upload request
\n",
+ "link": "file-upload/abort-quest",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "abort-quest"
+ },
+ {
+ "title": "Customized Upload Prompt",
+ "content": "You can customize the upload prompt through the tip slot
\n",
+ "link": "file-upload/custom-upload-tip",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "custom-upload-tip"
+ },
+ {
+ "title": "Customized trigger file option box",
+ "content": "You can write a slot named trigger in the component to trigger the pop-up file selection box
\n",
+ "link": "file-upload/custom-trigger",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "custom-trigger"
+ },
+ {
+ "title": "User avatar upload",
+ "content": "For details, see the following example.",
+ "link": "file-upload/upload-user-head",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "upload-user-head"
+ },
+ {
+ "title": "Obtain the original size of the uploaded video.",
+ "content": "\nObtain the original size of the uploaded video
\n",
+ "link": "file-upload/image-size",
+ "component": "FileUpload",
+ "findIntroStr": "You can set the file type and number of uploaded files. You can customize the upload service.",
+ "demoId": "image-size"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/floatbar.json b/examples/docs/resources/pc/demo-config/en-US/floatbar.json
new file mode 100644
index 000000000..5f34eceab
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/floatbar.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Fixed on the right of the screen by default
\n",
+ "link": "floatbar/base",
+ "component": "Floatbar floating block",
+ "findIntroStr": "The module always floats at a certain position on the screen and does not leave the screen due to web page scrolling.",
+ "demoId": "base"
+ },
+ {
+ "title": "Custom Style",
+ "content": "You can configure the CSS style to set the floating block style
\n",
+ "link": "floatbar/custom-style",
+ "component": "Floatbar floating block",
+ "findIntroStr": "The module always floats at a certain position on the screen and does not leave the screen due to web page scrolling.",
+ "demoId": "custom-style"
+ },
+ {
+ "title": "Custom Content",
+ "content": "Set the content of the floating block through the default slot
\n",
+ "link": "floatbar/custom-floatbar-item",
+ "component": "Floatbar floating block",
+ "findIntroStr": "The module always floats at a certain position on the screen and does not leave the screen due to web page scrolling.",
+ "demoId": "custom-floatbar-item"
+ },
+ {
+ "title": "Operation floating block content",
+ "content": "For details, see the following example.",
+ "link": "floatbar/operation-floatbar-item",
+ "component": "Floatbar floating block",
+ "findIntroStr": "The module always floats at a certain position on the screen and does not leave the screen due to web page scrolling.",
+ "demoId": "operation-floatbar-item"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/font.json b/examples/docs/resources/pc/demo-config/en-US/font.json
new file mode 100644
index 000000000..806acb7f8
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/font.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Chinese font set",
+ "content": "For details, see the following example.",
+ "link": "font/chinese-font-set",
+ "component": "Font",
+ "findIntroStr": "Font",
+ "demoId": "chinese-font-set"
+ },
+ {
+ "title": "English font",
+ "content": "For details, see the following example.",
+ "link": "font/english-fonts",
+ "component": "Font",
+ "findIntroStr": "Font",
+ "demoId": "english-fonts"
+ },
+ {
+ "title": "Font Usage Specifications",
+ "content": "For details, see the following example.",
+ "link": "font/Font-usage-specifications",
+ "component": "Font",
+ "findIntroStr": "Font",
+ "demoId": "Font-usage-specifications"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/form.json b/examples/docs/resources/pc/demo-config/en-US/form.json
new file mode 100644
index 000000000..73320b22a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/form.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "Common Forms",
+ "content": "In the Form component, each form field consists of a FormItem component. Various types of form controls can be placed in the form field, including Input, Select, Checkbox, Radio, Switch, DatePicker, and TimePicker.
\n",
+ "link": "form/frequently-used-form",
+ "component": "Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "frequently-used-form"
+ },
+ {
+ "title": "Inline Form",
+ "content": "When the vertical space is limited and the form is simple, you can place the form in a line. You can set the inline
property to change the form field to the form field in the line.
\n",
+ "link": "form/form-in-row",
+ "component": "FormItem",
+ "findIntroStr": "FormItem configuration in the Form component.",
+ "demoId": "form-in-row"
+ },
+ {
+ "title": "Form Validation",
+ "content": "Includes common verification rules such as mandatory fields, date, time, URL, and email. Use trigger
to configure the mode of triggering the validation rule. If change
is used, the validation is triggered when the value in the text box changes. If blur
is used, the validation is triggered after the focus is lost.
\n",
+ "link": "form/form-validation",
+ "component": "Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "form-validation"
+ },
+ {
+ "title": "Customized Verification Rule",
+ "content": "Use the validator
option to perform customized validation. In the validation method, callback
must be invoked. Configure the validate-on-rule-change
attribute to determine whether to trigger a verification immediately after the rules
attribute is changed.
\n",
+ "link": "form/custom-validation-rule",
+ "component": "Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "custom-validation-rule"
+ },
+ {
+ "title": "Text Alignment",
+ "content": "Set the label-align
attribute to determine whether to align text
\n",
+ "link": "form/label-align",
+ "component": "Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "label-align"
+ },
+ {
+ "title": "Verification prompt position",
+ "content": "You can use validate-position
to customize the position where the error message appears. After this parameter is set on the Form
component, the subcomponent FormItem
inherits the setting of the parent component. The setting on the FormItem
component takes precedence over the setting on the From
component.
\n",
+ "link": "form/validation-position",
+ "component": "Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "validation-position"
+ },
+ {
+ "title": "Add a verification method for a component without verification.",
+ "content": "For details, see the following example.",
+ "link": "form/no-validate-to-add",
+ "component": "Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "no-validate-to-add"
+ },
+ {
+ "title": "Form Size",
+ "content": "You can change the size of a component in a form by setting the size
attribute on the tiny-form
tab. You can set the disabled
attribute to change the disabled status of components in the form.
\n",
+ "link": "form/size",
+ "component": "FormItem",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "size"
+ },
+ {
+ "title": "Remove the verification result of a form item.",
+ "content": "Invoke the clearValidate
method to remove the verification result of a form item. Transfer the prop
attribute of the form item to be removed or the array consisting of prop
. If this parameter is not transferred, the verification result of the entire form is removed.
\n",
+ "link": "form/form-clear-validate",
+ "component": "Remove the verification result of a form item.",
+ "findIntroStr": "Method for removing the verification result of a form item in the Form component.",
+ "demoId": "form-clear-validate"
+ },
+ {
+ "title": "Label Text Slot",
+ "content": "Customize the content of the label text in the label
slot
\n",
+ "link": "form/slot-label",
+ "component": "FormItem",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "slot-label"
+ },
+ {
+ "title": "Hide Form Item Verification Prompt",
+ "content": "You can configure novalid-tip
to determine whether to display the tip in the verification dialog box.
\n",
+ "link": "form/novalid-tip",
+ "component": "Form",
+ "findIntroStr": "Whether to display the tip of the verification dialog box",
+ "demoId": "novalid-tip"
+ },
+ {
+ "title": "Verification prompt format",
+ "content": "You can use validate-type
to set whether the verification prompt information is displayed in text
or tip
format. The default value is tip
. You can also configure the verification prompt mode of a certain item on a certain <form-item>
.
\n",
+ "link": "form/validate-type",
+ "component": "Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "validate-type"
+ },
+ {
+ "title": "Disable form",
+ "content": "You can set whether to disable the form by disabled
. The default value is false
.
\n",
+ "link": "form/form-disabled",
+ "component": "Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "form-disabled"
+ },
+ {
+ "title": "Complex Layout",
+ "content": "Complex layouts are implemented by working with the Row
and Col
component.
\n",
+ "link": "form/form-row-col",
+ "component": " Form",
+ "findIntroStr": "It consists of buttons, text boxes, selectors, option buttons, and check boxes. It is used to collect, verify, and submit data.",
+ "demoId": "form-row-col"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/fullscreen.json b/examples/docs/resources/pc/demo-config/en-US/fullscreen.json
new file mode 100644
index 000000000..96f51fe1e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/fullscreen.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Component Use",
+ "content": "For details, see the following example.",
+ "link": "fullscreen/example-component",
+ "component": "Fullscreen",
+ "findIntroStr": "Fullscreen",
+ "demoId": "example-component"
+ },
+ {
+ "title": "Functional use",
+ "content": "For details, see the following example.",
+ "link": "fullscreen/example-api",
+ "component": "Fullscreen",
+ "findIntroStr": "Fullscreen",
+ "demoId": "example-api"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-align.json b/examples/docs/resources/pc/demo-config/en-US/grid-align.json
new file mode 100644
index 000000000..58d764de7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-align.json
@@ -0,0 +1,82 @@
+[
+ {
+ "title": "Column Alignment",
+ "content": "align
Sets the alignment mode of a separate column. The options are left
center
right
. The default value is left
. align
set in the
\nTIP
\n
column will overwrite align
\n
\n set in the table",
+ "link": "grid/align/column-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-column-align"
+ },
+ {
+ "title": "Left-aligned table header",
+ "content": "header-align
Sets the table header alignment mode. The value can be left
center
right
. The default value is left
. header-align
configured in the
\nTIP
\n
table will be overwritten by header-align
configured in the column
\n
\n",
+ "link": "grid/align/header-align/left-header-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-header-align-left-header-align"
+ },
+ {
+ "title": "Right-aligned table header",
+ "content": "For details, see the following example.",
+ "link": "grid/align/header-align/right-header-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-header-align-right-header-align"
+ },
+ {
+ "title": "Table header center alignment",
+ "content": "For details, see the following example.",
+ "link": "grid/align/header-align/center-header-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-header-align-center-header-align"
+ },
+ {
+ "title": "Left-aligned table tail",
+ "content": "The value of footer-align
is left
center
right
. The default value is left
. footer-align
configured in the
\nTIP
\n
table will be replaced by footer-align
configured in the column
\n
\n",
+ "link": "grid/align/footer-align/left-footer-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-footer-align-left-footer-align"
+ },
+ {
+ "title": "Right-aligned table tail",
+ "content": "For details, see the following example.",
+ "link": "grid/align/footer-align/right-footer-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-footer-align-right-footer-align"
+ },
+ {
+ "title": "Table tail center alignment",
+ "content": "For details, see the following example.",
+ "link": "grid/align/footer-align/center-footer-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-footer-align-center-footer-align"
+ },
+ {
+ "title": "Left-aligned table",
+ "content": "align
Sets the alignment mode of all columns. The options are left
center
right
. The default value is left
. The alignment mode configured in the
\nTIP
\n
table has the lowest priority. The alignment mode configured in the
\n
TIP
\n
table will overwrite the
\n
\n",
+ "link": "grid/align/grid-align/left-grid-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-grid-align-left-grid-align"
+ },
+ {
+ "title": "Right-aligned table",
+ "content": "For details, see the following example.",
+ "link": "grid/align/grid-align/right-grid-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-grid-align-right-grid-align"
+ },
+ {
+ "title": "Table center alignment",
+ "content": "For details, see the following example.",
+ "link": "grid/align/grid-align/center-grid-align",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "align-grid-align-center-grid-align"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-cascade.json b/examples/docs/resources/pc/demo-config/en-US/grid-cascade.json
new file mode 100644
index 000000000..a7fdffd14
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-cascade.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Grid-data concatenation-normal column concatenation",
+ "content": "
You need to configure the edit-config
object on the grid
tag, and activeMethod
before editing the event processing edit item data set. \nThe editor
object is configured in the grid-column
column. component
is used to render the editing component. \nattrs
Configure cascading data. \nevents
to set events. \nFor details, see the following example.
\n",
+ "link": "grid/grid_Example/dataCascading/cascade",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-dataCascading-cascade"
+ },
+ {
+ "title": "Grid-data concatenation-any parent concatenation",
+ "content": "
You need to configure the edit-config
object on the grid
tag, and activeMethod
before editing the event processing edit item data set. \nThe editor
object is configured in the grid-column
column. component
is used to render the editing component. \nattrs
Configure cascading data. \nevents
to set events. \nFor details, see the following example.
\n",
+ "link": "grid/grid_Example/dataCascading/arbitraryCascade",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-dataCascading-arbitraryCascade"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-context-menu.json b/examples/docs/resources/pc/demo-config/en-US/grid-context-menu.json
new file mode 100644
index 000000000..fc313b44a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-context-menu.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Grid-right-click menu-header menu",
+ "content": "
Configure the :context-menu="{header: {options: headerMenus}, visibleMethod}"
object to control the table header menu. In the \nheaderMenus
, configure visible
whether to display the menu and disabled
whether to disable the menu. \n The visibleMethod
method can be used to control menu permissions. \n@context-menu-click
monitoring menu click event. \nFor details, see the following example.
\n",
+ "link": "grid/grid_Example/shortcutMenu/header-menu",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-shortcutMenu-header-menu"
+ },
+ {
+ "title": "Grid-right-click menu-table tail menu",
+ "content": "
The table footer menu can be displayed only when :context-menu="{body: {options: bodyMenus}}"
, show-footer, and :footer-method="footerMethod"
are configured. \nThe :context-menu="{body: {options: bodyMenus}, footer: {options: footerMenus}, visibleMethod}&;
objects are configured to control the table header menu. In the \nfooterMenus
, configure visible
whether to display the menu and disabled
whether to disable the menu. \n The visibleMethod
method can be used to control menu permissions. \n@context-menu-click
monitoring menu click event. \nFor details, see the following example.
\n",
+ "link": "grid/grid_Example/shortcutMenu/footer-menu",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-shortcutMenu-footer-menu"
+ },
+ {
+ "title": "Grid-right-click menu-cell menu",
+ "content": "
Configure the context-menu="{body: {options: bodyMenus}, visibleMethod}"
object to control the cell menu. In \nbodyMenus
, set visible
to display menus and disabled
to disable menus. \n The visibleMethod
method can be used to control menu permissions. Event triggered before the \n@cell-context-menu
monitoring menu is displayed. \n@context-menu-click
monitoring menu click event. \nFor details, see the following example.
\n",
+ "link": "grid/grid_Example/shortcutMenu/cell-menu",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-shortcutMenu-cell-menu"
+ },
+ {
+ "title": "Grid-Right-click Menu-Menu Permission",
+ "content": "
Configure the :context-menu="{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}"
object to control the table header menu. \nheader, bodyMenus, footer
: visible
indicates whether to display menus and disabled
indicates whether to disable menus. \nUse the visibleMethod
method to control menu permissions. Event triggered before the \n@cell-context-menu
monitoring menu is displayed. \n@context-menu-click
monitoring menu click event. \nFor details, see the following example.
\n",
+ "link": "grid/grid_Example/shortcutMenu/menu-permissions",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-shortcutMenu-menu-permissions"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-custom-style.json b/examples/docs/resources/pc/demo-config/en-US/grid-custom-style.json
new file mode 100644
index 000000000..22d94f088
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-custom-style.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Set Row Style",
+ "content": "
Set the row style of the table by row-class-name
\n
Set the row style
\n",
+ "link": "grid/custom-style/row-style",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-style-row-style"
+ },
+ {
+ "title": "Set the table header style",
+ "content": "
Set the cell and row styles of the table header through header-cell-class-name
and header-row-class-name
\n
Set the cell style of the table header
\n",
+ "link": "grid/custom-style/header-style/header-cell-style",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-style-header-style-header-cell-style"
+ },
+ {
+ "title": "Set the table header cell style",
+ "content": "For details, see the following example.",
+ "link": "grid/custom-style/header-style/header-row-style",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-style-header-style-header-row-style"
+ },
+ {
+ "title": "Table tail style (customized table tail row style)",
+ "content": "
Use footer-cell-class-name
and footer-row-class-name
to set the cell and row styles at the end of the table
\n",
+ "link": "grid/custom-style/footer-style/footer-cell-style",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-style-footer-style-footer-cell-style"
+ },
+ {
+ "title": "Table tail style (customized table tail cell style)",
+ "content": "For details, see the following example.",
+ "link": "grid/custom-style/footer-style/footer-row-style",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-style-footer-style-footer-row-style"
+ },
+ {
+ "title": "Cell Style",
+ "content": "
Set the cell style of the table by cell-class-name
\n",
+ "link": "grid/custom-style/cell-style",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-style-cell-style"
+ },
+ {
+ "title": "Column Style",
+ "content": "
Set the column style of the table by class-name
\n",
+ "link": "grid/column/class-name",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "column-class-name"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-customized.json b/examples/docs/resources/pc/demo-config/en-US/grid-customized.json
new file mode 100644
index 000000000..2f20a3655
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-customized.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Column Width",
+ "content": "
Configure resizable="true"
on the grid
tag to adjust the column width, and configure resizable="{storage: true}"
on the toolbar
tag to save the column width in localStroage
on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.
\n",
+ "link": "grid/custom/column-width",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-column-width"
+ },
+ {
+ "title": "Manually Reset Columns",
+ "content": "Description of the
method
\n
resetResizable()
: Manually reset the column width and drag the operation to the initial state \nresetCustoms()
: Manually reset the display/hide operation of the column to the initial state.\nresetAll()
: Manually reset all operations of the column. Restore to the initial state
\n
\n
Drag the column width or hide the column, and then click the corresponding button to view the effect.
\n",
+ "link": "grid/custom/resetResizable",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-resetResizable"
+ },
+ {
+ "title": "Sort",
+ "content": "
Configure sortable
on the column
label to sort data. (For columns that are not configured, the sorting icon in the personalization panel is hidden.) and configure setting
on the toolbar
tab to enable personalized settings. Sort the settings in the personalized panel. The sorting results are saved in the local localStroage
. Refresh the page. The sorted data is displayed on the page.
\n",
+ "link": "grid/custom/column-sort",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-column-sort"
+ },
+ {
+ "title": "Sort Type",
+ "content": "
Configure sortable
on the column
tab to enable sorting, and configure setting
on the toolbar
tab to enable personalized settings. In the Personalization panel, select Other Settings. In Other Settings, you can select the sorting type. The sorting type includes the sorting on the current page and sorting on all data. The default value is Sort on the current page.
\n",
+ "link": "grid/custom/sort-type",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-sort-type"
+ },
+ {
+ "title": "Column Freeze",
+ "content": "
Configure the fixed="left"
on the column
tag to be fixed on the left, and configure setting
on the toolbar
tag to enable personalized settings. In the personalized panel, you can set whether the column is fixed.
\n",
+ "link": "grid/custom/column-fixed",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-column-fixed"
+ },
+ {
+ "title": "Local Records",
+ "content": "
Set sortable
of setting
to sortablejs
to implement the drag-and-drop sorting function. This function is invalid under multi-level column headers
\n",
+ "link": "grid/custom/ordercolumn-local",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-ordercolumn-local"
+ },
+ {
+ "title": "Load Remote Data",
+ "content": "
Use the reloadCustoms
method and set the second parameter to true
to load columns in sequence
\n",
+ "link": "grid/custom/ordercolumn-remote",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-ordercolumn-remote"
+ },
+ {
+ "title": "Display and hide columns",
+ "content": "
Configure setting
on the toolbar
tab to enable personalized settings. In the personalized panel, you can set whether to display or hide columns
\n",
+ "link": "grid/custom/column-visible-hidden",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-column-visible-hidden"
+ },
+ {
+ "title": "Manually hide the displayed column",
+ "content": "
Invoke the hideColumn(column)
method to hide the specified column, and the showColumn(column)
method to display the specified column. When you use the two methods to hide or display a column, you need to invoke the refreshColumn()
method to refresh the column configuration for the modification to take effect.
\n",
+ "link": "grid/hide/hideColumn",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "hide-hideColumn"
+ },
+ {
+ "title": "Event triggered before dragging the personalized panel",
+ "content": "
Configure setting
on the toolbar
tab to enable personalized settings, and configure the onBeforeMove
event before dragging on the personalized panel. You can also configure filter
to set the class name. If you drag a line on the personalized panel, the event before dragging the personalized panel is triggered.
\n",
+ "link": "grid/custom/prsonalized-drag",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-prsonalized-drag"
+ },
+ {
+ "title": "Number of records on each page",
+ "content": "
On the toolbar
tab, configure setting
to enable personalized settings. In the personalized panel, select other settings. You can select the number of records to be displayed on each page. You can use the other
attribute of setting
to control the display of other settings. The default value of Boolean
is true
\n",
+ "link": "grid/custom/page-size",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-page-size"
+ },
+ {
+ "title": "Local Storage",
+ "content": "
Configure :setting="{storage:'local'}" on the toolbar
tag
Enable personalization and save to local localSotrage
\n
\n
\n",
+ "link": "grid/custom/local-storage",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-local-storage"
+ },
+ {
+ "title": "Server Storage",
+ "content": "
Configure :setting="{storage:'remote'}"
on the toolbar
tab to enable personalization and remote services to obtain personalized data. Configure @remote-setting
to invoke the reloadCustoms
method to update personalized data. \n Note\n If the column is displayed or hidden based on the server data, you need to manually invoke the reloadCustoms
method to update the personalized data after invoking the interface. In \n
\n
\n
\n",
+ "link": "grid/custom/server-storage",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "custom-server-storage"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-data-source.json b/examples/docs/resources/pc/demo-config/en-US/grid-data-source.json
new file mode 100644
index 000000000..cc7560d72
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-data-source.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Bound static data",
+ "content": "
Table attribute settingdata
Enable bidirectional binding of static data.
\n",
+ "link": "grid/tiny-first-menu/static-data",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-static-data"
+ },
+ {
+ "title": "Open Service Request",
+ "content": "
Table attribute setting fetch-data
enables the service request.
\n",
+ "link": "grid/tiny-first-menu/request-service",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-request-service"
+ },
+ {
+ "title": "Automatically load data",
+ "content": "
Table attribute auto-load
specifies whether to enable the automatic request service. This parameter is valid when fetch-data is configured. In the following example, if auto-load
is set to false, data will not be automatically loaded.
\n",
+ "link": "grid/tiny-first-menu/auto-load",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-auto-load"
+ },
+ {
+ "title": "Table column configuration information",
+ "content": "
Set the configuration information of table columns through the table attribute columns
\n",
+ "link": "grid/tiny-first-menu/columns",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-columns"
+ },
+ {
+ "title": "Enable asynchronous rendering",
+ "content": "
Asynchronous rendering configuration procedure:\n1. Set the table attribute is-async-column
to enable asynchronous rendering. \n2. Set format-config
to enable asynchronous rendering of data in the column.
\n",
+ "link": "grid/tiny-first-menu/column-asyn-rendering",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-column-asyn-rendering"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-drag.json b/examples/docs/resources/pc/demo-config/en-US/grid-drag.json
new file mode 100644
index 000000000..9e71e3e24
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-drag.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Drag Row",
+ "content": "
You can set the row
attribute of drop-config
to control row dragging. By default, row dragging is enabled. Row drag events include @row-drop-start
, row-drop-move
, and row-drop-end
.
\n",
+ "link": "grid/drag/row-drag",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "drag-row-drag"
+ },
+ {
+ "title": "Drag Control",
+ "content": "
You can set the onBeforeMove
event of drop-config
to control row dragging. You can also configure filter
of drop-config
in conjunction with a custom style to restrict drag
\n",
+ "link": "grid/drag/row-drag-ctrl",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "drag-row-drag-ctrl"
+ },
+ {
+ "title": "Drag Column",
+ "content": "
You can set the column
attribute of drop-config
to control column dragging. Column dragging is enabled by default. Column drag events include @column-drop-start
, column-drop-move
, and column-drop-end
.
\n",
+ "link": "grid/drag/column-drag",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "drag-column-drag"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-dynamically-columns.json b/examples/docs/resources/pc/demo-config/en-US/grid-dynamically-columns.json
new file mode 100644
index 000000000..68b4cd294
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-dynamically-columns.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Grid-Dynamic column generation based on the selected date",
+ "content": "For details, see the following example.",
+ "link": "grid/grid_Example/dynamicallyColumns",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-dynamicallyColumns"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-edit.json b/examples/docs/resources/pc/demo-config/en-US/grid-edit.json
new file mode 100644
index 000000000..37f8a6451
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-edit.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Line Edit",
+ "content": "
Table attribute setting edit-config
Enable the editing mode, and then set mode:'row'
in the attribute object to enable row editing, that is, :edit-config="{mode:'row'}&;
.
\n",
+ "link": "grid/tiny-first-menu/row-editing",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-row-editing"
+ },
+ {
+ "title": "Restore Changes",
+ "content": "
Invoke the revertData(rows, field)
method to restore the data of a specified row or the entire table. If rows is an object, one row of data is restored. If rows is an array, multiple rows of data are restored. The field is optional. If no parameter is specified, the entire table data is restored.
\n",
+ "link": "grid/edit/revertData",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "edit-revertData"
+ },
+ {
+ "title": "Check whether data is changed.",
+ "content": "
hasRowChange(row, field)
Checks whether the row or column data is changed. The field is optional.
\n",
+ "link": "grid/edit/hasRowChange",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "edit-hasRowChange"
+ },
+ {
+ "title": "Cell Edit",
+ "content": "
Table attribute setting edit-config
Enable the editing mode, and then set mode:'cell'
in the attribute object to enable line editing, that is, :edit-config="{mode: 'cell'}&;
. \nTable Column Attribute Settingsshow-icon
Sets whether to display the editing icon in the column header. This parameter is valid during editing.
\n",
+ "link": "grid/tiny-first-menu/cell-editing",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-cell-editing"
+ },
+ {
+ "title": "Manually Activate Edit",
+ "content": "The
setActiveCell(row, field)
method activates editing of the specified cell. The setActiveRow(row)
method activates row editing. If mode=cell is used, the first cell is activated by default.
\n",
+ "link": "grid/methods/set-active-cell",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-active-cell"
+ },
+ {
+ "title": "Format Cell",
+ "content": "
Table Column Properties format-value
Format the input value of the Cell Editor component.
\n",
+ "link": "grid/tiny-first-menu/format-value",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-format-value"
+ },
+ {
+ "title": "Custom Editing Rule",
+ "content": "
Table attribute settingedit-config
Enable the editing mode, and then set activeMethod
custom editing rules in the attribute object.
\n",
+ "link": "grid/tiny-first-menu/custom-editing",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-custom-editing"
+ },
+ {
+ "title": "Customized Editing Verification Rule",
+ "content": "
Table attribute settingedit-config
Enable the editing mode and configure the edit-rules
object to set the validation object and validation rule. Set isValidAlways
in the editor
object to enable real-time editing verification.
\n",
+ "link": "grid/tiny-first-menu/editor-is-salid-always",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-editor-is-salid-always"
+ },
+ {
+ "title": "Enable editing",
+ "content": "
Table attribute settingsedit-config
Enable the editing mode, Set showStatus
in the attribute object to enable or disable the cell update status (inverted triangle update flag in the upper left corner of the cell). The default value is true
.
\n",
+ "link": "grid/tiny-first-menu/status-of-editing",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-status-of-editing"
+ },
+ {
+ "title": "Disable editing",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/status-of-noediting",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-status-of-noediting"
+ },
+ {
+ "title": "Click to trigger editing",
+ "content": "
Table attribute settingedit-config
Enable the editing mode, and then set trigger
in the attribute object to modify the triggering mode. The options are as follows: click trigger (click), double-click trigger (dblclick), and manual trigger (manual)
. The default value is click trigger
.
\n",
+ "link": "grid/tiny-first-menu/trigger-mode-for-editing",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-trigger-mode-for-editing"
+ },
+ {
+ "title": "Double-click to trigger editing",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/trigger-mode-db-editing",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-trigger-mode-db-editing"
+ },
+ {
+ "title": "Manually triggered editing",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/trigger-mode-hm-editing",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-trigger-mode-hm-editing"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-editor.json b/examples/docs/resources/pc/demo-config/en-US/grid-editor.json
new file mode 100644
index 000000000..ad9fce2d4
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-editor.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Grid-editor-built-in editor",
+ "content": "Configure
edit-config
on the
grid
label. In the grid-column
column, configure the editor
object, component
render the built-in editing component, and events
configure component events. For details, see the following example.
\n
Description
\n
The built-in editor supports only the Input
and Select
components. For details about how to use other components, see the custom editor
\n
\n",
+ "link": "grid/grid_Example/gridEdit/inner-editor",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridEdit-inner-editor"
+ },
+ {
+ "title": "Grid-Editor-Custom Editor",
+ "content": "Configure
edit-config
on the
grid
label. \n Configure the editor
object in the grid-column
column and render the custom editing component. \nThe default edit box is a small box. You can modify the edit box based on the style. \nFor details, see the following example.
\n",
+ "link": "grid/grid_Example/gridEdit/custom-editor",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridEdit-custom-editor"
+ },
+ {
+ "title": "Introducing the 3.0 component as the editor",
+ "content": "
Introduces the TinyVue Select
component through attribute configuration
.
\n",
+ "link": "grid/grid_Example/gridEdit/custom-editor-select",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridEdit-custom-editor-select"
+ },
+ {
+ "title": "Grid-editor-drop-down list",
+ "content": "
When multiple options are selected from the drop-down list box, cell rendering needs to be implemented. In the following example, format-text
is used to render multiple enumerated values. You can also use renderer
to implement customized components for rendering.
\n",
+ "link": "grid/edit/mutil-render",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "edit-mutil-render"
+ },
+ {
+ "title": "Grid-Editor-Custom Editor",
+ "content": "Configure
edit-config
on the
grid
label. \n Configure the editor
object in the grid-column
column, component
render the custom editing component, and configure the events of the editor component through its events option. \nThe default edit box is a small box. You can modify the edit box based on the style. \nFor details, see the following example.
\n",
+ "link": "grid/news/editor-events",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "news-editor-events"
+ },
+ {
+ "title": "Popeditor pop-up window editing",
+ "content": "
Configure the editor
attribute on the grid-column
column element. In this object, you can specify component
as Popeditor
and attrs
as attributes of the Popeditor component. Note that after the Popeditor component is introduced, it needs to be instantiated in data()
.
\n",
+ "link": "grid/grid_Example/gridEdit/popeditor-in-grid",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridEdit-popeditor-in-grid"
+ },
+ {
+ "title": "Edit the Popeditor pop-up window and configure remote search.",
+ "content": "For details, see the following example.",
+ "link": "grid/grid_Example/gridEdit/popeditor-in-grid-remote-search",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridEdit-popeditor-in-grid-remote-search"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-empty-data-tip.json b/examples/docs/resources/pc/demo-config/en-US/grid-empty-data-tip.json
new file mode 100644
index 000000000..a9e329a39
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-empty-data-tip.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Custom Prompt",
+ "content": "
When the data is empty, the icon + text
prompt is displayed by default. You can also set the slot v-slot:empty
or the render-empty
attribute to define the prompt content.
\n",
+ "link": "grid/tiny-first-menu/empty-data-tip",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-empty-data-tip"
+ },
+ {
+ "title": "Default Prompt",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/empty-data-default-tip",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-empty-data-default-tip"
+ },
+ {
+ "title": "Fix Center",
+ "content": "
When is-center-empty
is set to true
, drag the horizontal scroll bar to keep the empty data prompt so that the final data is displayed in the center of the table width
\n",
+ "link": "grid/tiny-first-menu/empty-data-iscenter",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-empty-data-iscenter"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-event.json b/examples/docs/resources/pc/demo-config/en-US/grid-event.json
new file mode 100644
index 000000000..88bbc5666
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-event.json
@@ -0,0 +1,210 @@
+[
+ {
+ "title": "Table header click event",
+ "content": "
Configure header-cell-click
on the grid
tag to listen to the click event of the table header
\n",
+ "link": "grid/event/header-click-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-header-click-event"
+ },
+ {
+ "title": "Table header double-click event",
+ "content": "
Configure header-cell-dblclick
on the grid
tag to listen to the double-click event of the table header
\n",
+ "link": "grid/event/header-dblclick-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-header-dblclick-event"
+ },
+ {
+ "title": "Cell Click Event",
+ "content": "
Configure cell-click
on the grid
tab to listen to the click event of a cell
\n",
+ "link": "grid/event/cell-click-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-cell-click-event"
+ },
+ {
+ "title": "Cell Double-Click Event",
+ "content": "
Configure cell-dblclick
on the grid
tab to listen to the double-click event of a cell
\n",
+ "link": "grid/event/cell-dblclick-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-cell-dblclick-event"
+ },
+ {
+ "title": "Indicates that the mouse moves to a cell.",
+ "content": "
Configure cell-dblclick
on the grid
tab to listen to the double-click event of a cell
\n",
+ "link": "grid/event/cell-mouseenter-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-cell-mouseenter-event"
+ },
+ {
+ "title": "Event indicating that the mouse moves away from a cell",
+ "content": "
Configure cell-mouseleave
on the grid
tag to listen to the event that the mouse leaves the cell
\n",
+ "link": "grid/event/cell-mouseleave-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-cell-mouseleave-event"
+ },
+ {
+ "title": "Event",
+ "content": "
Configure the scroll
event on the grid
tag to listen to the scrolling of the table
\n",
+ "link": "grid/event/grid-scroll-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-grid-scroll-event"
+ },
+ {
+ "title": "Event Object",
+ "content": "
Table Propertiesenvents
Sets the event object of the table. \n
\n",
+ "link": "grid/event/grid-events",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-grid-events"
+ },
+ {
+ "title": "Row Selection Event",
+ "content": "
This event is triggered when a row is manually selected and is valid only when highlightCurrentRow
is configured on the grid
tag.
\n",
+ "link": "grid/event/current-change-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-current-change-event"
+ },
+ {
+ "title": "This event is triggered when a cell is activated for editing.",
+ "content": "
This event is triggered when you configure edit-actived
on the grid
tag.
\n",
+ "link": "grid/event/edit-actived-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-edit-actived-event"
+ },
+ {
+ "title": "This event is triggered when a cell is edited.",
+ "content": "
This event is valid only when edit-closed
is configured on the grid
tag. After a cell is edited, this event is triggered.
\n",
+ "link": "grid/event/edit-closed-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-edit-closed-event"
+ },
+ {
+ "title": "The data in two tables is associated with each other.",
+ "content": "For details, see the following example.",
+ "link": "grid/event/table-data-association",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-table-data-association"
+ },
+ {
+ "title": "This event is triggered when a cell is activated and the cell is disabled.",
+ "content": "
is valid only when edit-disabled-event
is configured on the grid
tag. In addition, the activeMethod
method in the edit-config
configuration needs to be used to control whether the cell can be edited (return true
to edit the cell, and vice versa).
\n",
+ "link": "grid/event/edit-disabled-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-edit-disabled-event"
+ },
+ {
+ "title": "Event of right-clicking a cell at the end of the table",
+ "content": "
On the grid
tab, configure the footer-cell-context-menu
event of right-clicking a cell at the end of the table. Configure footer-cell-click
to trigger the event of clicking a cell at the end of the table.
\n",
+ "link": "grid/event/footer-cell-context-menu-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-footer-cell-context-menu-event"
+ },
+ {
+ "title": "Event of Right-clicking a Table Header",
+ "content": "
Only the header-cell-context-menu
configured on the grid
tag can listen to the right-click event of the table header.
\n",
+ "link": "grid/event/header-cell-context-menu-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-header-cell-context-menu-event"
+ },
+ {
+ "title": "Paging change event",
+ "content": "
You can only configure page-change
on the grid
tag to listen to page change events.
\n",
+ "link": "grid/event/page-change-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-page-change-event"
+ },
+ {
+ "title": "Event before pagination changes",
+ "content": "
You can configure is-before-page-change
on the grid
tab to determine whether to enable the pre-processing feature when the page changes. When the value is set to true
, the page turning operation or page size change operation does not take effect immediately and is left to the user to process the service logic. Then, the reserved callback
or rollback
is invoked to make it take effect or invalid. The before-page-change
event is triggered when the page turning operation or page size change operation is performed, and then whether to jump to the page is controlled.
\n",
+ "link": "grid/event/page-before-change-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-page-before-change-event"
+ },
+ {
+ "title": "Line Selection Event",
+ "content": "
Configure radio-change
on the grid
tag to listen to the selected row event.\nThis parameter is valid only for type=radio. Event triggered when manually selected and the value changes
\n",
+ "link": "grid/event/radio-change-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-radio-change-event"
+ },
+ {
+ "title": "Column width change event",
+ "content": "
Configure resizable-change
on the grid
tag to listen to column width change events
\n",
+ "link": "grid/event/resizable-change-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-resizable-change-event"
+ },
+ {
+ "title": "Event triggered when all options are selected manually",
+ "content": "
The configuration of select-all
on the grid
tag is valid.\nThis parameter is valid only when type=selection is selected. This event is triggered when all is selected manually
\n",
+ "link": "grid/event/select-all-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-select-all-event"
+ },
+ {
+ "title": "Line Selection Event",
+ "content": "
You can configure select-change
on the grid
tag to listen to the selected row event.\nThis parameter is valid only for type=selection. Event triggered when manually selected and the value changes
\n",
+ "link": "grid/event/select-change-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-select-change-event"
+ },
+ {
+ "title": "Line expansion and collapse event",
+ "content": "
Configure toggle-expand-change
on the grid
tag to listen to the row expansion and collapse event
\n",
+ "link": "grid/event/toggle-expand-change-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-toggle-expand-change-event"
+ },
+ {
+ "title": "Tree Node Expansion and Collapse Event",
+ "content": "
Configure toggle-tree-change
on the grid
tag to listen to tree node expansion and collapse events
\n",
+ "link": "grid/event/toggle-tree-change-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-toggle-tree-change-event"
+ },
+ {
+ "title": "Toolbar click event",
+ "content": "
Configure resizable-change
on the grid
tab to listen to toolbar click events
\n",
+ "link": "grid/event/toolbar-button-click-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-toolbar-button-click-event"
+ },
+ {
+ "title": "Verification failure event",
+ "content": "
Configure valid-error
on the grid
tag to listen to verification failure events
\n",
+ "link": "grid/event/valid-error-event",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "event-valid-error-event"
+ },
+ {
+ "title": "Obtain table row method",
+ "content": "
Method for obtaining a row:
\n
getCurrentRow
Obtain the current row \ngetRowIndex
Obtain the current row number \ngetRadioRow
Radio Select a single row \ngetRowById
Obtain the current row based on the row ID \ngetRowNode
Obtain the row information based on the tr element
\n
\n",
+ "link": "grid/tiny-first-menu/get-row-method",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-get-row-method"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-faq.json b/examples/docs/resources/pc/demo-config/en-US/grid-faq.json
new file mode 100644
index 000000000..ffac68cfd
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-faq.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Table column headers and cells are misplaced",
+ "content": "
When the grid table header is misplaced with the table body cell, You can perform the following operations as required.\n1. Set the column width for each column.\n2. Set show-overflow
and show-header-overflow
to true
\n3. Set table-layout Set this parameter to auto
\n",
+ "link": "grid/faq/unbalanced",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "faq-unbalanced"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-filter.json b/examples/docs/resources/pc/demo-config/en-US/grid-filter.json
new file mode 100644
index 000000000..c1c50e882
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-filter.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Filter",
+ "content": "
filter Configuration
\n
Customize filtering rules based on the scope slot of the customized filter
.\nConfigurable items:\nMulti specifies whether to select multiple enumeration options. This parameter is valid only when enable:true is selected. \nenumable Sets the display of enumeration options in the filter panel. \ninputFilter Sets the display of the input filtered items in the filter panel. \ndefaultFilter Sets the default filter criteria to be displayed in the filter panel. \nvalues specifies the static data source under the display enumeration option function (enumable). \nlabel Sets the display value attribute field of enumerated data. The default value is label. \nvalue Sets the actual value attribute field of the enumerated data. The default value is'value'.
\n
\n",
+ "link": "grid/filter/default-filter",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "filter-default-filter"
+ },
+ {
+ "title": "Custom Parameter",
+ "content": "
Add custom parameters by params
\n",
+ "link": "grid/column/column-params",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "column-column-params"
+ },
+ {
+ "title": "Advanced Filter Settings",
+ "content": "
You can use inputFilter
to configure custom components and conditions for the input filter area, and use extends
to add a shortcut filter list
\n",
+ "link": "grid/filter/advanced-filter",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "filter-advanced-filter"
+ },
+ {
+ "title": "Set Column Filtering Rules",
+ "content": "
Set the column filtering rule through the filter
attribute
\n",
+ "link": "grid/filter/custom-filter",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "filter-custom-filter"
+ },
+ {
+ "title": "Custom Filter",
+ "content": "
Set additional parameters through the params
attribute
\n",
+ "link": "grid/grid-params",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid-params"
+ },
+ {
+ "title": "Server Filter",
+ "content": "
Configure remote-filter to enable server-side filtering. The server-side filtering invokes the fetch-data table for query. The filter-change event is triggered after the server-side filtering.\nThe services/getGridMockData
service in this example needs to be implemented. The example simulates the data returned by a remote service \n
\n",
+ "link": "grid/filter/server-filter",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "filter-server-filter"
+ },
+ {
+ "title": "Enter the default filtering options.",
+ "content": "
Set the default input filtering options through the inputFilter.relation
attribute. \n Enter the built-in options for filtering: equals
, unequal
, greaterThan
, lessThan
, equalToGreaterThan
, equalToLessThan
, contains
, startwith
, endwith
; Custom options can also be configured. \n When configuring custom options, you need to configure the filtering method through the inputFilter.method
attribute.
\n",
+ "link": "grid/filter/default-relation",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "filter-default-relation"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-fixed.json b/examples/docs/resources/pc/demo-config/en-US/grid-fixed.json
new file mode 100644
index 000000000..19a404702
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-fixed.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Left Freeze",
+ "content": "
Sets column freezing through the fixed
property. The options are as follows: left right
The default value is left
\n",
+ "link": "grid/fixed/left-fixed",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "fixed-left-fixed"
+ },
+ {
+ "title": "Right Freeze",
+ "content": "
Sets column freezing through the fixed
property. The options are as follows: left right
The default value is left
\n",
+ "link": "grid/fixed/right-fixed",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "fixed-right-fixed"
+ },
+ {
+ "title": "Frozen Operation Column",
+ "content": "
Sets column freezing through the fixed
property. The options are as follows: left right
The default value is left
\n",
+ "link": "grid/fixed/multi-column-fixed",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "fixed-multi-column-fixed"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-footer.json b/examples/docs/resources/pc/demo-config/en-US/grid-footer.json
new file mode 100644
index 000000000..ae7d654ad
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-footer.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Table tail statistics",
+ "content": "For details, see the following example.",
+ "link": "grid/footer/footer-summation",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "footer-footer-summation"
+ },
+ {
+ "title": "Table tail statistics (empty data)",
+ "content": "For details, see the following example.",
+ "link": "grid/footer/footer-summation-empty",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "footer-footer-summation-empty"
+ },
+ {
+ "title": "Table tail class name",
+ "content": "
\nAdd a class name to the cell at the end of the table through the table column attribute footer-class-name
or the function Function({$rowIndex, column, columnIndex, $columnIndex}) . \n
\n",
+ "link": "grid/footer/footer-class-name",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "footer-footer-class-name"
+ },
+ {
+ "title": "Merge Rows or Columns at the Table Foot",
+ "content": "
Use footer-method
and footer-span-method
to set the total row or column logic of the table tail. show-footer
\n must be configured",
+ "link": "grid/footer/footer-row-or-column-span",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "footer-footer-row-or-column-span"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-grid-border.json b/examples/docs/resources/pc/demo-config/en-US/grid-grid-border.json
new file mode 100644
index 000000000..c8f040233
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-grid-border.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "
Table property setting border
Adds a border to the table.
\n",
+ "link": "grid/tiny-first-menu/grid-border",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-border"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-grid-loading-tip.json b/examples/docs/resources/pc/demo-config/en-US/grid-grid-loading-tip.json
new file mode 100644
index 000000000..2385ea561
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-grid-loading-tip.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Disable loading status",
+ "content": "
Table attribute setting loading
Enables or disables loading. The default value is false
.
\n",
+ "link": "grid/tiny-first-menu/grid-loading-off-tip",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-loading-off-tip"
+ },
+ {
+ "title": "Enable loading status",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/grid-loading-tip",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-loading-tip"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-grid-optimization.json b/examples/docs/resources/pc/demo-config/en-US/grid-grid-optimization.json
new file mode 100644
index 000000000..c63729c33
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-grid-optimization.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Optimized Configuration Items",
+ "content": "
optimization(Object) Configuration Description
\n
| animat(Boolean) | Table animation effect switch. The default value is true. |\n| delayHover(Number) | When the table is dragged or scrolled, Minimum milliseconds after which the hover event can be triggered. The default value is 250 ms. |\n| scrollX(Object) | Horizontal X virtual scrolling configuration (for manual optimization in special scenarios). Example: {gt: 100} |\n| scrollY(Object) | Vertical Y virtual scrolling configuration (for manual optimization in special scenarios) Example: {gt: 500} |
\n
\n
\n",
+ "link": "grid/tiny-first-menu/grid-optimization",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-optimization"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-grid-size.json b/examples/docs/resources/pc/demo-config/en-US/grid-grid-size.json
new file mode 100644
index 000000000..1c51b964e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-grid-size.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "medium",
+ "content": "
Table settingssize
property adjusts the table size.
\n",
+ "link": "grid/tiny-first-menu/grid-size",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-size"
+ },
+ {
+ "title": "small",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/grid-size-small",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-size-small"
+ },
+ {
+ "title": "mini",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/grid-size-mini",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-size-mini"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-grid-stripe.json b/examples/docs/resources/pc/demo-config/en-US/grid-grid-stripe.json
new file mode 100644
index 000000000..75d937f2b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-grid-stripe.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Whether the
stripe
has zebra prints is disabled by default. Enabled when :stripe=\"true\"
is set. (Note: In the editable table scenario, the data inserted temporarily does not have the zebra pattern.)
\n",
+ "link": "grid/stripe/stripe",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "stripe-stripe"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-header.json b/examples/docs/resources/pc/demo-config/en-US/grid-header.json
new file mode 100644
index 000000000..fbfbf763c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-header.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Hide table headers.",
+ "content": "
Set showHeader
to fasle
to control the hidden table header. The default value is true
.
\n",
+ "link": "grid/header/hide-grid-header",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "header-hide-grid-header"
+ },
+ {
+ "title": "User-defined table header",
+ "content": "
Customize the table header by column slot
slot
\n",
+ "link": "grid/header/custom-grid-header",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "header-custom-grid-header"
+ },
+ {
+ "title": "Configure the template for customizing table header content",
+ "content": "
Set the header
slot and configure the template of the customized table header content.
\n",
+ "link": "grid/header/slot-header",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "header-slot-header"
+ },
+ {
+ "title": "Basic Description",
+ "content": "
Add the class name to the cell of the table header through the column attribute header-class-name
, or the function Function({$rowIndex, column, columnIndex, $columnIndex}) . \n
\n",
+ "link": "grid/header/header-class-name",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "header-header-class-name"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-highlight.json b/examples/docs/resources/pc/demo-config/en-US/grid-highlight.json
new file mode 100644
index 000000000..7736ea328
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-highlight.json
@@ -0,0 +1,50 @@
+[
+ {
+ "title": "Highlight Hover Line",
+ "content": "
Set the highlight-hover-row
attribute to control whether to enable the highlight function when the cursor is moved to the current line. The default value is true
. If you do not need to hover and highlight, set highlight-hover-row
to false
.
\n",
+ "link": "grid/highlight/highlight-hover-row",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "highlight-highlight-hover-row"
+ },
+ {
+ "title": "Highlight a specified line",
+ "content": "The
setCurrentRow(row)
can be used to set the highlight status of a line.
\n",
+ "link": "grid/methods/set-current-row",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-current-row"
+ },
+ {
+ "title": "Enable the selected row to be highlighted",
+ "content": "
Set the highlight-current-row
attribute to control whether to highlight selected lines.
\n
\nThe lines with zebra crossings are not highlighted.\n
\n",
+ "link": "grid/highlight/highlight-current-row",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "highlight-highlight-current-row"
+ },
+ {
+ "title": "Whether to highlight the column header",
+ "content": "
Set the highlight-hover-column
attribute to control whether to enable the highlight function when the cursor is moved to the column header of the current column.
\n",
+ "link": "grid/highlight/highlight-hover-column",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "highlight-highlight-hover-column"
+ },
+ {
+ "title": "Specifies whether to highlight the selected column.",
+ "content": "
Set the highlight-current-column
attribute to determine whether to highlight the current column.
\n",
+ "link": "grid/highlight/highlight-current-column",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "highlight-highlight-current-column"
+ },
+ {
+ "title": "Highlight cell borders during editing",
+ "content": "
Sets whether highlight-cell
highlights the cell border during editing. This parameter is valid only when editConfig
is configured
\n",
+ "link": "grid/highlight/highlight-cell",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "highlight-highlight-cell"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-import-export.json b/examples/docs/resources/pc/demo-config/en-US/grid-import-export.json
new file mode 100644
index 000000000..d0ed66692
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-import-export.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/export-excel",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-export-excel"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-keyboard.json b/examples/docs/resources/pc/demo-config/en-US/grid-keyboard.json
new file mode 100644
index 000000000..0703458ac
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-keyboard.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Keyboard Navigation",
+ "content": "
Key Description
\n
| Arrow Up ↑ | Moves to the cell above the current active cell |\n| Arrow Down ← | Moves to the cell below the current active cell |\n| Arrow Left ← | Moves to the cell on the left of the current active cell |\n| Arrow Right → | Moves to the right of the current active cell |\n| Tab | Moves to the cell on the right of the selected or active cell. If the last column is displayed and the next row exists, move from the next row. |\n| Tab + Shift | Moves to the cell on the left of the selected or active cell. If the first column is displayed and there is a previous row, move the cell from the previous row. |\n| Spacebar | If the cell is a check box or option button, switch the selected status. |\n| Enter | Cancel the editing and move the cell to the cell under the current active cell. |\n| Delete | Clear the content. | \n| Backspace | Clear the contents and activate the selected cell to the editing state. |\n| F2 | Activate cell editing. |\n| Esc | Cancel cell editing. |\n| Page Up | Page Up | Page Down | Page Down | Page Down | Page Down | \n| Home | Scroll to the top |\n| End | Scroll to the bottom |
\n
\n",
+ "link": "grid/keyboard-navigation",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "keyboard-navigation"
+ },
+ {
+ "title": "Set key configuration items",
+ "content": "
Table propertykeyboard-config
Set key configuration items. \n
\n",
+ "link": "grid/keyboard-config",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "keyboard-config"
+ },
+ {
+ "title": "Setting Mouse Configuration Items",
+ "content": "
Table propertymouse-config
Set the mouse configuration item. \n
\n",
+ "link": "grid/mouse-config",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "mouse-config"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-large-data.json b/examples/docs/resources/pc/demo-config/en-US/grid-large-data.json
new file mode 100644
index 000000000..16e17f8e6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-large-data.json
@@ -0,0 +1,50 @@
+[
+ {
+ "title": "Scroll Pagination",
+ "content": "
Scrolling pagination configuration procedure:\n1. Set the table attribute fetch-data
to enable the service request. \n2. Set scroll-load
to enable scrolling.
\n",
+ "link": "grid/tiny-first-menu/scroll-paging",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-scroll-paging"
+ },
+ {
+ "title": "Virtual Scrolling",
+ "content": "
Virtual scrolling configuration procedure:\n1. Set height
to a fixed height for table attributes. \n2. Set optimization
to enable virtual scrolling.
\n
optimization(Object) configuration description:
\n
| delayHover(Number) | (ms) after which the hover event can be triggered when a table is dragged or scrolled. The default value is 250 ms. |\n| scrollX(Object) | Horizontal X virtual scrolling configuration (for manual optimization in special scenarios) Example: {gt: 100} |\n| scrollY(Object) | Vertical Y Virtual Scrolling Configuration (for manual optimization in special scenarios) For example, {gt: 500} |
\n
\n
Precautions for enabling virtual scrolling
\n
1. Before enabling virtual scrolling, ensure that the width of each column is the same. You can configure the uniform width by setting the column-width
attribute on the <tiny-grid>
tag. \n2. Enabling virtual scrolling will disable the column width adjustment function. Column dragging will change the column width. As a result, the number of columns in virtual scrolling rendering is incorrectly calculated and the table style is disordered. Therefore, column dragging is prohibited.
\n
\n",
+ "link": "grid/tiny-first-menu/virtual-rolling",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-virtual-rolling"
+ },
+ {
+ "title": "Virtual scrolling of the tree table",
+ "content": "
Name | Type | Description | Default Value
optimization.scrollX.gt | Number | Specifies the number of columns to be automatically started when the number of columns is greater than X Virtual scrolling | 100 |
optimization.scrollX.rSize | Number | Number of columns to be rendered each time | |
optimization.scrollX.vSize | Number | Number of columns in the visible area | |
optimization.scrollX.adaptive | Boolean | Automatically adapts to the optimal rendering mode (If this parameter is set to false, the column array is intercepted only once after the scrolling is complete, which improves the performance in big data scenarios. However, the white screen will be displayed for a short time and will be restored after the rendering is complete.) | true |
optimization.scrollY.gt | Number | specifies the number of lines. Y: The virtual scrolling function is automatically enabled. | 500 |
optimization.scrollY.rSize | Number | : number of lines to be rendered each time. | |
optimization.scrollY.adaptive | Boolean | : automatically adapts to the optimal rendering mode. (If this parameter is set to false, the row array is captured only once after the scrolling is complete, which improves the performance in big data scenarios. However, white screen will be displayed for a short time and will be restored after the rendering is complete.) | true |
\n
\n",
+ "link": "grid/tiny-first-menu/grid-large-tree-data",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-large-tree-data"
+ },
+ {
+ "title": "Full Load",
+ "content": "Performance problems may occur when there is too much data in a table. You can use $refs
to obtain table objects and set the loadData
method of the table objects to enable full loading to optimize performance.
\n",
+ "link": "grid/tiny-first-menu/full-data-loading",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-full-data-loading"
+ },
+ {
+ "title": "Generate 1000 columns",
+ "content": "You can use the loadColumn(columns)
method to load column configurations. This method may be used in scenarios where columns need to be reloaded.
\n",
+ "link": "grid/large-data/load-column",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "large-data-load-column"
+ },
+ {
+ "title": "Scroll to the specified position",
+ "content": " Method Description
\n
scrollTo(scrollLeft, scrollTop)
: Scroll to the corresponding position \nscrollToRow(row)
: Scroll to the corresponding row \nscrollToColumn(column)
: Scroll to the corresponding column
\n
\n",
+ "link": "grid/large-data/scroll-to",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "large-data-scroll-to"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-nested-grid.json b/examples/docs/resources/pc/demo-config/en-US/grid-nested-grid.json
new file mode 100644
index 000000000..b6839e026
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-nested-grid.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Nested Table",
+ "content": "Implements the nested table function by using the table component in the default slot default
.
\n",
+ "link": "grid/grid_Example/nestedGrid",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-nestedGrid"
+ },
+ {
+ "title": "Check whether the row is expanded.",
+ "content": "You can invoke the hasRowExpand(row)
method to check whether a row is expanded. The row parameter is the row data object.
\n",
+ "link": "grid/expand/hasRowExpand",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "expand-hasRowExpand"
+ },
+ {
+ "title": "Set to expand all lines",
+ "content": "You can invoke the setAllRowExpansion(checked)
method to set whether to expand or not all rows.
\n",
+ "link": "grid/methods/set-all-row-expansion",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-all-row-expansion"
+ },
+ {
+ "title": "Set to expand a specified line",
+ "content": "You can invoke the setRowExpansion(rows, checked)
method to expand a specified row. The second parameter specifies whether to expand a specified row. When expanding a specified row, you can invoke the clearRowExpand() method to close the expanded row.
\n",
+ "link": "grid/methods/set-row-expansion",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-row-expansion"
+ },
+ {
+ "title": "Manually switch to expand rows",
+ "content": "You can manually switch between expanded rows by invoking the toggleRowExpansion(row)
method.
\n",
+ "link": "grid/methods/toggle-row-expansion",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-toggle-row-expansion"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-operation-column.json b/examples/docs/resources/pc/demo-config/en-US/grid-operation-column.json
new file mode 100644
index 000000000..2bb7a6dac
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-operation-column.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Table column property setting type="radio"
Display radio columns.
\n",
+ "link": "grid/tiny-first-menu/default-serial-column",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-default-serial-column"
+ },
+ {
+ "title": "Manually Canceling a Row",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/clearRadioRow",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-clearRadioRow"
+ },
+ {
+ "title": "Manually select a line",
+ "content": "setRadioRow(row)
is used to select a single line and set the selected status of a line.
\n",
+ "link": "grid/methods/set-radio-row",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-radio-row"
+ },
+ {
+ "title": "Single-choice configuration item",
+ "content": "The radio-config
configuration item can be used to configure the default selected and disabled options of the option button.
\n",
+ "link": "grid/tiny-first-menu/radio-config",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-radio-config"
+ },
+ {
+ "title": "Disable a single option",
+ "content": "Single choice mode. The attribute checkMethod
of the radio-config
configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is true
or false
, the data item is enabled or disabled.
\n",
+ "link": "grid/disable-radio",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "disable-radio"
+ },
+ {
+ "title": "Display Multiple Select Columns",
+ "content": "Table column attribute setting type="selection"
Display multiple columns.
\n",
+ "link": "grid/tiny-first-menu/custom-serial-column",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-custom-serial-column"
+ },
+ {
+ "title": "Manually Cancel Multiple Rows",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/clearSelection",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-clearSelection"
+ },
+ {
+ "title": "Manually select all lines",
+ "content": "setAllSelection(checked)
is used to select multiple rows. You can set the selected status of all rows.
\n",
+ "link": "grid/methods/set-all-selection",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-all-selection"
+ },
+ {
+ "title": "Manually select a specified line",
+ "content": "setSelection(rows, checked)
is used to select multiple lines. You can set the selected status of a specified line. The first parameter can be transferred to an object or array. If an object is used, select a single line. If an array is used, select multiple lines. The second parameter indicates whether to select or not. The
\nTIP
\n
setSelection
method does not trigger the select-change
event. It is triggered only when you click it.
In multi-selection mode, the checkField
attribute of the select-config
configuration item determines the selection status of a row of data. (and the selected state and this field are bidirectionally bound).
\n
\n",
+ "link": "grid/methods/set-selection",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-selection"
+ },
+ {
+ "title": "Manually switch the selection status of all rows.",
+ "content": "The toggleAllSelection()
method directly switches the selection status of all rows.
\n",
+ "link": "grid/methods/toggle-all-selection",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-toggle-all-selection"
+ },
+ {
+ "title": "Manually switch the selected status of a specified row.",
+ "content": "The toggleRowSelection(row)
method directly switches the selection status of a row.
\n",
+ "link": "grid/methods/toggle-row-selection",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-toggle-row-selection"
+ },
+ {
+ "title": "Multi-choice disabled",
+ "content": "Multi-choice mode. The attribute checkMethod
of the select-config
configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is true
or false
, the data item is enabled or disabled.
\n",
+ "link": "grid/disable-selection",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "disable-selection"
+ },
+ {
+ "title": "User-defined Operation Column Content",
+ "content": "Set the customized operation column by slot, that is, <tiny-grid-column>
customized operation column content </tiny-grid-column>
.
\n",
+ "link": "grid/tiny-first-menu/custom-operation-column",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-custom-operation-column"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-pager.json b/examples/docs/resources/pc/demo-config/en-US/grid-pager.json
new file mode 100644
index 000000000..d04aa6f90
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-pager.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "To ensure that the table is lightweight and open, the table is modularized and split. The core code is lightweight. The paging component needs to be introduced to the paging function. The built-in paging configuration procedure is as follows: \n1. import
introduces the official Pager
component. That is, import Pager from '@opentiny/vue-pager'
or {Pager} from '@opentiny/vue'
. \n2. Pager
is transferred to the data()
function and stored for use in the template. \n3. Set the table attribute pager
to configure pagination and inject the pagination component through the {component: Pager}
attribute of pager
. \n4. Configure the seq-serial attribute to set the sequence number to be displayed consecutively after page turning. By default, the sequence number is displayed discontinuously.
\n",
+ "link": "grid/pager/inner-pager",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "pager-inner-pager"
+ },
+ {
+ "title": "The system prompts you to save data.",
+ "content": "Configure the showSaveMsg
attribute. When the table data is modified, the system prompts you to save the modification.
\n",
+ "link": "grid/pager/showSaveMsg",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "pager-showSaveMsg"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-renderer.json b/examples/docs/resources/pc/demo-config/en-US/grid-renderer.json
new file mode 100644
index 000000000..32dceb689
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-renderer.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Built-in Renderer",
+ "content": "The built-in renderer sets the display obtaining type of the current table column. \n Configure the format-text
object in the grid-column
column to control the data format. The options of
\nTIP
\n
format-text
are as follows:
\n
\ninteger
: displayed as an integer. \nnumber
: The value is displayed as a decimal. \nmoney
: displays the amount of money. \n- rate: The data is displayed as a percentage.
\n- filesize: indicates the file size.
\n- boole: displays the icon with a pair or cross.
\n- date: indicates the year, month, and day.
\n- dateTime: indicates the year, month, day, hour, and minute.
\n- longDateTime: year, month, day, hour, minute, and second.
\n- time: time and hour.
\n- longTime: hour, minute, and second.
\n- yearMonth: displays the adult month.
\n- enum: Queries the text to be displayed based on the data value.
\n- ellipsis: displays the omitted content. When you move the cursor to the cell, the complete content is displayed. The len attribute of format must also be configured.
\n
\n
\n",
+ "link": "grid/grid_Example/gridRenderer/inner-renderer",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridRenderer-inner-renderer"
+ },
+ {
+ "title": "Custom Renderer",
+ "content": "The custom renderer can customize the rendering of cells or a vue component
. Configure renderer
in the grid-column
column to support method and object configuration. For details, see the following example.
\n",
+ "link": "grid/grid_Example/gridRenderer/custom-renderer",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridRenderer-custom-renderer"
+ },
+ {
+ "title": "Column Asynchronous Data Rendering",
+ "content": "After the async
attribute of the format-config
column is set to true
, the data
data can be dynamically modified for automatic rendering. Generally, type
is set to enum
, and value
and label
can be used to configure the mapping of rendering cells.
\n",
+ "link": "grid/news/async-colunm-render",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "news-async-colunm-render"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-reverse-column-row.json b/examples/docs/resources/pc/demo-config/en-US/grid-reverse-column-row.json
new file mode 100644
index 000000000..c772c703a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-reverse-column-row.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "Grid-Inverting Rows and Columns in a Table",
+ "content": "You need to configure :columns="tableColumn"
:show-header="false"
on the grid
tag. Click the 'Reverse Table' button to view the effect. Currently, the operation can only be performed once. If the operation is performed multiple times, problems may occur. For details, see the following example.
\n",
+ "link": "grid/grid_Example/reverseRow",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-reverseRow"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-row-grouping.json b/examples/docs/resources/pc/demo-config/en-US/grid-row-grouping.json
new file mode 100644
index 000000000..e62554eef
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-row-grouping.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Row groups can be configured for the row-group
attribute. Columns with the same value are displayed in groups.
\n",
+ "link": "grid/row-grouping",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "row-grouping"
+ },
+ {
+ "title": "Customized Group",
+ "content": "The row-group
configuration item render
can be used to customize group content rendering, and closeable
can be used to control whether group lines can be collapsed.
\n",
+ "link": "grid/rowGroupRender",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "rowGroupRender"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-serial-column.json b/examples/docs/resources/pc/demo-config/en-US/grid-serial-column.json
new file mode 100644
index 000000000..31b57a7bd
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-serial-column.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Table column attribute setting type="index"
Display sequence number column.
\n",
+ "link": "grid/tiny-first-menu/default-serial-column",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-default-serial-column"
+ },
+ {
+ "title": "User-defined sequence number rule",
+ "content": "The table column attribute sets type="index"
to display the sequence number column. The index-method
method sets the user-defined sequence number rule.
\n",
+ "link": "grid/tiny-first-menu/custom-serial-column",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-custom-serial-column"
+ },
+ {
+ "title": "Start value of the user-defined sequence number column",
+ "content": "Set the table column attribute type="index"
to display the sequence number column, and start-index
to set the start value of the customized sequence number column.
\n",
+ "link": "grid/tiny-first-menu/start-index",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-start-index"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-slot.json b/examples/docs/resources/pc/demo-config/en-US/grid-slot.json
new file mode 100644
index 000000000..d20b05a9a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-slot.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Default slot",
+ "content": "For details, see the following example.",
+ "link": "grid/slot/default-slot",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "slot-default-slot"
+ },
+ {
+ "title": "Toolbar slot",
+ "content": "For details, see the following example.",
+ "link": "grid/slot/buttons-slot",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "slot-buttons-slot"
+ },
+ {
+ "title": "Empty data display slot",
+ "content": "For details, see the following example.",
+ "link": "grid/slot/empty-slot",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "slot-empty-slot"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-sort.json b/examples/docs/resources/pc/demo-config/en-US/grid-sort.json
new file mode 100644
index 000000000..03bc78eab
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-sort.json
@@ -0,0 +1,50 @@
+[
+ {
+ "title": "Default Sorting",
+ "content": "Enable the sorting function by setting the sortable
attribute of the table column.
\n",
+ "link": "grid/sort/default-sort",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "sort-default-sort"
+ },
+ {
+ "title": "Unique Primary Key",
+ "content": "Set the row-id
field name of the unique primary key of user-defined row data in a table. The default value of this property is _XID
\n",
+ "link": "grid/tiny-first-menu/row-id",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-row-id"
+ },
+ {
+ "title": "Multi-field sorting",
+ "content": "Set the sortable
attribute of the table column to enable the sorting function of the column, and then set the sort-by
attribute to implement multi-field sorting. An array list is a sorted list of fields.
\n",
+ "link": "grid/sort/combinations-sort",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "sort-combinations-sort"
+ },
+ {
+ "title": "Custom Sorting",
+ "content": "Set the sortable
attribute of the table column to enable the sorting function for the column, and then set the sort-method
method to implement user-defined sorting.
\n",
+ "link": "grid/sort/custom-sort",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "sort-custom-sort"
+ },
+ {
+ "title": "Manual Sorting",
+ "content": "You can use the sort(field, order)
method to manually sort tables. If order is empty, the sorting is automatically switched.
\n",
+ "link": "grid/methods/sort",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-sort"
+ },
+ {
+ "title": "Table server sorting",
+ "content": "Set the sortable
attribute of the table column to enable the sorting function, and then set the remote-sort
method to enable the sorting function on the server. \nIn this example, the services/getGridMockData
service needs to be implemented. The example simulates the data returned by the remote service.\n
\n",
+ "link": "grid/sort/server-sort",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "sort-server-sort"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-span.json b/examples/docs/resources/pc/demo-config/en-US/grid-span.json
new file mode 100644
index 000000000..c629c2743
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-span.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Set the built-in row combination rule through the table column attribute row-span
. This attribute applies only to common tables and does not apply to nested tree tables.
\n",
+ "link": "grid/span/row-span/row-span-easy",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "span-row-span-row-span-easy"
+ },
+ {
+ "title": "Custom Combination Rule",
+ "content": "Set a custom combination rule through the table column attribute span-method
.
\n",
+ "link": "grid/span/row-span/row-span",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "span-row-span-row-span"
+ },
+ {
+ "title": "Column Merge",
+ "content": "Column combination is a user-defined combination rule implemented by using the span-method
table column setting method. For example,
\n\n can combine two columns into
\n
\n",
+ "link": "grid/span/column-span",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "span-column-span"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-summary.json b/examples/docs/resources/pc/demo-config/en-US/grid-summary.json
new file mode 100644
index 000000000..fe4604d74
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-summary.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Configure custom statistics through footer-method
and show-footer
.
\n",
+ "link": "grid/summary/custom-summary",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "summary-custom-summary"
+ },
+ {
+ "title": "Set Profile Statistics",
+ "content": "Set the profile statistics using summary-config
.
\n",
+ "link": "grid/summary/configuration-summary",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "summary-configuration-summary"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-tip.json b/examples/docs/resources/pc/demo-config/en-US/grid-tip.json
new file mode 100644
index 000000000..4cf553e10
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-tip.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Column Header Prompt",
+ "content": "There are two types of column header prompts. One is show-header-tip
prompt (a prompt is displayed regardless of whether the content exceeds the value of show-header-overflow
). The other is hidden and prompt when the content exceeds the current line. The options of
\nTIP
\n
show-header-overflow
are as follows:
\n
\ntooltip
: displays the content that exceeds the value of ...
, displays all information at the prompt layer on the left or right, and displays the default prompt when show-overflow
is enabled. \ntitle
: Same as the title
attribute of the native tag. \nellipsis
: ...
is displayed for the extra content, and \n
\n
\n is not displayed",
+ "link": "grid/tip/column-header-tip",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tip-column-header-tip"
+ },
+ {
+ "title": "Cell Prompt",
+ "content": " There are two types of cell prompts. One is the show-tip
prompt (a prompt is displayed regardless of whether the content exceeds the current line). The other is the show-overflow
prompt is hidden and displayed when the content exceeds the current line. The options of
\nTIP
\n
show-overflow
are as follows:
\n
\ntitle
: consistent with the title
attribute of the native tag \nellipsis
: ...
is displayed for the extra content. \ntooltip
: ...
is displayed for the extra content. The left/right pop-up prompt layer displays all information. The default prompt when show-overflow
is enabled\ntooltip
can be prompted through the Grid
property : Configure tooltip-config
. For details about the configuration method, see \n
\n
\n of the Tooltip component",
+ "link": "grid/tip/cell-tip",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tip-cell-tip"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-toolbar.json b/examples/docs/resources/pc/demo-config/en-US/grid-toolbar.json
new file mode 100644
index 000000000..20fa4f82d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-toolbar.json
@@ -0,0 +1,90 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar
in slot mode and set the toolbar component attribute slot="toolbar"
. \n2. Set the toolbar component attribute buttons
and configure the button group. \n3. Table event setting: The @toolbar-button-click
obtains the buttons
event on the toolbar. Users can customize the service logic for adding, deleting, and modifying operations. To mark a new line in the
\n state, set markInsert in edit-config to true
\n
\n",
+ "link": "grid/tiny-first-menu/insert-delete-update",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-insert-delete-update"
+ },
+ {
+ "title": "Cancel deletion",
+ "content": "Configure the code of mark_cancel
on the toolbar, select the data, and click Delete/Undelete
. The selected data is marked with strikethrough. Then click the Save
button to request the service to delete the marked data. Select the data marked with strikethrough and click Delete/Undelete
again to cancel the strikethrough. \nThe effect of marking and canceling strikethrough is available only when the fetch-data request service is configured.\n
\n",
+ "link": "grid/toolbar/cancel-delete",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "toolbar-cancel-delete"
+ },
+ {
+ "title": "Clear Data",
+ "content": "clearData method manually clears the cell content. If no parameter is transferred, the entire table content is cleared. If a line is transferred, the specified line is cleared. If a field is transferred, the field is cleared. For details, see the following example.
\n",
+ "link": "grid/tiny-first-menu/clearData",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-clearData"
+ },
+ {
+ "title": "Insert data to a specified row and delete a specified row",
+ "content": "You can use the insertAt(records, row)
method to insert one or more rows of data to a specified row. The remove(rows)
method can be used to delete one or more specified rows of data. If rows is an object, it is one row. If an array is an array, it is multiple rows of data. If the value is empty, all data is deleted.
\n",
+ "link": "grid/toolbar/insert-remove-rows",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "toolbar-insert-remove-rows"
+ },
+ {
+ "title": "Saving and Deleting Server Data",
+ "content": "Use the table attribute save-data
to save server data. \n Use the table attribute delete-data
to delete server data.
\n",
+ "link": "grid/tiny-first-menu/save-data",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-save-data"
+ },
+ {
+ "title": "Set the toolbar size",
+ "content": "Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar
in slot mode and set the toolbar component attribute slot="toolbar"
. \n2. Set the toolbar component attribute buttons
and configure the button group. \n3. Set the table event @toolbar-button-click
to obtain the buttons
event on the toolbar. You can customize the service logic for copying rows. The
\n\nsize
property specifies the size of the toolbar. The options are large, medium, small, and mini. If this parameter is not set, the default size is used. \n
\n",
+ "link": "grid/tiny-first-menu/copy-row-data",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-copy-row-data"
+ },
+ {
+ "title": "Enable the table refresh function",
+ "content": "Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar
in slot mode and set the toolbar component attribute slot="toolbar"
. \n2. Set the toolbar component attribute refresh
to enable the table refresh function.
\n\n- Setting Toolbar Properties
loading
Enable/Disable Loading. \n handleFetch('reload')
\n
\n is invoked when the customized implementation is refreshed",
+ "link": "grid/tiny-first-menu/refresh-grid",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-refresh-grid"
+ },
+ {
+ "title": "Enable the full-screen function of the table.",
+ "content": "Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar
in slot mode and set the toolbar component attribute slot="toolbar"
. \n2. Set the toolbar component attribute full-screen
to enable the full-screen function.
\n",
+ "link": "grid/tiny-first-menu/grid-full-screen",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-full-screen"
+ },
+ {
+ "title": "Change the table height in full screen mode",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/grid-full-screen-height",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-grid-full-screen-height"
+ },
+ {
+ "title": "Toolbar Custom Slot",
+ "content": "Toolbar configuration procedure:\n1. Import the table toolbar component GridToolbar
in slot mode and set the toolbar component slot #toolbar
. \n2. Customize content through the slot #buttons
of the toolbar component.
\n",
+ "link": "grid/tiny-first-menu/custom-toolbar",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-custom-toolbar"
+ },
+ {
+ "title": "Profile",
+ "content": "The v-bind
is bound to an object to implement the profile. In the bound object, the toolbar
field is used to configure the toolbar. The events
field can be used to configure the toolbarButtonClick
event for buttons on the toolbar. In addition, the pager
field is used for pagination configuration, and the fetchData
field is used for service request.
\n",
+ "link": "grid/toolbar/toolbar-op-config",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "toolbar-toolbar-op-config"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-tree-grid.json b/examples/docs/resources/pc/demo-config/en-US/grid-tree-grid.json
new file mode 100644
index 000000000..8298c9b7a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-tree-grid.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Data structure with children",
+ "content": "Configure tree-config="{children:'children'}" on the grid tab to display data in a tree. In addition, you need to configure the tree-node attribute
\n on the field that displays the tree node",
+ "link": "grid/tree-table/tree-grid-base",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-base"
+ },
+ {
+ "title": "Flat Data Structure",
+ "content": "Note: For a flattened data structure, you need to invoke the aggregateTableData method to convert data into data with sublevels to display the tree table structure.
\n",
+ "link": "grid/tree-table/tree-grid-data",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-data"
+ },
+ {
+ "title": "Operation Column",
+ "content": "In the column, you can set type="radio" to enable single selection and type="selection" to enable multiple selection
\n",
+ "link": "grid/tree-table/tree-grid-operation-column",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-operation-column"
+ },
+ {
+ "title": "Manually expand all tree nodes",
+ "content": "setAllTreeExpansion(checked)
can be used to set whether all tree nodes are expanded or not.
\n",
+ "link": "grid/methods/set-all-tree-expansion",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-all-tree-expansion"
+ },
+ {
+ "title": "Manually expand a specified tree node",
+ "content": "You can set setTreeExpansion(rows, checked)
to expand the specified tree node. The second parameter specifies whether to expand the row.
\n",
+ "link": "grid/methods/set-tree-expansion",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-set-tree-expansion"
+ },
+ {
+ "title": "Manually switch and expand tree nodes",
+ "content": "The toggleTreeExpansion(row)
can be set to switch to expand the tree node.
\n",
+ "link": "grid/methods/toggle-tree-expansion",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "methods-toggle-tree-expansion"
+ },
+ {
+ "title": "Frozen Column",
+ "content": "On the column label, you can set the fixed="left" attribute to fix the column on the left, and set the fixed="right" attribute to fix the column on the right
\n",
+ "link": "grid/tree-table/tree-grid-fixed-column",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-fixed-column"
+ },
+ {
+ "title": "Expand Row",
+ "content": "Configure type="expand" on the column label to expand the line. You can insert the required template information through the v-slot slot
\n",
+ "link": "grid/tree-table/tree-grid-expand",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-expand"
+ },
+ {
+ "title": "Check whether the tree node is expanded.",
+ "content": "You can use the hasTreeExpand(row)
method to check whether a tree node is expanded. The row parameter indicates the row data object.
\n",
+ "link": "grid/tree-table/hasTreeExpand",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-hasTreeExpand"
+ },
+ {
+ "title": "Expand Row No. Column Configuration",
+ "content": "In the treeConfig
attribute, set ordered
to false
to expand rows. The sequence number column is sorted by parent-child structure. By default, the ordered
attribute is true
. After the row is expanded, the sequence number column is sorted by sequence number.
\n",
+ "link": "grid/tree-table/tree-grid-index",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-index"
+ },
+ {
+ "title": "Basic Usage",
+ "content": "Table propertyexpand-config
Set the configuration item of the expanded line.
\n",
+ "link": "grid/tree-table/tree-grid-expand-config",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-expand-config"
+ },
+ {
+ "title": "Add, Delete, and Modify",
+ "content": "Set slot="toolbar" on the grid-toolbar tab, and configure related operation buttons. Note: To add data, you need to configure the edit-config text box on the grid tab. In addition, the component instance invokes methods through ref to perform related operations. findTree and filterTree are search and filter methods in the tool class. Due to the special structure of tree data, the getInsertRecords
and getRecordset
methods of the grid cannot obtain new data. Such data needs to be processed by users.
\n",
+ "link": "grid/tree-table/tree-grid-insert-delete-update",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-insert-delete-update"
+ },
+ {
+ "title": "Keyboard operation",
+ "content": "Move the highlighted row, set stripe to false, highlight-hover-row to false, and highlight-current-row to false. Configure the keyboard-config={isArrow: true} attribute to enable the arrow keys function.\n | Arrow Up | Move to the previous line of the highlighted line\n | Arrow Down | Move to the next line of the highlighted line\n | Enter | Expand the node. Enter the child node\n | Backspace | Close the node and return to the parent node
\n",
+ "link": "grid/tree-table/tree-grid-keyboard-operation",
+ "component": "Tree Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tree-table-tree-grid-keyboard-operation"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-validation.json b/examples/docs/resources/pc/demo-config/en-US/grid-validation.json
new file mode 100644
index 000000000..d9f187a35
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-validation.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Verify during editing",
+ "content": "The grid tag configures the edit-config object, and configures the edit-rules object to set the validation object and validation rule. For details, see the following example.
\n",
+ "link": "grid/grid_Example/gridValid/editing-validation",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridValid-editing-validation"
+ },
+ {
+ "title": "Verify hidden columns during editing",
+ "content": "When the edit-config object is configured for the grid tag, type is set to visible, and isValidAlways is configured for the column, that is, the column is always editable, verification during editing is supported. Configure the edit-rules object to set the verification object and verification rule. For details, see the following example.
\n",
+ "link": "grid/grid_Example/gridValid/editing-isvalidalways-validation",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridValid-editing-isvalidalways-validation"
+ },
+ {
+ "title": "Data Association Verification",
+ "content": " During customized validation, the validator
method rule
parameter can obtain the current row and column information. The verification logic of data association can be implemented based on service requirements.
\n",
+ "link": "grid/grid_Example/gridValid/row-data-valid",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridValid-row-data-valid"
+ },
+ {
+ "title": "Verify the customized component with the slot editor",
+ "content": "When using a custom component, the component needs to implement the v-model
function. If you want to verify the slot in real time, you need to manually trigger the verification method of the component.
\n",
+ "link": "grid/grid_Example/gridValid/custcomp",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridValid-custcomp"
+ },
+ {
+ "title": "Verify when selected",
+ "content": "The grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example.
\n",
+ "link": "grid/grid_Example/gridValid/select-validation",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridValid-select-validation"
+ },
+ {
+ "title": "Verify Before Submission",
+ "content": "The grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example.
\n",
+ "link": "grid/grid_Example/gridValid/before-submit-validation",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridValid-before-submit-validation"
+ },
+ {
+ "title": "When the verification is triggered, the current verification cell is automatically located.",
+ "content": "The grid editor introduces the tiny.0 component, configures the edit-config object in the tag, and configures the edit-rules object to set the verification object and verification rule. Invoke the this.$refs.basicGrid.validate() method through the button click event to trigger table validation. For details, see the following example.
\n",
+ "link": "grid/grid_Example/gridValid/validation-scroll-to-col",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridValid-validation-scroll-to-col"
+ },
+ {
+ "title": "Error prompt configuration item",
+ "content": "The default error message is displayed on body
. You can set appendTobody
in tooltip-config
to false
to solve the problem that the tip position is incorrect during page scrolling. Set the placement
property to adjust the default display direction. For details about the tooltip-config
configuration, see the tooltip component
\n",
+ "link": "grid/grid_Example/gridValid/tipconfig",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "grid_Example-gridValid-tipconfig"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid-width-height.json b/examples/docs/resources/pc/demo-config/en-US/grid-width-height.json
new file mode 100644
index 000000000..22eacfba7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid-width-height.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Enable column width dragging",
+ "content": "Column width is enabled by default. To disable this function, set resizable
to false
\n",
+ "link": "grid/tiny-first-menu/resize-column-width",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-resize-column-width"
+ },
+ {
+ "title": "Table column attribute width",
+ "content": "The fixed width of the table column attribute is set. Values and percentages are supported.
\n",
+ "link": "grid/tiny-first-menu/fixed-column-width",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-fixed-column-width"
+ },
+ {
+ "title": "Adaptive expansion of column width",
+ "content": "The table attribute is set to automatically expand fit. The default value is true, and adaptive expansion is enabled. If the value is false, the column width must be set. Otherwise, the table width is expanded by the cell content.
\n",
+ "link": "grid/tiny-first-menu/adaptive-column-width",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-adaptive-column-width"
+ },
+ {
+ "title": "The column width is not adaptively extended",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/adaptive-un-column-width",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-adaptive-un-column-width"
+ },
+ {
+ "title": "Table Attribute Setting Height",
+ "content": "Table attribute setting height Fixed table height.
\n",
+ "link": "grid/tiny-first-menu/fixed-grid-height",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-fixed-grid-height"
+ },
+ {
+ "title": "Disable responsive table width and height",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/adaptive-grid-off-width-height",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-adaptive-grid-off-width-height"
+ },
+ {
+ "title": "Enable responsive table width and height",
+ "content": "Table property setting autoResize property enabling responsive table width and height, set height heigh
to auto
to automatically follow the height of the parent container.
\n",
+ "link": "grid/news/auto-height",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "news-auto-height"
+ },
+ {
+ "title": "Set the minimum height of minHeight",
+ "content": "Set minHeight to the minimum height and maxHeight to the maximum height.
\n",
+ "link": "grid/tiny-first-menu/min-grid-height",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-min-grid-height"
+ },
+ {
+ "title": "Set the maximum height of maxHeight",
+ "content": "For details, see the following example.",
+ "link": "grid/tiny-first-menu/max-min-grid-height",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-max-min-grid-height"
+ },
+ {
+ "title": "Set the overall column width",
+ "content": "Set the minimum width of the overall column by using the column-min-width
attribute. If this parameter is not set, the width of the column header span plus 36 (fixed width of the header) is used by default. \n
\n",
+ "link": "grid/tiny-first-menu/column-min-width",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-column-min-width"
+ },
+ {
+ "title": "Minimum width of this column",
+ "content": "Minimum width of this column based on the table column attribute min-width
; The automatically allocates the remaining space proportionally. \n
\n",
+ "link": "grid/tiny-first-menu/min-width",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-min-width"
+ },
+ {
+ "title": "Set the width of all columns",
+ "content": "Set the width of all columns through the column-width
attribute. The default value is even distribution. \n
\n",
+ "link": "grid/tiny-first-menu/column-width",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "tiny-first-menu-column-width"
+ },
+ {
+ "title": "Recalculate Table",
+ "content": "The recalculate()
method can be used to recalculate the table when the width of the parent container changes.
\n",
+ "link": "grid/recalculate",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "recalculate"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/grid.json b/examples/docs/resources/pc/demo-config/en-US/grid.json
new file mode 100644
index 000000000..5a53675d3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/grid.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Label",
+ "content": "For details, see the following example.",
+ "link": "grid/basicUsage",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "basicUsage"
+ },
+ {
+ "title": "Profile",
+ "content": "For details, see the following example.",
+ "link": "grid/basicUsage-conf",
+ "component": "Grid Table",
+ "findIntroStr": "Table component, which provides powerful data table functions. In Grid, data lists can be displayed, selected, and edited.",
+ "demoId": "basicUsage-conf"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/hrapprover.json b/examples/docs/resources/pc/demo-config/en-US/hrapprover.json
new file mode 100644
index 000000000..aa1dfe7c9
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/hrapprover.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "hrapprover/basic-usage",
+ "component": "Hrapprover approver",
+ "findIntroStr": "The approver business component is used to query approvers by department.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Approval Type",
+ "content": "You can set the approval type through category
. The default value is 0303
, which is the category parameter of the request sent by the approver.
\n",
+ "link": "hrapprover/category-type",
+ "component": "Hrapprover approver",
+ "findIntroStr": "The approver business component is used to query approvers by department.",
+ "demoId": "category-type"
+ },
+ {
+ "title": "Disabled",
+ "content": "Use value
to set the value of the approver. Use disabled
to set whether to disable the component. The default value is false.
\n",
+ "link": "hrapprover/disabled",
+ "component": "Hrapprover approver",
+ "findIntroStr": "The approver business component is used to query approvers by department.",
+ "demoId": "disabled"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can use the fetch-hrapprover attribute to specify a method in which the service customized by the request can be implemented.
\n",
+ "link": "hrapprover/custom-service",
+ "component": "Hrapprover approver",
+ "findIntroStr": "The approver business component is used to query approvers by department.",
+ "demoId": "custom-service"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/icon.json b/examples/docs/resources/pc/demo-config/en-US/icon.json
new file mode 100644
index 000000000..54180481e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/icon.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "icon/basic-usage",
+ "component": "Icon",
+ "findIntroStr": "Provides a set of common icons, which can be used by setting the class name `icon-iconName`.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Display Title",
+ "content": "The title
attribute is added to the parent element of an icon to add a title to the icon.
\n",
+ "link": "icon/show-title",
+ "component": "Icon",
+ "findIntroStr": "Provides a set of common icons, which can be used by setting the class name `icon-iconName`.",
+ "demoId": "show-title"
+ },
+ {
+ "title": "Icon Set",
+ "content": "For details, see the following example.",
+ "link": "icon/list",
+ "component": "Icon",
+ "findIntroStr": "Provides a set of common icons, which can be used by setting the class name `icon-iconName`.",
+ "demoId": "list"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/image.json b/examples/docs/resources/pc/demo-config/en-US/image.json
new file mode 100644
index 000000000..0a8de0155
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/image.json
@@ -0,0 +1,82 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Set the preview image path through src
.
\n",
+ "link": "image/basic-usage",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Adaptive Container Size",
+ "content": "You can use the fit
attribute to determine how an image adapts to the container box, which is the same as the object-fit attribute of the native CSS.
\nobject-fit Description
\n
fill: The replaced content will be scaled to maintain its aspect ratio when filling the content box of the element\ncontain: The size of the replaced content can fill the content box of the element\ncover: The size of the replaced content maintains its aspect ratio while filling the entire content box of the element\nnone: The size of the replaced content is not changed\nscale-down: The size of the content is as if none or contain were specified, depending on which would result in a smaller object size.
\n
\n",
+ "link": "image/auto-fit-container-size",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "auto-fit-container-size"
+ },
+ {
+ "title": "Placeholder",
+ "content": "You can use slot = placeholder
to customize the placeholder.
\n",
+ "link": "image/custom-placeholder",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "custom-placeholder"
+ },
+ {
+ "title": "Lazy Loading",
+ "content": "You can use lazy
to enable lazy loading. Images are loaded only when they are scrolled to the visible range. You can use scroll-container
to set the scroll container. If the scroll container is not defined, the scroll container is the parent element whose latest overflow
value is auto
or scroll
.
\n Prompt
\n
The lazy loaded image must be a remote image. Lazy loading of static images is not supported.
\n
\n",
+ "link": "image/lazy-load",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "lazy-load"
+ },
+ {
+ "title": "Preview Large Image",
+ "content": "Enable the large image preview function through preview-src-list
.
\n",
+ "link": "image/preview-src-list",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "preview-src-list"
+ },
+ {
+ "title": "Image preview level",
+ "content": "You can use z-index
to set the level of the preview image.
\n",
+ "link": "image/preview-z-index",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "preview-z-index"
+ },
+ {
+ "title": "Load success event",
+ "content": "The load
event is triggered when the image is successfully loaded.
\n",
+ "link": "image/load-event",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "load-event"
+ },
+ {
+ "title": "Loading failure event",
+ "content": "The error
event is triggered when the image fails to be loaded.
\n",
+ "link": "image/load-error",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "load-error"
+ },
+ {
+ "title": "Loading failed",
+ "content": "You can set slot = error
to customize the content that fails to be loaded.
\n",
+ "link": "image/custom-load-failed-text",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "custom-load-failed-text"
+ },
+ {
+ "title": "Preview image in a dialog box",
+ "content": "Embed image
in the dialog-box
element for image preview.
\n",
+ "link": "image/preview-in-dialog",
+ "component": "Image preview",
+ "findIntroStr": "Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.",
+ "demoId": "preview-in-dialog"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/input.json b/examples/docs/resources/pc/demo-config/en-US/input.json
new file mode 100644
index 000000000..a321f6de3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/input.json
@@ -0,0 +1,290 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "input/basic-usage",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Can be cleared",
+ "content": "You can set the clearable
attribute to display the clear icon button in the text box.
\n",
+ "link": "input/clearable",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "clearable"
+ },
+ {
+ "title": "Password Display",
+ "content": "When type
is set to password
, you can set the show-password
attribute to display or hide the password switch button in the text box.
\n",
+ "link": "input/show-password",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "show-password"
+ },
+ {
+ "title": "type attribute",
+ "content": "You can set the corresponding type through the corresponding type
attribute. The default value is text. The options are text, textarea, and other type values of the native input
\n",
+ "link": "input/type",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "type"
+ },
+ {
+ "title": "Dimension",
+ "content": "You can set the size through the size
attribute. The options are as follows: medium, small, and mini
. Note: This parameter is valid only when type!="textarea"
is used.
\n",
+ "link": "input/size",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "size"
+ },
+ {
+ "title": "form",
+ "content": "You can set the native attribute form through the form
attribute.
\n",
+ "link": "input/form",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "form"
+ },
+ {
+ "title": "Native Attribute",
+ "content": "You can set native attributes such as name
disabled
readonly
.
\n",
+ "link": "input/name",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "name"
+ },
+ {
+ "title": "Text associated with the text box",
+ "content": "You can set the label text associated with the text box through the label
attribute.
\n",
+ "link": "input/label",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "label"
+ },
+ {
+ "title": "Head icon",
+ "content": "You can set the header icon of the text box through the prefix-icon
attribute.
\n",
+ "link": "input/prefix-icon",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "prefix-icon"
+ },
+ {
+ "title": "Fall icon",
+ "content": "You can set the icon at the end of the text box through the suffix-icon
attribute.
\n",
+ "link": "input/suffix-icon",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "suffix-icon"
+ },
+ {
+ "title": "Scalable Text Field",
+ "content": "You can use the resize
property to set the zoom of the text field. The value can be none / both / horizontal / vertical
. Note: This parameter is valid only when type="textarea"
is used.
\n",
+ "link": "input/resize",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "resize"
+ },
+ {
+ "title": "Lines of the text field",
+ "content": "You can set the number of lines displayed in the text field through the rows
property. Note: This parameter is valid only when text="textarea"
is used.
\n",
+ "link": "input/rows",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "rows"
+ },
+ {
+ "title": "Text Field Width",
+ "content": "You can set the width of the text field through the cols
attribute. Note: This parameter is valid only when text="textarea"
is used.
\n",
+ "link": "input/cols",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "cols"
+ },
+ {
+ "title": "Text field that can adapt to the text height",
+ "content": "You can use the autosize
attribute to set the text field to adapt to the content height. You can transfer an object, for example, {minRows: 2, maxRows: 6}
. Note: This parameter is valid only for type="textarea"
.
\n",
+ "link": "input/autosize",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "autosize"
+ },
+ {
+ "title": "tabindex of the text box",
+ "content": "You can use the tabindex
attribute to set the tabindex
\n",
+ "link": "input/tabindex",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "tabindex"
+ },
+ {
+ "title": "Pre-content",
+ "content": "Configure prepend
slot to set the front content of the text box. Note: This parameter is valid only for type="text"
.
\n",
+ "link": "input/slot-prepend",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "slot-prepend"
+ },
+ {
+ "title": "Post Content",
+ "content": "Configure append
slot and set the content after the text box. Note: This parameter is valid only for type="text"
.
\n",
+ "link": "input/slot-append",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "slot-append"
+ },
+ {
+ "title": "Header Content",
+ "content": "Configure prefix
slot to set the text box header content. Note: This parameter is valid only for type="text"
.
\n",
+ "link": "input/slot-prefix",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "slot-prefix"
+ },
+ {
+ "title": "Follow Content",
+ "content": "Configure the suffix
slot and set the content at the end of the text box. Note: This parameter is valid only for type="text"
.
\n",
+ "link": "input/slot-suffix",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "slot-suffix"
+ },
+ {
+ "title": "Maximum value",
+ "content": "You can set the maximum value of the text box through the max
attribute. max
is a native attribute.
\n",
+ "link": "input/max",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "max"
+ },
+ {
+ "title": "Minimum value",
+ "content": "You can set the minimum value of the text box through the min
attribute. min
is a native attribute.
\n",
+ "link": "input/min",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "min"
+ },
+ {
+ "title": "Maximum input length",
+ "content": "You can set the maximum length of the text box through the maxlength
attribute. maxlength
is a native attribute.
\n",
+ "link": "input/maxlength",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "maxlength"
+ },
+ {
+ "title": "Input word count",
+ "content": "The show-word-limit
attribute can be used to set whether to display the input word statistics, only when type = "text" or type = "textarea" is valid
\n",
+ "link": "input/show-word-limit",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "show-word-limit"
+ },
+ {
+ "title": "Counter",
+ "content": "You can use the counter
attribute to set the character counter for displaying the text box.
\n",
+ "link": "input/counter",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "counter"
+ },
+ {
+ "title": "Valid interval between digits in the input field",
+ "content": "You can use the step
attribute to set the valid digit interval of the input field. step
is a native attribute.
\n",
+ "link": "input/step",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "step"
+ },
+ {
+ "title": "Form validation triggered upon input",
+ "content": "You can set the validate-event
attribute to trigger form validation upon input. Use trigger
to configure the mode of triggering the validation rule. If change
is used, the validation is triggered when the value in the text box changes. If blur
is used, the validation is triggered after the focus is lost.
\n",
+ "link": "input/validate-event",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "validate-event"
+ },
+ {
+ "title": "Obtain focus automatically",
+ "content": "You can set the autofocus
attribute to automatically obtain the focus. autofocus
is a native attribute.
\n",
+ "link": "input/autofocus",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "autofocus"
+ },
+ {
+ "title": "Auto Complete",
+ "content": "The autocomplete
attribute can be used to set automatic completion. The default value is off, and the option is on.
\n",
+ "link": "input/autocomplete",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "autocomplete"
+ },
+ {
+ "title": "Out of Focus Event",
+ "content": "The blur
event is triggered when the text box loses focus. \n",
+ "link": "input/event-blur",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "event-blur"
+ },
+ {
+ "title": "Value change event",
+ "content": "The change
event is triggered when the value of the text box changes. \n",
+ "link": "input/event-change",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "event-change"
+ },
+ {
+ "title": "Clear Event",
+ "content": "The clear
event is triggered when the clear button in the text box is clicked.
\n",
+ "link": "input/event-clear",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "event-clear"
+ },
+ {
+ "title": "Focus Event",
+ "content": "The focus
event is triggered when the text box obtains the focus. \n",
+ "link": "input/event-focus",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "event-focus"
+ },
+ {
+ "title": "Memory History Input",
+ "content": "For details, see the following example.",
+ "link": "input/method-addMemory",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "method-addMemory"
+ },
+ {
+ "title": "Lost Focus",
+ "content": "For details, see the following example.",
+ "link": "input/method-blur",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "method-blur"
+ },
+ {
+ "title": "Focus",
+ "content": "For details, see the following example.",
+ "link": "input/method-focus",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "method-focus"
+ },
+ {
+ "title": "Select text in the text box",
+ "content": "For details, see the following example.",
+ "link": "input/method-select",
+ "component": "Input text box",
+ "findIntroStr": "Enter characters using the mouse or keyboard.",
+ "demoId": "method-select"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/ip-address.json b/examples/docs/resources/pc/demo-config/en-US/ip-address.json
new file mode 100644
index 000000000..562de0a8e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/ip-address.json
@@ -0,0 +1,90 @@
+[
+ {
+ "title": "IPv4 Type",
+ "content": "You can use the type
attribute to configure the IPv4
type. The default value is IPv4
.
\n",
+ "link": "ip-address/ipv4-type",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "ipv4-type"
+ },
+ {
+ "title": "IPv6 Type",
+ "content": "The value can be set to IPv6
through type
. The default value is IPv4
.
\n",
+ "link": "ip-address/ipv6-type",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "ipv6-type"
+ },
+ {
+ "title": "Read-only text",
+ "content": "Use the readonly
attribute to set the read-only line of the text. The default value is false.
\n",
+ "link": "ip-address/readonly",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "readonly"
+ },
+ {
+ "title": "Disabled",
+ "content": "The disabled
attribute is used to set whether to disable text. The default value is false.
\n",
+ "link": "ip-address/disabled",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "disabled"
+ },
+ {
+ "title": "Text box size",
+ "content": " can be set to medium
, small
, mini
\n",
+ "link": "ip-address/size",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "size"
+ },
+ {
+ "title": "Property Setting Separator",
+ "content": "You can set the separator (icon class) through the delimiter
attribute.
\n",
+ "link": "ip-address/delimiter",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "delimiter"
+ },
+ {
+ "title": "Default slot",
+ "content": "The separator can be set through the default slot.
\n",
+ "link": "ip-address/slots",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "slots"
+ },
+ {
+ "title": "focus event",
+ "content": "The focus
event is triggered when the text box obtains the focus. \n",
+ "link": "ip-address/focus",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "focus"
+ },
+ {
+ "title": "blur event",
+ "content": "The blur
event is triggered when the text box loses focus. \n",
+ "link": "ip-address/blur",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "blur"
+ },
+ {
+ "title": "change event",
+ "content": "The change
event is triggered when the text box content changes. \n",
+ "link": "ip-address/change",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "change"
+ },
+ {
+ "title": "select event",
+ "content": "The select
event is triggered when the text box content is selected. \n",
+ "link": "ip-address/select",
+ "component": "IpAddress text box",
+ "findIntroStr": "The IP address text box is the same as that of the native IpAddress component of the HTML. In addition, the data binding function is provided.",
+ "demoId": "select"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/layout.json b/examples/docs/resources/pc/demo-config/en-US/layout.json
new file mode 100644
index 000000000..66d9291ff
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/layout.json
@@ -0,0 +1,98 @@
+[
+ {
+ "title": "Grid Layout",
+ "content": "The grid system layout is implemented by using the span
attribute of the Row
, Col
component.
\n",
+ "link": "layout/base",
+ "component": "Layout",
+ "findIntroStr": "The grid layout makes the layout simple and clear.",
+ "demoId": "base"
+ },
+ {
+ "title": "Alignment",
+ "content": "Enable the flex layout by setting the flex
property to true
. The justify
and align
attributes are used to adjust the alignment of the child elements.
\n Prompt
\n
The flex layout has Internet Explorer compatibility issues and can only run on Internet Explorer 10 or later.
\n
\n",
+ "link": "layout/alignment",
+ "component": "Layout",
+ "findIntroStr": "The grid layout makes the layout simple and clear.",
+ "demoId": "alignment"
+ },
+ {
+ "title": "Sort",
+ "content": "When enabling the flex
layout, you can set the order
attribute of the Row
component. Sorts the col
with the no
attribute.
\n Prompt
\n
The flex layout has Internet Explorer compatibility issues and can only run on Internet Explorer 10 or later.
\n
\n",
+ "link": "layout/order",
+ "component": "Layout",
+ "findIntroStr": "The grid layout makes the layout simple and clear.",
+ "demoId": "order"
+ },
+ {
+ "title": "Offset",
+ "content": "Specifies the number of columns offset by setting the offset
property of the Col
component.
\n",
+ "link": "layout/offset",
+ "component": "Layout",
+ "findIntroStr": "The grid layout makes the layout simple and clear.",
+ "demoId": "offset"
+ },
+ {
+ "title": "vertical arrangement",
+ "content": "Use the align
attribute of the Row
component to implement the vertical arrangement in \tflex layout.
\n",
+ "link": "row/align",
+ "component": "Row configuration",
+ "findIntroStr": "Defines the layout line configuration.",
+ "demoId": "align"
+ },
+ {
+ "title": "Grid Interval",
+ "content": "The grid spacing is implemented by using the gutter
attribute of the Row
component.
\n",
+ "link": "row/gutter",
+ "component": "Row configuration",
+ "findIntroStr": "Defines the layout line configuration.",
+ "demoId": "gutter"
+ },
+ {
+ "title": "horizontal arrangement",
+ "content": "The justify
attribute of the Row
component is used to implement horizontal arrangement in the flex layout.
\n",
+ "link": "row/justify",
+ "component": "Row configuration",
+ "findIntroStr": "Defines the layout line configuration.",
+ "demoId": "justify"
+ },
+ {
+ "title": "Sort by",
+ "content": "The order
attribute of the Row
component is used to implement the sorting mode in the flex layout.
\n",
+ "link": "row/order",
+ "component": "Row configuration",
+ "findIntroStr": "Defines the layout line configuration.",
+ "demoId": "order1"
+ },
+ {
+ "title": "Custom Element Label",
+ "content": "The tag
attribute of the Row
component is used to customize element tags. Any tag is optional.
\n",
+ "link": "row/tag1",
+ "component": "Row configuration",
+ "findIntroStr": "Defines the layout line configuration.",
+ "demoId": "tag1"
+ },
+ {
+ "title": "Move",
+ "content": "Specifies the number of columns offset by setting the move
property of the Col
component.
\n",
+ "link": "col/col-move",
+ "component": "Col column configuration",
+ "findIntroStr": "Defines the column configuration information of the layout.",
+ "demoId": "col-move"
+ },
+ {
+ "title": "Responsive Layout",
+ "content": "Referring to the responsive design of Bootstrap, five response sizes are preset: xs
, sm
, md
, lg
, and xl
.
\n",
+ "link": "layout/responsive-layout",
+ "component": "Col column configuration",
+ "findIntroStr": "Defines the column configuration information of the layout.",
+ "demoId": "responsive-layout"
+ },
+ {
+ "title": "Custom Element Label",
+ "content": "The value can be any tag.
\n",
+ "link": "col/tag",
+ "component": "Col column configuration",
+ "findIntroStr": "Defines the column configuration information of the layout.",
+ "demoId": "tag"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/link-menu.json b/examples/docs/resources/pc/demo-config/en-US/link-menu.json
new file mode 100644
index 000000000..dbe423711
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/link-menu.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Data Source",
+ "content": "Set the data source of the menu through the data
attribute. In addition, you can set whether the node can be selected through disabled
in the data object.
\n",
+ "link": "link-menu/data-resource",
+ "component": "LinkMenu Favorites Menu",
+ "findIntroStr": "LinkMenu favorites menu, which supports configurable menu items.",
+ "demoId": "data-resource1"
+ },
+ {
+ "title": "Collection Menu Title",
+ "content": "The title
attribute defines the title of the favorites menu.
\n",
+ "link": "link-menu/data-resource",
+ "component": "LinkMenu Favorites Menu",
+ "findIntroStr": "LinkMenu favorites menu, which supports configurable menu items.",
+ "demoId": "data-resource"
+ },
+ {
+ "title": "The menu content is displayed in a new line when it is too long.",
+ "content": "The wrap
attribute is used to set the menu content to be displayed in a line wrap when the menu content is too long.
\n",
+ "link": "link-menu/data-resource",
+ "component": "LinkMenu Favorites Menu",
+ "findIntroStr": "LinkMenu favorites menu, which supports configurable menu items.",
+ "demoId": "data-resource2"
+ },
+ {
+ "title": "Number of categories that can be added to favorites",
+ "content": "The max-item
attribute specifies the number of categories that can be selected and added to favorites. If default-expand-all
is set to false, all nodes are collapsed when a menu pop-up window is opened.
\n",
+ "link": "link-menu/menu-items",
+ "component": "LinkMenu Favorites Menu",
+ "findIntroStr": "LinkMenu favorites menu, which supports configurable menu items.",
+ "demoId": "menu-items"
+ },
+ {
+ "title": "Customized menu data service",
+ "content": "Customize the menu data service through get-menu-data-sync
.
\n",
+ "link": "link-menu/get-menu-data-sync",
+ "component": "LinkMenu Favorites Menu",
+ "findIntroStr": "LinkMenu favorites menu, which supports configurable menu items.",
+ "demoId": "get-menu-data-sync"
+ },
+ {
+ "title": "Customize the folding and unfolding icon",
+ "content": "Customize the expansion icon through the icon
attribute. Use the search-icon
attribute to customize the search icon.
\n",
+ "link": "link-menu/custom-icon",
+ "component": "LinkMenu Favorites Menu",
+ "findIntroStr": "LinkMenu favorites menu, which supports configurable menu items.",
+ "demoId": "custom-icon"
+ },
+ {
+ "title": "Omitted if the menu content is too long.",
+ "content": "You can set the ellipsis
attribute to omit the display when the menu content is too long.
\n",
+ "link": "link-menu/custom-icon",
+ "component": "LinkMenu Favorites Menu",
+ "findIntroStr": "LinkMenu favorites menu, which supports configurable menu items.",
+ "demoId": "custom-icon1"
+ },
+ {
+ "title": "Customize the bottom of the pop-up window",
+ "content": "Customize the bottom of the menu pop-up window through the foot
slot. The sureNodevalue
method is used to obtain the selected menu node, close the menu pop-up window, and display the selected menu. The hideDialog
method is used to close a pop-up window. Slots can be used in combination with both methods.
\n",
+ "link": "link-menu/custom-foot",
+ "component": "LinkMenu Favorites Menu",
+ "findIntroStr": "LinkMenu favorites menu, which supports configurable menu items.",
+ "demoId": "custom-foot"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/link.json b/examples/docs/resources/pc/demo-config/en-US/link.json
new file mode 100644
index 000000000..5d6fe5346
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/link.json
@@ -0,0 +1,50 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "link/basic-usage",
+ "component": "Link Text Link",
+ "findIntroStr": "Text hyperlink.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Theme Style",
+ "content": "Set the topic type of the link through the type
attribute.
\n",
+ "link": "link/link-style",
+ "component": "Link Text Link",
+ "findIntroStr": "Text hyperlink.",
+ "demoId": "link-style"
+ },
+ {
+ "title": "Disable links",
+ "content": "You can use the disabled
attribute to specify whether to disable links.
\n",
+ "link": "link/dynamic-disable",
+ "component": "Link Text Link",
+ "findIntroStr": "Text hyperlink.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "Do not display underscores when focusing.",
+ "content": "When you hover the cursor over a link, the underline is displayed by default. If underline
is set to false, the underline is not displayed when you focus.
\n",
+ "link": "link/focus-no-underline",
+ "component": "Link Text Link",
+ "findIntroStr": "Text hyperlink.",
+ "demoId": "focus-no-underline"
+ },
+ {
+ "title": "Custom Icon",
+ "content": "Icon can be customized by attribute icon
, default slot, and icon
slot.
\n",
+ "link": "link/custom-icon",
+ "component": "Link Text Link",
+ "findIntroStr": "Text hyperlink.",
+ "demoId": "custom-icon"
+ },
+ {
+ "title": "Link",
+ "content": "Use the href
attribute to specify the URL to be redirected to. This attribute can be used together with the native attribute target
.
\n",
+ "link": "link/config-href",
+ "component": "Link Text Link",
+ "findIntroStr": "Text hyperlink.",
+ "demoId": "config-href"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/loading.json b/examples/docs/resources/pc/demo-config/en-US/loading.json
new file mode 100644
index 000000000..5df226e4e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/loading.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Sets loading on the specified target
using the static method Loading.service
.
\n",
+ "link": "loading/basic-usage",
+ "component": "Loading",
+ "findIntroStr": "Animation effect displayed when data is loaded.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Customized loading prompt text",
+ "content": "Customize the prompt text of the loaded text through text
.
\n",
+ "link": "loading/loading-tip-text",
+ "component": "Loading",
+ "findIntroStr": "Animation effect displayed when data is loaded.",
+ "demoId": "loading-tip-text"
+ },
+ {
+ "title": "Custom mask background color",
+ "content": "Customize the background color and transparency through background
.
\n",
+ "link": "loading/background",
+ "component": "Loading",
+ "findIntroStr": "Animation effect displayed when data is loaded.",
+ "demoId": "background"
+ },
+ {
+ "title": "Custom Style",
+ "content": "Use customClass
to specify the class name to modify the style.
\n",
+ "link": "loading/custom-class",
+ "component": "Loading",
+ "findIntroStr": "Animation effect displayed when data is loaded.",
+ "demoId": "custom-class"
+ },
+ {
+ "title": "Modifier",
+ "content": "For details, see the following example.",
+ "link": "loading/body",
+ "component": "Loading",
+ "findIntroStr": "Animation effect displayed when data is loaded.",
+ "demoId": "body"
+ },
+ {
+ "title": "Global loading",
+ "content": "The v-loading.lock.fullscreen
command mode or service mode is used for global loading. To use the command mode for global loading, perform the following operations: \n Add Vue.use(Loading)
\n in the Vue 2
environment and app.use(Loading)
\n in the Vue 3
environment",
+ "link": "loading/fullscreen",
+ "component": "Loading",
+ "findIntroStr": "Animation effect displayed when data is loaded.",
+ "demoId": "fullscreen"
+ },
+ {
+ "title": "Customized loading icon",
+ "content": "Customize the loading icon through spinner
.
\n",
+ "link": "loading/spinner",
+ "component": "Loading",
+ "findIntroStr": "Animation effect displayed when data is loaded.",
+ "demoId": "spinner"
+ },
+ {
+ "title": "Load Region",
+ "content": "Use target
to specify the DOM node to be overwritten by Loading.
\n",
+ "link": "loading/target",
+ "component": "Loading",
+ "findIntroStr": "Animation effect displayed when data is loaded.",
+ "demoId": "target"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/locales.json b/examples/docs/resources/pc/demo-config/en-US/locales.json
new file mode 100644
index 000000000..bb4f0d5f5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/locales.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "After the local
attribute is configured, the service is not automatically invoked. It is only used to switch the current language and does not refresh the page.
\n",
+ "link": "locales/basic-usage",
+ "component": "Locales Language Selection",
+ "findIntroStr": "Locales language selection component. When there are two languages, the language is displayed directly. When there are more than two languages, a drop-down list is displayed.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom Service",
+ "content": "get-locale
can be used to customize all languages. get-current-locale
is used to obtain the current language. get-change-locale-url
is used to obtain the URL after the language is changed. The parameter is the language after the language is changed.
\n",
+ "link": "locales/custom-service",
+ "component": "Locales Language Selection",
+ "findIntroStr": "Locales language selection component. When there are two languages, the language is displayed directly. When there are more than two languages, a drop-down list is displayed.",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "Switch Language",
+ "content": "Provides the change-lang
function to customize the language switching logic. If this function is not set, the built-in switching method is used.
\n",
+ "link": "locales/change-lang",
+ "component": "Locales Language Selection",
+ "findIntroStr": "Locales language selection component. When there are two languages, the language is displayed directly. When there are more than two languages, a drop-down list is displayed.",
+ "demoId": "change-lang"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/logon-user.json b/examples/docs/resources/pc/demo-config/en-US/logon-user.json
new file mode 100644
index 000000000..45594db91
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/logon-user.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "logon-user/basic-usage",
+ "component": "LogonUser",
+ "findIntroStr": "LogonUser is used to display the display name or userCN of the current login user.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can set a custom service through the service
attribute.
\n",
+ "link": "logon-user/custom-service",
+ "component": "LogonUser",
+ "findIntroStr": "LogonUser is used to display the display name or userCN of the current login user.",
+ "demoId": "custom-service"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/logout.json b/examples/docs/resources/pc/demo-config/en-US/logout.json
new file mode 100644
index 000000000..4696547a7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/logout.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "logout/basic-usage",
+ "component": "Logout",
+ "findIntroStr": "Logout login or logout link.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can set a custom service through the service
attribute.
\n",
+ "link": "logout/custom-service",
+ "component": "Logout",
+ "findIntroStr": "Logout login or logout link.",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "User-defined redirection address after deregistration",
+ "content": "For details, see the following example.",
+ "link": "logout/redirecturl",
+ "component": "Logout",
+ "findIntroStr": "Logout login or logout link.",
+ "demoId": "redirecturl"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/milestone.json b/examples/docs/resources/pc/demo-config/en-US/milestone.json
new file mode 100644
index 000000000..179c4e766
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/milestone.json
@@ -0,0 +1,122 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "milestone/basic-usage",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Data Source",
+ "content": "Set milestone data through the data
attribute.
\n",
+ "link": "milestone/data-source",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "data-source"
+ },
+ {
+ "title": "Data Field Mapping",
+ "content": " Data Field Mapping Attribute Description
\n
completed-field
: Set the value corresponding to the milestone completion status. The default value is completed
\nflag-content-field
: Set the field name corresponding to the description in the node flag data. The default value is content
\nflag-field
: Set the field name of the node flag data. The default value is flags
\nflag-name-field
. Set the field name corresponding to the name in the node flag data. The default value is name
\nflag-status-field
: Set the field name corresponding to the status in the node flag data. The default value is status
\nname-field
: Set the field name corresponding to the name in the node information. The default value is name
\nstatus-field
: Set the field name corresponding to the data status. The default value is status
\ntime-field
. Field name corresponding to the node time information. The default value is time
\n
\n",
+ "link": "milestone/data-field-mapping",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "data-field-mapping"
+ },
+ {
+ "title": "Flag data source node",
+ "content": "You can use flag-before
to set whether the data of the activity (i.e. flag) on the milestone is obtained from the previous node or the subsequent node. The default value is false
to obtain the data of the subsequent node.
\n",
+ "link": "milestone/flag-before",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "flag-before"
+ },
+ {
+ "title": "Progress bar color",
+ "content": "Sets the line color through the line-style
attribute.
\n",
+ "link": "milestone/line-style",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "line-style"
+ },
+ {
+ "title": "Mapping Between Status and Color",
+ "content": "In the milestones-status
attribute object, the key corresponds to the status
field in the data of the data
attribute, and then controls the mapping between different states and colors.
\n",
+ "link": "milestone/milestones-status",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "milestones-status"
+ },
+ {
+ "title": "Cancel the display of the sequence number in the unfinished state.",
+ "content": "After show-number
is set to false, the sequence number is not displayed on the node where the milestone is not completed. The default value is true.
\n",
+ "link": "milestone/show-number",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "show-number"
+ },
+ {
+ "title": "Completed node solid display",
+ "content": "You can set the solid
attribute to true to set the completed node to be displayed as solid and the halo is opaque. The default value is false.
\n",
+ "link": "milestone/solid-style",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "solid-style"
+ },
+ {
+ "title": "Width",
+ "content": "Use the space
attribute to set the width of the step bar.
\n",
+ "link": "milestone/milestone-space",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "milestone-space"
+ },
+ {
+ "title": "Start sequence number",
+ "content": "Set the start sequence number of the milestone node through the start
attribute. The default value is - 1.
\n",
+ "link": "milestone/start-index",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "start-index"
+ },
+ {
+ "title": "Custom Node Icons",
+ "content": "The icon can be customized through the icon
scope slot.
\n",
+ "link": "milestone/custom-icon-slot",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "custom-icon-slot"
+ },
+ {
+ "title": "Content under a customized node",
+ "content": "You can customize the content below a node through the bottom
scope slot.
\n",
+ "link": "milestone/custom-bottom",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "custom-bottom"
+ },
+ {
+ "title": "Content above the customized node",
+ "content": "The top
scope slot allows you to customize the content above the node.
\n",
+ "link": "milestone/custom-top",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "custom-top"
+ },
+ {
+ "title": "Custom Flag Content",
+ "content": "You can customize the content of the node flag through the flag
scope slot.
\n",
+ "link": "milestone/custom-flag",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "custom-flag"
+ },
+ {
+ "title": "Event",
+ "content": "The click
event is triggered when a milestone node is clicked. Parameter: (index: node index; node: node data information). The flag-click
event is triggered when a milestone flag is clicked. (index: index of the flag on the node; node: data information of the flag on the node).
\n",
+ "link": "milestone/milestone-events",
+ "component": " Milestone",
+ "findIntroStr": "The milestone mode is a highly customized component. Users can customize the component status, node color, and line color. Activity flags can be inserted between nodes. The tip displays activity information.",
+ "demoId": "milestone-events"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/modal.json b/examples/docs/resources/pc/demo-config/en-US/modal.json
new file mode 100644
index 000000000..f85a82628
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/modal.json
@@ -0,0 +1,250 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "You can use the Modal.alert
method to set a pop-up box, and use the Modal.confirm
method to set a confirmation pop-up box.
\n",
+ "link": "modal/base",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "base"
+ },
+ {
+ "title": "Maximized display",
+ "content": "You can use the fullscreen
attribute to set whether to maximize the display.
\n",
+ "link": "modal/fullscreen",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "fullscreen"
+ },
+ {
+ "title": "Press Esc to close the dialog box.",
+ "content": "You can use the esc-closable
attribute to set whether to close a window by pressing the Esc key. The default value is false
.
\n",
+ "link": "modal/esc-closable",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "esc-closable"
+ },
+ {
+ "title": "Automatic shutdown delay",
+ "content": "You can use the duration
attribute to set the delay time for automatic closing. This parameter is valid only for type=message.
\n",
+ "link": "modal/duration",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "duration"
+ },
+ {
+ "title": "Prevent repeated prompts",
+ "content": "If you do not want to click the window repeatedly, you can set a unique id
to prevent repeated prompts. This parameter is valid only for type=message.
\n",
+ "link": "modal/id",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "id"
+ },
+ {
+ "title": "Lock the scroll bar",
+ "content": "You can use the lock-scroll
attribute to set whether to lock the scroll bar.
\n",
+ "link": "modal/lock-scroll",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "lock-scroll"
+ },
+ {
+ "title": "Lock the page",
+ "content": "You can use the lock-view
attribute to set whether to lock the page. Operations outside the window are not allowed.
\n",
+ "link": "modal/lock-view",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "lock-view"
+ },
+ {
+ "title": "Display Mask Layer",
+ "content": "You can set whether to display the mask layer through the mask
attribute. The default value is true
.
\n",
+ "link": "modal/lock-view",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "lock-view1"
+ },
+ {
+ "title": "Click the mask layer to close the window.",
+ "content": "You can use the mask-closable
attribute to set whether to allow clicking the mask layer to close the window.
\n",
+ "link": "modal/mask-closable",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "mask-closable"
+ },
+ {
+ "title": "Custom Content",
+ "content": "You can set the content of the window through the message
attribute.
\n",
+ "link": "modal/message",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "message"
+ },
+ {
+ "title": "Resize the window",
+ "content": "You can set the width and height of a window by using width
and height
. You can set whether to allow dragging to adjust the window size by using resize
.
\n",
+ "link": "modal/resize",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "resize"
+ },
+ {
+ "title": "Minimum width of the window after the window is resized",
+ "content": "After resize
is set to true
, the min-width
attribute can be used to set the minimum width of the window after being dragged.
\n",
+ "link": "modal/min-width",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "min-width"
+ },
+ {
+ "title": "Minimum height of the window after the window is resized",
+ "content": "After resize
is set to true
, the min-height
attribute can be used to set the minimum height of the window after being dragged.
\n",
+ "link": "modal/min-height",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "min-height"
+ },
+ {
+ "title": "The bottom is not displayed.",
+ "content": "You can use the showFooter
attribute to set whether to display the bottom. The default value is true
.
\n",
+ "link": "modal/showFooter",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "showFooter"
+ },
+ {
+ "title": "The header is not displayed.",
+ "content": "You can use the showHeader
attribute to set whether to display the header. The default value is true
.
\n",
+ "link": "modal/showHeader",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "showHeader"
+ },
+ {
+ "title": "Message Status",
+ "content": "You can set the message status through the status
attribute. The value can be info | success | warning | error | loading
.
\n",
+ "link": "modal/status",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "status"
+ },
+ {
+ "title": "Title",
+ "content": "You can set the title of the window through the title
attribute.
\n",
+ "link": "modal/title",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "title"
+ },
+ {
+ "title": "Position from the top",
+ "content": "You can use the top
attribute to set the position of a message from the top of the message. This parameter is valid only for type=message.
\n",
+ "link": "modal/top",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "top"
+ },
+ {
+ "title": "Window Type",
+ "content": "You can set the window type through the type
attribute. The options are alert | confirm | message
.
\n",
+ "link": "modal/type",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "type"
+ },
+ {
+ "title": "Bound Value",
+ "content": "You can use the value/v-model
attribute to bind a value.
\n",
+ "link": "modal/value",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "value"
+ },
+ {
+ "title": "Custom Stacking Sequence",
+ "content": "You can use the zIndex
attribute to set the custom stacking sequence. (It may be used in some special scenarios, such as when it is blocked.)
\n",
+ "link": "modal/zIndex",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "zIndex"
+ },
+ {
+ "title": "Cancel button event",
+ "content": "The cancel
event is triggered when the Cancel button is clicked.
\n",
+ "link": "modal/cancel-event",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "cancel-event"
+ },
+ {
+ "title": "Close button event",
+ "content": "The close
event is triggered when the close button is clicked.
\n",
+ "link": "modal/close-event",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "close-event"
+ },
+ {
+ "title": "OK button event",
+ "content": "The confirm
event is triggered when the OK button is clicked.
\n",
+ "link": "modal/confirm-event",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "confirm-event"
+ },
+ {
+ "title": "Window Close Event",
+ "content": "The hide
event is triggered when the window is closed.
\n",
+ "link": "modal/hide-event",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "hide-event"
+ },
+ {
+ "title": "Window Display Event",
+ "content": "The show
event is triggered when the window is displayed.
\n",
+ "link": "modal/show-event",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "show-event"
+ },
+ {
+ "title": "Window scaling event",
+ "content": "The zoom
event is triggered when the window is zoomed in or out.
\n",
+ "link": "modal/zoom-event",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "zoom-event"
+ },
+ {
+ "title": "Close the pop-up window. Are you sure you want to reset the form data?",
+ "content": "When the Modal nested form is used and the pop-up window is closed, reset the form data.
\nSet is-form-reset
to false. If you close the pop-up window, the form is not reset.
",
+ "link": "modal/is-form-reset",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "is-form-reset"
+ },
+ {
+ "title": "Default slot",
+ "content": "You can set the default slot by templete
.
\n",
+ "link": "modal/value",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "value1"
+ },
+ {
+ "title": "Bottom slot",
+ "content": "You can set the bottom slot through slot="footer"
.
\n",
+ "link": "modal/footer-slot",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "footer-slot"
+ },
+ {
+ "title": "Nested grid",
+ "content": "You can nest grids through slots
\n",
+ "link": "modal/grid",
+ "component": "Modal modal box",
+ "findIntroStr": "Modal modal box",
+ "demoId": "grid"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/nav-menu.json b/examples/docs/resources/pc/demo-config/en-US/nav-menu.json
new file mode 100644
index 000000000..2e3a487fa
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/nav-menu.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "The data
attribute is used to configure menu data. If the data
attribute is not configured, the background service is read by default. For example, Jalor 6 reads the leftMenuNode data of the services/jalor/web/support/workspace/current service.
\n",
+ "link": "nav-menu/basic-usage",
+ "component": "NavMenu navigation menu",
+ "findIntroStr": "NavMenu navigation menu, which is used to define the navigation menu on the top of a page.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Data Source",
+ "content": "Configure menu data through the data
attribute.
\n",
+ "link": "nav-menu/data-resource",
+ "component": "NavMenu navigation menu",
+ "findIntroStr": "NavMenu navigation menu, which is used to define the navigation menu on the top of a page.",
+ "demoId": "data-resource"
+ },
+ {
+ "title": "Display Policy",
+ "content": "When the level-1 menu cannot be completely displayed in the current menu container, you can configure the display policy through the overflow
attribute. There are four options: auto
, retract
, fixed
, and hidden
. The default value is auto
.
\noverflow Option Description
\n
auto: The More
menu is displayed on the right of the menu bar. When you hover over the menu, the remaining menus are displayed. \nfixed: The Sandwich Collapse/Expand
icon is displayed on the left of the menu bar. When you hover over the icon, all menus are displayed. \nretract: No menu is displayed on the menu bar. Only the Sandwich Collapse/Expand
icon is displayed. When you hover over the icon, all menus are displayed. \nhidden: hides the remaining menus.
\n
\n",
+ "link": "nav-menu/overflow",
+ "component": "NavMenu navigation menu",
+ "findIntroStr": "NavMenu navigation menu, which is used to define the navigation menu on the top of a page.",
+ "demoId": "overflow"
+ },
+ {
+ "title": "Toolbar slot",
+ "content": "Provides a toolbar
slot for customizing the Toolbar.
\n",
+ "link": "nav-menu/slot-toolbar",
+ "component": "NavMenu navigation menu",
+ "findIntroStr": "NavMenu navigation menu, which is used to define the navigation menu on the top of a page.",
+ "demoId": "slot-toolbar"
+ },
+ {
+ "title": "Logo slot",
+ "content": "Provides a logo
slot for customizing the logo.
\n",
+ "link": "nav-menu/slot-logo",
+ "component": "NavMenu navigation menu",
+ "findIntroStr": "NavMenu navigation menu, which is used to define the navigation menu on the top of a page.",
+ "demoId": "slot-logo"
+ },
+ {
+ "title": "Menu redirection processing",
+ "content": "Provides the before-skip
hook function for processing logic before a menu is clicked. If false
is returned, the menu cannot be redirected.
\n",
+ "link": "nav-menu/before-skip",
+ "component": "NavMenu navigation menu",
+ "findIntroStr": "NavMenu navigation menu, which is used to define the navigation menu on the top of a page.",
+ "demoId": "before-skip"
+ },
+ {
+ "title": "Menu redirection processing when the default service of the component is used",
+ "content": "If the default service /workspace/current
of the component is used to obtain the menu data response.data.leftMenuNode.children
, when before-skip
is used: The prevent
attribute needs to be configured to prevent the default redirection behavior. The default value of the prevent
attribute is false
.
\n",
+ "link": "nav-menu/before-skip-prevent",
+ "component": "NavMenu navigation menu",
+ "findIntroStr": "NavMenu navigation menu, which is used to define the navigation menu on the top of a page.",
+ "demoId": "before-skip-prevent"
+ },
+ {
+ "title": "Custom Service",
+ "content": "You can use the fetch-menu-data
to customize the menu service. If the fields in the data are not the default title
and url
, You can use fields
to map the fields in the data.
\n",
+ "link": "nav-menu/custom-service",
+ "component": "NavMenu navigation menu",
+ "findIntroStr": "NavMenu navigation menu, which is used to define the navigation menu on the top of a page.",
+ "demoId": "custom-service"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/notify.json b/examples/docs/resources/pc/demo-config/en-US/notify.json
new file mode 100644
index 000000000..3ad255c6c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/notify.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "notify/basic-usage",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Message Type",
+ "content": "You can set different types by type
. The options are success, warning, info, and error. The default value is info.
\n",
+ "link": "notify/type",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "type"
+ },
+ {
+ "title": "Automatic shutdown delay",
+ "content": "You can set the delay for automatic shutdown through the duration
attribute. The default value is 4500 ms.
\n",
+ "link": "notify/duration",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "duration"
+ },
+ {
+ "title": "Display position",
+ "content": "You can set the position of the notification box through the position
attribute. The default value is bottom-right.
\n",
+ "link": "notify/position",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "position"
+ },
+ {
+ "title": "Title",
+ "content": "You can set the title of the notification box through the title
attribute.
\n",
+ "link": "notify/title",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "title"
+ },
+ {
+ "title": "Custom Content",
+ "content": "You can set the content of the notification box through the message
attribute.
\n",
+ "link": "notify/message",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "message"
+ },
+ {
+ "title": "The close button is not displayed.",
+ "content": "showClose message
: indicates whether the notification box displays the close button. The default value is true.
\n",
+ "link": "notify/showClose",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "showClose"
+ },
+ {
+ "title": "The type icon is not displayed.",
+ "content": "You can use the showIcon
attribute to set whether to display the type icon in the notification box. The default value is true.
\n",
+ "link": "notify/showIcon",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "showIcon"
+ },
+ {
+ "title": "Custom Close Icon",
+ "content": "You can set the icon for closing the notification box through the closeIcon
attribute. The default value is IconClose.
\n",
+ "link": "notify/closeIcon",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "closeIcon"
+ },
+ {
+ "title": "Custom type icon",
+ "content": "You can set the notification box type icon through the statusIcon
attribute. The default value is IconInfoSolid.
\n",
+ "link": "notify/statusIcon",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "statusIcon"
+ },
+ {
+ "title": "Event triggered before the notification box is closed",
+ "content": "You can set the event before the notification box is closed through the beforeClose
attribute.
\n",
+ "link": "notify/beforeClose",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "beforeClose"
+ },
+ {
+ "title": "This event is triggered when the close button is clicked.",
+ "content": "You can set the onClose
attribute to trigger an event when the close button is clicked.
\n",
+ "link": "notify/onClose",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "close"
+ },
+ {
+ "title": "Configure image stabilization",
+ "content": "You can use debounceDelay
to set the image stabilization time.\n",
+ "link": "notify/debounceDelay",
+ "component": "Notify Notification",
+ "findIntroStr": "Notify notification, which is mainly used for pop-up prompts.",
+ "demoId": "debounceDelay"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/numeric.json b/examples/docs/resources/pc/demo-config/en-US/numeric.json
new file mode 100644
index 000000000..b6489a18e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/numeric.json
@@ -0,0 +1,130 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "numeric/basic-usage",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Clearable Feature",
+ "content": "
You can use the allow-empty
property to set the clearability of counter contents. The default value is false
, indicating that the data cannot be cleared.
\n",
+ "link": "numeric/allow-empty",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "allow-empty"
+ },
+ {
+ "title": "Step",
+ "content": "You can set the step of the counter through the step
attribute.
\n",
+ "link": "numeric/about-step",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "about-step"
+ },
+ {
+ "title": "Numeric loop",
+ "content": "You can set the maximum value allowed by the counter by setting the max
attribute, and set the minimum value allowed by the counter by setting the min
attribute. Set the circulate
property to start from the minimum value after reaching the maximum value up, or vice versa.
\n",
+ "link": "numeric/max-min",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "max-min"
+ },
+ {
+ "title": "Dimension",
+ "content": "You can set the counter size through the size
attribute. The value can be medium / small / mini
.
\n",
+ "link": "numeric/numeric-size",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "numeric-size"
+ },
+ {
+ "title": "Control Button",
+ "content": "You can set whether the counter has a control button through the controls
attribute.
\n",
+ "link": "numeric/controls",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "controls"
+ },
+ {
+ "title": "Control button display position",
+ "content": "You can set the position of the control button through the controls-position
attribute.
\n",
+ "link": "numeric/controls-position",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "controls-position"
+ },
+ {
+ "title": "Associated Text",
+ "content": "You can set the label text associated with the text box through the label
attribute.
\n",
+ "link": "numeric/controls",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "controls1"
+ },
+ {
+ "title": "disabled",
+ "content": "Disable the counter by setting disabled.",
+ "link": "numeric/dynamic-disabled",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "dynamic-disabled"
+ },
+ {
+ "title": "name",
+ "content": "You can use the name
attribute to set the native attribute.
\n",
+ "link": "numeric/controls",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "controls2"
+ },
+ {
+ "title": "Numeric precision",
+ "content": "You can set the precision value of the counter through the precision attribute.
\n",
+ "link": "numeric/precision",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "precision"
+ },
+ {
+ "title": "Mouse wheel scrolling change value",
+ "content": "You can use the mouseWheel
attribute to control whether the scroll wheel can change the value.
\n",
+ "link": "numeric/mouse-wheel",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "mouse-wheel"
+ },
+ {
+ "title": "Focus Event",
+ "content": "The focus
event is triggered when the text box is focused. \n",
+ "link": "numeric/focus-event",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "focus-event"
+ },
+ {
+ "title": "Out of Focus Event",
+ "content": "The blur
event is triggered when the text box loses focus.
\n",
+ "link": "numeric/blur-event",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "blur-event"
+ },
+ {
+ "title": "Value change event",
+ "content": "The change
event is triggered when the value of the text box is changed. \n",
+ "link": "numeric/change-event",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "change-event"
+ },
+ {
+ "title": "The price is automatically calculated based on the product quantity.",
+ "content": "The price is automatically calculated based on the product quantity.
\n",
+ "link": "numeric/calculate-according-to-num-of-goods",
+ "component": "Numeric counter",
+ "findIntroStr": "The Numeric counter can be used to enter numbers. The value range and step size can be customized. The mouse and keyboard can be added or deleted.",
+ "demoId": "calculate-according-to-num-of-goods"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/pager.json b/examples/docs/resources/pc/demo-config/en-US/pager.json
new file mode 100644
index 000000000..bc9a54e5a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/pager.json
@@ -0,0 +1,162 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "pager/basic-usage",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Current Page",
+ "content": "Use current-page
to set the number of initially loaded pages, and use total
to set the total number of records
\n",
+ "link": "pager/current-page",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "current-page"
+ },
+ {
+ "title": "number mode",
+ "content": "Set the component rendering mode through mode="number"
\n",
+ "link": "pager/pager-mode-number",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-mode-number"
+ },
+ {
+ "title": "fixed mode",
+ "content": "Set the component rendering mode through mode="fixed"
\n",
+ "link": "pager/pager-mode-fixed",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-mode-fixed"
+ },
+ {
+ "title": "simple mode",
+ "content": "Set the component rendering mode through mode="simple"
\n",
+ "link": "pager/pager-mode-simple",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-mode-simple"
+ },
+ {
+ "title": "complete mode",
+ "content": "Set the component rendering mode through mode="complete"
\n",
+ "link": "pager/pager-mode",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-mode"
+ },
+ {
+ "title": "Total Pages",
+ "content": "Set the total number of pages through page-count
\n",
+ "link": "pager/page-count",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "page-count"
+ },
+ {
+ "title": "Paging event size-change",
+ "content": "size-change
Triggered when the number of records on each page changes
\n",
+ "link": "pager/pager-events",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-events"
+ },
+ {
+ "title": "Paging event current-change",
+ "content": "current-change
Triggered when the current page number is switched
\n",
+ "link": "pager/pager-events-current-change",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-events-current-change"
+ },
+ {
+ "title": "Paging event prev-click",
+ "content": "prev-click
Triggered when switching to the previous page
\n",
+ "link": "pager/pager-events-prev-click",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-events-prev-click"
+ },
+ {
+ "title": "Paging event next-click",
+ "content": "next-click
Triggered when switching to the next page
\n",
+ "link": "pager/pager-events-nextclick",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-events-nextclick"
+ },
+ {
+ "title": "Paging event before-page-change",
+ "content": "before-page-change
Pre-paging event
\n",
+ "link": "pager/before-page-change",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "before-page-change"
+ },
+ {
+ "title": "Paging drop-down list box display position",
+ "content": "Indicates whether to add an element in the popper-append-to-body
paging drop-down list box to the body element node. The default value of this attribute is true
, indicating that the element is added to the body element node by default.
\nIf you do not want to add it to the body element node, set :popper-append-to-body=\"false\"
",
+ "link": "pager/page-append-to-body",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "popper-append-to-body"
+ },
+ {
+ "title": "Class name of the customized paging drop-down list box",
+ "content": "popper-class
You can customize the class name of the paging drop-down list box
",
+ "link": "pager/popper-class",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "Customized pagination layout",
+ "content": "layout
Set the paging layout. You can adjust the position of slot
in layout
to adjust the position where the slot content is rendered.
\n",
+ "link": "pager/custom-layout",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "custom-layout"
+ },
+ {
+ "title": "Number of page buttons",
+ "content": "pager-count
Set the number of pages
\n",
+ "link": "pager/pager-count",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-count"
+ },
+ {
+ "title": "Number of pages to be displayed",
+ "content": "Use page-sizes
together with page-size
to adjust the number of pages to be displayed on each page.
\n",
+ "link": "pager/page-size",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "page-size"
+ },
+ {
+ "title": "Hide pagination when there is only one page.",
+ "content": "hide-on-single-page
Hide paging when there is only one page
\n",
+ "link": "pager/hide-on-single-page",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "hide-on-single-page"
+ },
+ {
+ "title": "Customize the text of the page-up button",
+ "content": "prev-text
,next-text
Custom Page Up Button Text
\n",
+ "link": "pager/custom-next-prev-text",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "custom-next-prev-text"
+ },
+ {
+ "title": "Grid Table Pagination",
+ "content": "The grid table uses the pagination component.\nThe services/getGridMockData
service in this example needs to be implemented by yourself. The example simulates the data returned by the remote service.\n
\n",
+ "link": "pager/pager-in-grid",
+ "component": "Pager Pagination",
+ "findIntroStr": "When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.",
+ "demoId": "pager-in-grid"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/pop-editor.json b/examples/docs/resources/pc/demo-config/en-US/pop-editor.json
new file mode 100644
index 000000000..3a56c3dc5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/pop-editor.json
@@ -0,0 +1,258 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "popeditor/base",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "base"
+ },
+ {
+ "title": "Customized Query Criteria",
+ "content": "The conditions
attribute can be used to customize search criteria. The built-in text box of the gadget supports the function of pressing Enter to trigger search.
\n",
+ "link": "popeditor/conditions",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "conditions"
+ },
+ {
+ "title": "Layout and Configuration",
+ "content": "Set span
in the attributes of the condition
project to configure the grid and labelWidth
to configure the label width. component
Configure custom components and set component attributes through attrs
\n",
+ "link": "popeditor/condition-layout",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "condition-layout"
+ },
+ {
+ "title": "Used in a form and enabled form validation",
+ "content": "For details, see the following example.",
+ "link": "popeditor/condition-form",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "condition-form"
+ },
+ {
+ "title": "Drag Window",
+ "content": "Sets the drag feature of the pop-up window through the draggable
property. The default value is true
, indicating that you can drag the window on the title bar. If this parameter is set to false
, the window cannot be dragged.
\n",
+ "link": "popeditor/draggable",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "draggable"
+ },
+ {
+ "title": "Cannot be cleared",
+ "content": "The show-clear-btn
attribute is used to set whether the content can be cleared.
\n",
+ "link": "popeditor/showClearBtn",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "showClearBtn"
+ },
+ {
+ "title": "Full-screen display",
+ "content": "You can set resize
to determine whether to display the content in full screen.
\n",
+ "link": "popeditor/resize",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "resize"
+ },
+ {
+ "title": "Table Edit",
+ "content": "gridOp: This parameter is valid only when popseletor is set to grid. Currently, columns and data data sources can be configured. For details about the configuration items, see the Grid table component. The textField and valueField fields must be configured at the same time.
\n",
+ "link": "popeditor/grid",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "grid"
+ },
+ {
+ "title": "Width",
+ "content": "The width are configured through the width
attribute. \n Use dialog-class
to customize the pop-up window class name
\n",
+ "link": "popeditor/width",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "width"
+ },
+ {
+ "title": "Custom Icon",
+ "content": "You can use the icon
attribute to customize the component icon. You need to import the corresponding svg icon.
\n",
+ "link": "popeditor/icon",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "icon"
+ },
+ {
+ "title": "Multiple Choices",
+ "content": "You can set multi
to true to implement multiple selections. \nSet show-history
to set whether to display tables on the History tab page when tables are configured on the pop-up panel. The default value is false.
\n",
+ "link": "popeditor/multi",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "multi"
+ },
+ {
+ "title": "Multiple choices. The initial data is an array.",
+ "content": "For details, see the following example.",
+ "link": "popeditor/multi-value-array",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "multi-value-array"
+ },
+ {
+ "title": "change event",
+ "content": "Change event of the input box of the change
Popeditor component. page-change
The table mode of the Popeditor component is switched by page.
\n",
+ "link": "popeditor/events",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "events"
+ },
+ {
+ "title": "close event",
+ "content": "Event triggered when the close
dialog box is closed.
\n",
+ "link": "popeditor/close-event",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "close-event"
+ },
+ {
+ "title": "Read-only",
+ "content": "The readonly
attribute is used to set whether to read only.
\n",
+ "link": "popeditor/readonly",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "readonly"
+ },
+ {
+ "title": "tabindex of the text box",
+ "content": "The tabindex
attribute is used to determine whether the focus can be obtained by pressing Tab and the focus sequence. This parameter is valid only when the readonly
attribute is set to false.
\n",
+ "link": "popeditor/tabindex",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "tabindex"
+ },
+ {
+ "title": "Reset",
+ "content": "Use the before-reset
attribute to set the hook function before reset.
\n",
+ "link": "popeditor/before-reset",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "before-reset"
+ },
+ {
+ "title": "Component Query Condition Slot",
+ "content": "Customize the pop-up panel query structure by slot search
.
\n",
+ "link": "popeditor/slot",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "slot"
+ },
+ {
+ "title": "Disabled",
+ "content": " is set to read-only through the disabled
attribute.
\n",
+ "link": "popeditor/disabled",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "disabled"
+ },
+ {
+ "title": "The filter criteria in the pop-up window can be cleared.",
+ "content": "The clearable
Popeditor component supports the configuration of the Clear button in the search form.
\n",
+ "link": "popeditor/clearable",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "clearable"
+ },
+ {
+ "title": "Display Field Mapping",
+ "content": "Use the text-field
attribute to set the fields displayed by the widget.
\n",
+ "link": "popeditor/textField",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "textField"
+ },
+ {
+ "title": "Submit Field Mapping",
+ "content": "The value-field
attribute is used to set the fields submitted by the component to the background.
\n",
+ "link": "popeditor/title",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "title1"
+ },
+ {
+ "title": "Custom Title",
+ "content": "The title
attribute is used to set the title of the pop-up window. The internationalization information is supported.
\n",
+ "link": "popeditor/title",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "title"
+ },
+ {
+ "title": "Remote Search",
+ "content": "The remote-search
attribute is used to configure remote search. In the remoteSearch method, the conditions search conditions can be sent to the background. After the background processes the data, the data can be properly displayed on the page.
\n",
+ "link": "popeditor/remote-search",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "remote-search"
+ },
+ {
+ "title": "Paging",
+ "content": "The showPager
attribute is valid only when popseletor
is set to grid
. The default value is false
. Pagination is not enabled. If this parameter is set to true
, you need to configure the pagerOp
attribute. In addition, you need to listen to the page-change
event to change the data
data source
\n of the gridOp
",
+ "link": "popeditor/pager",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "Common operation buttons, including default buttons, icon buttons, picture buttons, and drop-down buttons.",
+ "demoId": "pager"
+ },
+ {
+ "title": "Rendering Query",
+ "content": "If the first batch of data loaded by the component does not contain the data corresponding to the currently set value
, You can set text-render-source
to perform reverse query
\n",
+ "link": "popeditor/render-text",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "render-text"
+ },
+ {
+ "title": "Enabling Tree Mode",
+ "content": "Enable the tree mode through the popseletor
attribute. Then the tree-op
attribute is the op configuration mode
of the Tree
component.
\n",
+ "link": "popeditor/tree",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "tree"
+ },
+ {
+ "title": "Single choice in tree mode",
+ "content": "Enable the tree mode through the popseletor
attribute. Then the tree-op
attribute is the op configuration mode
of the Tree
component.
\n",
+ "link": "popeditor/single-select-radio",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "single-select-radio"
+ },
+ {
+ "title": "Edit box size",
+ "content": "Sets the size of the PopEditor edit box through the size
attribute. The options are medium
, small
, and mini
.
\n",
+ "link": "popeditor/size",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "size"
+ },
+ {
+ "title": "Data beyond hidden",
+ "content": "Configure the showOverflow
attribute on the data column to set the display and hiding of the data when the data exceeds the column width. Values can be of type Boolean or String, with three values to choose from, as shown below. By default, all content is displayed in a new line.
\n optional value description
\n
tooltip: The extra part is displayed...., and all information is displayed on the left or right. \ntitle: The value is the same as the title attribute of the native tag. \nellipsis: '...' is displayed, and no message is displayed. \ntrue: If the value is true, the effect is the same as that of the tooltip.
\n
\n",
+ "link": "popeditor/showOverflow",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "showOverflow"
+ },
+ {
+ "title": "Mode of triggering a single selection",
+ "content": "When a single option is selected, you can only click the option button to select it by default. You can also set trigger
to row
to select any position in the row. Alternatively, set trigger
to cell
and click any position in the Operation column to select it.
\n",
+ "link": "popeditor/trigger",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "trigger"
+ },
+ {
+ "title": "Set History tab",
+ "content": "When a table is configured on the pop-up panel, configure show-history
to set whether to display the table on the History tab page. The default value is false.
\n",
+ "link": "popeditor/show-history",
+ "component": "PopEditor pop-up editing",
+ "findIntroStr": "This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.",
+ "demoId": "show-history"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/pop-upload.json b/examples/docs/resources/pc/demo-config/en-US/pop-upload.json
new file mode 100644
index 000000000..5b5923672
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/pop-upload.json
@@ -0,0 +1,122 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Set the upload service interface through the action
attribute.
\n",
+ "link": "pop-upload/basic-usage",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom Request Header",
+ "content": "The headers
attribute is used to customize the upload request header information.
\n",
+ "link": "pop-upload/custom-request-headers",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "custom-request-headers"
+ },
+ {
+ "title": "Extra parameters attached during upload",
+ "content": "The data
attribute is used to customize the additional parameters attached to the upload.
\n",
+ "link": "pop-upload/data",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "data"
+ },
+ {
+ "title": "Set Component Size",
+ "content": "The options are as follows: medium
, small
, mini
\nThe disabled
attribute is used to set whether to disable. The default value is false.
\n",
+ "link": "pop-upload/size",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "size"
+ },
+ {
+ "title": "Override the default request",
+ "content": "You can configure http-request
to overwrite the default upload behavior and customize the upload implementation
\n",
+ "link": "pop-upload/http-request",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "http-request"
+ },
+ {
+ "title": "Field name of the uploaded file",
+ "content": "Use the upload-name
attribute to set the field name of the file to be uploaded. The default value is file.
\n",
+ "link": "pop-upload/upload-name",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "upload-name1"
+ },
+ {
+ "title": "Send cookie credential information",
+ "content": "For details, see the following example.",
+ "link": "pop-upload/upload-name",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "upload-name"
+ },
+ {
+ "title": "Text of the Cancel button in the dialog box for uploading files",
+ "content": "Specify the text content of the cancel button through the cancel-button-text
attribute
\n",
+ "link": "pop-upload/fill-button-text",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "fill-button-text1"
+ },
+ {
+ "title": "Text of the Submit button in the dialog box for uploading files",
+ "content": "For details, see the following example.",
+ "link": "pop-upload/fill-button-text",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "fill-button-text2"
+ },
+ {
+ "title": "Text of the button for opening a dialog box",
+ "content": "For details, see the following example.",
+ "link": "pop-upload/fill-button-text",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "fill-button-text4"
+ },
+ {
+ "title": "Maximum number of files to be uploaded",
+ "content": "You can use the limit
attribute to specify the maximum number of files to be uploaded. After the multiple
attribute is configured, you can select multiple files at the same time.
\n",
+ "link": "pop-upload/file-limit",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "file-limit"
+ },
+ {
+ "title": "File types that can be uploaded",
+ "content": "The accept
attribute can be used to control the file type when a file is selected, and the upload-file-type
attribute can be used to specify the file type to be verified during upload.
\n",
+ "link": "pop-upload/file-type",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "file-type"
+ },
+ {
+ "title": "Size of files that can be uploaded",
+ "content": "The max-upload-file-size
attribute specifies the size of the file that can be uploaded.
\n",
+ "link": "pop-upload/max-upload-file-size",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "max-upload-file-size"
+ },
+ {
+ "title": "Do not delete files",
+ "content": ":before-remove (callback event before removing a file). In the method, return true/false indicates whether the file can be deleted.
\n",
+ "link": "pop-upload/prevent-delete-file",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "prevent-delete-file"
+ },
+ {
+ "title": "Do not upload files",
+ "content": ":before-upload Indicates the hook before uploading a file. The parameter is the uploaded file. If false is returned or Promise is returned and rejected, the upload stops.
\n",
+ "link": "pop-upload/before-upload",
+ "component": "PopUpload dialog box",
+ "findIntroStr": "Click the element to display the upload dialog box.",
+ "demoId": "before-upload"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/popover.json b/examples/docs/resources/pc/demo-config/en-US/popover.json
new file mode 100644
index 000000000..e7f7a9dc2
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/popover.json
@@ -0,0 +1,138 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "popover/basic-usage",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Add Content",
+ "content": "content
Sets what to display.
\n",
+ "link": "popover/popover-content",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "popover-content"
+ },
+ {
+ "title": "Arrow Offset",
+ "content": "arrow-offset
Sets the offset of the arrow to change the position of the arrow.
\n",
+ "link": "popover/arrow-offset",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "arrow-offset"
+ },
+ {
+ "title": "Popup Box Offset",
+ "content": "offset
Sets the offset of the dialog box to change the position of the dialog box.
\n",
+ "link": "popover/frame-offset",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "frame-offset"
+ },
+ {
+ "title": "Delay Hiding",
+ "content": "close-delay
The delay for hiding the pop-up dialog box is in milliseconds (number)
\n",
+ "link": "popover/close-delay",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "close-delay"
+ },
+ {
+ "title": "Disabled",
+ "content": "disabled
Sets whether to disable pop-up boxes.
\n",
+ "link": "popover/dynamic-disable",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "Delay Display",
+ "content": "open-delay
, Set the delay time (type: number, unit: ms)
\n",
+ "link": "popover/open-delay",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "open-delay"
+ },
+ {
+ "title": "Display position",
+ "content": "placement
: indicates the position of the dialog box that is displayed. The value can be (top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end)
\n",
+ "link": "popover/popover-placement",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "popover-placement"
+ },
+ {
+ "title": "Custom Style",
+ "content": "popper-class
You can configure one or more classes
\n",
+ "link": "popover/popper-class",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "Customized Gradient Animation",
+ "content": "transition
Sets the display-hide-in-fade-out animation of the dialog box. The default values are fade-in-linear and fade-in (no animation effect).
\n",
+ "link": "popover/custom-transition",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "custom-transition"
+ },
+ {
+ "title": "Trigger Mode",
+ "content": "trigger
Set the triggering mode of the pop-up dialog box. click
Click to trigger focus
HoverHoverClick to trigger manual
. Click Hide
\n again",
+ "link": "popover/trigger-mode",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "trigger-mode"
+ },
+ {
+ "title": "Hide the arrow in the dialog box",
+ "content": "visible-arrow
Sets whether to display the arrow of the prompt box.
\n",
+ "link": "popover/hidden-arrow",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "hidden-arrow"
+ },
+ {
+ "title": "Width",
+ "content": "Width of the width
pop-up box
\n",
+ "link": "popover/popover-width",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "popover-width"
+ },
+ {
+ "title": "Pop-up Options",
+ "content": "popper-options
Configuration pop-up options
\n",
+ "link": "popover/popper-options",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "popper-options"
+ },
+ {
+ "title": "Trigger Source",
+ "content": "slot
Set the trigger source of the pop-up dialog box
\n",
+ "link": "popover/trigger-reference",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "trigger-reference"
+ },
+ {
+ "title": "Custom Prompt Text",
+ "content": "content
Set the custom text. You can also nest the default slot in the label as the custom text
\n",
+ "link": "popover/custom-tip-text",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "custom-tip-text"
+ },
+ {
+ "title": "Event",
+ "content": "Callback triggered after input
loading\n\nhide
HideHideCallback triggered during display\n\nshow
\n\nafter-leave
displayCallback triggered during display \n\nafter-enter
displayCallback triggered after animation playing is complete
\n",
+ "link": "popover/popover-events",
+ "component": " Popover",
+ "findIntroStr": "Popover can trigger a pop-up dialog box by performing operations on a trigger source. The pop-up content, delay triggering, and gradient animation are supported.",
+ "demoId": "popover-events"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/progress.json b/examples/docs/resources/pc/demo-config/en-US/progress.json
new file mode 100644
index 000000000..1656b5d77
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/progress.json
@@ -0,0 +1,82 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "progress/basic-usage",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "line type",
+ "content": "type="line"
is displayed as line
\n",
+ "link": "progress/progress-type",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "progress-type"
+ },
+ {
+ "title": "circle type",
+ "content": "The type="circle"
is of the circle type. width
You can adjust the width of the ring progress bar canvas. The default value is 126px.
\n",
+ "link": "progress/progress-type-circle",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "progress-type-circle"
+ },
+ {
+ "title": "Dashboard Type",
+ "content": "The type="dashboard"
is displayed as a dashboard. width
You can adjust the width of the ring progress bar canvas. The default value is 126px.
\n",
+ "link": "progress/progress-type-dashboard",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "progress-type-dashboard"
+ },
+ {
+ "title": "Width",
+ "content": "Width of the stroke-width
progress bar, in px
\n",
+ "link": "progress/progress-width",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "progress-width"
+ },
+ {
+ "title": "Status",
+ "content": "Current status of the status
progress bar: (success/exception/warning)
\n",
+ "link": "progress/progress-status",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "progress-status"
+ },
+ {
+ "title": "Text displayed or not displayed",
+ "content": "show-text
Whether to display progress bar text
\n",
+ "link": "progress/text-inside-or-no-text",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "text-inside-or-no-text"
+ },
+ {
+ "title": "Custom Color",
+ "content": "Set the color of the progress bar through color
. color: background color of the progress bar (overwrites the status color)
\n",
+ "link": "progress/custom-color",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "custom-color"
+ },
+ {
+ "title": "Custom Text",
+ "content": "The text-inside
progress bar text is embedded in the progress bar (available only when type is set to line). format
Customize the progress bar text
\n",
+ "link": "progress/format-text",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "format-text"
+ },
+ {
+ "title": "Dynamic control progress bar change",
+ "content": "Dynamic control of the progress bar by setting percentage
\n",
+ "link": "progress/dynamic-control-changes",
+ "component": " Progress",
+ "findIntroStr": "Displays the operation progress and informs users of the current status and expectations.",
+ "demoId": "dynamic-control-changes"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/radio.json b/examples/docs/resources/pc/demo-config/en-US/radio.json
new file mode 100644
index 000000000..305f483d1
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/radio.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " uses v-model
to bind a variable. The variable value is the default radio selected. The variable value corresponds to the value of label
. You can also use text
to configure the display text, which is the same as the result of the default slot configuration plain text.\n\nlabel
can be String
, Number
, or Boolean
.
\n",
+ "link": "radio/basic-usage",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Profile Radio Group",
+ "content": "Provides the options
attribute to render radio groups by configuring object array data. This property eliminates the need to insert a <radio>
or <radio-button>
tag as a slot in the tag. \n\nThe options
object array contains three fields: label
, text
, and events
. \n\n The type
attribute is also provided, which is used together with the options
attribute. The default value is radio
. You can also set this parameter to button
. After the configuration, the radio group is displayed as a button.
\n",
+ "link": "radio/group-options",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "group-options"
+ },
+ {
+ "title": "With borders",
+ "content": "You can set the border
attribute to add a border to an option button.
\n",
+ "link": "radio/with-border",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "with-border"
+ },
+ {
+ "title": "Disabled",
+ "content": "Set the disabled
attribute to enable the disabled state. The default value is false.
\n",
+ "link": "radio/dynamic-disable",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "vertical layout",
+ "content": "You can set the vertical
attribute on the RadioGroup component to enable the vertical layout of the option buttons.
\n",
+ "link": "radio/vertical",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "vertical"
+ },
+ {
+ "title": "Color Settings",
+ "content": "When a radio in the format is activated, you can set the text color through the text-color
attribute, and set the fill color and border color through the fill
attribute.
\n",
+ "link": "radio/active-color",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "active-color"
+ },
+ {
+ "title": "Text Content",
+ "content": "You can set the text
attribute on the Radio component to set the content.
\n",
+ "link": "radio/radio-text",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "radio-text"
+ },
+ {
+ "title": "Button Content",
+ "content": "You can set the radio content through the label
attribute.
\n",
+ "link": "radio/radio-button",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "radio-button"
+ },
+ {
+ "title": "name",
+ "content": "For details, see the following example.",
+ "link": "radio/radio-button",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "radio-button1"
+ },
+ {
+ "title": "Size Settings",
+ "content": "You can set the size
attribute for a radio with a button or a radio with a border to change its size. The options include medium, small, and mini.
\n",
+ "link": "radio/radio-size",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "radio-size"
+ },
+ {
+ "title": "Option button event",
+ "content": "You can set the change
event on the Radio and RadioGroup components. The event is triggered when the bound value changes. The callback function is the selected radio label value.
\n",
+ "link": "radio/radio-events",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "radio-events"
+ },
+ {
+ "title": "Configure radio cyclically",
+ "content": "You can set the options
attribute on the RadioGroup component to configure radio cyclically.
\n",
+ "link": "radio/group-options",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "group-options1"
+ },
+ {
+ "title": "Default slot",
+ "content": "by default
default slot list.
\n",
+ "link": "radio/radio-default",
+ "component": "Radio option button",
+ "findIntroStr": "Used to configure options for different scenarios. Select one option from a group of options.",
+ "demoId": "radio-default"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/rate.json b/examples/docs/resources/pc/demo-config/en-US/rate.json
new file mode 100644
index 000000000..409fb0a0b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/rate.json
@@ -0,0 +1,138 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "rate/basic-usage",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom 3-segment color",
+ "content": "You can use colors
to define three-segment colors.
\n",
+ "link": "rate/custom-3-threshold-colors",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "custom-3-threshold-colors"
+ },
+ {
+ "title": "Unselected icon color when customized is disabled",
+ "content": "You can use disabled-void-color
to customize the color of the unselected icon.
\n",
+ "link": "rate/disabled-not-selected-color",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "disabled-not-selected-color"
+ },
+ {
+ "title": "Icon class name that is not selected when user-defined is disabled",
+ "content": "You can use disabled-void-icon-class
to customize the class name of the icon that is not selected during disabling.
\n",
+ "link": "rate/disabled-not-selected-class",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "disabled-not-selected-class"
+ },
+ {
+ "title": "Custom 3-segment icon style",
+ "content": "You can use icon-classes
to customize the 3-part icon style.
\n",
+ "link": "rate/custom-3-threshold-icon",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "custom-3-threshold-icon"
+ },
+ {
+ "title": "Auxiliary Text and Color",
+ "content": "You can set the auxiliary text content, whether to display the auxiliary text, and the auxiliary text color through the texts show-text text-color
attributes.
\n",
+ "link": "rate/texts-and-text-color",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "texts-and-text-color"
+ },
+ {
+ "title": "Size and Placeholder Width",
+ "content": "You can use size space
to separate the size and placeholder width.
\n",
+ "link": "rate/size-and-space",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "size-and-space"
+ },
+ {
+ "title": "Customize the color of unselected icons",
+ "content": "You can use void-color
to define the color of an unselected icon.
\n",
+ "link": "rate/not-selected-color",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "not-selected-color"
+ },
+ {
+ "title": "Customized unselected icon class name",
+ "content": "You can use void-icon-class
to define the unselected icon class name.
\n",
+ "link": "rate/not-selected-class",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "not-selected-class"
+ },
+ {
+ "title": "Text prompt under the icon",
+ "content": "You can use text-on-bottom
to define whether to display text prompts under icons.
\n",
+ "link": "rate/text-on-bottom",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "text-on-bottom"
+ },
+ {
+ "title": "Half Selection",
+ "content": "You can use allow-half
to define whether half selection is supported.
\n",
+ "link": "rate/allow-half",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "allow-half"
+ },
+ {
+ "title": "Disabled",
+ "content": "You can use disabled
to define whether to disable the function.
\n",
+ "link": "rate/dynamic-disable",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "Score Display",
+ "content": "You can use show-score score-template
to define whether to display scores and the display template.
\n",
+ "link": "rate/show-score",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "show-score"
+ },
+ {
+ "title": "Single Choice Mode",
+ "content": "You can use radio
to set the single-choice mode.
\n",
+ "link": "rate/radio-rate",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "radio-rate"
+ },
+ {
+ "title": "Maximum Score",
+ "content": "You can use max
to set the maximum score.
\n",
+ "link": "rate/max-score",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "max-score"
+ },
+ {
+ "title": "Boundaries",
+ "content": "You can set the lower limit and upper limit by using low-threshold high-threshold
, and set the color of the displayed star by using colors
\n",
+ "link": "rate/threshold-value",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "threshold-value"
+ },
+ {
+ "title": "Event",
+ "content": "Listen to the change
event triggering method.
\n",
+ "link": "rate/rate-events",
+ "component": "Rate Score",
+ "findIntroStr": "Rate quick rating, which is used to display reviews.",
+ "demoId": "rate-events"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/roles.json b/examples/docs/resources/pc/demo-config/en-US/roles.json
new file mode 100644
index 000000000..f8de09097
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/roles.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "\n Note that the Roles component requests mock data. Use real services during development. \n The change(userId)
interface is used to listen to the switchover event. The input parameter is the user ID after the switchover.
\n
\n",
+ "link": "roles/base",
+ "component": "Switch Roles",
+ "findIntroStr": "Roles role component, which provides the role list of the current user and allows users to switch between roles.",
+ "demoId": "base"
+ },
+ {
+ "title": "Customized Query Service",
+ "content": "\n Note that the Roles component requests mock data. Use real services during development. \n Use fetch-role
to customize the query service.
\n
\n",
+ "link": "roles/fetch-role",
+ "component": "Switch Roles",
+ "findIntroStr": "Roles role component, which provides the role list of the current user and allows users to switch between roles.",
+ "demoId": "fetch-role"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/scroll-text.json b/examples/docs/resources/pc/demo-config/en-US/scroll-text.json
new file mode 100644
index 000000000..d40dbdbc0
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/scroll-text.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "scroll-text/basic-usage",
+ "component": "ScrollText",
+ "findIntroStr": "This command is used to display text messages in scrolling mode.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Text scrolling direction",
+ "content": "You can use direction
to set the text scrolling direction.
\n",
+ "link": "scroll-text/scroll-direction",
+ "component": "ScrollText",
+ "findIntroStr": "This command is used to display text messages in scrolling mode.",
+ "demoId": "scroll-direction"
+ },
+ {
+ "title": "The text stops scrolling when the mouse is hovered.",
+ "content": "You can use hover-stop
to set whether the text stops scrolling when the mouse is hovered.
\n",
+ "link": "scroll-text/hover-stop",
+ "component": "ScrollText",
+ "findIntroStr": "This command is used to display text messages in scrolling mode.",
+ "demoId": "hover-stop"
+ },
+ {
+ "title": "Custom Text Content",
+ "content": "You can use text
to customize the text content.
\n",
+ "link": "scroll-text/custom-scroll-text",
+ "component": "ScrollText",
+ "findIntroStr": "This command is used to display text messages in scrolling mode.",
+ "demoId": "custom-scroll-text"
+ },
+ {
+ "title": "Customize the text content through the Solt slot",
+ "content": "You can customize the text content through the solt slot.
\n",
+ "link": "scroll-text/slots",
+ "component": "ScrollText",
+ "findIntroStr": "This command is used to display text messages in scrolling mode.",
+ "demoId": "slots"
+ },
+ {
+ "title": "Scrolling Interval",
+ "content": "You can use time
to set the scrolling interval.
\n",
+ "link": "scroll-text/scroll-time",
+ "component": "ScrollText",
+ "findIntroStr": "This command is used to display text messages in scrolling mode.",
+ "demoId": "scroll-time"
+ },
+ {
+ "title": "Custom Text Style",
+ "content": "You can use class
to customize the text style.
\n",
+ "link": "scroll-text/custom-text-style",
+ "component": "ScrollText",
+ "findIntroStr": "This command is used to display text messages in scrolling mode.",
+ "demoId": "custom-text-style"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/search.json b/examples/docs/resources/pc/demo-config/en-US/search.json
new file mode 100644
index 000000000..4dcdf59be
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/search.json
@@ -0,0 +1,90 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "search/basic-usage",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Can be cleared",
+ "content": "You can use the clearable
attribute to set the display of the clear icon button.
\n",
+ "link": "search/clearable",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "clearable"
+ },
+ {
+ "title": "Mini mode",
+ "content": "You can use mini
to set the component to the mini mode.
\n",
+ "link": "search/mini-mode",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "mini-mode"
+ },
+ {
+ "title": "Transparent mode",
+ "content": "You can use transparent
to set the component to the transparent mode (valid in mini
mode). Search Type
\n",
+ "link": "search/transparent-mode",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "transparent-mode"
+ },
+ {
+ "title": "Default Search",
+ "content": "You can use v-model
to configure the default search criteria of the component.
\n",
+ "link": "search/default-value",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "default-value"
+ },
+ {
+ "title": "Search Type",
+ "content": "You can use search-types
to configure the search types available for the component.
\n",
+ "link": "search/search-types",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "search-types"
+ },
+ {
+ "title": "Content of the user-defined search type",
+ "content": "For details, see the following example.",
+ "link": "search/custom-search-types",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "custom-search-types"
+ },
+ {
+ "title": "Customized search type",
+ "content": "Search Type
\n",
+ "link": "search/show-selected-types",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "show-selected-types"
+ },
+ {
+ "title": "Customized search event",
+ "content": "For details, see the following example.",
+ "link": "search/search-events",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "search-events"
+ },
+ {
+ "title": "Customized change event",
+ "content": "For details, see the following example.",
+ "link": "search/change-events",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "change-events"
+ },
+ {
+ "title": "Customized select event",
+ "content": "For details, see the following example.",
+ "link": "search/select-events",
+ "component": "Search",
+ "findIntroStr": "Specify a condition object to search for data.",
+ "demoId": "select-events"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/select.json b/examples/docs/resources/pc/demo-config/en-US/select.json
new file mode 100644
index 000000000..ae906afea
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/select.json
@@ -0,0 +1,418 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "The value of v-model
is the value of the value
attribute of the currently selected tiny-option
.
\n",
+ "link": "select/basic-usage",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Multiple Choices",
+ "content": "The multiple
attribute is used to enable the multi-selection function. In this case, the value of v-model
is an array of selected values. By default, the selected value is displayed as a tag.
\n",
+ "link": "select/multiple",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "multiple"
+ },
+ {
+ "title": "Collapse Tag",
+ "content": "When you select multiple values, you can set the collapse-tags
attribute to combine the selected values into a text.
\n",
+ "link": "select/collapse-tags",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "collapse-tags"
+ },
+ {
+ "title": "Maximum number of options",
+ "content": "The multiple-limit
attribute specifies the maximum number of items that can be selected by the user during multiple selection. The default value is 0, which is not limited.
\n",
+ "link": "select/multiple-limit",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "multiple-limit"
+ },
+ {
+ "title": "Big Data Virtual Scrolling",
+ "content": "You can set the options in the options
drop-down list box and set optimization
to enable the big data virtual scrolling function. Virtual scrolling is not supported when using the label configuration option. \nIn multi-choice mode, the maximum number of selected items multiple-limit
is 20 by default. If a large number of selected items are selected, you are advised to enable collapse-tags
to collapse the display.
\n",
+ "link": "select/optimization",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "optimization"
+ },
+ {
+ "title": "Disabled",
+ "content": "After the disabled
property is set, the entire selector is unavailable.
\n",
+ "link": "select/disabled",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "disabled"
+ },
+ {
+ "title": "Some options in the drop-down list box are disabled.",
+ "content": "This option is unavailable after the disabled
attribute is set for the tiny-options tag.
\n",
+ "link": "select/disabled-options",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "disabled-options"
+ },
+ {
+ "title": "By default, multiple options in the drop-down list are selected and disabled.",
+ "content": "After the disabled
attribute is set for the default selected tag, this option is disabled.
\n",
+ "link": "select/disabled-and-selected-options",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "disabled-and-selected-options"
+ },
+ {
+ "title": "medium",
+ "content": "The size
attribute defines the text box size. The options are medium, small, and mini. \n Use options
to configure the Select data item. After using the data item, you do not need to configure tiny-option.
\n",
+ "link": "select/size-medium",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "size-medium"
+ },
+ {
+ "title": "small",
+ "content": "For details, see the following example.",
+ "link": "select/size-small",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "size-small"
+ },
+ {
+ "title": "mini",
+ "content": "For details, see the following example.",
+ "link": "select/size-mini",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "size-mini"
+ },
+ {
+ "title": "Group",
+ "content": " uses tiny-option-group
to group options. The label
attribute is the group name. Use the disabled
attribute to disable all options in the group.
\n",
+ "link": "select/option-group",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "option-group"
+ },
+ {
+ "title": "Disable some options for grouping",
+ "content": "Use tiny-option-group
to group options and disable some grouping.
\n",
+ "link": "select/option-group-disable",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "option-group-disable"
+ },
+ {
+ "title": "change clear blur focus event",
+ "content": "Description of the event
\n
change: triggered when the selected value changes. The callback parameter is the current selected value.\nclear: triggered when the user clicks the clear button in the option mode.\nblur: triggered when the input loses the focus.\nfocus:
\n
\n is triggered when the input is focused",
+ "link": "select/envts-change",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "envts-change"
+ },
+ {
+ "title": "visible-change remove-tag event",
+ "content": " Event Description
\n
visible-change: Triggered when the drop-down list box is displayed or hidden. The callback parameter is true if the drop-down list box is displayed or false if the drop-down list box is hidden.\nremove-tag: Triggered when the tag is removed in multi-select mode. The callback parameter is the removed tag value
\n
\n",
+ "link": "select/envts-remove",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "envts-remove"
+ },
+ {
+ "title": "Searchable",
+ "content": "The filterable
property enables the search function. By default, Select finds all options for which the label
property contains the entered value. If you want to use other search logic, you can pass in a filter-method
. filter-method
is a function. It is invoked when the input value changes. The parameter is the current input value.
\n",
+ "link": "select/filter-method",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "filter-method"
+ },
+ {
+ "title": "The search allows copying",
+ "content": "In the search scenario, the content in the text box cannot be copied. You need to add the allow-copy
attribute to copy the content. The allow-copy
attribute defaults to false
. \nWhen hovering the mouse over the text box, press and move the mouse to select the previous text. \n When you hover the cursor over the text box and click the left mouse button, the input content changes to placeholder, the content is cleared, and the input state is entered.
\n",
+ "link": "select/search-allow-copy",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "search-allow-copy"
+ },
+ {
+ "title": "Create Item",
+ "content": "The allow-create
attribute allows you to create a new entry that does not exist in the option by entering text in the text box. Note that the filterable
attribute must be true at this point. After the default-first-option
attribute is set to true, you can press Enter to select the first option in the current option list. You do not need to use the mouse or keyboard arrow keys to locate the option.
\n",
+ "link": "select/allow-create",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "allow-create"
+ },
+ {
+ "title": "Remote Search",
+ "content": "To enable remote search, set filterable
and remote
to true
. In addition, a remote-method
is transferred. remote-method
is a function. It is invoked when the input value changes. The parameter is the current input value. When the reserve-keyword
attribute has multiple options and is searchable, the current search keyword can be retained after an option is selected.
\n",
+ "link": "select/remote-method",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "remote-method"
+ },
+ {
+ "title": "Remote search is triggered when the focus is obtained.",
+ "content": "For details, see the following example.",
+ "link": "select/focus-remote-method",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "focus-remote-method"
+ },
+ {
+ "title": "Remote search allows replication",
+ "content": "In the remote search scenario, the content in the text box cannot be copied. You need to add the allow-copy
attribute to copy the content. The allow-copy
attribute defaults to false
. \nWhen hovering the mouse over the text box, press and move the mouse to select the previous text. \n When you hover the cursor over the text box and click the left mouse button, the input content changes to placeholder, the content is cleared, and the input state is entered.
\n",
+ "link": "select/remote-search-allow-copy",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "remote-search-allow-copy"
+ },
+ {
+ "title": "Options can be cleared",
+ "content": "You can use the clearable
attribute to clear the selector. When you hover the cursor over the selector, the clear icon is displayed. Note that the clearable
attribute applies only to single selection.
\n",
+ "link": "select/clearable",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "clearable"
+ },
+ {
+ "title": "name",
+ "content": "You can set the name attribute through the name
attribute
\n",
+ "link": "select/name",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "name"
+ },
+ {
+ "title": "Select selector options can be copied",
+ "content": "After the tag-selectable
attribute is set, the selected options in the text box can be selected by using the mouse, and then you can press Ctrl + C or right-click to copy the options.
\n",
+ "link": "select/tag-select",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "tag-select"
+ },
+ {
+ "title": "The Select selector option can be copied to all.",
+ "content": "After the copyable
attribute is set, all tag
text contents can be copied and separated by commas.
\n",
+ "link": "select/tag-copy-all",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "tag-copy-all"
+ },
+ {
+ "title": "Bound Value Object",
+ "content": "If the bound value is an object, the value-key
attribute must be configured to specify the key name uniquely identified by the value.
\n",
+ "link": "select/binding-obj",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "binding-obj"
+ },
+ {
+ "title": "Customized search text without matching",
+ "content": "You can use the no-match-text
attribute to customize the text displayed when no search criteria are matched.
\n",
+ "link": "select/no-match-text",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "no-match-text"
+ },
+ {
+ "title": "Customized text for empty data display",
+ "content": "You can use the no-data-text
attribute to customize the text displayed when the option is empty.
\n",
+ "link": "select/no-data-text",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "no-data-text"
+ },
+ {
+ "title": "Pop-up dialog box style and positioning",
+ "content": "You can use the popper-class
attribute to customize the style of the drop-down list box. popper-append-to-body
\t Specifies whether to insert a pop-up into the body element. If a fault occurs in locating the dialog box that is displayed, set this parameter to false.
\n",
+ "link": "select/popup-style-position",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "popup-style-position"
+ },
+ {
+ "title": "The drop-down menu is displayed when the focus is obtained.",
+ "content": "After automatic-dropdown
is set to true, the option menu is automatically displayed after the focus is obtained in the text box.
\n",
+ "link": "select/automatic-dropdown",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "automatic-dropdown"
+ },
+ {
+ "title": "Custom header content",
+ "content": "Customize the header content of the text box through the prefix
slot.
\n",
+ "link": "select/custom-prefix",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "custom-prefix"
+ },
+ {
+ "title": "User-defined drop-down list",
+ "content": " is implemented through the default slot of Option. Insert the customized HTML template into the slot of tiny-option
.
\n",
+ "link": "select/custom-options",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "custom-options"
+ },
+ {
+ "title": "The Select All option is not displayed.",
+ "content": "If show-alloption
is set to false, the Select All
option is not displayed. The default value is true.
\n",
+ "link": "select/show-alloption",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "show-alloption"
+ },
+ {
+ "title": "Change the value in the text box.",
+ "content": "For details, see the following example.",
+ "link": "select/set-input-value",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "set-input-value"
+ },
+ {
+ "title": "Manually obtaining the focus",
+ "content": "Invoke the focus()
method to focus the input.
\n",
+ "link": "select/manual-focus-blur",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "manual-focus-blur"
+ },
+ {
+ "title": "The drop-down list follows the width of the text box.",
+ "content": "The is-drop-inherit-width
attribute is used to set whether the drop-down list box follows the width of the text box. The default value is false
, indicating that the content is not followed. The width of the drop-down list can be expanded. If the value is true
, the content is followed.
\n",
+ "link": "select/is-drop-inherit-width",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "is-drop-inherit-width"
+ },
+ {
+ "title": "Empty data slot",
+ "content": "Use empty
to set the message displayed when there is no data.
\n",
+ "link": "select/slot-empty",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "slot-empty"
+ },
+ {
+ "title": "Default slot",
+ "content": "by default
default slot list.
\n",
+ "link": "select/slot-default",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "slot-default"
+ },
+ {
+ "title": "Nested Grid",
+ "content": "For details, see the following example.",
+ "link": "select/nest-radio-grid",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-radio-grid"
+ },
+ {
+ "title": "Nested grid, which can be searched for and cleared.",
+ "content": "For details, see the following example.",
+ "link": "select/nest-checkbox-grid-clearable",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-checkbox-grid-clearable"
+ },
+ {
+ "title": "Nested Multi-choice Grid",
+ "content": "For details, see the following example.",
+ "link": "select/nest-checkbox-grid",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-checkbox-grid"
+ },
+ {
+ "title": "text-field",
+ "content": "For details, see the following example.",
+ "link": "select/nest-checkbox-grid",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-checkbox-grid1"
+ },
+ {
+ "title": "value-field",
+ "content": "For details, see the following example.",
+ "link": "select/nest-checkbox-grid",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-checkbox-grid2"
+ },
+ {
+ "title": "Nested Grid data item disabled",
+ "content": "In the drop-down list box, the attribute checkMethod
of the select-config
configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is true
or false
, the data item is enabled or disabled. Select a single option from the drop-down list box. The attribute checkMethod
of the radio-config
configuration item is used to determine which data items are disabled. The method determines each data item. If the return value is true
or false
, the data item is enabled or disabled.
\n",
+ "link": "select/disable-grid-select-radio",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "disable-grid-select-radio"
+ },
+ {
+ "title": "Enabling Remote Search for Nested Grids (Multiple Choices)",
+ "content": "Set render-type
to grid
nested grid; Set filterable
and remote
to true
and pass in the remote-method
method to enable remote search. To automatically search for and display the expansion button, set remote-config
\n",
+ "link": "select/nest-grid-remote-filter",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-grid-remote-filter"
+ },
+ {
+ "title": "Nested Grid Enable Remote Search (Single Choice)",
+ "content": "Set render-type
to grid
nested grid; Set filterable
and remote
to true
and pass in the remote-method
method to enable remote search. To automatically search for and display the expansion button, set remote-config
\n",
+ "link": "select/nest-remote-grid",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-remote-grid"
+ },
+ {
+ "title": "Grid nested with a large amount of data.",
+ "content": "For details, see the following example.",
+ "link": "select/nest-radio-grid-much-data",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-radio-grid-much-data"
+ },
+ {
+ "title": "Nested Radio Tree",
+ "content": "For details, see the following example.",
+ "link": "select/nest-radio-tree",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-radio-tree"
+ },
+ {
+ "title": "Nested Multi-choice Tree",
+ "content": "For details, see the following example.",
+ "link": "select/nest-checkbox-tree",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-checkbox-tree"
+ },
+ {
+ "title": "Searchable tree",
+ "content": "For details, see the following example.",
+ "link": "select/nest-filterable-tree",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "nest-filterable-tree"
+ },
+ {
+ "title": "Configuration Mode",
+ "content": "Enable the cache function by setting cache-op
and set options by options
.
\n",
+ "link": "select/cache-usage",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "cache-usage"
+ },
+ {
+ "title": "Slot Mode",
+ "content": "If the list rendering component is set to vue-option
through slot to output the drop-down list, you need to manually add the cache function.
\n",
+ "link": "select/memoize-usage",
+ "component": "Select Selector",
+ "findIntroStr": "Select selector is a UI component that displays and selects data from a drop-down list box.",
+ "demoId": "memoize-usage"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/slide-bar.json b/examples/docs/resources/pc/demo-config/en-US/slide-bar.json
new file mode 100644
index 000000000..92f165ca0
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/slide-bar.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "slide-bar/basic-usage",
+ "component": "SlideBar Scrolling Block",
+ "findIntroStr": "SlideBar scroll block, which can be used as a sliding block of text.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Number of blocks scrolled each time",
+ "content": "You can use wheel-blocks
to set the number of blocks to be scrolled each time. \nThe data source can be obtained when the service is invoked through value
\n",
+ "link": "slide-bar/wheel-blocks",
+ "component": "SlideBar Scrolling Block",
+ "findIntroStr": "SlideBar scroll block, which can be used as a sliding block of text.",
+ "demoId": "wheel-blocks"
+ },
+ {
+ "title": "Custom Scroll Block Content",
+ "content": "Customize the scroll block content by slot.
\n",
+ "link": "slide-bar/custom-content",
+ "component": "SlideBar Scrolling Block",
+ "findIntroStr": "SlideBar scroll block, which can be used as a sliding block of text.",
+ "demoId": "custom-content"
+ },
+ {
+ "title": "Customized DOM Label",
+ "content": "You can use tag sub-tag
to customize DOM tags.
\n",
+ "link": "slide-bar/custom-tag",
+ "component": "SlideBar Scrolling Block",
+ "findIntroStr": "SlideBar scroll block, which can be used as a sliding block of text.",
+ "demoId": "custom-tag"
+ },
+ {
+ "title": "Scroll Block Event",
+ "content": "For details, see the following example.",
+ "link": "slide-bar/slide-bar-events",
+ "component": "SlideBar Scrolling Block",
+ "findIntroStr": "SlideBar scroll block, which can be used as a sliding block of text.",
+ "demoId": "slide-bar-events"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/slider.json b/examples/docs/resources/pc/demo-config/en-US/slider.json
new file mode 100644
index 000000000..cd8a07aea
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/slider.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "slider/basic-usage",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "vertical mode",
+ "content": "The vertical mode of the slider is displayed by setting the vertical
attribute. landscape mode by default)\nIn vertical mode, you can set the height of the component by calling height
\n",
+ "link": "slider/vertical-mode",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "vertical-mode"
+ },
+ {
+ "title": "Maximum/Minimum",
+ "content": "
Set min
max
to set the value range of the slider.
\n",
+ "link": "slider/max-min",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "max-min"
+ },
+ {
+ "title": "Current Value",
+ "content": "Set format-tooltip
to set the attribute value
\n",
+ "link": "slider/format-tooltip",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "format-tooltip"
+ },
+ {
+ "title": "Range Selection",
+ "content": "Set the initial range selection for the array through v-model
\n",
+ "link": "slider/range-select",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "range-select"
+ },
+ {
+ "title": "Text box mode",
+ "content": "Enable the slider text box mode by configuring show-input
\n",
+ "link": "slider/show-iput",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "show-iput"
+ },
+ {
+ "title": "Shortcut Key Operations",
+ "content": "Set the total number of steps. That is, when you press the shortcut key PageDown or PageUp, the moving distance is (Maximum value - Minimum value)/Number of pages
\n",
+ "link": "slider/shortcut-operation",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "shortcut-operation"
+ },
+ {
+ "title": "Disabled",
+ "content": "Set the attribute disabled
to disable the sliding slider
\n",
+ "link": "slider/dynamic-disable",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "Prompt",
+ "content": "Disable the slider prompt by setting :show-tip="false"
. (enabled by default)
\n",
+ "link": "slider/show-tip",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "show-tip"
+ },
+ {
+ "title": "Step",
+ "content": "Set step
to configure the slider sliding step
\n",
+ "link": "slider/about-step",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "about-step"
+ },
+ {
+ "title": "change event",
+ "content": "change event
\n",
+ "link": "slider/slider-event-change",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "slider-event-change"
+ },
+ {
+ "title": "start Slider sliding start event",
+ "content": "start Slider Start Event
\n",
+ "link": "slider/slider-event-start",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "slider-event-start"
+ },
+ {
+ "title": "stop slider sliding stop event",
+ "content": "stop slider sliding stop event
\n",
+ "link": "slider/slider-event-stop",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "slider-event-stop"
+ },
+ {
+ "title": "Custom Slot",
+ "content": "For details, see the following example.",
+ "link": "slider/slider-slot",
+ "component": "Slider Slider",
+ "findIntroStr": "You can slide the slider to determine the position and size. Multiple forms, horizontal, vertical, and range sliders.",
+ "demoId": "slider-slot"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/split.json b/examples/docs/resources/pc/demo-config/en-US/split.json
new file mode 100644
index 000000000..cf2a421bf
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/split.json
@@ -0,0 +1,90 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "split/basic-usage",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Panel Threshold",
+ "content": "For details, see the following example.",
+ "link": "split/split-threshold",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "split-threshold"
+ },
+ {
+ "title": "Split Mode",
+ "content": "Split type of the same mode. The options are horizontal
(horizontal) and vertical
(vertical). The default value is horizontal
.
\n",
+ "link": "split/split-mode",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "split-mode"
+ },
+ {
+ "title": "Drag not allowed",
+ "content": "For details, see the following example.",
+ "link": "split/basic-usage1",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "basic-usage1"
+ },
+ {
+ "title": "movestart event",
+ "content": "Start moving event
\n",
+ "link": "split/movestart-event",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "movestart-event"
+ },
+ {
+ "title": "Moving Event",
+ "content": "Moving Event
\n",
+ "link": "split/moving-event",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "moving-event"
+ },
+ {
+ "title": "moveend event",
+ "content": "Move completion event
\n",
+ "link": "split/moveend-event",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "moveend-event"
+ },
+ {
+ "title": "Slots on the left and right panels",
+ "content": "For details, see the following example.",
+ "link": "split/left-right-slot",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "left-right-slot"
+ },
+ {
+ "title": "Slots on the upper and lower panels",
+ "content": "For details, see the following example.",
+ "link": "split/top-bottom-slot",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "top-bottom-slot"
+ },
+ {
+ "title": "Drag Slot",
+ "content": "For details, see the following example.",
+ "link": "split/trigger-slot",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "trigger-slot"
+ },
+ {
+ "title": "Nested",
+ "content": "For details, see the following example.",
+ "link": "split/nested-use",
+ "component": "Split Panel",
+ "findIntroStr": "This command is used to divide an area into two parts whose width or height can be adjusted by dragging.",
+ "demoId": "nested-use"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/steps.json b/examples/docs/resources/pc/demo-config/en-US/steps.json
new file mode 100644
index 000000000..ec88f09eb
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/steps.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "steps/data-resource",
+ "component": "Steps",
+ "findIntroStr": "Steps",
+ "demoId": "data-resource"
+ },
+ {
+ "title": "Common Step Bar",
+ "content": "Use the tiny-time-line
tag and set type
to normal
to implement common steps.
\n",
+ "link": "steps/normal-steps",
+ "component": "Steps",
+ "findIntroStr": "Steps",
+ "demoId": "normal-steps"
+ },
+ {
+ "title": "Advanced Wizard",
+ "content": "Set type
to advanced
to enable the advanced wizard function.
\n",
+ "link": "steps/advanced-steps",
+ "component": "Steps",
+ "findIntroStr": "Steps",
+ "demoId": "advanced-steps"
+ },
+ {
+ "title": "Timeline Step Bar",
+ "content": "Use the tiny-time-line
tag and set type
to timeline
to implement the timeline step bar. If the vertical
attribute is configured, the timeline step bar changes to the vertical mode. If the reverse
attribute is configured, the timeline step bar changes to the vertical mode.
\n",
+ "link": "steps/timeline-steps",
+ "component": "Steps",
+ "findIntroStr": "Steps",
+ "demoId": "timeline-steps"
+ },
+ {
+ "title": "Customized Data Item",
+ "content": "By default, the subobjects of bound data contain the name, count, and status fields. \nname-field
: Set the field name corresponding to the name in the node information. The default value is'name'. \ncount-field
: field name corresponding to the logo count in the advanced wizard. The default value is'count'. \nstatus-field
: field name corresponding to the data status. The default value is status.
\n",
+ "link": "steps/custom-steps-item",
+ "component": "Steps",
+ "findIntroStr": "Steps",
+ "demoId": "custom-steps-item"
+ },
+ {
+ "title": "Order Process",
+ "content": "The Steps component is used to simulate the order process.
\n",
+ "link": "steps/order-progress",
+ "component": "Steps",
+ "findIntroStr": "Steps",
+ "demoId": "order-progress"
+ },
+ {
+ "title": "Click Event",
+ "content": "The click
event is triggered when a node is clicked.
\n",
+ "link": "steps/click",
+ "component": "Steps",
+ "findIntroStr": "Steps",
+ "demoId": "click"
+ },
+ {
+ "title": "Use of slots",
+ "content": "Customize the content of the step bar node through the scope slot item
.
\n",
+ "link": "steps/slot",
+ "component": "Steps",
+ "findIntroStr": "Steps",
+ "demoId": "slot"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/switch.json b/examples/docs/resources/pc/demo-config/en-US/switch.json
new file mode 100644
index 000000000..a4dbfbc66
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/switch.json
@@ -0,0 +1,42 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "switch/basic-usage",
+ "component": "Switch",
+ "findIntroStr": "Switch switches between the two states.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Mini Size",
+ "content": "For details, see the following example.",
+ "link": "switch/mini-mode",
+ "component": "Switch",
+ "findIntroStr": "Sets whether to display the mini mode. The default value is false. When `mini` is set to `true`, no text prompt is displayed.",
+ "demoId": "mini-mode"
+ },
+ {
+ "title": "Customized switch display",
+ "content": "Customize the switch display by opening and closing named slots. The prerequisite is that show-text
is set to true
",
+ "link": "switch/custom-open-close",
+ "component": "Switch",
+ "findIntroStr": "Customize the switch display through named slots open and close.",
+ "demoId": "custom-open-close"
+ },
+ {
+ "title": "User-defined switch value",
+ "content": "The false-value
property represents the value that is paid to false-value
when closed. \ntrue-value
The attribute represents the value paid to true-value
when enabled. If the attribute name defined in v-model is value
, the value in true-value
or false-value
can be obtained.
\n",
+ "link": "switch/custom-true-false-value",
+ "component": "Switch",
+ "findIntroStr": "Use the true-value and false-value attributes to set different values for the switch in the ON and OFF states.",
+ "demoId": "custom-true-false-value"
+ },
+ {
+ "title": "Disabled",
+ "content": "The disable
attribute indicates that the current state cannot be used. The default value is false (true/false).
\n",
+ "link": "switch/dynamic-disable",
+ "component": "Switch",
+ "findIntroStr": "Disable the switch through the disabled attribute.",
+ "demoId": "dynamic-disable"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/tabs.json b/examples/docs/resources/pc/demo-config/en-US/tabs.json
new file mode 100644
index 000000000..fa49af3f4
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/tabs.json
@@ -0,0 +1,146 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": " uses v-model
to set the initial activated tab page. The bound value corresponds to the value of the name
attribute in the tiny-tab-item
element. A tiny-tab-item
is a tab. You can use the title
attribute to set the tab title.
\n",
+ "link": "tabs/basic-usage",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "card type",
+ "content": "Use tab-style
to set the tab style type and active-name
to set the initially activated tab.
\n",
+ "link": "tabs/tab-style-card",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "tab-style-card"
+ },
+ {
+ "title": "bordercard type",
+ "content": "Use tab-style
to set the tab style type to bordercard
.
\n",
+ "link": "tabs/tab-style-bordercard",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "tab-style-bordercard"
+ },
+ {
+ "title": "The tab page can be added.",
+ "content": "Set the with-add
attribute to enable tags to add functions. In addition, the add
event is used to customize the logic for adding tabs. After the show-more-tabs
attribute is configured, the More
button is displayed when the tab page exceeds a certain width.
\n",
+ "link": "tabs/with-add",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "with-add"
+ },
+ {
+ "title": "The tab page can be closed.",
+ "content": "The withClose
attribute specifies whether the tab page can be closed. In addition, the close
event can be used to customize the logic for closing the tab page.
\n",
+ "link": "tabs/tabs-events-close",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "tabs-events-close1"
+ },
+ {
+ "title": "top display position",
+ "content": "Set the display position of the tab page through the position
attribute. The options are top
, right
, bottom
, and left
. The default value is top
.
\n",
+ "link": "tabs/position",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "position"
+ },
+ {
+ "title": "Display on the right",
+ "content": "For details, see the following example.",
+ "link": "tabs/position-right",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "position-right"
+ },
+ {
+ "title": "Display below",
+ "content": "For details, see the following example.",
+ "link": "tabs/position-bottom",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "position-bottom"
+ },
+ {
+ "title": "Display on the left",
+ "content": "For details, see the following example.",
+ "link": "tabs/position-left",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "position-left"
+ },
+ {
+ "title": "Event Before Leaving",
+ "content": "The hook function before before-leave
switches the label. If false or Promise is returned and rejected, the switchover is blocked. If true is returned, the switchover is allowed.
\n",
+ "link": "tabs/before-leave",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "before-leave"
+ },
+ {
+ "title": "Automatically open",
+ "content": "The stretch
property specifies whether the width of a label is self-expanded. The default value is false.
\n",
+ "link": "tabs/stretch-wh",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "stretch-wh"
+ },
+ {
+ "title": "add event",
+ "content": "The add
event is triggered when the Add button is clicked to add a tab page
\n",
+ "link": "tabs/tabs-events-add",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "tabs-events-add"
+ },
+ {
+ "title": "click event",
+ "content": "The click
event is triggered when a tab page is clicked
\n",
+ "link": "tabs/tabs-events-click",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "tabs-events-click"
+ },
+ {
+ "title": "close event",
+ "content": "The close
event is triggered when a tab page is closed
\n",
+ "link": "tabs/tabs-events-close",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "tabs-events-close"
+ },
+ {
+ "title": "edit Event",
+ "content": "The edit
event is triggered after you click Add to add a tab page or the tab page is closed
\n",
+ "link": "tabs/tabs-events-edit",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "tabs-events-edit"
+ },
+ {
+ "title": "Custom Tab Title",
+ "content": "Customize the title of the tab page through the title
slot of the tiny-tab-item
, for example, add an icon before the title.
\n",
+ "link": "tabs/custom-tab-title",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "custom-tab-title"
+ },
+ {
+ "title": "Creating tab pages cyclically",
+ "content": "Creates multiple tiny-tab-items
based on the data loop through v-for
.
\n",
+ "link": "tabs/tabdata-title",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "tabdata-title"
+ },
+ {
+ "title": "Switching a tab page to a grid",
+ "content": "Using the Grid component in the \nTabs component requires the Grid to set the :auto-resize="true"
property so that the Grid can adapt to changes in the parent element.
\n
\n",
+ "link": "tabs/show-different-grid-data",
+ "component": "Tabs tab",
+ "findIntroStr": "Separates data sets that are associated with content but belong to different categories.",
+ "demoId": "show-different-grid-data"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/tag.json b/examples/docs/resources/pc/demo-config/en-US/tag.json
new file mode 100644
index 000000000..864420dc5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/tag.json
@@ -0,0 +1,74 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "tag/basic-usage",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Color",
+ "content": "You can use color
to set the background color of a label.
\n",
+ "link": "tag/color3",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "color3"
+ },
+ {
+ "title": "Border",
+ "content": "You can use hit
to set the label border. The options are true and false. The default value is false.
\n",
+ "link": "tag/hit",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "hit"
+ },
+ {
+ "title": "Dimension",
+ "content": "You can use size
to set the tag size. The value can be medium, small, or mini.
\n",
+ "link": "tag/tag-size",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "tag-size"
+ },
+ {
+ "title": "Subject",
+ "content": "You can use effect
to set the tag theme. The value can be dark, light, or plain. \ntype
You can set the corresponding type for the tag. The options are success, info, warning, and danger.
\n",
+ "link": "tag/effect",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "effect"
+ },
+ {
+ "title": "Dynamic Edit Tag",
+ "content": "Click + New Tag
and enter the tag name in the text box to create the last tag in the tag list. The closable
attribute can be set to removeable tags for tags.
\n",
+ "link": "tag/create",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "create"
+ },
+ {
+ "title": "Removable Label",
+ "content": "For details, see the following example.",
+ "link": "tag/closeable",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "closeable"
+ },
+ {
+ "title": "Click Event",
+ "content": "For details, see the following example.",
+ "link": "tag/tag-event-click",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "tag-event-click"
+ },
+ {
+ "title": "Close Event",
+ "content": "For details, see the following example.",
+ "link": "tag/tag-event-close",
+ "component": "Tag",
+ "findIntroStr": "Tag tag component, used to mark transaction attributes and dimensions",
+ "demoId": "tag-event-close"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/textpopup.json b/examples/docs/resources/pc/demo-config/en-US/textpopup.json
new file mode 100644
index 000000000..76f5427cd
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/textpopup.json
@@ -0,0 +1,58 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "text-popup/basic-usage",
+ "component": "TextPopup text box",
+ "findIntroStr": "TextPopup text box, which provides the data binding function.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Prompt Placeholder Text",
+ "content": "The value of the placeholder
attribute is string
. This attribute displays the value in the text box by default.
\n",
+ "link": "text-popup/placeholder",
+ "component": "TextPopup text box",
+ "findIntroStr": "TextPopup text box, which provides the data binding function.",
+ "demoId": "placeholder"
+ },
+ {
+ "title": "Read-only",
+ "content": "You can use readonly
to set whether to read only.
\n",
+ "link": "text-popup/readonly",
+ "component": "TextPopup text box",
+ "findIntroStr": "TextPopup text box, which provides the data binding function.",
+ "demoId": "readonly"
+ },
+ {
+ "title": "Separator",
+ "content": "You can use separtor
to set the separator. Enter the position of the separator in the text box and press Enter.
\n",
+ "link": "text-popup/separtor",
+ "component": "TextPopup text box",
+ "findIntroStr": "TextPopup text box, which provides the data binding function.",
+ "demoId": "separtor"
+ },
+ {
+ "title": "Bound Value",
+ "content": "You can set the binding value using value
or v-model
.
\n",
+ "link": "text-popup/value",
+ "component": "TextPopup text box",
+ "findIntroStr": "TextPopup text box, which provides the data binding function.",
+ "demoId": "value"
+ },
+ {
+ "title": "Clear value",
+ "content": "For details, see the following example.",
+ "link": "text-popup/clear-value",
+ "component": "TextPopup text box",
+ "findIntroStr": "TextPopup text box, which provides the data binding function.",
+ "demoId": "clear-value"
+ },
+ {
+ "title": "Width",
+ "content": "You can set the width through width
.
\n",
+ "link": "text-popup/width",
+ "component": "TextPopup text box",
+ "findIntroStr": "TextPopup text box, which provides the data binding function.",
+ "demoId": "width"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/time-line.json b/examples/docs/resources/pc/demo-config/en-US/time-line.json
new file mode 100644
index 000000000..04631cad6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/time-line.json
@@ -0,0 +1,98 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "Use the data
attribute to set the timeline step bar data, and use the active
attribute to set the selected step of the step bar.
\n",
+ "link": "time-line/basic-usage",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "horizontal timeline",
+ "content": "Set the horizontal timeline through the horizontal
attribute.
\n",
+ "link": "time-line/horizontal-step",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "horizontal-step"
+ },
+ {
+ "title": "Vertical Timeline",
+ "content": "Use the vertical
attribute to set the vertical timeline.
\n",
+ "link": "time-line/vertical-step",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "vertical-step"
+ },
+ {
+ "title": "Direction of the vertical timeline",
+ "content": "Sets the direction of the vertical step bar through the reverse
attribute.
\n",
+ "link": "time-line/vertical-step-reverse",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "vertical-step-reverse"
+ },
+ {
+ "title": "Width Setting",
+ "content": "Use the space
attribute to set the width of the step bar.
\n",
+ "link": "time-line/set-step-width",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "set-step-width"
+ },
+ {
+ "title": "Data Mapping",
+ "content": "The name-field
attribute is used to set the field name corresponding to the node name in the node information, and the time-field
attribute is used to set the field name corresponding to the node time information.
\n",
+ "link": "time-line/different-data",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "different-data"
+ },
+ {
+ "title": "Set the start value of the sequence number",
+ "content": "Set the start step sequence number through the start
attribute.
\n",
+ "link": "time-line/set-start-value",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "set-start-value"
+ },
+ {
+ "title": "Display the internal status of a component.",
+ "content": "The show-status
attribute is used to set whether to display the internal status of a component. The default value is false
, indicating that the parameter is not displayed.
\n",
+ "link": "time-line/show-status",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "show-status"
+ },
+ {
+ "title": "Unfinished Sequence Number Display",
+ "content": "The show-number
attribute is used to set whether to display sequence numbers for uncompleted states.
\n",
+ "link": "time-line/show-number",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "show-number"
+ },
+ {
+ "title": "Customizing a Horizontal Timeline",
+ "content": "If slot
is top
, you can customize the top content of the step bar. If
slot
is slot
, you can customize the bottom content of the step bar.
\n",
+ "link": "time-line/custom-normal-step",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "custom-normal-step"
+ },
+ {
+ "title": "Customized Vertical Timeline",
+ "content": "If slot
is set to left
, you can customize the content on the left of the step bar. If
slot
is set to right
, you can customize the content on the right of the step bar.
\n",
+ "link": "time-line/custom-vertical-step",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "custom-vertical-step"
+ },
+ {
+ "title": "click event",
+ "content": "The click event is triggered upon a click
\n",
+ "link": "time-line/vertical-step-reverse",
+ "component": "TimeLine",
+ "findIntroStr": "TimeLine",
+ "demoId": "vertical-step-reverse1"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/time-picker.json b/examples/docs/resources/pc/demo-config/en-US/time-picker.json
new file mode 100644
index 000000000..f24d35d6d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/time-picker.json
@@ -0,0 +1,146 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "time-picker/basic-usage",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Selection Range",
+ "content": "picker-options Set the time range
\n",
+ "link": "time-picker/basic-usage",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "basic-usage1"
+ },
+ {
+ "title": "Arrow Selection",
+ "content": "The arrow-control
property specifies whether to use the arrow to select the time. This property is valid only for <tiny-time-picker>
.
\n",
+ "link": "date-picker/clearable",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "clearable1"
+ },
+ {
+ "title": "Clear Input",
+ "content": "Clear the icon by clear-icon
\n",
+ "link": "time-picker/clear-icon",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "clear-icon"
+ },
+ {
+ "title": "Size setting medium",
+ "content": "Customize the group price size by size
\n",
+ "link": "time-picker/size-medium",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "size-medium"
+ },
+ {
+ "title": "Size setting small",
+ "content": "Customize the group price size by size
\n",
+ "link": "time-picker/size-small",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "size-small"
+ },
+ {
+ "title": "Size setting mini",
+ "content": "Customize the group price size by size
\n",
+ "link": "time-picker/size-mini",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "size-mini"
+ },
+ {
+ "title": "Clear button",
+ "content": "Use the clearable
attribute to set whether to display the Clear button. The default value is true
\n",
+ "link": "time-picker/clearable",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "clearable"
+ },
+ {
+ "title": "Customized rear icon",
+ "content": " uses the suffix-icon
attribute to set the icon behind the date text box. An icon is imported from the @opentiny/vue-icon
, initialized, and transferred to the suffix-icon
.
\n",
+ "link": "time-picker/suffix-icon",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "suffix-icon"
+ },
+ {
+ "title": "Time Format",
+ "content": "The format
time format is displayed. \ntimestamp
JS timestamp is available only in value-format. The component binding value is of the number type
\n",
+ "link": "time-picker/format",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "format"
+ },
+ {
+ "title": "Time display type",
+ "content": "You can set the 12-hour format through the hh
attribute. The HH
attribute is in the 24-hour format and must be used with A or a. The h
and H
attributes are not set to 0. \nYou can use the mm
attribute to set the minute display format, for example, 01. The m
attribute is not set to 0. \nYou can use the ss
attribute to set the display format of seconds, for example, 01. The s
attribute is not set to 0. \nThe a
property can be used to set the display time to am/pm A
property can be used to set the display time to AM/PM.
\n",
+ "link": "time-picker/time-low",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "time-low"
+ },
+ {
+ "title": "Date Display Format",
+ "content": "The WW
attribute is set to week, for example, 01. The W
attribute is set to zeros. \nyyyy
The attribute sets the year, for example, 2020. \nMM
: month. For example, 01 M
: 0 is not added. \ndd
attribute setting date, for example, 01 d
.
\n",
+ "link": "time-picker/date",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "date"
+ },
+ {
+ "title": "Range Selection",
+ "content": "is-range
: indicates whether to select a range. The default value is false. range-separator
. Set the range-separator (optional) to '-' by default.
\n",
+ "link": "time-picker/is-range",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "is-range"
+ },
+ {
+ "title": "Default time setting when the selector is enabled",
+ "content": "Use default-value
to set the selector to open the default display time
\n",
+ "link": "time-picker/default-value",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "default-value"
+ },
+ {
+ "title": "Native Attribute",
+ "content": "Set the default name through the name
attribute
\n",
+ "link": "time-picker/name",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "name"
+ },
+ {
+ "title": "Class name of the drop-down list box",
+ "content": "Set the class name of the drop-down list box through the popper-class
attribute
\n",
+ "link": "time-picker/popper-class",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "The text box cannot be entered.",
+ "content": "By default, you can enter a date in the Date text box. If you set editable
to false, you cannot enter a date in the
Date text box.
\n",
+ "link": "time-picker/editable",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "editable"
+ },
+ {
+ "title": "Event",
+ "content": "When focusing or out of focus, the focus and bulr events are triggered. When the selected value is determined, the change event is triggered.
\n",
+ "link": "time-picker/event-blur",
+ "component": "TimePicker Time Selector",
+ "findIntroStr": "This command is used to set or select a date, including the date format of year, month, month, day, hour, minute, and second.",
+ "demoId": "event-blur"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/time-select.json b/examples/docs/resources/pc/demo-config/en-US/time-select.json
new file mode 100644
index 000000000..9caf1c711
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/time-select.json
@@ -0,0 +1,130 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "time-select/basic-usage",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Fixed Time Range",
+ "content": "For details, see the following example.",
+ "link": "time-select/range-placeholder",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "range-placeholder"
+ },
+ {
+ "title": "Default time setting when the selector is enabled",
+ "content": "Use default-value
to set the selector to open the default display time
\n",
+ "link": "time-select/default-value",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "default-value"
+ },
+ {
+ "title": "Specified time point",
+ "content": "picker-options Set Time
\n",
+ "link": "time-select/picker-options",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "picker-options"
+ },
+ {
+ "title": "Rear icon",
+ "content": " uses the suffix-icon
attribute to set the icon behind the date text box. An icon is imported from the @opentiny/vue-icon
, initialized, and transferred to the suffix-icon
.
\n",
+ "link": "time-select/suffix-icon",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "suffix-icon"
+ },
+ {
+ "title": "Customized Clear Icon",
+ "content": "Clear the icon by clear-icon
\n",
+ "link": "time-select/clear-icon",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "clear-icon"
+ },
+ {
+ "title": "Display the Clear button",
+ "content": "For details, see the following example.",
+ "link": "time-select/clear-icon",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "clearable"
+ },
+ {
+ "title": "Native Attribute",
+ "content": "For details, see the following example.",
+ "link": "time-select/clear-icon",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "name"
+ },
+ {
+ "title": "Event",
+ "content": "Triggered when the focus
input frame is focused and when the input frame is out of focus
\n",
+ "link": "time-select/event-blur",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "event-blur"
+ },
+ {
+ "title": "The text box cannot be edited.",
+ "content": "By default, you can enter a date in the Date text box. If you set editable
to false, you cannot enter a date in the
Date text box.
\n",
+ "link": "time-select/editable",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "editable"
+ },
+ {
+ "title": "Disabled",
+ "content": "For details, see the following example.",
+ "link": "time-select/disabled",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "disabled"
+ },
+ {
+ "title": "Customized class name",
+ "content": "For details, see the following example.",
+ "link": "time-select/popper-class",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "mini size",
+ "content": "For details, see the following example.",
+ "link": "time-select/size-mini",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "size-mini"
+ },
+ {
+ "title": "small size",
+ "content": "For details, see the following example.",
+ "link": "time-select/size-small",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "size-small"
+ },
+ {
+ "title": "medium Size",
+ "content": "For details, see the following example.",
+ "link": "time-select/size-medium",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "size-medium"
+ },
+ {
+ "title": "Manually obtaining the focus",
+ "content": "For details, see the following example.",
+ "link": "time-select/focus",
+ "component": "TimeSelect Time Selector",
+ "findIntroStr": "The time selection box is a special case of the drop-down list box. The drop-down list box is displayed in the time division format (customized format is not supported). Some parameters in the drop-down list box can be extended.",
+ "demoId": "focus"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/toggle-menu.json b/examples/docs/resources/pc/demo-config/en-US/toggle-menu.json
new file mode 100644
index 000000000..d4c03a520
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/toggle-menu.json
@@ -0,0 +1,122 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "toggle-menu/basic-usage",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Icon on the left of the customized menu",
+ "content": "You can customize the icon on the left of the menu through the icon
attribute.
\n",
+ "link": "toggle-menu/custom-icon",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "custom-icon"
+ },
+ {
+ "title": "Customized menu data service",
+ "content": "You can customize the menu data service through get-menu-data-sync
.
\n",
+ "link": "toggle-menu/get-menu-data-sync",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "get-menu-data-sync"
+ },
+ {
+ "title": "props option mapping",
+ "content": "You can use props
to configure the mapping field. The default value of this attribute is {children:'children', label:'label', disabled:'disabled'}.
\n",
+ "link": "toggle-menu/toggle-props",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "toggle-props"
+ },
+ {
+ "title": "Custom Node Content",
+ "content": "Customize the node content through the node
slot.
\n",
+ "link": "toggle-menu/slot-node",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "slot-node"
+ },
+ {
+ "title": "All nodes are expanded by default.",
+ "content": "You can use the default-expand-all
attribute to set whether to expand all nodes by default, and use the expand-on-click-node
attribute to set whether to expand or collapse menus by clicking a node.
\n",
+ "link": "toggle-menu/default-expand-all",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "default-expand-all"
+ },
+ {
+ "title": "Drag Node",
+ "content": "You can use the draggable
attribute to set whether to enable the node drag function. The default value is false
. \nYou can use the ellipsis
property to set whether to enable the function of omitting the overlong text content. The default value is false
\n",
+ "link": "toggle-menu/draggable",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "draggable"
+ },
+ {
+ "title": "Display the filter search box.",
+ "content": "You can set the show-filter
attribute to determine whether to display the filter search box. The default value is true
. You can set it to false
not to display the filter search box.
\n",
+ "link": "toggle-menu/show-filter",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "show-filter"
+ },
+ {
+ "title": "Auto Filter",
+ "content": "You can set the placeholder of the text box through the placeholder
attribute. Use automatic-filtering
to set whether to automatically filter input data. The default value is true.
\n",
+ "link": "toggle-menu/automatic-filtering",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "automatic-filtering"
+ },
+ {
+ "title": "The content exceeds the line feed.",
+ "content": "For details, see the following example.",
+ "link": "toggle-menu/show-filter",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "show-filter1"
+ },
+ {
+ "title": "Node Click Event",
+ "content": "node-click
Event triggered after a node is clicked.
\n",
+ "link": "toggle-menu/node-click",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "node-click"
+ },
+ {
+ "title": "Expand Node Event",
+ "content": "Event triggered after the node-expand
expands a node.
\n",
+ "link": "toggle-menu/node-expand",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "node-expand"
+ },
+ {
+ "title": "Shrunk Node Event",
+ "content": "Event triggered after a node is scaled in by the node-collapse
.
\n",
+ "link": "toggle-menu/node-collapse",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "node-collapse"
+ },
+ {
+ "title": "Drag Node Event",
+ "content": "node-drop
: This event is triggered after a node is dragged and dropped. You need to set draggable
to true
.
\n",
+ "link": "toggle-menu/node-drop",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "node-drop"
+ },
+ {
+ "title": "Drag Event",
+ "content": "node-drag-start
: This event is triggered after a node is dragged. node-drag-enter
is triggered when a node is dragged to another node. node-drag-over
is triggered when a node is dragged. node-drag-leave
: This event is triggered when a node is dragged out. node-drag-end
: This event is triggered when a node is dragged out.
\n",
+ "link": "toggle-menu/drag-events",
+ "component": "ToggleMenu collapse menu",
+ "findIntroStr": "A component that is displayed in a tree structure and applicable to version customization. The menu can be collapsed. After the menu is collapsed, only icons are displayed. You can click icons to display sub-node menus.",
+ "demoId": "drag-events"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/tooltip.json b/examples/docs/resources/pc/demo-config/en-US/tooltip.json
new file mode 100644
index 000000000..ca9eb0c9b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/tooltip.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "tooltip/basic-usage",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Customized Gradient Animation",
+ "content": "Defines the gradient animation through transition
. The default value is tiny-fade-in-linear
\n",
+ "link": "tooltip/custom-transition",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "custom-transition"
+ },
+ {
+ "title": "Disabled",
+ "content": "Disabled
\n",
+ "link": "tooltip/dynamic-disable",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "Manual Control",
+ "content": "Manual control mode. After the manual
attribute is set to true, the mouseenter and mouseleave events do not take effect. You can then dynamically display and hide
\n by setting v-model
",
+ "link": "tooltip/manual-control-tip",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "manual-control-tip"
+ },
+ {
+ "title": "Intelligent Appearance Control",
+ "content": "Smart display mode of the prompt. When this parameter is set to auto
, the tooltip is displayed only when the text is too long.
\n",
+ "link": "tooltip/visible-show",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "visible-show"
+ },
+ {
+ "title": "Subject",
+ "content": "Use the effect
attribute to set the theme. The options are dark and light.
\n",
+ "link": "tooltip/tooltip-theme",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "tooltip-theme"
+ },
+ {
+ "title": "Auto hide and delay time",
+ "content": "Use the hide-after
attribute to set the automatic hiding delay after the Tooltip component appears, in milliseconds. If the value is 0, the Tooltip component is not automatically hidden. The open-delay
attribute is used to set the delay for the Tooltip component to appear, in milliseconds.
\n",
+ "link": "tooltip/open-delay",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "open-delay"
+ },
+ {
+ "title": "Offset",
+ "content": "Use the offset
attribute to set the offset of the position where the Tooltip component appears.
\n",
+ "link": "tooltip/tooltip-offset",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "tooltip-offset"
+ },
+ {
+ "title": "Whether the mouse can be accessed",
+ "content": "The enterable
attribute is used to set whether the mouse can access the tooltip.
\n",
+ "link": "tooltip/enterable",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "enterable"
+ },
+ {
+ "title": "Display arrow",
+ "content": "The visible-arrow
attribute is used to set whether to display the Tooltip arrow.
\n",
+ "link": "tooltip/visible-arrow",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "visible-arrow"
+ },
+ {
+ "title": "Add Style Class Name",
+ "content": "Add the class name for the popper of the Tooltip using the popper-class
attribute.
\n",
+ "link": "tooltip/popper-class",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "Slot",
+ "content": "Add custom content through the content
slot.
\n",
+ "link": "tooltip/tooltip-content",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "tooltip-content"
+ },
+ {
+ "title": "popper configuration",
+ "content": " uses the popper-options
attribute to configure the popper parameter of the Tooltip. For details, see popper.js
\n",
+ "link": "tooltip/popper-options",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "popper-options"
+ },
+ {
+ "title": "tabindex configuration",
+ "content": "By configuring tabindex
, the configured attributes are automatically added to the trigger source of the component.
\n",
+ "link": "tooltip/tabindex",
+ "component": "ToolTip text prompt",
+ "findIntroStr": "Dynamic display of prompt information, which is generally responded through mouse events.",
+ "demoId": "tabindex"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/transfer.json b/examples/docs/resources/pc/demo-config/en-US/transfer.json
new file mode 100644
index 000000000..de70a1a7d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/transfer.json
@@ -0,0 +1,162 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "The value
attribute is used for bidirectional binding. The specified value is the default value and is displayed in the list on the right. \n\nThe data
attribute provides the data source. It is an object array. The default fields in the object are key, label, and disabled.
\n",
+ "link": "transfer/basic-usage",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Data Source",
+ "content": "You can request the service to obtain data and assign the data to data
.
\n",
+ "link": "transfer/data-source",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "data-source"
+ },
+ {
+ "title": "Display All Move Buttons",
+ "content": "You can set the show-all-btn
attribute to display all mobile buttons.
\n",
+ "link": "transfer/show-all-btn",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "show-all-btn"
+ },
+ {
+ "title": "Customized List Title",
+ "content": "You can use the titles
attribute to customize the titles of the left and right lists.
\n",
+ "link": "transfer/custom-transfer-titles",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "custom-transfer-titles"
+ },
+ {
+ "title": "Custom Button Copywriting",
+ "content": "The button-texts
attribute is used to customize the left and right button text.
\n",
+ "link": "transfer/custom-button-texts",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "custom-button-texts"
+ },
+ {
+ "title": "Search box placeholder",
+ "content": "Customize the search box placeholder through the filter-placeholder
attribute.
\n",
+ "link": "transfer/filter-placeholder",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "filter-placeholder"
+ },
+ {
+ "title": "Custom Search Method",
+ "content": "Provides the filter-method
hook function to customize the search method.
\n",
+ "link": "transfer/custom-filter-method",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "custom-filter-method"
+ },
+ {
+ "title": "Default options",
+ "content": "Use the left-default-checked
and right-default-checked
attributes to specify the default selected data in the left and right lists.
\n",
+ "link": "transfer/default-checked",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "default-checked"
+ },
+ {
+ "title": "Customized Data Item Rendering",
+ "content": "Use render-content to customize data items
\n",
+ "link": "transfer/custom-render-content",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "custom-render-content"
+ },
+ {
+ "title": "Selected status copywriting at the top of the list",
+ "content": "After the format
attribute is specified, the ratio of the selected data to all data is displayed on the top of the left and right lists when data is selected.
\n",
+ "link": "transfer/checked-format-text",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "checked-format-text"
+ },
+ {
+ "title": "Searchable",
+ "content": "The filterable
attribute is used to enable the search function for the left and right lists.
\n",
+ "link": "transfer/filterable",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "filterable"
+ },
+ {
+ "title": "Field alias of the data source",
+ "content": "When a field in a data object is inconsistent with the default value, the props
attribute can be used for mapping.
\n",
+ "link": "transfer/props-of-data-source",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "props-of-data-source"
+ },
+ {
+ "title": "Right Sorting Policy",
+ "content": "Use the target-order
attribute to set the sorting policy of the elements in the list on the right. The options are original, push, and unshift. The default value is original.
\n Sorting Policy
\n
If the value is original, the sequence of the data source is the same as that of the data source.\nIf the value is push, the newly added elements are ranked last.\nIf the value is unshift, the newly added elements are ranked first
\n
\n",
+ "link": "transfer/target-order",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "target-order"
+ },
+ {
+ "title": "Drag left and right",
+ "content": "Before using the drag-and-drop function for the , install the sortablejs plug-in. The
\n
\n uses the drop-config attribute to configure the sortablejs plug-in.
\n",
+ "link": "transfer/drop-config",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "drop-config"
+ },
+ {
+ "title": "Shuttle Box Event",
+ "content": "There are three events: change
, left-check-change
, and right-check-change
.
\n Event Description
\n
change: Triggered when an element in the list on the right changes.\nleft-check-change: Triggered when an element in the list on the left is selected or deselected.\nright-check-change: Triggered when an element in the list on the right is selected or deselected",
+ "link": "transfer/transfer-events",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "transfer-events"
+ },
+ {
+ "title": "Clear the search box manually",
+ "content": "
Invoke the clearQuery()
method to clear the search boxes in the left and right lists. The parameter is left or right.
\n",
+ "link": "transfer/manual-clear-query",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "manual-clear-query"
+ },
+ {
+ "title": "Custom List Bottom",
+ "content": "
You can customize the bottom of the left and right lists through the left-footer
and right-footer
slots.
\n",
+ "link": "transfer/custom-footer",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "custom-footer"
+ },
+ {
+ "title": "Panel Slot",
+ "content": "
You can use left-panel
and right-panel
to customize the contents of the left and right panels. Use button
to customize the shuttle button
\n",
+ "link": "transfer/panel-slot",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "panel-slot"
+ },
+ {
+ "title": "Nested Table",
+ "content": "
When plugin
in the render
attribute is set to Table
, the shuttle box is rendered as a table. For details, see the configuration of the grid
component.
\n",
+ "link": "transfer/nested-table",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "nested-table"
+ },
+ {
+ "title": "Nested Tree",
+ "content": "
When plugin
in the render
attribute is set to Tree
, the shuttle box is rendered as a tree. Configure tree-related configurations through the treeConfig
attribute. (For details, see the configuration of the tree
component.)
\n",
+ "link": "transfer/nested-tree",
+ "component": "Transfer shuttle box",
+ "findIntroStr": "Shuttle box, which provides bidirectional selection of table data.",
+ "demoId": "nested-tree"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/tree-menu.json b/examples/docs/resources/pc/demo-config/en-US/tree-menu.json
new file mode 100644
index 000000000..6738c15a6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/tree-menu.json
@@ -0,0 +1,186 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "
If no data is configured, data is read from the framework service by default.
\n",
+ "link": "tree-menu/basic-usage",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Data Source",
+ "content": "
Set the data of the tree menu through data
.
\n",
+ "link": "tree-menu/data-resource",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "data-resource"
+ },
+ {
+ "title": "Custom Menu Service Data",
+ "content": "
Customize menu service data through get-menu-data-sync
and directly return data.
\n",
+ "link": "tree-menu/get-menu-data-sync",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "get-menu-data-sync"
+ },
+ {
+ "title": "Excessive Text Omission",
+ "content": "
You can use ellipsis
to configure that the menu text is displayed as an ellipsis when it is too long. Use prefix-icon
to customize the front icon.
\n",
+ "link": "tree-menu/text-ellipsis",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "text-ellipsis"
+ },
+ {
+ "title": "Excessive text is displayed in a new line.",
+ "content": "
You can use wrap
to configure that the menu text is displayed in a new line when the menu text is too long. The showTitle attribute is used to configure whether to display the title. The default value is true. \nYou can use show-filter
to configure whether to display the search filter box. The default value is true. \nYou can use show-title
to configure whether to display the title. The default value is true.
\n",
+ "link": "tree-menu/text-wrap",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "text-wrap"
+ },
+ {
+ "title": "The parent and child levels are not associated.",
+ "content": "
The check-strictly
is not associated with the parent and child levels. This parameter must be used together with show-checkbox
.
\n",
+ "link": "tree-menu/check-strictly",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "check-strictly"
+ },
+ {
+ "title": "A node is expanded by default.",
+ "content": "
Initially expand a node by setting default-expanded-keys
.
\n",
+ "link": "tree-menu/default-expanded-keys",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "default-expanded-keys"
+ },
+ {
+ "title": "Lazy loading subnode",
+ "content": "
You can use lazy
to determine whether to lazy load subnodes. This method must be used together with the load method.
\n",
+ "link": "tree-menu/lazy-load",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "lazy-load"
+ },
+ {
+ "title": "Search Rule Configuration",
+ "content": "
You can configure filter-node-method
to configure the search rule. Fuzzy match is used by default. The following is an example of exact configuration.
\n",
+ "link": "tree-menu/filter-node-method",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "filter-node-method"
+ },
+ {
+ "title": "All menus are displayed by default.",
+ "content": "
You can set the default-expand-all
attribute to expand all menus by default. \n This parameter is selected by default through the default-checked-keys
attribute. This parameter must be used together with show-checkbox
, node-key
.
\n",
+ "link": "tree-menu/default-expand-all",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "default-expand-all"
+ },
+ {
+ "title": "Customized empty data text",
+ "content": "
You can use the empty-text
attribute to configure the empty data display text.
\n",
+ "link": "tree-menu/empty-text",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "empty-text"
+ },
+ {
+ "title": "Drag Menu",
+ "content": "
You can drag menus by setting the attribute draggable
.
\n",
+ "link": "tree-menu/can-draggable",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "can-draggable"
+ },
+ {
+ "title": "Drag menu callback event",
+ "content": "
Drag menu callback event, which is used together with draggable
.
\n",
+ "link": "tree-menu/event-allow-draggable",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "event-allow-draggable"
+ },
+ {
+ "title": "Event triggered when a node is expanded",
+ "content": "
Event triggered when a node is expanded
\n",
+ "link": "tree-menu/event-node-expand",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "event-node-expand"
+ },
+ {
+ "title": "Event triggered when a node is shut down",
+ "content": "
Event triggered when a node is closed
\n",
+ "link": "tree-menu/event-node-collapse",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "event-node-collapse"
+ },
+ {
+ "title": "Callback when the node selection status changes",
+ "content": "
Callback when the node selection status changes
\n",
+ "link": "tree-menu/event-check-change",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "event-check-change"
+ },
+ {
+ "title": "Click the text to expand the menu.",
+ "content": "
You can click the text to expand the submenu through the expand-on-click-node
attribute.
\n",
+ "link": "tree-menu/expand-on-click-node",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "expand-on-click-node"
+ },
+ {
+ "title": "horizontal indent",
+ "content": "
You can use the indent
attribute to control the horizontal indentation distance of a child relative to a parent menu. The unit is px.
\n",
+ "link": "tree-menu/tree-menu-indent",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "tree-menu-indent"
+ },
+ {
+ "title": "Accordance",
+ "content": "
Set the accordion effect through accordion
.
\n",
+ "link": "tree-menu/accordion",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "accordion"
+ },
+ {
+ "title": "Node can be selected",
+ "content": "
The show-checkbox
attribute can be configured to determine whether the node can be selected.
\n",
+ "link": "tree-menu/show-checkbox",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode, which is applicable to a component of version customization.",
+ "demoId": "show-checkbox"
+ },
+ {
+ "title": "Custom search icon",
+ "content": "
The search-icon
attribute can be configured to customize the search icon
\n",
+ "link": "tree-menu/search-icon",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "search-icon"
+ },
+ {
+ "title": "Slot",
+ "content": "
You can configure the default scope slot to display the menu content.
\n",
+ "link": "tree-menu/tree-menu-slot",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "tree-menu-slot"
+ },
+ {
+ "title": "Event",
+ "content": "
current-change
Event triggered when the selected node changes.
\n",
+ "link": "tree-menu/event-current-change",
+ "component": "TreeMenu",
+ "findIntroStr": "The menu is displayed in tree mode and is applicable to a component of version customization.",
+ "demoId": "event-current-change"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/tree.json b/examples/docs/resources/pc/demo-config/en-US/tree.json
new file mode 100644
index 000000000..5f3a12045
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/tree.json
@@ -0,0 +1,266 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "tree/basic-usage",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Data Source",
+ "content": "
You can configure the data
attribute to set the data source. You can configure the static data source and dynamic data source.
\n",
+ "link": "tree/data-source",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "data-source"
+ },
+ {
+ "title": "Disabled",
+ "content": "
The data source contains disabled: true
, which is automatically disabled during rendering.
\n",
+ "link": "tree/disable-node",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "disable-node"
+ },
+ {
+ "title": "Customized empty data text",
+ "content": "
Configure template #empty
Set the user-defined empty data text.
\n",
+ "link": "tree/custom-empty-text",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "custom-empty-text"
+ },
+ {
+ "title": "Render after expansion",
+ "content": "
Configure the render-after-expand
attribute to set whether to render data after expansion. The default value is true
.
\n",
+ "link": "tree/render-after-expand",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "render-after-expand"
+ },
+ {
+ "title": "Unique ID",
+ "content": "
Use the node-key
attribute to set the unique ID.
\n
You need to set the unique ID of a node for operations such as selecting, obtaining, adding, and deleting a node.
",
+ "link": "tree/node-key",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "node-key"
+ },
+ {
+ "title": "The parent and child are not associated with each other.",
+ "content": "
The check-strictly
attribute is used to set the parent and child levels to No.
\n",
+ "link": "tree/check-strictly",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "check-strictly"
+ },
+ {
+ "title": "All nodes are expanded by default.",
+ "content": "
Use the default-expand-all
property to set all nodes to be expanded by default.
\n",
+ "link": "tree/default-expand-all",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "default-expand-all"
+ },
+ {
+ "title": "Click to expand and collapse a node.",
+ "content": "
You can set the expand-on-click-node
attribute to expand or collapse a node when you click the node content.
\n",
+ "link": "tree/expand-on-click-node",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "expand-on-click-node"
+ },
+ {
+ "title": "Selected when clicking a node",
+ "content": "
You can select or deselect data by setting the check-on-click-node
attribute. \n The icon-trigger-click-node
attribute is used to determine whether to trigger the node-click event when you click an icon. The default value is true.
\n",
+ "link": "tree/check-on-click-node",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "check-on-click-node"
+ },
+ {
+ "title": "Automatically Expand Parent Node",
+ "content": "
Indicates whether to display the parent node based on the auto-expand-parent
attribute. The default value is true
.
\n",
+ "link": "tree/auto-expand-parent",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "auto-expand-parent"
+ },
+ {
+ "title": "Nodes selected by default",
+ "content": "
The default-checked-keys
attribute is used to set the selected data by default.
\n",
+ "link": "tree/default-checked-keys",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "default-checked-keys"
+ },
+ {
+ "title": "The specified node is expanded by default.",
+ "content": "
Set the default expanded node through the default-expanded-keys
attribute.
\n",
+ "link": "tree/default-expanded-keys",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "default-expanded-keys"
+ },
+ {
+ "title": "Currently selected node flag",
+ "content": "
Use current-node-key
to set the flag of the currently selected node. It must be used together with node-key="id".
\n",
+ "link": "tree/current-node-key",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "current-node-key"
+ },
+ {
+ "title": "Default slot",
+ "content": "
You can customize the content of a tree node through the default
slot. The parameter is {node, data}.
\n",
+ "link": "tree/slot-deffault",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "slot-deffault"
+ },
+ {
+ "title": "Customized content area rendering",
+ "content": "
Sets the customized content through the render-content
attribute.
\n",
+ "link": "tree/render-content",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "render-content"
+ },
+ {
+ "title": "Whether to enable the multi-choice mode",
+ "content": "
The show-checkbox
attribute is used to set whether a node can be selected. The default value is false
.
\n",
+ "link": "tree/show-checkbox",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "show-checkbox"
+ },
+ {
+ "title": "Dragable Node",
+ "content": "
The draggable
attribute is used to set whether a node can be dragged.
\n",
+ "link": "tree/node-draggable",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "node-draggable"
+ },
+ {
+ "title": "Whether a customized node can be dragged",
+ "content": "
The allow-drag
hook function is used to determine whether a node can be dragged. If the return value is false
, the node cannot be dragged.
\n",
+ "link": "tree/allow-drag",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "allow-drag"
+ },
+ {
+ "title": "Whether the customized target node can be placed",
+ "content": "
The allow-drop
attribute is used to determine whether the target node can be placed during dragging. The type parameter has three cases:'prev','inner', and'next', indicating that the parameter is placed before, inserted into, and placed after the target node, respectively.
\n",
+ "link": "tree/allow-drop",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "allow-drop"
+ },
+ {
+ "title": "Data Node Attribute Configuration",
+ "content": "
Sets the data node attribute through the props
attribute. The default value of this attribute is {children:'children', label:'label', disabled:'disabled'}
.
\n",
+ "link": "tree/node-props-config",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "node-props-config"
+ },
+ {
+ "title": "Lazy loading subnode",
+ "content": "
The lazy
attribute is used to set whether to lazy load subnodes. It must be used together with the load
method. The default value is false
.
\n",
+ "link": "tree/lazy-load-node",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "lazy-load-node"
+ },
+ {
+ "title": "Highlight the selected node",
+ "content": "
The highlight-current
attribute is used to highlight the selected node.
\n",
+ "link": "tree/highlight-current",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "highlight-current"
+ },
+ {
+ "title": "Filter Node",
+ "content": "
Set the node filtering method through the filter-node-method
attribute.
\n",
+ "link": "tree/filter-node",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "filter-node"
+ },
+ {
+ "title": "Accordion Mode",
+ "content": "
The accordion
attribute is used to set whether to open only one tree node at the same level at a time (in accordion mode). The default value is false
.
\n",
+ "link": "tree/accordion-mode",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "accordion-mode"
+ },
+ {
+ "title": "horizontal indent",
+ "content": "
The indent
attribute is used to control the horizontal indentation distance. The unit is px
. The default value is 18px
.
\n",
+ "link": "tree/indent",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "indent"
+ },
+ {
+ "title": "Customize the expansion and collapse icon",
+ "content": "
Use the icon
attribute to set the tree node expansion and collapse icon, import an icon from the @opentiny/vue-icon
, initialize the icon, and transfer the icon to the icon
attribute.
\n",
+ "link": "tree/custom-node-icon",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "custom-node-icon"
+ },
+ {
+ "title": "Expand and collapse icons and set them separately",
+ "content": "
Use the expandIcon
attribute to set the expanded icon, and use the shrinkIcon
attribute to set the collapsed icon.
\n",
+ "link": "tree/set-tree-icon",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "set-tree-icon"
+ },
+ {
+ "title": "You can customize the shortcut menu content.",
+ "content": "
The show-contextmenu
attribute is used to set whether to enable the shortcut menu of the pop-up window. The closeMenu
method of the instance can be invoked to close the customized menu.
\n",
+ "link": "tree/contextmenu",
+ "component": "Tree control",
+ "findIntroStr": "The customized menu is displayed after you right-click a node.",
+ "demoId": "contextmenu"
+ },
+ {
+ "title": "Drag Node Event",
+ "content": "For details, see the following example.",
+ "link": "tree/drag-events",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "drag-events"
+ },
+ {
+ "title": "Node Selection Event",
+ "content": "For details, see the following example.",
+ "link": "tree/node-events",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "node-events"
+ },
+ {
+ "title": "Event of right-clicking a node",
+ "content": "For details, see the following example.",
+ "link": "tree/node-contextmenu",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "node-contextmenu"
+ },
+ {
+ "title": "Single Choice",
+ "content": "
uses the show-radio
attribute to set the single-choice feature of the tree node. The default value is false
. This attribute and the show-checkbox
attribute are mutually exclusive. Cannot be set to true
at the same time.
\n",
+ "link": "tree/single-select-radio",
+ "component": "Tree control",
+ "findIntroStr": "Data with parent and child levels can be displayed. Functions such as selection and asynchronous loading are supported. However, it is not recommended to display menus. It is recommended to display menus using tree menus.",
+ "demoId": "single-select-radio"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/en-US/user-account.json b/examples/docs/resources/pc/demo-config/en-US/user-account.json
new file mode 100644
index 000000000..e4a87d0b1
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/user-account.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "user-account/basic-usage",
+ "component": "UserAccount User Account",
+ "findIntroStr": "User account component, which is used to display user accounts, log out, and customize functions.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Custom Service",
+ "content": "
Setting a Custom Service
\n",
+ "link": "user-account/custom-service",
+ "component": "UserAccount User Account",
+ "findIntroStr": "User account component, which is used to display user accounts, log out, and customize functions.",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "Custom Function",
+ "content": "
Customize functions by default slot
\n",
+ "link": "user-account/custom-operation",
+ "component": "UserAccount User Account",
+ "findIntroStr": "User account component, which is used to display user accounts, log out, and customize functions.",
+ "demoId": "custom-operation"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/user-contact.json b/examples/docs/resources/pc/demo-config/en-US/user-contact.json
new file mode 100644
index 000000000..7b7b8bd1a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/user-contact.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "user-contact/basic-usage",
+ "component": "UserContact",
+ "findIntroStr": "UserContact component, which displays the user account and basic contact information, including the user description, avatar, and name. Any combination of the three elements.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Set Data Source",
+ "content": "
You can use data
to set the data source. imgUrl
indicates the image path, and userName
indicates the name. userDescription
indicates the user description.
\n",
+ "link": "user-contact/data-source",
+ "component": "UserContact",
+ "findIntroStr": "UserContact component, which displays the user account and basic contact information, including the user description, avatar, and name. Any combination of the three elements.",
+ "demoId": "data-source"
+ },
+ {
+ "title": "Customize the content that is not displayed in the dialog box.",
+ "content": "
Customize the content that is not displayed in the dialog box.\nshow-img
Indicates whether to display the avatar. The value true indicates that the avatar is displayed. The value false indicates that the avatar is hidden. The default value is true. \nshow-name
Indicates whether to display the name. The value true indicates that the name is displayed, and the value false indicates that the name is hidden. The default value is true. \nshow-description
Indicates whether to display the user description. If the value is true, the user description is displayed. If the value is false, the user description is hidden. The default value is true.
\n",
+ "link": "user-contact/not-displayed-content",
+ "component": "UserContact",
+ "findIntroStr": "UserContact component, which displays the user account and basic contact information, including the user description, avatar, and name. Any combination of the three elements.",
+ "demoId": "not-displayed-content"
+ },
+ {
+ "title": "Customize the default slot",
+ "content": "For details, see the following example.",
+ "link": "user-contact/slots-usercontact",
+ "component": "UserContact",
+ "findIntroStr": "UserContact component, which displays the user account and basic contact information, including the user description, avatar, and name. Any combination of the three elements.",
+ "demoId": "slots-usercontact"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/user-head.json b/examples/docs/resources/pc/demo-config/en-US/user-head.json
new file mode 100644
index 000000000..a85ae0138
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/user-head.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "For details, see the following example.",
+ "link": "user-head/basic-usage",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Avatar",
+ "content": "
You can use min
to set a small avatar.
\n",
+ "link": "user-head/min-user-head",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "min-user-head"
+ },
+ {
+ "title": "Round Head",
+ "content": "
You can use round
to set a round avatar.
\n",
+ "link": "user-head/round-user-head",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "round-user-head"
+ },
+ {
+ "title": "Avatar",
+ "content": "
You can use type="label"
to set the text avatar.
\n",
+ "link": "user-head/label-user-head",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "label-user-head"
+ },
+ {
+ "title": "Icon avatar",
+ "content": "
You can use type="icon"
to set the icon avatar.
\n",
+ "link": "user-head/icon-user-head",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "icon-user-head"
+ },
+ {
+ "title": "Avatar",
+ "content": "
You can use type="image"
to set the picture avatar.
\n",
+ "link": "user-head/image-user-head",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "image-user-head"
+ },
+ {
+ "title": "Avatar Message Count",
+ "content": "For details, see the following example.",
+ "link": "user-head/message-count-total",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "message-count-total"
+ },
+ {
+ "title": "Use a red dot instead of a specific value.",
+ "content": "For details, see the following example.",
+ "link": "user-head/message-count-type",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "message-count-type"
+ },
+ {
+ "title": "Maximum number of messages",
+ "content": "For details, see the following example.",
+ "link": "user-head/message-count-limit",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "message-count-limit"
+ },
+ {
+ "title": "Custom Color",
+ "content": "
You can use color
to customize the color. If the icon or text type is set to icon or label, set the font color and background color.
\n",
+ "link": "user-head/color",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "color"
+ },
+ {
+ "title": "Custom background color",
+ "content": "
You can use background-color
to customize the background color.
\n",
+ "link": "user-head/custom-background-color",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "custom-background-color"
+ },
+ {
+ "title": "Custom Image Content",
+ "content": "
Customize the image content by slot.
\n",
+ "link": "user-head/custom-user-head-content",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "custom-user-head-content"
+ },
+ {
+ "title": "Avatar Displayed in Grid Cells",
+ "content": "For details, see the following example.",
+ "link": "user-head/render-user-head-in-grid",
+ "component": "UserHead User avatar",
+ "findIntroStr": "UserHead user avatar component, which is used to represent users or things. Images, icons, and characters can be displayed.",
+ "demoId": "render-user-head-in-grid"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/user-link.json b/examples/docs/resources/pc/demo-config/en-US/user-link.json
new file mode 100644
index 000000000..b40477799
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/user-link.json
@@ -0,0 +1,66 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "
Note that the UserLink component requests mock data, which cannot be queried by other users. Use real services during development.
\n",
+ "link": "user-link/basic-usage",
+ "component": "UserLink",
+ "findIntroStr": "User information link component, which displays the special link of the user details dialog box.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Display Field Mapping",
+ "content": "
Use text-field to set the displayed field information. The default value is userCN.\nNote that the UserLink component requests mock data, which cannot be queried by other users. Use the real service during development.
\n",
+ "link": "user-link/text-field",
+ "component": "UserLink",
+ "findIntroStr": "User information link component, which displays the special link of the user details dialog box.",
+ "demoId": "text-field"
+ },
+ {
+ "title": "Custom Text Separator",
+ "content": "
Use text-split to customize the text separator. The default value is ','\nNote that the UserLink component requests mock data, which cannot be queried by other users. Use the real service during development.
\n",
+ "link": "user-link/text-split",
+ "component": "UserLink",
+ "findIntroStr": "User information link component, which displays the special link of the user details dialog box.",
+ "demoId": "text-split"
+ },
+ {
+ "title": "Value Field Mapping",
+ "content": "
Use value-field to set the value field mapping. The default value is userId.\nNote that the UserLink component requests mock data, which cannot be queried by other users. Use the real service during development.
\n",
+ "link": "user-link/value-field",
+ "component": "UserLink",
+ "findIntroStr": "User information link component, which displays the special link of the user details dialog box.",
+ "demoId": "value-field"
+ },
+ {
+ "title": "Customized value separator",
+ "content": "
Use value-split to define the value separator. The default value separator is ','.\nNote that the UserLink component requests mock data, which cannot be queried by other users. Use real services during development.
\n",
+ "link": "user-link/value-split",
+ "component": "UserLink",
+ "findIntroStr": "User information link component, which displays the special link of the user details dialog box.",
+ "demoId": "value-split"
+ },
+ {
+ "title": "Custom Service",
+ "content": "
Note that the UserLink component requests mock data, which cannot be queried by other users. Use real services during development.
\n",
+ "link": "user-link/custom-service",
+ "component": "UserLink",
+ "findIntroStr": "User information link component, which displays the special link of the user details dialog box.",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "Basic Usage",
+ "content": "
Note that the UserLink component requests mock data, which cannot be queried by other users. Use real services during development.
\n",
+ "link": "user-link/cache-users",
+ "component": "UserLink",
+ "findIntroStr": "User information link component, which displays the special link of the user details dialog box.",
+ "demoId": "cache-users"
+ },
+ {
+ "title": "Custom Default Value",
+ "content": "
Customize the default value by value. The default value is empty. Note that value and v-model cannot be used at the same time. When v-model is used at the same time, v-model has a higher weight.
\n",
+ "link": "user-link/value",
+ "component": "UserLink",
+ "findIntroStr": "User information link component, which displays the special link of the user details dialog box.",
+ "demoId": "value"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/user.json b/examples/docs/resources/pc/demo-config/en-US/user.json
new file mode 100644
index 000000000..9b8a32073
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/user.json
@@ -0,0 +1,154 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "
Note that the User component requests mock data, which cannot be queried by other users. Use the real service during development.
\n",
+ "link": "user/basic-usage",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "Multi-User",
+ "content": "
Set the multiple
property to enable the multi-user mode.
\n",
+ "link": "user/multiple-users",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "multiple-users"
+ },
+ {
+ "title": "Collapse Tag",
+ "content": "
Set the multiple
property to enable the multi-user mode. \n Use collapse-tags
to configure whether to display collapsed tags in multi-user mode. The default value is false.
\n",
+ "link": "user/multiple-users-tag",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "multiple-users-tag"
+ },
+ {
+ "title": "User selector options can be copied",
+ "content": "
You can select an option in the tag-selectable
text box with the mouse, and then press Ctrl + C or right-click to copy it.
\n",
+ "link": "user/tag-copy",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "tag-copy"
+ },
+ {
+ "title": "User selector options can be copied",
+ "content": "
After the copyable
attribute is set, all tag
text contents can be copied and separated by commas.
\n",
+ "link": "user/tag-copy-all",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "tag-copy-all"
+ },
+ {
+ "title": "Disabled",
+ "content": "
Set the disabled
property to disable the User component.
\n",
+ "link": "user/dynamic-disable",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "Exceeding prompt",
+ "content": "
Set collapse-show-overflow-tooltip
This attribute takes effect only when cache
is set to true
.
\n",
+ "link": "user/collapse-show-overflow-tooltip",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "collapse-show-overflow-tooltip"
+ },
+ {
+ "title": "Value Separator",
+ "content": "
You can use the value-split
attribute to specify the separator between different users in the value obtained for multiple users. The default value is ,
. \n You can use the text-split
attribute to specify the text separator that matches the input in multi-user mode. The default value is ,
, and the value can be !~%(=+^{/}).!]<->[\\,:*#;
.
\n",
+ "link": "user/value-split",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "value-split"
+ },
+ {
+ "title": "Value Field Mapping",
+ "content": "
The value-field
attribute specifies the format of the obtained value. The default value is userId and userAccount are also included.
\n",
+ "link": "user/value-field",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "value-field"
+ },
+ {
+ "title": "Display Field Mapping",
+ "content": "
You can use the text-field
attribute to specify the field of the user to be displayed.
\n",
+ "link": "user/text-field",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "text-field"
+ },
+ {
+ "title": "Cache User",
+ "content": "
The cache
attribute specifies whether user data is cached. The default value is cached. The \n\ncache-key
attribute can be used to customize the cache key value. The default value is tiny-user. The \n\ncache-fields
property is used to specify which user data is cached.
\n",
+ "link": "user/cache-users",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "cache-users"
+ },
+ {
+ "title": "Delayed loading",
+ "content": "
The delay
attribute specifies the loading delay, in milliseconds.
\n",
+ "link": "user/delay-load",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "delay-load"
+ },
+ {
+ "title": "Load after the specified length is entered.",
+ "content": "
You can use the suggest-length
attribute to specify the number of characters to start requesting services.
\n",
+ "link": "user/load-after-input-the-length",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "load-after-input-the-length"
+ },
+ {
+ "title": "Value change event",
+ "content": "
The user type can be obtained through the change
event.
\n",
+ "link": "user/event-change",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "event-change"
+ },
+ {
+ "title": "User query error message",
+ "content": "
The error
event can be used to obtain the input that fails to be queried.
\n",
+ "link": "user/event-error",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "event-error"
+ },
+ {
+ "title": "Custom Option Text",
+ "content": "
Sets the custom drop-down option text through the options
slot.
\n",
+ "link": "user/user-options",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "user-options"
+ },
+ {
+ "title": "Custom Service",
+ "content": "
You can customize the user service through the service
attribute. When a user enters an accurate account in the text box, the user is displayed in the drop-down menu. \nThe data sequence in the drop-down list box during sort-by-fetch-data
association is the same as that returned by the interface.
\n",
+ "link": "user/custom-service",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "custom-service"
+ },
+ {
+ "title": "Custom Sorting",
+ "content": "
uses the sortable
attribute to reference sortablejs
for sorting.
\n",
+ "link": "user/custom-sort",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "custom-sort"
+ },
+ {
+ "title": "Size Settings",
+ "content": "
You can use the size
attribute to specify the size of the text box, including medium, small, and mini.
\n",
+ "link": "user/user-select-size",
+ "component": "User",
+ "findIntroStr": "The Select selector component is used to query users, including single-user query and multi-user query.",
+ "demoId": "user-select-size"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/en-US/wizard.json b/examples/docs/resources/pc/demo-config/en-US/wizard.json
new file mode 100644
index 000000000..43c97723d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/en-US/wizard.json
@@ -0,0 +1,50 @@
+[
+ {
+ "title": "Basic Usage",
+ "content": "
Sets the basic flowchart mode through the base-flow
attribute. The process nodes and relationships between nodes are displayed in node diagrams. The node information is only the node name and status.
\n",
+ "link": "wizard/base-flow",
+ "component": "Wizard Flowchart",
+ "findIntroStr": "A component with a specific graphic symbol indicating the relationship between process nodes.",
+ "demoId": "base-flow"
+ },
+ {
+ "title": "Page Wizard Flowchart",
+ "content": "
The page-guide
attribute is used to set the page wizard flow chart mode, which is used to navigate the relationship between the current page and the previous and next pages, including the flow chart area, page display area, and function button area.
\n",
+ "link": "wizard/page-guide",
+ "component": "Wizard Flowchart",
+ "findIntroStr": "A component with a specific graphic symbol indicating the relationship between process nodes.",
+ "demoId": "page-guide"
+ },
+ {
+ "title": "Vertical Flowchart",
+ "content": "
The vertical
attribute is used to set the vertical flowchart mode. Process nodes and relationships between nodes are displayed vertically in node diagram mode. Node information includes the node name, status, completion time, and user.
\n",
+ "link": "wizard/vertical",
+ "component": "Wizard Flowchart",
+ "findIntroStr": "A component with a specific graphic symbol indicating the relationship between process nodes.",
+ "demoId": "vertical"
+ },
+ {
+ "title": "Timeline Flowchart",
+ "content": "
Set the timeline flowchart through the time-line-flow
attribute, and customize the time icon through the time-icon
attribute. Process node processing information is displayed vertically by time point, including the node name, status, completion time, and user.
\n",
+ "link": "wizard/time-line-flow",
+ "component": "Wizard Flowchart",
+ "findIntroStr": "A component with a specific graphic symbol indicating the relationship between process nodes.",
+ "demoId": "time-line-flow"
+ },
+ {
+ "title": "Step Slot",
+ "content": "The
stepbutton
slot can be used to customize step buttons or content in the
page wizard flowchart.
\n",
+ "link": "wizard/slot-step-button",
+ "component": "Wizard Flowchart",
+ "findIntroStr": "A component with a specific graphic symbol indicating the relationship between process nodes.",
+ "demoId": "slot-step-button"
+ },
+ {
+ "title": "Basic slot",
+ "content": "
Configure the basic content through base
.
\n",
+ "link": "wizard/slot-base",
+ "component": "Wizard Flowchart",
+ "findIntroStr": "A component with a specific graphic symbol indicating the relationship between process nodes.",
+ "demoId": "slot-base"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/action-menu.json b/examples/docs/resources/pc/demo-config/zh-CN/action-menu.json
new file mode 100644
index 000000000..77df836e9
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/action-menu.json
@@ -0,0 +1,82 @@
+[
+ {
+ "title": "基本用法",
+ "content": "ActionMenu 组件的基本用法。",
+ "link": "action-menu/basic-usage",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "禁用",
+ "content": "通过
disabled
字段配置当前下拉选项是否为禁用状态",
+ "link": "action-menu/disabled",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "disabled"
+ },
+ {
+ "title": "显示文本",
+ "content": "通过属性
text-field
配置要显示文本的键值,默认值为
label
。",
+ "link": "action-menu/text-field",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "text-field"
+ },
+ {
+ "title": "下拉按钮显示文本",
+ "content": "通过属性
more-text
配置下拉菜单显示文本,默认值为
更多
spacing 配置菜单按钮之间的间距,默认值为
5px
。",
+ "link": "action-menu/spacing",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "spacing"
+ },
+ {
+ "title": "自定义下拉面板样式",
+ "content": "通过属性
popper-class
设置下拉面板的类名,自定义样式",
+ "link": "action-menu/popper-class",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "显示个数",
+ "content": "通过属性
max-show-num
配置显示菜单按钮的最大个数,默认值为
2
",
+ "link": "action-menu/max-show-num",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "max-show-num"
+ },
+ {
+ "title": "菜单项点击事件",
+ "content": "当选中菜单项时触发
item-click
事件,传递出去的参数为当前选中项的数据",
+ "link": "action-menu/item-click",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "item-click"
+ },
+ {
+ "title": "更多按钮点击事件",
+ "content": "当点击下拉菜单按钮时触发
more-click
事件",
+ "link": "action-menu/more-click",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "more-click"
+ },
+ {
+ "title": "菜单项插槽",
+ "content": "通过
#item
配置下拉面板中选项的模板",
+ "link": "action-menu/slot-item",
+ "component": " ActionMenu 菜单按钮",
+ "findIntroStr": "ActionMenu 菜单按钮",
+ "demoId": "slot-item"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/alert.json b/examples/docs/resources/pc/demo-config/zh-CN/alert.json
new file mode 100644
index 000000000..1db532962
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/alert.json
@@ -0,0 +1,106 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "alert/base",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "base"
+ },
+ {
+ "title": "类型",
+ "content": "
通过 type
设置不同的类型。可选值:success、warning、info、error,默认值:info 。
\n",
+ "link": "alert/type",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "type"
+ },
+ {
+ "title": "大尺寸",
+ "content": "
通过 size
属性设置不同的尺寸,可选值:nomal、large,默认值:nomal 。
\n",
+ "link": "alert/size",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "size"
+ },
+ {
+ "title": "自定义标题",
+ "content": "
当 size
为 large 时显示标题,可设置 title
或 slot
自定义标题。默认标题根据设置的 type
显示。
\n",
+ "link": "alert/title",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "title"
+ },
+ {
+ "title": "文字居中",
+ "content": "
通过 center
属性可使文字显示居中。
\n",
+ "link": "alert/center",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "center"
+ },
+ {
+ "title": "自定义关闭按钮文本",
+ "content": "
通过属性 close-text
自定义关闭按钮文本。
\n",
+ "link": "alert/close-text",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "close-text"
+ },
+ {
+ "title": "自定义警告图标",
+ "content": "
通过 icon
属性自定义图标。
\n",
+ "link": "alert/icon",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "icon"
+ },
+ {
+ "title": "不可关闭",
+ "content": "
通过 closable
属性可设置是否显示关闭按钮,没有关闭按钮,警告框将不可关闭。
\n",
+ "link": "alert/closable",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "closable"
+ },
+ {
+ "title": "自定义提示内容",
+ "content": "
当 size
为 large时,可通过 description
属性或插槽设置自定义提示内容。
\n",
+ "link": "alert/custom-description",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "custom-description"
+ },
+ {
+ "title": "自定义交互操作",
+ "content": "
当 size
为 large 时,设置默认插槽自定义交互操作。
\n",
+ "link": "alert/slot-default",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "slot-default"
+ },
+ {
+ "title": "关闭事件",
+ "content": "
close
事件,关闭警告框时触发。
\n",
+ "link": "alert/close",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "close-events"
+ },
+ {
+ "title": "表单提交结果反馈",
+ "content": "
当 size
为 large时,属性 description
和默认插槽结合使用,可渲染提交反馈界面。
\n",
+ "link": "alert/feedback-of-result",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "feedback-of-result"
+ },
+ {
+ "title": "是否显示图标",
+ "content": "
通过配置 show-icon
属性,控制图标是否显示。
\n",
+ "link": "alert/show-icon",
+ "component": " Alert 警告",
+ "findIntroStr": "Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。",
+ "demoId": "show-icon"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/amount.json b/examples/docs/resources/pc/demo-config/zh-CN/amount.json
new file mode 100644
index 000000000..aa7e56dfe
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/amount.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"amount/basic-usage","component":" Amount 金额","findIntroStr":"用于处理货币、金额和相关时间,选择货币类型并填写数目和时间,也可以通过设定服务,自定义货币类型。","demoId":"basic-usage"},{"title":"设置日期","content":"
通过 date
属性设置日期后,将会在金额组件中显示日期框。值可设置为 String 或者 Date() 类型。\n通过 change
获取改变后的值。
\n","link":"amount/set-date","component":" Amount 金额","findIntroStr":"用于处理货币、金额和相关时间,选择货币类型并填写数目和时间,也可以通过设定服务,自定义货币类型。","demoId":"set-date"},{"title":"编辑框大小","content":"
可选择的类型:medium
,small
,mini
\n","link":"amount/size","component":" Amount 金额","findIntroStr":"用于处理货币、金额和相关时间,选择货币类型并填写数目和时间,也可以通过设定服务,自定义货币类型。","demoId":"size"},{"title":"指定币种","content":"
默认显示币种为 CNY,可通过 currency
指定需要的币种,若指定的币种在返回的服务数据中不存在,则币种下拉框将不显示该币种。
\n","link":"amount/custom-currency","component":" Amount 金额","findIntroStr":"用于处理货币、金额和相关时间,选择货币类型并填写数目和时间,也可以通过设定服务,自定义货币类型。","demoId":"custom-currency"},{"title":"金额设置","content":"
设置 digits
属性可指定金额小数位数,默认为 2 位。设置 max-len
属性指定整数位最大可输入长度,默认为 15 位。
\n","link":"amount/digits-maxlen","component":" Amount 金额","findIntroStr":"用于处理货币、金额和相关时间,选择货币类型并填写数目和时间,也可以通过设定服务,自定义货币类型。","demoId":"digits-maxlen"},{"title":"自定义服务","content":"
fetchCurrency
指定自定义服务,fields
可指定显示字段和值设置在服务数据中的字段映射。
\n","link":"amount/custom-service","component":" Amount 金额","findIntroStr":"用于处理货币、金额和相关时间,选择货币类型并填写数目和时间,也可以通过设定服务,自定义货币类型。","demoId":"custom-service"},{"title":"禁用","content":"
通过 disabled
配置 Amount 组件禁用。
\n","link":"amount/amount-disable","component":" Amount 金额","findIntroStr":"用于处理货币、金额和相关时间,选择货币类型并填写数目和时间,也可以通过设定服务,自定义货币类型。","demoId":"amount-disable"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/anchor.json b/examples/docs/resources/pc/demo-config/zh-CN/anchor.json
new file mode 100644
index 000000000..81b4f0964
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/anchor.json
@@ -0,0 +1,34 @@
+[
+ {
+ "title": "基本用法",
+ "content": "属性
links
传入数据渲染",
+ "link": "anchor/basic-usage",
+ "component": " Anchor 锚点",
+ "findIntroStr": "用于跳转到页面指定位置",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "固定模式",
+ "content": "设置属性
is-affix
为true, 让锚点不随页面滚动",
+ "link": "anchor/is-affix",
+ "component": " Anchor 锚点",
+ "findIntroStr": "用于跳转到页面指定位置",
+ "demoId": "is-affix"
+ },
+ {
+ "title": "滚动容器",
+ "content": "通过
container-id
属性指定滚动容器,
link-click
监听锚点点击事件,阻止浏览器默认行为,实现单页面
hash
路由模式的页内跳转,让页面只在想要的指定容器内滚动。通过
mask-class
属性设置自定义类名,高亮显示滚动的目标元素",
+ "link": "anchor/set-container",
+ "component": " Anchor 锚点",
+ "findIntroStr": "用于跳转到页面指定位置",
+ "demoId": "set-container"
+ },
+ {
+ "title": "change事件",
+ "content": "
on-change
事件,锚点链接改变时触发回调",
+ "link": "anchor/on-change",
+ "component": " Anchor 锚点",
+ "findIntroStr": "用于跳转到页面指定位置",
+ "demoId": "on-change"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/area.json b/examples/docs/resources/pc/demo-config/zh-CN/area.json
new file mode 100644
index 000000000..ea94e0b33
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/area.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
通过 v-model / value
属性设置默认值。
\n","link":"area/basic-usage","component":" Area 片区","findIntroStr":"用于显示区域名称,通过配置区域和数据源获取选项。","demoId":"basic-usage"},{"title":"自定义服务","content":"
通过 fetch-jcr
可以自定义服务用于获取片区 JCR 数据,fetch-rigion
用于获取地区部 Region 的数据,fetch-rep
用于获取代表处 Rep 的数据,fetch-office
用于获取办事处 Office 的数据。同时 当数据字段为非默认的 name_cn
org_id
时,可以通过 props
属性设置数据的映射字段。
\n","link":"area/custom-service","component":" Area 片区","findIntroStr":"用于显示区域名称,通过配置区域和数据源获取选项。","demoId":"custom-service"},{"title":"设置组件大小","content":"
可选值为:medium
,small
,mini
\n","link":"area/size","component":" Area 片区","findIntroStr":"用于显示区域名称,通过配置区域和数据源获取选项。","demoId":"size"},{"title":"事件","content":"
Region 下拉框的值改变时触发 change-region
事件,Rep 下拉框的值改变时触发 change-rep
事件,Office 下拉框的值改变时触发 change-office
事件。
\n","link":"area/area-events","component":" Area 片区","findIntroStr":"用于显示区域名称,通过配置区域和数据源获取选项。","demoId":"area-events"},{"title":"设置组件大小","content":"
通过 disabled
设置组件禁用默认值为 false 。
\n","link":"area/disabled","component":" Area 片区","findIntroStr":"用于显示区域名称,通过配置区域和数据源获取选项。","demoId":"disabled"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/autocomplete.json b/examples/docs/resources/pc/demo-config/zh-CN/autocomplete.json
new file mode 100644
index 000000000..3921fed9f
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/autocomplete.json
@@ -0,0 +1 @@
+[{"title":"禁用","content":"
通过 disabled
属性可以设置为禁用状态。
\n","link":"autocomplete/disabled","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"disabled1"},{"title":"原生属性","content":"详细用法参考如下示例","link":"autocomplete/disabled","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"disabled"},{"title":"输入框大小","content":"
可选择值为medium,small,mini
\n","link":"autocomplete/size","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"size"},{"title":"可清除","content":"
配置 clearable
属性后,输入内容后会显示清除图标,单击可以清除输入框内容。
\n","link":"autocomplete/clearable","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"clearable"},{"title":"输入框前置内容","content":"
配置 prepend
属性设置输入框前置内容。
\n","link":"autocomplete/append-prepend","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"append-prepend"},{"title":"输入框后置内容","content":"
配置 append
属性设置输入框后置内容。
\n","link":"autocomplete/append-prepend","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"append-append"},{"title":"自定义图标","content":"
配置 prefix-icon
和 suffix-icon
属性可分别自定义输入框前后置图标。
\n","link":"autocomplete/custom-icon","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"custom-icon"},{"title":"通过插槽自定义图标","content":"
通过 prefix
和 suffix
插槽也可以分别自定义输入框前后置图标。
\n","link":"autocomplete/prefix-suffix-slot","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"prefix-suffix-slot"},{"title":"去抖延时","content":"
通过 debounce
属性可以设置获取输入建议的去抖延时,默认值为 300 毫秒。
\n","link":"autocomplete/debounce","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"debounce"},{"title":"隐藏加载图标","content":"
设置 hide-loading
属性为 true ,可以隐藏加载图标。
\n","link":"autocomplete/hide-loading","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"hide-loading"},{"title":"输入框占位文本","content":"
通过 placeholder
属性设置输入框占位文本。
\n","link":"autocomplete/hide-loading","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"hide-loading1"},{"title":"自定义模板","content":"
通过作用域插槽可以自定义输入建议模板。
\n","link":"autocomplete/cust-template","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"cust-template"},{"title":"远程搜索","content":"
通过 fetch-suggestions
属性设置远程搜索。
\n","link":"autocomplete/remote-search","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"remote-search"},{"title":"指定显示的键名","content":"
输入内容后,建议列表中默认显示输入建议对象中 value 键名对应的值,若对象中没有 value 键名,就可以通过 value-key
属性指定显示的键名。
\n","link":"autocomplete/value-key","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"value-key"},{"title":"自定义列表样式","content":"
popper-class
属性可指定一个样式类名,可自定义建议列表的样式。\npopper-append-to-body
属性可设置是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时,可将该属性设置为 false。
\n","link":"autocomplete/popper-class","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"popper-class"},{"title":"设置菜单弹出位置","content":"
placement
属性可以设置菜单弹出位置,默认为 bottom-start
。可选值有 top、top-start、top-end、bottom、bottom-start、bottom-end 。
\n","link":"autocomplete/placement","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"placement"},{"title":"高亮显示第一项","content":"
设置 highlight-first-item
属性为 true ,可以突出显示远程搜索建议中的第一项。
\n","link":"autocomplete/highlight-first-item","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"highlight-first-item"},{"title":"聚焦不显示建议列表","content":"
默认输入框聚焦就会显示全部的建议列表,但设置 trigger-on-focus
属性为 false 后只有在匹配到输入建议后才会显示匹配到的建议列表。
\n","link":"autocomplete/no-trigger-on-focus","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"no-trigger-on-focus"},{"title":"事件","content":"
Autocomplete 组件提供 select
事件,点击选中建议项时触发,回调参数为选中建议项。\n通过 select-when-unmatched
设置在输入联想没有匹配值时,按 Enter 键时是否触发 select 事件,默认值为 false。
\n","link":"autocomplete/select-event","component":" Autocomplete 自动完成","findIntroStr":"根据输入内容提供对应的输入建议。","demoId":"select-event"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/badge.json b/examples/docs/resources/pc/demo-config/zh-CN/badge.json
new file mode 100644
index 000000000..d591ebde8
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/badge.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
Badge 展示指定数据信息,如:我的待办数、新任务数等。
\n","link":"badge/base","component":" Badge 标记","findIntroStr":"Badge 展示指定数据信息,如:我的待办数、新任务数等。","demoId":"base"},{"title":"主題样式","content":"
type
设置显示主题,可选值:primary、success、warning、danger、info,默认值:danger
\n","link":"badge/type","component":" Badge 标记","findIntroStr":"Badge 展示指定数据信息,如:我的待办数、新任务数等。","demoId":"type"},{"title":"小圆点标记","content":"
is-dot
显示小圆点标记
\n","link":"badge/is-dot","component":" Badge 标记","findIntroStr":"Badge 展示指定数据信息,如:我的待办数、新任务数等。","demoId":"is-dot"},{"title":"计数最大值","content":"
max
超过最大值会显示 '{max}+'
\n","link":"badge/max","component":" Badge 标记","findIntroStr":"Badge 展示指定数据信息,如:我的待办数、新任务数等。","demoId":"max"},{"title":"跳转链接","content":"
href
定义跳转链接
\n","link":"badge/target","component":" Badge 标记","findIntroStr":"Badge 展示指定数据信息,如:我的待办数、新任务数等。","demoId":"target"},{"title":"自定义标记目标","content":"
default slot
标记内容自定义
\n","link":"badge/slot-default","component":" Badge 标记","findIntroStr":"Badge 展示指定数据信息,如:我的待办数、新任务数等。","demoId":"slot-default"},{"title":"自定义提示内容","content":"
content slot
自定义提示内容
\n","link":"badge/slot-content","component":" Badge 标记","findIntroStr":"Badge 展示指定数据信息,如:我的待办数、新任务数等。","demoId":"slot-content"},{"title":"消息已读动态隐藏标记","content":"
hidden
隐藏标记
\n","link":"badge/dynamic-hidden","component":" Badge 标记","findIntroStr":"Badge 展示指定数据信息,如:我的待办数、新任务数等。","demoId":"dynamic-hidden"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/breadcrumb.json b/examples/docs/resources/pc/demo-config/zh-CN/breadcrumb.json
new file mode 100644
index 000000000..1fa7ba930
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/breadcrumb.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"breadcrumb/base","component":" Breadcrumb 面包屑","findIntroStr":"Breadcrumb 面包屑导航,作用是告诉访问者他们目前在网站中的位置以及如何返回。","demoId":"base"},{"title":"自定义节点","content":"
设置子组件 BreadcrumbItem 的 默认插槽,自定义节点内容。to
设置路由跳转的对象,同时设置 replace
后将不会向 history 添加新记录。
\n","link":"breadcrumb/slot-default","component":" Breadcrumb 面包屑","findIntroStr":"Breadcrumb 面包屑导航,作用是告诉访问者他们目前在网站中的位置以及如何返回。","demoId":"slot-default"},{"title":"自定义分隔符","content":"
设置 separator
或 separator-icon
属性,自定义分隔符。
\n","link":"breadcrumb/separator","component":" Breadcrumb 面包屑","findIntroStr":"Breadcrumb 面包屑导航,作用是告诉访问者他们目前在网站中的位置以及如何返回。","demoId":"separator"},{"title":"options 配置","content":"
通过 options
总体配置每个 BreadcrumbItem
。
设置
textField
指定显示字段,默认显示字段为
label
\n","link":"breadcrumb/options","component":" Breadcrumb 面包屑","findIntroStr":"Breadcrumb 面包屑导航,作用是告诉访问者他们目前在网站中的位置以及如何返回。","demoId":"options"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/bulletin-board.json b/examples/docs/resources/pc/demo-config/zh-CN/bulletin-board.json
new file mode 100644
index 000000000..76b0d9dcb
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/bulletin-board.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
必须设置 data
属性设置公告牌公告信息数据,以及 tab-title
属性设置每个公告牌标题。
\n","link":"bulletin-board/base","component":" BulletinBoard 公告牌","findIntroStr":"BulletinBoard 公告牌组件,展现需要重点关注的信息。","demoId":"base"},{"title":"公告牌标题","content":"
可通过 title
设置公告牌标题。
\n","link":"bulletin-board/title","component":" BulletinBoard 公告牌","findIntroStr":"BulletinBoard 公告牌组件,展现需要重点关注的信息。","demoId":"title"},{"title":"默认激活的选项卡","content":"
可通过 active-name
设置默认激活的选项卡,从 1
开始计算。
\n","link":"bulletin-board/active-name","component":" BulletinBoard 公告牌","findIntroStr":"BulletinBoard 公告牌组件,展现需要重点关注的信息。","demoId":"active-name"},{"title":"选项卡标题","content":"
可通过 tab-title
属性自定义选项卡标题。
\n","link":"bulletin-board/tab-title","component":" BulletinBoard 公告牌","findIntroStr":"BulletinBoard 公告牌组件,展现需要重点关注的信息。","demoId":"tab-title"},{"title":"基于Url的跳转","content":"
基于 Url 的跳转是根据数据中的 url
和 target
字段进行跳转的。
\n","link":"bulletin-board/url","component":" BulletinBoard 公告牌","findIntroStr":"BulletinBoard 公告牌组件,展现需要重点关注的信息。","demoId":"url"},{"title":"基于Route的跳转","content":"
基于 Route 的跳转是根据数据中的 route
字段进行跳转的。
\n","link":"bulletin-board/route","component":" BulletinBoard 公告牌","findIntroStr":"BulletinBoard 公告牌组件,展现需要重点关注的信息。","demoId":"route"},{"title":"显示 “更多” 链接","content":"
可通过 more-link
显示并设置更多链接。 show-more
设置是否显示更多按钮,默认为 true。
\n","link":"bulletin-board/more-link","component":" BulletinBoard 公告牌","findIntroStr":"BulletinBoard 公告牌组件,展现需要重点关注的信息。","demoId":"more-link"},{"title":"自定义新公告前缀","content":"
可通过 icon
自定义新公告前缀图标。
\n","link":"bulletin-board/icon","component":" BulletinBoard 公告牌","findIntroStr":"BulletinBoard 公告牌组件,展现需要重点关注的信息。","demoId":"icon"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/button-group.json b/examples/docs/resources/pc/demo-config/zh-CN/button-group.json
new file mode 100644
index 000000000..50ee829c7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/button-group.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
通过 v-model
设置默认选中的按钮,并实现双向绑定。通过 value
也可设置默认选中按钮,但不能进行双向绑定。
\n","link":"button-group/base","component":" ButtonGroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"base"},{"title":"按钮组数据","content":"
通过 data
属性设置按钮组数据,对象中的 text 为按钮显示文本,value 用于双向绑定时指定的值。
\n","link":"button-group/data","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"data"},{"title":"设置组件大小","content":"
可以设置为:medium
,small
,mini
\n","link":"button-group/size","component":" ButtonGroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"size"},{"title":"禁用状态","content":"
设置 disabled
属性为 true 可禁用整个按钮组。
\n","link":"button-group/disabled","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"disabled"},{"title":"朴素按钮","content":"
设置 plain
属性为 true 可显示为朴素按钮样式。
\n","link":"button-group/plain","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"plain"},{"title":"数据字段映射","content":"
若按钮组数据对象中的字段不是默认的 text 和 value ,则可通过 text-field
、value-field
属性进行映射。
\n","link":"button-group/text-value-field","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"text-value-field"},{"title":"是否显示更多按钮","content":"
设置 show-more
属性值大于 0 且小于按钮组数据,可显示更多按钮。
\n","link":"button-group/show-more","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"show-more"},{"title":"是否显示编辑按钮","content":"
设置 show-edit
属性值为 true ,可显示编辑按钮。
\n","link":"button-group/show-edit","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"show-edit"},{"title":"编辑事件","content":"
勾选值改变后将触发 edit
事件。
\n","link":"button-group/event-edit","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"event-edit"},{"title":"默认插槽","content":"
使用默认插槽的方式时,ButtonGroup 的 data、text-field、value-field、value / v-model、size
属性对插槽中的按钮将不再生效。\n但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性,具体参考 Button 组件属性。
\n","link":"button-group/slot-default","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"slot-default"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/button.json b/examples/docs/resources/pc/demo-config/zh-CN/button.json
new file mode 100644
index 000000000..048709124
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/button.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "button/base",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "base"
+ },
+ {
+ "title": "图标按钮",
+ "content": "
指定 icon
属性值为需要的 Icon 图标即可展示为图标按钮。
\n
Icon 图标用法
\n
先从 @opentiny/vue-icon
中导入需要的 Icon,再在 data 函数中初始化 Icon 组件并赋值给一个属性。最后在模板中通过 icon
属性进行引用。\n通过 native-type
设置 button、image 两种按钮的表单类型。该属性仅当属性 type 为 button 或 image 时使用。该属性的可选值为 button / submit / reset。
\n
\n",
+ "link": "button/icon",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "icon"
+ },
+ {
+ "title": "文字按钮",
+ "content": "
设置 type
属性为 text
即为文字按钮,可在标签子级或者通过 text
属性设置显示内容。
\n",
+ "link": "button/text",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "text"
+ },
+ {
+ "title": "按钮圆角",
+ "content": "
通过 round
属性设置是否圆角按钮。
\n",
+ "link": "button/round",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "round"
+ },
+ {
+ "title": "图片按钮",
+ "content": "
以默认插槽的用法嵌入 img 标签,并引入图片。
\n",
+ "link": "button/image",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "image"
+ },
+ {
+ "title": "主题样式",
+ "content": "
通过 type
属性可以设置不同的主题样式,主要包括 primary、success、info、warning、danger、text。
\n",
+ "link": "button/type",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "type"
+ },
+ {
+ "title": "显示加载中",
+ "content": "
直接配置 loading
属性为 true,即可展示为加载中的样式。
\n",
+ "link": "button/loading",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "loading"
+ },
+ {
+ "title": "尺寸",
+ "content": "
通过 size
属性设置按钮不同的大小尺寸,包括 large、medium、small、mini 四种不同大小。不设置时为默认尺寸。
\n",
+ "link": "button/size",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "size"
+ },
+ {
+ "title": "圆形按钮",
+ "content": "
直接配置 circle
属性为 true,即可展示为圆形按钮的形式。
\n",
+ "link": "button/circle",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "circle"
+ },
+ {
+ "title": "朴素按钮",
+ "content": "
配置 plain
属性为 true,即可展示为朴素按钮的形式。
\n",
+ "link": "button/plain",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "plain"
+ },
+ {
+ "title": "防止表单重复提交",
+ "content": "
通过 reset-time
属性可设置单击后按钮禁用的时长,默认的禁用时长为 1000 毫秒。\n可用于防止按钮连续点击出现表单重复提交的问题。
\n",
+ "link": "button/reset-time",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "reset-time"
+ },
+ {
+ "title": "默认聚焦",
+ "content": "
配置 autofocus
属性的按钮,将默认展示为聚焦状态。
\n",
+ "link": "button/autofocus",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "autofocus"
+ },
+ {
+ "title": "事件",
+ "content": "
按钮的单击事件,该示例中单击按钮将会出现提示信息。
\n",
+ "link": "button/click",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "click"
+ },
+ {
+ "title": "动态禁用按钮",
+ "content": "
设置 disabled
属性为 true 后,可以禁用按钮。
\n",
+ "link": "button/dynamic-disabled",
+ "component": " Button 按钮",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "dynamic-disabled"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/calendar.json b/examples/docs/resources/pc/demo-config/zh-CN/calendar.json
new file mode 100644
index 000000000..f9b81f17e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/calendar.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
默认以月的形式展示当月的每一天。
\n","link":"calendar/basic-usage","component":" Calendar 日历","findIntroStr":"按照日历形式展示数据的容器。","demoId":"basic-usage"},{"title":"显示模式","content":"
通过 mode
属性指定以年的形式显示,将展示当年的每个月份。可选值有 year、month。
\n","link":"calendar/calendar-mode","component":" Calendar 日历","findIntroStr":"按照日历形式展示数据的容器。","demoId":"calendar-mode"},{"title":"显示选中日期","content":"
以月的形式展示时,指定 show-selected 属性后,单击日期单元格,将会在日历框上方展示当前选中的日期。
\n","link":"calendar/show-selected-date","component":" Calendar 日历","findIntroStr":"按照日历形式展示数据的容器。","demoId":"show-selected-date"},{"title":"自定义日期单元格","content":"
通过作用域插槽 day 自定义日期单元格。
\n","link":"calendar/custom-day-cell","component":" Calendar 日历","findIntroStr":"按照日历形式展示数据的容器。","demoId":"custom-day-cell"},{"title":"自定义工具栏","content":"
通过作用域插槽 tool 自定义需要的工具栏。
\n","link":"calendar/custom-calendar-toolbar","component":" Calendar 日历","findIntroStr":"按照日历形式展示数据的容器。","demoId":"custom-calendar-toolbar"},{"title":"添加日程事件","content":"
通过 events 属性可以指定事件列表,它是一个对象数组,对象中包含如下字段:
\n
events 说明
\n
time:指定需要展示事件的日期\ntitle:指定事件标题\ncontent:指定事件的具体内容 type:指定当鼠标悬停在事件标题上时,弹出的展示事件具体内容的提示框的主题,包括 warning、error、info、success
\n
\n","link":"calendar/dynamic-add-schedule","component":" Calendar 日历","findIntroStr":"按照日历形式展示数据的容器。","demoId":"dynamic-add-schedule"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/carousel.json b/examples/docs/resources/pc/demo-config/zh-CN/carousel.json
new file mode 100644
index 000000000..e18def940
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/carousel.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"carousel/basic-usage","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"basic-usage"},{"title":"指示器和触发方式","content":"
走马灯指示器默认显示在幻灯片内容上,配置 indicator-position
为 outside 后,将显示在外部。\n配置 trigger
为 click ,可以修改指示器触发方式为单击,默认鼠标悬停到指示器时,走马灯幻灯片就会对应切换。
\n","link":"carousel/indicator-trigger","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"indicator-trigger"},{"title":"手动轮播","content":"
调用 setActiveItem()
、next()
、prev()
方法可根据需要进行轮播。initial-index
属性可以指定初始激活的幻灯片索引。
\n","link":"carousel/manual-play","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"manual-play"},{"title":"关闭循环轮播","content":"
配置 loop
属性为 false 后,若走马灯幻灯片已切换到最后一项,则将不能再从第一项开始循环切换。即切换到最后一项时,右侧切换箭头不再显示,切换到第一项时,左侧切换箭头不再显示。
\n","link":"carousel/close-loop","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"close-loop"},{"title":"自动切换","content":"
配置 autoplay
属性为 true 后,走马灯的幻灯片内容将自动轮播切换。
\n","link":"carousel/autoplay","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"autoplay"},{"title":"轮播间隔时间","content":"
走马灯幻灯片轮播间隔时间默认为 3000 毫秒,通过 interval
属性可以自定义。
\n","link":"carousel/play-interval","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"play-interval"},{"title":"纵向轮播","content":"
配置 type
属性为 vertical 即可实现纵向轮播。
\n","link":"carousel/up-down-carousel","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"up-down-carousel"},{"title":"显示标题","content":"
通过 title
配置显示标题,需要与 show-title
结合使用。
\n","link":"carousel/show-title","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"show-title"},{"title":"总是显示切换箭头","content":"详细用法参考如下示例","link":"carousel/carousel-arrow-always","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"carousel-arrow-always"},{"title":"hover 时显示切换箭头","content":"详细用法参考如下示例","link":"carousel/carousel-arrow-hover","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"carousel-arrow-hover"},{"title":"隐藏切换箭头","content":"详细用法参考如下示例","link":"carousel/carousel-arrow-never","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"carousel-arrow-never"},{"title":"卡片模式","content":"
配置 type
属性为 card 后,走马灯将以卡片形式进行展示。
\n","link":"carousel/card-mode","component":" Carousel 走马灯","findIntroStr":"常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。","demoId":"card-mode"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/cascader-panel.json b/examples/docs/resources/pc/demo-config/zh-CN/cascader-panel.json
new file mode 100644
index 000000000..e30ab77a6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/cascader-panel.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
通过 options
来指定选项,也可通过 props
来设置多选、动态加载等功能,具体详情见下方 API 表格。
\n","link":"cascader-panel/basic-usage","component":" CascaderPanel 级联面板","findIntroStr":"级联面板与级联选择器一样,有单选、多选、动态加载等多种功能。","demoId":"basic-usage"},{"title":"选中节点变化","content":"
通过 change
点击节点后触发的事件,回调参数为 选中节点的值\n通过 clearCheckedNodes
清除选中的节点。\n通过 getCheckedNodes
获取选中的节点。
\n","link":"cascader-panel/change","component":" CascaderPanel 级联面板","findIntroStr":"级联面板与级联选择器一样,有单选、多选、动态加载等多种功能。","demoId":"change"},{"title":"展开节点发生变化","content":"
通过 expand-change
点击展开节点发生变化时触发,回调参数为 各父级选项值组成的数组
\n","link":"cascader-panel/expand-change","component":" CascaderPanel 级联面板","findIntroStr":"级联面板与级联选择器一样,有单选、多选、动态加载等多种功能。","demoId":"expand-change"},{"title":"自定义节点内容","content":"
可以通过 scoped slot
对级联面板的备选项的节点内容进行自定义,scoped slot
会传入两个字段 node
和 data
,分别表示当前节点的 Node 对象和数据。
\n","link":"cascader-panel/custom-option-content","component":" CascaderPanel 级联面板","findIntroStr":"级联面板与级联选择器一样,有单选、多选、动态加载等多种功能。","demoId":"custom-option-content"},{"title":"Props 选项","content":"
Props
\n
通过 children
指定子级选项,默认值为 children。\n通过 emitPath
是否返回由该节点所在的各级菜单的值所组成的数组。\n通过 label
指定显示选项 label 值,默认为 label。\n通过 value
指定值选项 value 值,默认为 value
\n
\n","link":"cascader-panel/cascader-panel-props","component":" CascaderPanel 级联面板","findIntroStr":"级联面板与级联选择器一样,有单选、多选、动态加载等多种功能。","demoId":"cascader-panel-props"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/cascader.json b/examples/docs/resources/pc/demo-config/zh-CN/cascader.json
new file mode 100644
index 000000000..bf8fe301c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/cascader.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
通过 options
属性指定选项数组即可渲染出一个级联选择器。
\n","link":"cascader/basic-usage","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"basic-usage"},{"title":"hover 触发子菜单","content":"
通过 props.expandTrigger
可以指定展开子级菜单的触发方式为 hover
,默认为 click
。
\n","link":"cascader/expand-trigger","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"expand-trigger"},{"title":"禁用选项","content":"
通过在数据源中设置 disabled
字段来声明该选项是禁用的,本例中,options
指定的数组中的第一个元素含有 disabled: true
键值对,因此是禁用的。在默认情况下,Cascader 会检查数据中每一项的 disabled
字段是否为 true
,如果你的数据中表示禁用含义的字段名不为 disabled
,可以通过 props.disabled
属性来指定(详见 Cascader Props 的 API 表格)。当然,value
、label
和 children
这三个字段名也可以通过同样的方式指定。
\n","link":"cascader/disabled-items","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"disabled-items"},{"title":"指定属性值","content":"
通过 props
属性设置属性值映射。
\n","link":"cascader/disabled-items","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"disabled-items1"},{"title":"可清空","content":"
通过 clearable
属性设置输入框可清空。
\n","link":"cascader/clearable","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"clearable"},{"title":"分隔符","content":"
通过 separator
属性设置分隔符。
\n","link":"cascader/clearable","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"clearable1"},{"title":"尺寸","content":"
通过 size
属性设置尺寸。
\n","link":"cascader/clearable","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"clearable2"},{"title":"多选","content":"
通过 props.multiple = true
来开启多选模式。
\n","link":"cascader/default-multiple","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"default-multiple"},{"title":"折叠展示 Tag","content":"
在开启多选模式后,默认情况下会展示所有已选中的选项的 Tag,可以使用 collapse-tags
来折叠 Tag 。\n通过 disabled
设置组件是否禁用,默认值为 false 。
\n","link":"cascader/collapse-tags","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"collapse-tags"},{"title":"父子级不相关联","content":"
通过 props.checkStrictly = true
来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。默认单选模式下,只能选择叶子节点。
\n","link":"cascader/check-strictly","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"check-strictly"},{"title":"多选选择任意一级选项","content":"
在多选模式下同时取消父子节点关联,选择任意一级选项。
\n","link":"cascader/check-strictly-multiple","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"check-strictly-multiple"},{"title":"动态加载","content":"
当选中某一级时,动态加载该级下的选项。通过 props
属性中的 lazy
开启动态加载,并通过 lazyload
来设置加载数据源的方法。lazyload
方法有两个参数,第一个参数 node 为当前点击的节点,第二个 resolve 为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态,还可以对节点数据添加是否为叶子节点的标志位 (默认字段为 leaf,可通过 props.leaf 修改),否则会简单的以有无子节点来判断是否为叶子节点。
\n","link":"cascader/auto-load","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"auto-load"},{"title":"动态加载且父子级不相关联","content":"
当选中某一级时,动态加载该级下的选项。通过 props
属性中的 lazy
开启动态加载,并通过 lazyload
来设置加载数据源的方法。通过 props
属性中的 checkStrictly
开启父子级不相关联。
\n","link":"cascader/auto-load-checkStrictly","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"auto-load-checkStrictly"},{"title":"指定选项","content":"
Props
\n
通过 children
指定选项的子选项,默认为 children 。\n通过 value
指定指定选项的 value 值,默认为 value 。\n通过 label
指定选项标签,默认为 label 。
\n
\n","link":"cascader/props-children","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"props-children"},{"title":"可搜索","content":"
将 filterable
赋值为 true
即可打开搜索功能,默认会匹配节点的 label
或所有父节点的 label
(由 show-all-levels
决定)中包含输入值的选项。 empty
无匹配选项时显示的内容
\n","link":"cascader/filterable","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"filterable"},{"title":"搜索延时","content":"详细用法参考如下示例","link":"cascader/filterable","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"filterable2"},{"title":"多选可搜索","content":"
多选模式下开启搜索功能。
\n","link":"cascader/filterable-multiple","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"filterable-multiple"},{"title":"自定义搜索逻辑","content":"
filter-method
自定义搜索逻辑,第一个参数是节点 node,第二个参数是搜索关键词 keyword,通过返回布尔值表示是否命中,如果需要选择父级,通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。默认单选模式下,只能选择叶子节点。
\n","link":"cascader/filter-method","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"filter-method"},{"title":"占位文本","content":"详细用法参考如下示例","link":"cascader/filterable-multiple","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"filterable-multiple1"},{"title":"仅显示最后一级","content":"
属性 show-all-levels
定义了是否显示完整的路径,将其赋值为 false
则仅显示最后一级,默认为 true
,显示选中项所在的完整路径。
\n","link":"cascader/show-all-levels","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"show-all-levels"},{"title":"事件","content":"
Cascader 级联选择器的事件有:change
、expand-change
、blur
、focus
、visible-change
。
\n","link":"cascader/events","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"events"},{"title":"节点返回的数据类型","content":"详细用法参考如下示例","link":"cascader/events","component":" Cascader 级联选择器","findIntroStr":"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。","demoId":"events1"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-attributes-demo.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-attributes-demo.json
new file mode 100644
index 000000000..9f757ffa3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-attributes-demo.json
@@ -0,0 +1 @@
+[{"title":"属性配置示例","content":"
如果某属性加上去之后没有生效,很可能是没有引入相应的模块。例如:
\n
在使用 dataZoom 组件时,需要引入 dataZoom 模块资源 import 'echarts/lib/component/dataZoom'
。
\n
\n
1 设置区域缩放组件
\n
可通过 init-options
配置组件初始化附加参数,具体可参考文档
\n","link":"chart/props/demo10","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo10"},{"title":"1 设置区域缩放组件","content":"详细用法参考如下示例","link":"chart/props/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-base"},{"title":"2 设置extend配置项","content":"详细用法参考如下示例","link":"chart/props/demo12","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo12"},{"title":"3 修改颜色列表","content":"详细用法参考如下示例","link":"chart/props/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo4"},{"title":"4 设置暂无数据状态","content":"详细用法参考如下示例","link":"chart/props/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo5"},{"title":"5 增加自定义内容","content":"详细用法参考如下示例","link":"chart/props/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo6"},{"title":"6 隐藏提示框与图例","content":"详细用法参考如下示例","link":"chart/props/demo7","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo7"},{"title":"7 设置图表容器样式","content":"详细用法参考如下示例","link":"chart/props/demo8","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo8"},{"title":"8 设置图表标线与标点","content":"详细用法参考如下示例","link":"chart/props/demo9","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo9"},{"title":"9 设置视觉映射组件","content":"详细用法参考如下示例","link":"chart/props/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo2"},{"title":"10 设置afterConfig函数","content":"详细用法参考如下示例","link":"chart/props/demo11","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo11"},{"title":"11 设置工具箱","content":"详细用法参考如下示例","link":"chart/props/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"props-demo3"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-attributes.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-attributes.json
new file mode 100644
index 000000000..fe51488c7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-attributes.json
@@ -0,0 +1 @@
+[]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-autonavi-map.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-autonavi-map.json
new file mode 100644
index 000000000..0a077f791
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-autonavi-map.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。 高德地图需要外网访问权限才能正常使用\n
\n","link":"chart/amap/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"amap-base"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-baidu-map.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-baidu-map.json
new file mode 100644
index 000000000..3193d6d09
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-baidu-map.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。\n 百度地图需要外网访问权限才能正常使用\n
\n","link":"chart/bmap/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"bmap-base"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-bar.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-bar.json
new file mode 100644
index 000000000..46c5d2fcb
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-bar.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/bar/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"bar-base"},{"title":"指定指标维度","content":"详细用法参考如下示例","link":"chart/bar/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"bar-demo2"},{"title":"排序条形图","content":"详细用法参考如下示例","link":"chart/bar/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"bar-demo3"},{"title":"条形轴配置双 y 轴","content":"详细用法参考如下示例","link":"chart/bar/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"bar-demo4"},{"title":"设置 legend 别名","content":"详细用法参考如下示例","link":"chart/bar/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"bar-demo5"},{"title":"堆叠条形图","content":"详细用法参考如下示例","link":"chart/bar/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"bar-demo6"},{"title":"设置纵轴为连续的数值轴","content":"详细用法参考如下示例","link":"chart/bar/demo7","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"bar-demo7"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-boxplot.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-boxplot.json
new file mode 100644
index 000000000..bdd3d99f7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-boxplot.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
Boxplot 中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』,是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。
\n","link":"chart/boxplot/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"boxplot-base"},{"title":"多数据显示","content":"
boxplot
提供数据转化方法 prepareBoxplotData
将源数据转化为 { axisData: [...], boxData: [...], outliers: [...] }
的格式化数据。
\n","link":"chart/boxplot/multiple","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"boxplot-multiple"},{"title":"垂直显示","content":"
通过 extend
属性实现 echarts
方式的配置。
\n","link":"chart/boxplot/vertical","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"boxplot-vertical"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-candle.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-candle.json
new file mode 100644
index 000000000..a716651a2
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-candle.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/candle/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"candle-base"},{"title":"使用简化的数据格式","content":"详细用法参考如下示例","link":"chart/candle/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"candle-demo2"},{"title":"设置数据格式","content":"详细用法参考如下示例","link":"chart/candle/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"candle-demo3"},{"title":"显示 MA, VOL","content":"详细用法参考如下示例","link":"chart/candle/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"candle-demo4"},{"title":"修改指标名和图例文字","content":"详细用法参考如下示例","link":"chart/candle/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"candle-demo5"},{"title":"修改 MA 显示周期","content":"详细用法参考如下示例","link":"chart/candle/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"candle-demo6"},{"title":"设置 dataRoom 控件","content":"详细用法参考如下示例","link":"chart/candle/demo7","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"candle-demo7"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-data-config.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-data-config.json
new file mode 100644
index 000000000..fe51488c7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-data-config.json
@@ -0,0 +1 @@
+[]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-events.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-events.json
new file mode 100644
index 000000000..cc0478fe3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-events.json
@@ -0,0 +1 @@
+[{"title":"事件监听","content":"
绑定事件通过传递一个事件名称和对应回调函数的对象实现,回调函数内的参数是 echarts 模块,可以据此做相应的处理。
\n
示例
\n","link":"chart/events/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"events-base"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-funnel.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-funnel.json
new file mode 100644
index 000000000..a62693ebc
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-funnel.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/funnel/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"funnel-base"},{"title":"指定指标维度","content":"详细用法参考如下示例","link":"chart/funnel/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"funnel-demo2"},{"title":"自动按照数值排序并过滤 0 值","content":"详细用法参考如下示例","link":"chart/funnel/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"funnel-demo3"},{"title":"定制顺序漏斗图","content":"详细用法参考如下示例","link":"chart/funnel/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"funnel-demo4"},{"title":"指定数据类型漏斗图","content":"详细用法参考如下示例","link":"chart/funnel/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"funnel-demo5"},{"title":"修改 legend 别名漏斗图","content":"详细用法参考如下示例","link":"chart/funnel/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"funnel-demo6"},{"title":"金字塔","content":"详细用法参考如下示例","link":"chart/funnel/demo7","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"funnel-demo7"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-gauge.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-gauge.json
new file mode 100644
index 000000000..2de905fd3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-gauge.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/gauge/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"gauge-base"},{"title":"指标维度配置","content":"详细用法参考如下示例","link":"chart/gauge/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"gauge-demo2"},{"title":"设置数据类型","content":"详细用法参考如下示例","link":"chart/gauge/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"gauge-demo3"},{"title":"设置指标别名与单位","content":"详细用法参考如下示例","link":"chart/gauge/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"gauge-demo4"},{"title":"设置多表盘及修改样式","content":"详细用法参考如下示例","link":"chart/gauge/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"gauge-demo5"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-graph.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-graph.json
new file mode 100644
index 000000000..ee37cdf23
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-graph.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n
\n该图只支持 extend
配置,使用方式及属性和 eCharts 一致,请参考 eCharts 配置
\n
\n","link":"chart/graph/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"graph-base"},{"title":"笛卡尔坐标系上的 Graph","content":"详细用法参考如下示例","link":"chart/graph/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"graph-demo2"},{"title":"拓扑图的事件拓展","content":"详细用法参考如下示例","link":"chart/graph/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"graph-demo3"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-heatmap.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-heatmap.json
new file mode 100644
index 000000000..691395a7c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-heatmap.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/heatmap/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"heatmap-base"},{"title":"配置坐标轴","content":"详细用法参考如下示例","link":"chart/heatmap/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"heatmap-demo2"},{"title":"自定义 visualMap","content":"详细用法参考如下示例","link":"chart/heatmap/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"heatmap-demo3"},{"title":"地图热力图","content":"详细用法参考如下示例","link":"chart/heatmap/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"heatmap-demo4"},{"title":"百度地图热力图","content":"
百度地图和高德地图需要外网访问权限才能正常使用\n
\n","link":"chart/heatmap/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"heatmap-demo5"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-histogram.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-histogram.json
new file mode 100644
index 000000000..f53ef6d19
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-histogram.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/histogram/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"histogram-base"},{"title":"设置显示的指标维度","content":"详细用法参考如下示例","link":"chart/histogram/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"histogram-demo2"},{"title":"设置双 y 轴","content":"详细用法参考如下示例","link":"chart/histogram/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"histogram-demo3"},{"title":"柱状图+折线图","content":"详细用法参考如下示例","link":"chart/histogram/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"histogram-demo4"},{"title":"堆叠柱状图","content":"详细用法参考如下示例","link":"chart/histogram/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"histogram-demo5"},{"title":"默认显示柱状图数据","content":"详细用法参考如下示例","link":"chart/histogram/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"histogram-demo6"},{"title":"修改别名","content":"详细用法参考如下示例","link":"chart/histogram/demo7","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"histogram-demo7"},{"title":"设置横轴为连续的数值轴","content":"详细用法参考如下示例","link":"chart/histogram/demo8","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"histogram-demo8"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-line.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-line.json
new file mode 100644
index 000000000..a3fca2233
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-line.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/line/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-base"},{"title":"设置显示的指标维度","content":"详细用法参考如下示例","link":"chart/line/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-demo2"},{"title":"设置双 y 轴","content":"详细用法参考如下示例","link":"chart/line/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-demo3"},{"title":"横坐标的倾斜","content":"详细用法参考如下示例","link":"chart/line/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-demo4"},{"title":"堆叠面积图","content":"详细用法参考如下示例","link":"chart/line/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-demo5"},{"title":"设置别名","content":"详细用法参考如下示例","link":"chart/line/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-demo6"},{"title":"显示指标数值","content":"详细用法参考如下示例","link":"chart/line/demo7","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-demo7"},{"title":"设置横轴为连续的数值轴","content":"详细用法参考如下示例","link":"chart/line/demo8","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-demo8"},{"title":"设置横轴为连续的时间轴","content":"详细用法参考如下示例","link":"chart/line/demo9","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"line-demo9"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-liquidfill.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-liquidfill.json
new file mode 100644
index 000000000..1d51f79e1
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-liquidfill.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/liquidfill/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"liquidfill-base"},{"title":"水球图分层","content":"详细用法参考如下示例","link":"chart/liquidfill/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"liquidfill-demo2"},{"title":"设置多个水球图","content":"详细用法参考如下示例","link":"chart/liquidfill/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"liquidfill-demo3"},{"title":"设置水球图的形状","content":"详细用法参考如下示例","link":"chart/liquidfill/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"liquidfill-demo4"},{"title":"水球图文字标签及样式设置","content":"详细用法参考如下示例","link":"chart/liquidfill/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"liquidfill-demo5"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-map.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-map.json
new file mode 100644
index 000000000..71036e373
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-map.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"chart/map/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"map-base"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-pie.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-pie.json
new file mode 100644
index 000000000..e85d7422d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-pie.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/pie/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"pie-base"},{"title":"设置指标维度","content":"详细用法参考如下示例","link":"chart/pie/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"pie-demo2"},{"title":"玫瑰图","content":"详细用法参考如下示例","link":"chart/pie/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"pie-demo3"},{"title":"限制显示条数饼图","content":"详细用法参考如下示例","link":"chart/pie/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"pie-demo4"},{"title":"多圆饼图","content":"详细用法参考如下示例","link":"chart/pie/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"pie-demo5"},{"title":"设置数据类型","content":"详细用法参考如下示例","link":"chart/pie/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"pie-demo6"},{"title":"设置饼图半径边距","content":"详细用法参考如下示例","link":"chart/pie/demo7","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"pie-demo7"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-question.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-question.json
new file mode 100644
index 000000000..1cc597bb3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-question.json
@@ -0,0 +1 @@
+[{"title":"常见问题","content":"
父元素的初始宽度未知
\n
在一个初始宽度未知的容器内绘制图表时,因为无法获取宽度,所以图表会绘制失败,解决的办法是在容器宽度已知后,\n调用 echarts 的 resize 方法。\n通过 cancel-resize-check
是用于resize之前,检测组件元素是否存在,元素是否有宽高,没有则不resize。
\n","link":"chart/question/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"question-base"},{"title":"父元素的初始宽度未知","content":"详细用法参考如下示例","link":"chart/question/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"question-demo5"},{"title":"数据改变视图自动更新","content":"
图表是基于 Vue 开发的,同样支持 双向数据绑定
,只要改变图表数据 (示例中的 chartData.row)
视图会自动更新。
\n","link":"chart/question/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"question-demo4"},{"title":"小数显示精度","content":"
处理数据类型时默认保留两位有效数字,但是当数字较小并设置为百分比类型时,这种方式会导致显示上的问题,例如:
\n","link":"chart/question/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"question-demo2"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-radar.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-radar.json
new file mode 100644
index 000000000..9cdd377be
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-radar.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/radar/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"radar-base"},{"title":"设置显示的指标维度","content":"详细用法参考如下示例","link":"chart/radar/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"radar-demo2"},{"title":"修改指标名称","content":"详细用法参考如下示例","link":"chart/radar/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"radar-demo3"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-ring.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-ring.json
new file mode 100644
index 000000000..5d2557a97
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-ring.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/ring/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"ring-base"},{"title":"设置指标维度","content":"详细用法参考如下示例","link":"chart/ring/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"ring-demo2"},{"title":"玫瑰图","content":"详细用法参考如下示例","link":"chart/ring/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"ring-demo3"},{"title":"限制显示条数环图","content":"详细用法参考如下示例","link":"chart/ring/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"ring-demo4"},{"title":"设置数据类型","content":"详细用法参考如下示例","link":"chart/ring/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"ring-demo5"},{"title":"设置环图半径","content":"详细用法参考如下示例","link":"chart/ring/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"ring-demo6"},{"title":"设置环图title的位置","content":"详细用法参考如下示例","link":"chart/ring/ring-title","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"ring-ring-title"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-sankey.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-sankey.json
new file mode 100644
index 000000000..1eb34f943
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-sankey.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/sankey/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"sankey-base"},{"title":"设置数据类型","content":"详细用法参考如下示例","link":"chart/sankey/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"sankey-demo2"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-scatter.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-scatter.json
new file mode 100644
index 000000000..a81978837
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-scatter.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/scatter/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"scatter-base"},{"title":"双维度多指标散点图示例","content":"详细用法参考如下示例","link":"chart/scatter/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"scatter-demo2"},{"title":"指标维度配置","content":"详细用法参考如下示例","link":"chart/scatter/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"scatter-demo3"},{"title":"数据类型配置","content":"详细用法参考如下示例","link":"chart/scatter/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"scatter-demo4"},{"title":"属性名配置","content":"详细用法参考如下示例","link":"chart/scatter/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"scatter-demo5"},{"title":"缩放配置","content":"详细用法参考如下示例","link":"chart/scatter/demo6","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"scatter-demo6"},{"title":"散点样式配置","content":"详细用法参考如下示例","link":"chart/scatter/demo7","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"scatter-demo7"},{"title":"散点出现覆盖时, 提示框可以改成通过坐标轴触发","content":"详细用法参考如下示例","link":"chart/scatter/demo8","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"scatter-demo8"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-sunburst.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-sunburst.json
new file mode 100644
index 000000000..d7a809df3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-sunburst.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n
\n该图只支持 extend
配置,使用方式及属性和 eCharts 一致,请参考 eCharts 配置
\n
\n","link":"chart/sunburst/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"sunburst-base"},{"title":"复杂示例","content":"详细用法参考如下示例","link":"chart/sunburst/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"sunburst-demo2"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-tree.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-tree.json
new file mode 100644
index 000000000..acb5916e7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-tree.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/tree/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"tree-base"},{"title":"多树图","content":"详细用法参考如下示例","link":"chart/tree/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"tree-demo2"},{"title":"径向树图","content":"详细用法参考如下示例","link":"chart/tree/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"tree-demo3"},{"title":"纵向树图","content":"详细用法参考如下示例","link":"chart/tree/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"tree-demo4"},{"title":"自定义提示框内容","content":"详细用法参考如下示例","link":"chart/tree/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"tree-demo5"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-waterfall.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-waterfall.json
new file mode 100644
index 000000000..10a7375a3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-waterfall.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/waterfall/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"waterfall-base"},{"title":"设置指标维度","content":"详细用法参考如下示例","link":"chart/waterfall/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"waterfall-demo2"},{"title":"设置数据类型","content":"详细用法参考如下示例","link":"chart/waterfall/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"waterfall-demo3"},{"title":"修改指标名称","content":"详细用法参考如下示例","link":"chart/waterfall/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"waterfall-demo4"},{"title":"设置 总计、剩余 的名称","content":"详细用法参考如下示例","link":"chart/waterfall/demo5","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"waterfall-demo5"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart-wordcloud.json b/examples/docs/resources/pc/demo-config/zh-CN/chart-wordcloud.json
new file mode 100644
index 000000000..fbe9c4ee9
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart-wordcloud.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
\n","link":"chart/wordcloud/base","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"wordcloud-base"},{"title":"设置词云图的颜色","content":"详细用法参考如下示例","link":"chart/wordcloud/demo2","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"wordcloud-demo2"},{"title":"设置词云图的形状","content":"详细用法参考如下示例","link":"chart/wordcloud/demo3","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"wordcloud-demo3"},{"title":"设置词云图的字体大小范围","content":"详细用法参考如下示例","link":"chart/wordcloud/demo4","component":" Chart 图表","findIntroStr":"基于 eCharts 封装,一个纯 Javascript 的图表库。","demoId":"wordcloud-demo4"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/chart.json b/examples/docs/resources/pc/demo-config/zh-CN/chart.json
new file mode 100644
index 000000000..28ead9d53
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/chart.json
@@ -0,0 +1,10 @@
+[
+ {
+ "title": "基本用法",
+ "content": "
图表组件支持 双向数据绑定
,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE 9/10/11,Chrome,Firefox,Safari 等)底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。\n可通过 theme
自定义主题\n百度地图和高德地图需要外网访问权限才能正常使用\n
\n",
+ "link": "chart/base",
+ "component": " Chart 图表",
+ "findIntroStr": "基于 `eCharts v5.2.1` 封装,一个纯 Javascript 的图表库。",
+ "demoId": "base"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/checkbox.json b/examples/docs/resources/pc/demo-config/zh-CN/checkbox.json
new file mode 100644
index 000000000..8bdd94403
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/checkbox.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"checkbox/basic-usage","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"basic-usage"},{"title":"复选框组","content":"
通过 checkbox-group
元素把多个 checkbox
元素管理为一组,在 checkbox-group
中使用 v-model
绑定 Array 类型的变量即可实现双向绑定。 checkbox
的 label
属性是其对应的值,若该标签中无内容,则该属性也充当 checkbox 后的介绍。label
与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
\n","link":"checkbox/checkbox-group","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"checkbox-group"},{"title":"配置式复选框组","content":"
提供 options
属性,支持通过配置对象数组数据的形式来渲染多选框组。使用该属性后,可以不用再在标签中以插槽的形式插入 checkbox
或 checkbox-button
元素。\n\noptions
对象数组中包括三个字段:label
、text
、events
。\n\n另外还提供 type
属性,配合 options
属性一起使用,默认值为 checkbox
。还可以配置为 button
,配置后复选框组将以按钮的形式展示。
\n","link":"checkbox/group-options","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"group-options"},{"title":"全选与半选","content":"
在 checkbox
元素中配置 indeterminate
属性为 true 后,勾选框将展示为半选的样式。
\n","link":"checkbox/indeterminate","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"indeterminate"},{"title":"可选数量限制","content":"
在 checkbox-group
上可通过 min
、max
属性指定可勾选项目的最小、最大值。
\n","link":"checkbox/min-max","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"min-max"},{"title":"当前是否勾选","content":"
在 checked
当前是否勾选,通过 disabled
设置组件是否禁用。
\n","link":"checkbox/checked","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"checked"},{"title":"按钮形式复选框","content":"
在 checkbox-group
元素中嵌入 checkbox-button
即可实现按钮形式的复选框组。\n通过 fill
按钮形式的 Checkbox 激活时的填充色和边框色,默认值为:#409EFF。
\n","link":"checkbox/checkbox-button","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"checkbox-button"},{"title":"垂直布局","content":"
在 checkbox-group
元素上设置 vertical
为 true,则其管理的 checkbox-button
或 checkbox
将展示为垂直布局。
\n","link":"checkbox/vertical-checkbox","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"vertical-checkbox"},{"title":"动态生成复选框组","content":"
复选框组所需数据可通过请求服务从后台取得,然后动态生成。
\n","link":"checkbox/dynamic-create-checkbox","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"dynamic-create-checkbox"},{"title":"内容超出时的提示信息","content":"
若复选框后的介绍文字超出时,可以通过 Tooltip 组件增加提示信息,鼠标悬停时可提示所有内容。\n\n在 checkbox
元素上配置 border
属性为 true,可显示边框。
\n","link":"checkbox/content-overflow","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"content-overflow"},{"title":"文本","content":"
在 text
属性设置文本内容\n通过 true-label
设置选中的值, false-label
设置未选中的值。
\n","link":"checkbox/text","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"text"},{"title":"文本选择","content":"
通过 true-label
设置选中的值, false-label
设置未选中的值。
\n","link":"checkbox/button-chek-box","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"button-chek-box"},{"title":"尺寸","content":"
当复选框为按钮形式时,通过 size
属性可以设置按钮复选框的尺寸,可选项有 medium、small、mini。\n\n在 checkbox-button
上设置 disabled
属性,将禁用某一个复选按钮,若在 checkbox-group
标签上配置 disabled
属性,则禁用所有复选按钮。
\n","link":"checkbox/with-border","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"with-border"},{"title":"事件","content":"
勾选值改变后将触发 change
事件。
\n","link":"checkbox/checkbox-events","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"checkbox-events"},{"title":"插槽","content":"
Checkbox 的内容
\n","link":"checkbox/checkbox-slot","component":" Checkbox 复选框","findIntroStr":"用于配置不同场景的选项,提供用户可在一组选项中进行多选。","demoId":"checkbox-slot"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/collapse.json b/examples/docs/resources/pc/demo-config/zh-CN/collapse.json
new file mode 100644
index 000000000..e97d6c3ea
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/collapse.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"collapse/basic-usage","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"basic-usage"},{"title":"手风琴效果","content":"
配置 accordion
属性为 true 后,折叠面板将展示手风琴效果。\n配置 v-model
设置当前激活的面板(如果是手风琴模式,绑定值类型需要为 string ,否则为 array )\nchange
事件,在当前激活面板改变时触发,参数为当前的 value 值\n配置 name
属性作为每个 collapse-item 的唯一标志符
\n","link":"collapse/accordion","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"accordion"},{"title":"禁用状态","content":"
在 collapse-item
元素上配置 disabled
属性为 true 后,将禁用指定的折叠面板项。
\n","link":"collapse/dynamic-disable","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"dynamic-disable"},{"title":"自定义面板标题","content":"
在 collapse-item
元素上配置 title
属性可以指定每个折叠面板项的标题。但同时也可以通过 title
插槽的方式自定义面板标题,比如在标题前增加图标。
\n","link":"collapse/custom-collapse-title","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"custom-collapse-title"},{"title":"自定义展开折叠图标","content":"
在 collapse-item
元素上可以通过 icon
插槽的方式自定义展开折叠 icon 图标。
\n","link":"collapse/custom-collapse-icon","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"custom-collapse-icon"},{"title":"折叠面板事件","content":"
激活面板的值改变时将触发 change
事件。
\n","link":"collapse/collapse-events","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"collapse-events"},{"title":"阻止折叠面板关闭事件","content":"
:before-close 折叠面板关闭前事件,方法里面return true/false,表示是否可以关闭
\n","link":"collapse/block-close","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"block-close"},{"title":"嵌套表格","content":"
通过 collapse-item
元素的默认插槽嵌入表格。
\n","link":"collapse/nested-grid","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"nested-grid"},{"title":"嵌套表单","content":"
通过 collapse-item
元素的默认插槽嵌入表单。
\n","link":"collapse/nested-form","component":" Collapse 折叠面板","findIntroStr":"内容区可指定动态页面或自定义 html 等,支持展开收起操作。","demoId":"nested-form"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/color.json b/examples/docs/resources/pc/demo-config/zh-CN/color.json
new file mode 100644
index 000000000..822add3f8
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/color.json
@@ -0,0 +1 @@
+[{"title":"主色彩","content":"详细用法参考如下示例","link":"color/main-color","component":" Color 色彩","findIntroStr":"Color 色彩","demoId":"main-color"},{"title":"辅助色","content":"详细用法参考如下示例","link":"color/auxiliary-color","component":" Color 色彩","findIntroStr":"Color 色彩","demoId":"auxiliary-color"},{"title":"中性色","content":"详细用法参考如下示例","link":"color/neutral-color","component":" Color 色彩","findIntroStr":"Color 色彩","demoId":"neutral-color"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/company.json b/examples/docs/resources/pc/demo-config/zh-CN/company.json
new file mode 100644
index 000000000..8e669f997
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/company.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"company/basic-usage","component":" Company 公司","findIntroStr":"Company 公司组件,用于公司名称展示及选择,通过配置数据源获取选项。","demoId":"basic-usage"},{"title":"自定义数据显示数量","content":"
可通过 max
属性设置下拉框最大显示的数据条数。clearable
是否显示清除按钮,默认为 true 。
\n","link":"company/custom-show-num","component":" Company 公司","findIntroStr":"Company 公司组件,用于公司名称展示及选择,通过配置数据源获取选项。","demoId":"custom-show-num"},{"title":"自定义服务","content":"
通过 fetch-company
属性可以指定一个方法,在方法中可实现请求自定义的服务。
\n","link":"company/custom-service","component":" Company 公司","findIntroStr":"Company 公司组件,用于公司名称展示及选择,通过配置数据源获取选项。","demoId":"custom-service"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/container.json b/examples/docs/resources/pc/demo-config/zh-CN/container.json
new file mode 100644
index 000000000..9b7931e04
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/container.json
@@ -0,0 +1 @@
+[{"title":"默认布局","content":"详细用法参考如下示例","link":"container/basic-usage","component":" Container 版型","findIntroStr":"用于布局的容器组件,方便快速搭建页面的版型。","demoId":"basic-usage"},{"title":"简约布局","content":"详细用法参考如下示例","link":"container/simple","component":" Container 版型","findIntroStr":"用于布局的容器组件,方便快速搭建页面的版型。","demoId":"simple"},{"title":"经典布局","content":"详细用法参考如下示例","link":"container/classic","component":" Container 版型","findIntroStr":"用于布局的容器组件,方便快速搭建页面的版型。","demoId":"classic"},{"title":"时尚布局","content":"详细用法参考如下示例","link":"container/fashion","component":" Container 版型","findIntroStr":"用于布局的容器组件,方便快速搭建页面的版型。","demoId":"fashionid"},{"title":"传奇布局","content":"详细用法参考如下示例","link":"container/legend","component":" Container 版型","findIntroStr":"用于布局的容器组件,方便快速搭建页面的版型。","demoId":"legend"},{"title":"自定义宽度和高度","content":"
Container 布局容器支持用户通过设置 headerHeight
、footerHeight
、asideWidth
等属性来控制 header(头部区域)
、footer(底部区域)
的高度和 aside(左侧区域)
的宽度。main(主体区域)
的宽度和高度是自适应的。
\n","link":"container/custom-with-height","component":" Container 版型","findIntroStr":"用于布局的容器组件,方便快速搭建页面的版型。","demoId":"custom-with-height"},{"title":"版型切换","content":"详细用法参考如下示例","link":"container/custom-container","component":" Container 版型","findIntroStr":"用于布局的容器组件,方便快速搭建页面的版型。","demoId":"custom-container"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/country.json b/examples/docs/resources/pc/demo-config/zh-CN/country.json
new file mode 100644
index 000000000..0cf40dc52
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/country.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"country/basic-usage","component":" Country 国家/地区","findIntroStr":"Country 国家/地区组件,用于国家/地区名称展示及选择,通过配置数据源获取选项。","demoId":"basic-usage"},{"title":"自定义服务","content":"
通过 fetch-country
属性可以指定一个方法,在方法中可实现请求自定义的服务。 clearable
设置是否可清空,默认值为 true。
\n","link":"country/custom-service","component":" Country 国家/地区","findIntroStr":"Country 国家/地区组件,用于国家/地区名称展示及选择,通过配置数据源获取选项。","demoId":"custom-service"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/credit-card-form.json b/examples/docs/resources/pc/demo-config/zh-CN/credit-card-form.json
new file mode 100644
index 000000000..6bfa4433b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/credit-card-form.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"credit-card-form/basic-usage","component":" CreditCardForm 信用卡表单","findIntroStr":"通过表单输入实时改变信用卡卡片的相关信息。","demoId":"basic-usage"},{"title":"背景图片","content":"
通过 background-image
设置信用卡背景图片。
\n","link":"credit-card-form/background-image","component":" CreditCardForm 信用卡表单","findIntroStr":"通过表单输入实时改变信用卡卡片的相关信息。","demoId":"background-image"},{"title":"事件","content":"详细用法参考如下示例","link":"credit-card-form/credit-card-form-events","component":" CreditCardForm 信用卡表单","findIntroStr":"通过表单输入实时改变信用卡卡片的相关信息。","demoId":"credit-card-form-events"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/crop.json b/examples/docs/resources/pc/demo-config/zh-CN/crop.json
new file mode 100644
index 000000000..cbb6bd128
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/crop.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
通过 src
属性设置默认裁剪的图片源路径,并通过 cropvisible
属性来控制裁剪弹框是否可见。
\n","link":"crop/basic-usage","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"basic-usage"},{"title":"裁剪框宽高比","content":"
通过 aspect-ratio
属性可以设置裁剪框的宽高比例,默认为 16 / 9
。还可以通过调用 setAspectRatio
方法来设置裁切框的宽高比。\n通过 center
属性可以设置裁剪框是否在图片正中心。
\n","link":"crop/aspect-ratio","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"aspect-ratio"},{"title":"裁剪框最小宽高","content":"
通过属性 min-crop-box-width
、min-crop-box-height
设置裁剪框最小宽高。设置后,调整裁剪框宽高时,调整到最小值后将不能再调整。\n通过属性 mmin-container-width
、min-container-height
设置容器的最小宽度,最小高度。
\n","link":"crop/min-crop-box-width-height","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"min-crop-box-width-height"},{"title":"不显示网格背景","content":"
设置 background
属性为 false
后,将不显示容器的网格背景。
\n","link":"crop/no-background","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"no-background"},{"title":"不显示虚线","content":"
设置 guides
属性为 false
将取消裁剪框上方的虚线显示。
\n","link":"crop/no-guides","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"no-guides"},{"title":"不显示模态","content":"
设置 modal
属性为 false
将取消裁剪框下方图片上方的模态层显示。
\n","link":"crop/no-modal","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"no-modal"},{"title":"视图模式","content":"
通过 view-mode
属性可以设置裁剪框的视图模式,有 0
、1
、2
、3
四种选项,默认为 0
。
\n
view-mode 选项说明
\n
0
:裁剪框可以移动到图片外面。\n1
:裁剪框只能在图片内移动。\n2
:图片不全部铺满容器,缩小时可以有一边出现空隙。\n3
:图片填充整个容器。
\n
\n","link":"crop/view-mode","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"view-mode"},{"title":"拖拽模式","content":"
通过 drag-mode
属性可以设置裁剪框的拖拽模式,有 crop
、move
、none
三种选项,默认为 crop
。
\n
drag-mode 选项说明
\n
crop
:当裁剪框取消后,按住鼠标左键在图片区域拖拽,将产生一个新的裁剪框。\nmove
:当裁剪框取消后,按住鼠标左键将移动图片。\nnone
:当裁剪框取消后,不能裁剪、也不能移动图片。\nmovable
控制图片是否可以移动,默认为 true。
\n
\n","link":"crop/drag-mode","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"drag-mode"},{"title":"自动裁剪面积","content":"
初始化时,通过属性 auto-crop-area
可以设置裁剪框自动裁剪的面积,默认为 0.8
,在 auto-crop
属性为 true
时生效。
\n","link":"crop/auto-crop-area","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"auto-crop-area"},{"title":"获取容器数据","content":"
调用 getContainerData
方法可以获取容器的大小数据。
\n","link":"crop/get-container-data","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"get-container-data"},{"title":"获取剪切框数据","content":"
调用 getCropBoxData
方法可以获取剪切框的位置和大小数据。
\n","link":"crop/get-crop-box-data","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"get-crop-box-data"},{"title":"获取裁剪后的图片数据","content":"
调用 getCroppedCanvas
方法可以获取裁剪后的图片数据,搭配 toDataURL
方法将转成 base64 图片数据,搭配 toBlob
方法将生成 Blob 图片数据。
\n","link":"crop/get-cropped-canvas","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"get-cropped-canvas"},{"title":"获取裁剪区域数据","content":"
调用 getData
方法可以获取裁剪区域的位置以及大小。
\n","link":"crop/get-data","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"get-data"},{"title":"获取图像数据","content":"
调用 getImageData
方法可以获取图像位置、大小和其他相关数据,若想获取画布位置和大小数据可以调用 getCanvasData
方法。
\n","link":"crop/get-image-data","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"get-image-data"},{"title":"替换图片","content":"
调用 replace
方法可以替换图像的 src 并重新构建 cropper 。 通过 rotatable
属性控制图片旋转,默认为 true 。
\n","link":"crop/replace-image","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"replace-image"},{"title":"放大图片","content":"详细用法参考如下示例","link":"crop/replace-image","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"replace-image1"},{"title":"鼠标滚轮缩放图像时比例","content":"
zoom-on-wheel
属性为 true
情况下,通过 wheel-zoom-ratio
属性可以设置缩放比例,默认为 0.1
。
\n","link":"crop/wheel-zoom-ratio","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"wheel-zoom-ratio"},{"title":"禁用鼠标滚轮缩放图像","content":"
设置 zoom-on-wheel
属性为 false
后,将不允许通过滚动鼠标滚轮来缩放图像。
\n","link":"crop/zoom-on-wheel","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"zoom-on-wheel"},{"title":"ready 事件","content":"
当一个 cropper 实例完全构建时触发 ready
事件。
\n","link":"crop/event-ready","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"event-ready"},{"title":"裁剪框方法 事件","content":"
当一个 cropper 实例完全构建时触发 disable
方法禁用裁剪框,当触发 enable
启用裁剪框
\n","link":"crop/crop-meth","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"crop-meth"},{"title":"裁剪相关事件","content":"
TIP
\n
说明当画布或剪切框开始发生变化时触发 cropstart
事件\n当画布或剪切框正在发生变化时触发 cropmove
事件\n当画布或剪切框发生变化结束时触发 cropend
事件\n当画布或裁剪框发生改变时触发 crop
事件\n通过触发 getCanvasData
获取画布 Canvas(图像包装器)位置和大小数据
\n
\n","link":"crop/event-about-crop","component":" Crop 图片裁剪","findIntroStr":"Crop 图像裁切,可预览,支持 JPG 和 PNG 格式,浏览图像可以手动调整选择头像区域。","demoId":"event-about-crop"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/currency.json b/examples/docs/resources/pc/demo-config/zh-CN/currency.json
new file mode 100644
index 000000000..d0fb98f0a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/currency.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"currency/basic-usage","component":" Currency 币种","findIntroStr":"Currency 币种组件,用于货币名称展示及选择,通过配置数据源获取选项。","demoId":"basic-usage"},{"title":"禁用","content":"
通过 disabled
属性设置组件是否禁用,默认值为 false。
\n","link":"currency/disable-currency","component":" Currency 币种","findIntroStr":"Currency 币种组件,用于货币名称展示及选择,通过配置数据源获取选项。","demoId":"disable-currency"},{"title":"自定义服务","content":"
通过 fetch-currency
属性可以指定一个方法,在方法中可实现请求自定义的服务。\n通过 clearable
属性设置是否可以清空,默认值为 true。
\n","link":"currency/custom-service","component":" Currency 币种","findIntroStr":"Currency 币种组件,用于货币名称展示及选择,通过配置数据源获取选项。","demoId":"custom-service"},{"title":"设置组件大小","content":"
可设置为:medium
,small
,mini
\n","link":"currency/size","component":" Currency 币种","findIntroStr":"Currency 币种组件,用于货币名称展示及选择,通过配置数据源获取选项。","demoId":"size"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/date-picker.json b/examples/docs/resources/pc/demo-config/zh-CN/date-picker.json
new file mode 100644
index 000000000..91b603422
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/date-picker.json
@@ -0,0 +1,218 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "date-picker/basic-usage",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "选择日带快捷选项",
+ "content": "
通过 picker-options
属性,该属性是一个对象,在其中指定 shortcuts
对象数组可以设置快捷选项。同时可以根据需要设置 disabledDate
方法禁用日期。
\n",
+ "link": "date-picker/date-shortcuts",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "date-shortcuts"
+ },
+ {
+ "title": "其他日期单位",
+ "content": "
通过 type
属性可以设置不同的日期单位,如下示例中配置的有 week、year、month、dates。
\n",
+ "link": "date-picker/other-picker-type",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "other-picker-type"
+ },
+ {
+ "title": "时区选择",
+ "content": "
通过 show-timezone
属性可以设置日期选择面板时区选择,同时需要引入 timezoneData 时区数据
\n",
+ "link": "date-picker/timezone",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "timezone"
+ },
+ {
+ "title": "选择日期范围",
+ "content": "
设置 type
属性为 daterange,可以设置以日期范围的形式进行选择。\n通过 onPick
获取选中日期后会执行的回调,需要与 daterange
或 datetimerange
才生效,需要配置在 picker-options
中。
\n",
+ "link": "date-picker/date-range",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "date-range"
+ },
+ {
+ "title": "日期范围快捷选项",
+ "content": "
通过 picker-options
对象设置日期范围快捷选项。\n通过 firstDayOfWeek
周起始日,该属性可选值为 1 到 7,默认值为 7。
\n",
+ "link": "date-picker/date-range-shortcuts",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "date-range-shortcuts"
+ },
+ {
+ "title": "日期范围默认时刻",
+ "content": "
使用 datetimerange
设置日期范围时,可以通过 default-time
属性设置起始与结束的时刻,默认是选定日期的 00:00:00 作为起始与结束的时刻。default-time
接受一个数组,数组的每一项都为一个字符串,第一项控制起始日期的时刻,第二项控制结束日期的时刻。
\n",
+ "link": "date-picker/default-time-of-range",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "default-time-of-range"
+ },
+ {
+ "title": "选择月份范围",
+ "content": "
设置 type
属性为 monthrange,可以设置以月份范围的形式进行选择。
\n",
+ "link": "date-picker/month-range",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "month-range"
+ },
+ {
+ "title": "月份范围快捷选项",
+ "content": "
同样通过 picker-options
对象设置月份范围快捷选项。
\n",
+ "link": "date-picker/month-range-shortcuts",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "month-range-shortcuts"
+ },
+ {
+ "title": "只读",
+ "content": "
通过 readonly
属性设置日历组件是否只读。
\n",
+ "link": "date-picker/readonly",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "readonly"
+ },
+ {
+ "title": "最大最小值",
+ "content": "
配置 picker-options
属性,在对象中的 disabledDate
方法中根据日期进行判断来禁用指定的日期段,通过这种方式来实现最大最小值。
\n",
+ "link": "date-picker/max-min",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "max-min"
+ },
+ {
+ "title": "对齐方式",
+ "content": "
通过 align
属性可以设置日期选择面板与输入框之间的对齐方式,可选值有 left、right、center,默认为 left 左对齐。
\n",
+ "link": "date-picker/align",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "align"
+ },
+ {
+ "title": "尺寸设置",
+ "content": "
通过 size
属性可以设置日期输入框的尺寸,可选值有 medium、small、mini。
\n",
+ "link": "date-picker/set-size",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "set-size"
+ },
+ {
+ "title": "清除输入",
+ "content": "
选择日期后,鼠标悬停在输入框时,默认会显示清除图标,单击图标可以清除输入框内容。设置 clearable
属性为 false 后,则不显示清除图标,不可清除。通过 clear-icon
属性可以自定义清除图标。
\n",
+ "link": "date-picker/about-clear",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "about-clear"
+ },
+ {
+ "title": "格式化相关",
+ "content": "
通过 format
属性设置输入框的格式,value-format
属性设置绑定值的格式。Date Format 属性列表
",
+ "link": "date-picker/about-format",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "about-format"
+ },
+ {
+ "title": "timeFormat格式化",
+ "content": "
通过 time-format
属性设置日期选择面板的时间显示格式
",
+ "link": "date-picker/time-format",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "time-format"
+ },
+ {
+ "title": "自定义后置图标",
+ "content": "
通过 suffix-icon
属性设置日期输入框后置图标,从 @opentiny/vue-icon
中导入一个图标并进行初始化后传给 suffix-icon
。
\n",
+ "link": "date-picker/custom-suffix-icon",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "custom-suffix-icon"
+ },
+ {
+ "title": "自定义下拉框的类名",
+ "content": "详细用法参考如下示例",
+ "link": "date-picker/custom-suffix-icon",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "custom-suffix-icon1"
+ },
+ {
+ "title": "范围选择自定义相关",
+ "content": "
范围选择时,start-placeholder
和 end-placeholder
属性可分别指定开始日期和结束日期输入框的占位符。range-separator
属性指定开始日期和结束日期输入框之间的分隔符。
\n",
+ "link": "date-picker/custom-range",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "custom-range"
+ },
+ {
+ "title": "范围选择取消面板联动",
+ "content": "
范围选择时,默认情况下,在开始日期面板中单击上一月或上一年箭头图标时,结束日期面板中日期也联动切换到上一月或上一年。在结束日期面板中切换下一月或下一年时,开始日期面板也随之联动。但若配置 unlink-panels
属性为 true ,面板之间就不再联动,切换年月时只对当前面板生效。
\n",
+ "link": "date-picker/unlink-panels",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "unlink-panels"
+ },
+ {
+ "title": "选择器打开时默认时间设置",
+ "content": "
default-value
属性指定日期选择器面板打开时默认选中的日期。
\n",
+ "link": "date-picker/default-value",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "default-value"
+ },
+ {
+ "title": "文本框不可输入",
+ "content": "
日期输入框默认可以输入日期,设置 editable
为 false 后,将不能输入。
\n",
+ "link": "date-picker/editable",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "editable"
+ },
+ {
+ "title": "事件",
+ "content": "
主要事件有 change、blur、focus。
\n",
+ "link": "date-picker/date-picker-events",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "date-picker-events"
+ },
+ {
+ "title": "获取焦点",
+ "content": "
通过 focus
方法设置使 input 获取焦点。
\n",
+ "link": "date-picker/focus",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "focus"
+ },
+ {
+ "title": "箭头按钮控制时间选择",
+ "content": "
当 type
为 datetime、datetimerange 时,设置 time-arrow-control
属性为 true,在时间面板中将显示箭头按钮,通过箭头按钮控制时间选择。默认为滚动选择时间。
\n",
+ "link": "date-picker/time-arrow-control",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "time-arrow-control"
+ },
+ {
+ "title": "不触发表单校验",
+ "content": "
日期选择器在输入时默认会触发表单校验,触发方式有 blur、change。但若设置 validate-event
属性为 false,将不再触发表单校验。
\n",
+ "link": "date-picker/validate-event",
+ "component": " DatePicker 日期选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "validate-event"
+ },
+ {
+ "title": "设置是否显示为东八区时间",
+ "content": "
通过 isutc8
属性可以设置是否显示为东八区时间
\n",
+ "link": "date-picker/utc8",
+ "component": " DatePicker 海外显示东八区时间",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "utc8"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/dept.json b/examples/docs/resources/pc/demo-config/zh-CN/dept.json
new file mode 100644
index 000000000..4b2f16d3b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/dept.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"dept/basic-usage","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"basic-usage"},{"title":"open 和 change 事件","content":"详细用法参考如下示例","link":"dept/dept-events","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"dept-events"},{"title":"selected 事件","content":"详细用法参考如下示例","link":"dept/dept-selected","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"dept-selected"},{"title":"close 事件","content":"详细用法参考如下示例","link":"dept/dept-close","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"dept-close"},{"title":"confirm 事件","content":"详细用法参考如下示例","link":"dept/dept-confirm","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"dept-confirm"},{"title":"cancel 事件","content":"详细用法参考如下示例","link":"dept/dept-cancel","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"dept-cancel"},{"title":"设置组件大小","content":"
可以设置为:medium
,small
,mini
\n","link":"dept/size","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"size"},{"title":"阻止弹框关闭","content":"
before-confirm(确认前回调事件),方法里面 return true/false,表示是否关闭弹框
\n","link":"dept/before-confirm","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"before-confirm"},{"title":"部门信息自动选中","content":"
auto-select
默认值为 true,配置该属性为 false 可以阻止当部门信息仅一个时自动补全选中行为。
\n","link":"dept/auto-select","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"auto-select"},{"title":"自定义服务数据","content":"
提供 fetch-dept-by-value
、fetch-dept
、fetch-dept-list
属性用于自定义部门服务。
\n","link":"dept/custom-service","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"custom-service"},{"title":"禁用","content":"
可通过 disabled
设置是否禁用,默认为 fase
\n","link":"dept/dynamic-disable","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"dynamic-disable"},{"title":"设置弹出框标题","content":"
自定义弹出框标题,该属性默认值为空。
\n","link":"dept/title","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"title"},{"title":"权签人插槽","content":"详细用法参考如下示例","link":"dept/slot-hrapprover","component":" Dept 部门","findIntroStr":"部门组件用于华为部门查询、选择,可以指定默认值为当前登录用户所在部门。","demoId":"slot-hrapprover"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/detail-page.json b/examples/docs/resources/pc/demo-config/zh-CN/detail-page.json
new file mode 100644
index 000000000..567d4b025
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/detail-page.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
在数据对象中可设置 hidden: true
来指定默认隐藏的数据。
\n","link":"detail-page/basic-usage","component":" DetailPage 表头详情栏","findIntroStr":"DetailPage 带表头的详情栏组件。","demoId":"basic-usage"},{"title":"自定义展示文本","content":"
通过 title
、text-split
、dialog-title
、label-title
、value-title
、tips
、save-button
、cancel-button
这些属性可指定表头详情栏组件不同位置的展示文本。
\n","link":"detail-page/custom-show-text","component":" DetailPage 表头详情栏","findIntroStr":"DetailPage 带表头的详情栏组件。","demoId":"custom-show-text"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/dialog-box.json b/examples/docs/resources/pc/demo-config/zh-CN/dialog-box.json
new file mode 100644
index 000000000..15b973c2d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/dialog-box.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"dialog-box/basic-usage","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"basic-usage"},{"title":"二级弹窗","content":"
通过 default 默认插槽和底部操作区按钮实现二级弹窗。设置 append-to-body
属性后,二级弹窗的实体 DOM 结构将追加到 body 元素上。
\n","link":"dialog-box/secondary-dialog","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"secondary-dialog"},{"title":"自定义标题","content":"
除 title
属性可以设置弹窗标题外,还可以通过 title
插槽自定义弹窗标题区的内容。
\n","link":"dialog-box/custom-dialog-title","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"custom-dialog-title"},{"title":"自定义内容","content":"
通过 default 默认插槽自定义弹窗主体部分的内容。
\n","link":"dialog-box/custom-dialog-content","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"custom-dialog-content"},{"title":"自定义底部","content":"
通过 footer
插槽自定义弹窗底部操作区内容。
\n","link":"dialog-box/custom-dialog-footer","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"custom-dialog-footer"},{"title":"隐藏关闭按钮","content":"
默认弹窗右上角会显示关闭图标,单击可以关闭弹窗。若设置 show-close
为 false 后,将隐藏关闭图标,要实现关闭弹窗的功能可以通过底部操作区按钮的 click 事件切换 visible
属性的值为 false 。
\n","link":"dialog-box/hidden-close-buttons","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"hidden-close-buttons"},{"title":"禁用 ESC 关闭","content":"
默认弹窗打开后,可以按下 Esc 键关闭弹窗,设置 close-on-press-escape
为 false 后将禁用该功能。
\n","link":"dialog-box/close-on-press-escape","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"close-on-press-escape"},{"title":"弹窗距离顶部的高度","content":"
通过 top
属性指定弹窗距离窗口顶部的高度,默认为屏高的 15% 。
\n","link":"dialog-box/dialog-top-height","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"dialog-top-height"},{"title":"弹窗的宽度","content":"
通过 width
属性指定弹窗的宽度。
\n","link":"dialog-box/dialog-width","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"dialog-width"},{"title":"点击遮罩时不关闭弹窗","content":"
默认弹窗打开后,可以单击遮罩层关闭弹窗,设置 close-on-click-modal
为 false 后将禁用该功能。
\n","link":"dialog-box/close-on-click-modal","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"close-on-click-modal"},{"title":"不启用遮罩层","content":"
默认弹窗打开时会显示遮罩层,设置 modal
为 false 后将不启用遮罩层。无遮罩层时,单击弹窗外部区域仍然可以关闭弹窗。
\n","link":"dialog-box/no-modal","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"no-modal"},{"title":"右侧弹窗","content":"
设置 right-slide
属性为 true 后,弹窗将从窗口右侧弹出。\n设置 modal-append-to-body
属性默认为 true 遮罩层应用在 body 上。
\n","link":"dialog-box/right-dialog","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"right-dialog"},{"title":"隐藏标题区域","content":"
弹窗默认有标题区域,设置 show-header
为 false 后,将隐藏标题区域。
\n","link":"dialog-box/hidden-header","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"hidden-header"},{"title":"弹出时禁用滚动","content":"
弹窗弹出后,背景页面默认仍然是不可以滚动的,设置 lock-scroll
为 fasle 后将不锁定被遮罩内容的滚动。
\n","link":"dialog-box/lock-scroll","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"lock-scroll"},{"title":"头部和底部水平居中","content":"
头部标题默认显示在区域左侧,设置 center
为 true 后,将居中显示。
\n","link":"dialog-box/center","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"center"},{"title":"可拖拽的弹窗","content":"
默认弹窗不可拖拽,设置 draggable
属性为 true 后,鼠标移入标题区域单击可拖拽,拖拽事件有 @drag-start
、drag-move
、drag-end
。
\n","link":"dialog-box/draggable","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"draggable"},{"title":"全屏弹窗","content":"
设置 fullscreen
属性为 true 可显示全屏弹窗,默认弹窗宽度是 500px,此时设置宽度是不生效的。
\n","link":"dialog-box/fullscreen","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"fullscreen"},{"title":"弹出与关闭事件","content":"
open
:对话框打开时触发,opened
:对话框打开动画结束时触发,close
:对话框关闭时触发,closed
:对话框关闭动画结束时触发。
\n","link":"dialog-box/open-close-events","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"open-close-events"},{"title":"弹窗表单","content":"
通过 default 默认插槽实现嵌套表单以及表单提交的逻辑。
\n
默认关闭弹窗的时候重置表单,设置is-form-reset
为false,则关闭弹窗的时候不重置表格
","link":"dialog-box/form-in-dialog","component":" DialogBox 对话框","findIntroStr":"模态对话框,在浮层中显示,引导用户进行相关操作。","demoId":"form-in-dialog"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/drop-roles.json b/examples/docs/resources/pc/demo-config/zh-CN/drop-roles.json
new file mode 100644
index 000000000..7d32d8204
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/drop-roles.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"drop-roles/basic-usage","component":" DropRoles 下拉角色","findIntroStr":"DropRoles,提供当前用户的角色列表,并可以在不同角色间进行切换。","demoId":"basic-usage"},{"title":"change 事件","content":"
切换下拉角色时触发 change 事件,需要通过 change 事件回调方法去发送请求。
\n","link":"drop-roles/change-role-event","component":" DropRoles 下拉角色","findIntroStr":"DropRoles,提供当前用户的角色列表,并可以在不同角色间进行切换。","demoId":"change-role-event"},{"title":"设置组件大小","content":"
可设置为:medium
,small
,mini
\n","link":"drop-roles/size","component":" DropRoles 下拉角色","findIntroStr":"DropRoles,提供当前用户的角色列表,并可以在不同角色间进行切换。","demoId":"size"},{"title":"自定义服务","content":"
可通过 fetch-role
和 fetch-current-role
两个方法自定义服务,同时可通过 fields
属性指定显示和绑定值对应的字段。\n可通过 placeholder
展示占位符。
\n","link":"drop-roles/custom-service","component":" DropRoles 下拉角色","findIntroStr":"DropRoles,提供当前用户的角色列表,并可以在不同角色间进行切换。","demoId":"custom-service"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/drop-times.json b/examples/docs/resources/pc/demo-config/zh-CN/drop-times.json
new file mode 100644
index 000000000..3661702d5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/drop-times.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"drop-times/basic-usage","component":" dropTimes 下拉时间","findIntroStr":"时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。","demoId":"basic-usage"},{"title":"步长与时间区间","content":"
start
设置区间的起始时间,默认为 0 ,end
设置区间的结束时间,默认为 24 * 60 ,step
设置间隔的步长,默认为 15 。
\n","link":"drop-times/start-end-step","component":" dropTimes 下拉时间","findIntroStr":"时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。","demoId":"start-end-step"},{"title":"设置组件大小的size属性","content":"
可设置为:medium,small,mini
\n","link":"drop-times/size","component":" dropTimes 下拉时间","findIntroStr":"时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。","demoId":"size"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/dropdown.json b/examples/docs/resources/pc/demo-config/zh-CN/dropdown.json
new file mode 100644
index 000000000..a766941d4
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/dropdown.json
@@ -0,0 +1,74 @@
+[
+ {
+ "title": "基本用法",
+ "content": "
基本用法
\n",
+ "link": "dropdown/basic-usage",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "触发对象",
+ "content": "
配置split-button
属性,可以使用内置按钮触发下拉菜单,同时可以通过type
属性配置按钮状态,用法同Button
组件
\n",
+ "link": "dropdown/split-button",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "split-button"
+ },
+ {
+ "title": "触发方式",
+ "content": "
可以配置 click
激活或者 hover
激活
\n",
+ "link": "dropdown/trigger",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "trigger"
+ },
+ {
+ "title": "菜单隐藏方式",
+ "content": "
下拉菜单默认在点击菜单项后会被隐藏,将 hide-on-click
属性默认为 false
可以关闭此功能。
\n",
+ "link": "dropdown/hide-on-click",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "hide-on-click"
+ },
+ {
+ "title": "禁用",
+ "content": "
Dropdown、DropdownItem 两个组件分别可以通过 disabled
属性设置禁用状态。
\n",
+ "link": "dropdown/disabled",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "disabled"
+ },
+ {
+ "title": "不同尺寸",
+ "content": "
额外的尺寸:medium
、small
、mini
,通过设置 size
属性来配置它们。
\n",
+ "link": "dropdown/size",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "size"
+ },
+ {
+ "title": "使用配置式",
+ "content": "
Dropdown 可以通过menu-options
属性配置 DropdownMenu 的属性,title
配置触发源的名称
DropdownMenu 可以通过options
属性配置 DropdownItem 的属性,text-field
结合 options
使用,可以指定菜单文案显示的字段。text-field
默认为label
\n",
+ "link": "dropdown/options",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "options"
+ },
+ {
+ "title": "多级菜单",
+ "content": "
Dropdown 可以通过children
字段设置菜单的子节点
\n",
+ "link": "dropdown/multi-level",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "multi-level"
+ },
+ {
+ "title": "内置事件",
+ "content": "
内置事件包含:button-click
、item-click
、visible-change
事件。
\n",
+ "link": "dropdown/events",
+ "component": "Dropdown 下拉菜单",
+ "findIntroStr": "Dropdown 下拉菜单。",
+ "demoId": "events"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/espace.json b/examples/docs/resources/pc/demo-config/zh-CN/espace.json
new file mode 100644
index 000000000..938808c84
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/espace.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
data
属性设置组件数据,数组对象中包含选项有 type、value、icon。其中 type 的可选择值有:im、sip、mailto 。单击图标,将会打开 type 选项值对应的外部应用。
\n","link":"espace/data","component":" Espace 消息弹框","findIntroStr":"主要和 UserContact 联系人组件配套使用,快捷打开对应用户的 eSpace 弹窗,eSpace 呼叫,邮件等应用。","demoId":"data"},{"title":"用户联系人使用 eSpace","content":"
UserContact 联系人组件提供了 espace
属性配置 Espace 组件需要的数据。该组件内部实际使用了 Espace 组件。
\n","link":"user-contact/support-open-espace","component":" Espace 消息弹框","findIntroStr":"主要和 UserContact 联系人组件配套使用,快捷打开对应用户的 eSpace 弹窗,eSpace 呼叫,邮件等应用。","demoId":"support-open-espace"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/fall-menu.json b/examples/docs/resources/pc/demo-config/zh-CN/fall-menu.json
new file mode 100644
index 000000000..69f740ded
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/fall-menu.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"fall-menu/data-resource","component":" FallMenu 瀑布菜单","findIntroStr":"FallMenu 瀑布菜单以横向方式显示,支持三级菜单配置,适用于版型定制,以弹出的方式展示。","demoId":"data-resource"},{"title":"数据源","content":"
通过 data
设置瀑布菜单的数据。
\n","link":"fall-menu/data-resource","component":" FallMenu 瀑布菜单","findIntroStr":"FallMenu 瀑布菜单以横向方式显示,支持三级菜单配置,适用于版型定制,以弹出的方式展示。","demoId":"data-resource1"},{"title":"自定义左/右侧图标","content":"
通过 left
插槽自定义左侧切换图标为 IconLeft ,通过 right
插槽右侧切换图标 IconRight 。
\n","link":"fall-menu/custom-slider-icon","component":" FallMenu 瀑布菜单","findIntroStr":"FallMenu 瀑布菜单以横向方式显示,支持三级菜单配置,适用于版型定制,以弹出的方式展示。","demoId":"custom-slider-icon"},{"title":"自定义内容","content":"
通过 level1
插槽自定义一级菜单内容,通过 level2
插槽自定义二级菜单内容,通过 level3
插槽自定义三级菜单内容。
\n","link":"fall-menu/custom-menuitem","component":" FallMenu 瀑布菜单","findIntroStr":"FallMenu 瀑布菜单以横向方式显示,支持三级菜单配置,适用于版型定制,以弹出的方式展示。","demoId":"custom-menuitem"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/file-upload.json b/examples/docs/resources/pc/demo-config/zh-CN/file-upload.json
new file mode 100644
index 000000000..06c8f90e0
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/file-upload.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
属性 action(type:String) 上传服务器地址。
\n","link":"file-upload/basic-usage","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"basic-usage"},{"title":"设置组件大小","content":"
可选值为large
,medium
,small
,mini
\n","link":"file-upload/size","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"size"},{"title":"可上传的文件类型","content":"
通过配置 accept(image) 来限制上传文件的格式为 image
\n","link":"file-upload/accept-file-image","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"accept-file-image"},{"title":"手动上传","content":"
通过 action 配置上传地址,通过 submit 设置手动上传
\n","link":"file-upload/manual-upload","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"manual-upload"},{"title":"阻止删除文件","content":"
:before-remove(移除文件前回调事件),方法里面return true/false,表示是否可以删除
\n","link":"file-upload/prevent-delete-file","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"prevent-delete-file"},{"title":"阻止上传文件","content":"
before-upload(上传前回调事件),方法里面 return true/false,表示是否可以进行上传文件
\n","link":"file-upload/prevent-upload-file","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"prevent-upload-file"},{"title":"上传请求","content":"
可通过配置 action 为上传地址,可通过配置 headers 为头部请求信息
\n","link":"file-upload/upload-request","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"upload-request"},{"title":"mini 模式","content":"
\n可通过配置 mini-mode,设置显示 mini 模式
\n","link":"file-upload/mini-mode","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"mini-mode"},{"title":"是否可以拖拽文件上传","content":"
可配置 drag(type:boolean)
,来控制组件是否可以拖拽文件上传,如果配置了 accept
属性,可通过 @drop-error
事件获取不合规的拖拽文件。
\n","link":"file-upload/drag-upload","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"drag-upload"},{"title":"拖拽上传","content":"
可配置drag(type:boolean),来控制组件是否可以拖拽文件
\n","link":"file-upload/drag-select-file","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"drag-select-file"},{"title":"上传的文件列表","content":"
通过 show-file-list
配置是否显示是否显示已上传文件列表,默认值为 true ,需要与 file-list 同时使用\n可配置 :file-list(type:Object)
来显示已上传的文件名和地址
\n","link":"file-upload/upload-file-list","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"upload-file-list"},{"title":"上传的文件列表弹出显示","content":"
通过 list-type = thumb
开启文件列表弹窗显示,thumbOption
设置弹窗相关数据;
\n","link":"file-upload/upload-file-list-thumb","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"upload-file-list-thumb"},{"title":"自定义上传请求","content":"
通过配置 headers
,设置自定义上传请求头信息
\n","link":"file-upload/custom-upload-request","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"custom-upload-request"},{"title":"覆盖默认请求","content":"
通过配置 http-request
,覆盖默认的上传行为,可以自定义上传的实现
\n","link":"file-upload/http-request","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"http-request"},{"title":"最大上传限制","content":"
可配置:before-upload(上传前事件回调),对文件类型和大小做限制
\n","link":"file-upload/upload-limit","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"upload-limit"},{"title":"照片墙","content":"
可配置list-type = 'picture-card'开启照片墙模式
\n","link":"file-upload/picture-card","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"picture-card"},{"title":"文件缩略图","content":"详细用法参考如下示例","link":"file-upload/file-picture-card","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"file-picture-card"},{"title":"图片列表缩略图","content":"
\n可通过配置list-type="picture",来实现图片列表缩略图显示
\n","link":"file-upload/picture-list","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"picture-list"},{"title":"最大上传文件数","content":"
\n可通过配置limit(type:Number,大于0的整数)来限制上传文件的个数
\n","link":"file-upload/max-file-count","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"max-file-count"},{"title":"文件多选","content":"
文件选择默认单选\n可配置multiple = 'true' 实现文件多选
\n","link":"file-upload/multiple-file","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"multiple-file"},{"title":"钩子函数","content":"
before-remove
删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。before-upload
上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
\n","link":"file-upload/custom-prefix","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"custom-prefix"},{"title":"事件","content":"
preview
点击文件列表中已上传的文件时触发的事件。\nremove
文件列表移除文件时触发的事件。\nerror
文件上传失败时触发的事件。\nexceed
文件超出个数限制时触发的事件。\nprogress
文件上传时触发的事件。\nchange
文件状态改变时触发的事件,添加文件、上传成功和上传失败时都会被触发。\nsuccess
文件上传成功时触发的事件。
\n","link":"file-upload/upload-events","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"upload-events"},{"title":"支持发送 cookie 凭证信息","content":"
可通过配置:with-credentials = 'true' 开启访问服务器携带 cookie,默认为 false 。
\n","link":"file-upload/upload-request","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"upload-request1"},{"title":"手动清空已上传文件列表","content":"
调用组件clearFiles方法,清空已上传的文件列表(该方法不支持在 before-upload 中调用)
\n","link":"file-upload/clear-files","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"clear-files"},{"title":"手动取消上传请求","content":"
调用组件abort方法,取消上传请求
\n","link":"file-upload/abort-quest","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"abort-quest"},{"title":"自定义上传提示","content":"
可通过 tip 插槽来自定义上传提示
\n","link":"file-upload/custom-upload-tip","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"custom-upload-tip"},{"title":"自定义触发文件选项框","content":"
可在组件中写一个名为trigger的插槽,来触发弹出文件选项框
\n","link":"file-upload/custom-trigger","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"custom-trigger"},{"title":"用户头像上传","content":"详细用法参考如下示例","link":"file-upload/upload-user-head","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"upload-user-head"},{"title":"获取上传的片的原始尺寸","content":"
\n获取上传的片的原始尺寸
\n","link":"file-upload/image-size","component":" FileUpload 文件上传","findIntroStr":"可以设定文件的类型与上传的个数等。可自定义上传服务。","demoId":"image-size"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/floatbar.json b/examples/docs/resources/pc/demo-config/zh-CN/floatbar.json
new file mode 100644
index 000000000..ab66b20ed
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/floatbar.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
默认固定在屏幕右侧固定位置
\n","link":"floatbar/base","component":" Floatbar 浮动块","findIntroStr":"始终浮动在屏幕某一位置,不会因网页滚动使此模块离开屏幕。","demoId":"base"},{"title":"自定义样式","content":"
可通过配置 css 样式,设置浮动块的样式
\n","link":"floatbar/custom-style","component":" Floatbar 浮动块","findIntroStr":"始终浮动在屏幕某一位置,不会因网页滚动使此模块离开屏幕。","demoId":"custom-style"},{"title":"自定义内容","content":"
通过默认插槽设置浮动块的内容
\n","link":"floatbar/custom-floatbar-item","component":" Floatbar 浮动块","findIntroStr":"始终浮动在屏幕某一位置,不会因网页滚动使此模块离开屏幕。","demoId":"custom-floatbar-item"},{"title":"操作浮动块内容","content":"详细用法参考如下示例","link":"floatbar/operation-floatbar-item","component":" Floatbar 浮动块","findIntroStr":"始终浮动在屏幕某一位置,不会因网页滚动使此模块离开屏幕。","demoId":"operation-floatbar-item"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/font.json b/examples/docs/resources/pc/demo-config/zh-CN/font.json
new file mode 100644
index 000000000..8ec998009
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/font.json
@@ -0,0 +1 @@
+[{"title":"中文字体集","content":"详细用法参考如下示例","link":"font/chinese-font-set","component":" Font 字体","findIntroStr":"Font 字体","demoId":"chinese-font-set"},{"title":"英文字体","content":"详细用法参考如下示例","link":"font/english-fonts","component":" Font 字体","findIntroStr":"Font 字体","demoId":"english-fonts"},{"title":"字体使用规范","content":"详细用法参考如下示例","link":"font/Font-usage-specifications","component":" Font 字体","findIntroStr":"Font 字体","demoId":"Font-usage-specifications"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/form.json b/examples/docs/resources/pc/demo-config/zh-CN/form.json
new file mode 100644
index 000000000..9fcddc2e9
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/form.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "常用表单",
+ "content": "
在 Form 组件中,每一个表单域由一个 FormItem 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
\n",
+ "link": "form/frequently-used-form",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "frequently-used-form"
+ },
+ {
+ "title": "行内表单",
+ "content": "
当垂直方向空间受限且表单较简单时,可以在一行内放置表单,设置 inline
属性可以让表单域变为行内的表单域。
\n",
+ "link": "form/form-in-row",
+ "component": " FormItem 表单项",
+ "findIntroStr": "Form 组件下的 FormItem 配置。",
+ "demoId": "form-in-row"
+ },
+ {
+ "title": "表单校验",
+ "content": "
包括常用的必填、日期、时间、URL、邮件等校验规则。通过 trigger
配置触发校验规则的方式,为 change
时,当输入框值改变即触发校验,为 blur
时则失焦后触发校验。
\n",
+ "link": "form/form-validation",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "form-validation"
+ },
+ {
+ "title": "自定义校验规则",
+ "content": "
通过 validator
选项进行自定义校验,校验方法中 callback
必须被调用。通过配置 validate-on-rule-change
属性,设置是否在 rules
属性改变后立即触发一次验证
\n",
+ "link": "form/custom-validation-rule",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "custom-validation-rule"
+ },
+ {
+ "title": "文本对齐",
+ "content": "
通过配置 label-align
属性, 设置是否文本对齐
\n",
+ "link": "form/label-align",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "label-align"
+ },
+ {
+ "title": "校验提示位置",
+ "content": "
通过 validate-position
可自定义错误提示出现的位置,在 Form
组件上设置后,子组件FormItem
会继承父组件设置。单独在 FormItem
组件上进行设置优先级高于在 From
上的设置。
\n",
+ "link": "form/validation-position",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "validation-position"
+ },
+ {
+ "title": "无校验的组件添加校验的方法",
+ "content": "详细用法参考如下示例",
+ "link": "form/no-validate-to-add",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "no-validate-to-add"
+ },
+ {
+ "title": "表单尺寸",
+ "content": "
通过在 tiny-form
标签上设置 size
属性可以改变表单内组件尺寸;设置 disabled
属性可以改变表单内组件禁用状态
\n",
+ "link": "form/size",
+ "component": " FormItem 表单项",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "size"
+ },
+ {
+ "title": "移除表单项的校验结果",
+ "content": "
调用 clearValidate
方法移除表单项的校验结果。传入待移除的表单项的 prop
属性或者 prop
组成的数组,如不传则移除整个表单的校验结果。
\n",
+ "link": "form/form-clear-validate",
+ "component": " 移除表单项的校验结果",
+ "findIntroStr": "Form 组件下的移除表单项的校验结果的方法。",
+ "demoId": "form-clear-validate"
+ },
+ {
+ "title": "标签文本插槽",
+ "content": "
通过在 label
插槽,自定义标签文本的内容
\n",
+ "link": "form/slot-label",
+ "component": " FormItem 表单项",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "slot-label"
+ },
+ {
+ "title": "隐藏表单项校验提示",
+ "content": "
通过配置 novalid-tip
设置是否显示校验提示框的tip内容提示。
\n",
+ "link": "form/novalid-tip",
+ "component": " Form 表单",
+ "findIntroStr": "配置是否显示校验提示框的tip内容提示",
+ "demoId": "novalid-tip"
+ },
+ {
+ "title": "校验提示的形式",
+ "content": "
通过 validate-type
可设置校验提示信息是以 text
文本显示还是以 tip
提示框的形式显示,默认为 tip
。也可直接配置在某一个 <form-item>
上控制某一项的校验提示形式。
\n",
+ "link": "form/validate-type",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "validate-type"
+ },
+ {
+ "title": "表单禁用",
+ "content": "
通过 disabled
可设置表单是否禁用,默认为 false
。
\n",
+ "link": "form/form-disabled",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "form-disabled"
+ },
+ {
+ "title": "复杂布局",
+ "content": "
通过配合 Row
和 Col
组件来实现复杂布局。
\n",
+ "link": "form/form-row-col",
+ "component": " Form 表单",
+ "findIntroStr": "由按钮、输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。",
+ "demoId": "form-row-col"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/fullscreen.json b/examples/docs/resources/pc/demo-config/zh-CN/fullscreen.json
new file mode 100644
index 000000000..d62a37b3f
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/fullscreen.json
@@ -0,0 +1 @@
+[{"title":"组件式使用","content":"详细用法参考如下示例","link":"fullscreen/example-component","component":" Fullscreen 全屏显示","findIntroStr":"Fullscreen 全屏显示","demoId":"example-component"},{"title":"函数式使用","content":"详细用法参考如下示例","link":"fullscreen/example-api","component":" Fullscreen 全屏显示","findIntroStr":"Fullscreen 全屏显示","demoId":"example-api"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-align.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-align.json
new file mode 100644
index 000000000..93d8c17d5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-align.json
@@ -0,0 +1 @@
+[{"title":"列对齐","content":"
align
设置单独列对齐方式 可选值为 left
center
right
,默认值为 left
。
\n
TIP
\n
列设置的 align
会覆盖掉表格设置的 align
\n
\n","link":"grid/align/column-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-column-align"},{"title":"表头左对齐","content":"
header-align
设置表头对齐方式可选值为 left
center
right
,默认值为 left
。
\n
TIP
\n
表格上配置 header-align
会被列配置的 header-align
覆盖
\n
\n","link":"grid/align/header-align/left-header-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-header-align-left-header-align"},{"title":"表头右对齐","content":"详细用法参考如下示例","link":"grid/align/header-align/right-header-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-header-align-right-header-align"},{"title":"表头居中对齐","content":"详细用法参考如下示例","link":"grid/align/header-align/center-header-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-header-align-center-header-align"},{"title":"表尾左对齐","content":"
footer-align
设置表尾对齐方式的可选值为 left
center
right
,默认值为 left
。
\n
TIP
\n
表格上配置 footer-align
会被列配置的 footer-align
覆盖
\n
\n","link":"grid/align/footer-align/left-footer-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-footer-align-left-footer-align"},{"title":"表尾右对齐","content":"详细用法参考如下示例","link":"grid/align/footer-align/right-footer-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-footer-align-right-footer-align"},{"title":"表尾居中对齐","content":"详细用法参考如下示例","link":"grid/align/footer-align/center-footer-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-footer-align-center-footer-align"},{"title":"表格左对齐","content":"
align
设置全部列对齐方式可选值为 left
center
right
,默认值为 left
。
\n
TIP
\n
表格设置对齐方式优先级最低,会被单独设置对齐方式覆盖
\n
\n","link":"grid/align/grid-align/left-grid-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-grid-align-left-grid-align"},{"title":"表格右对齐","content":"详细用法参考如下示例","link":"grid/align/grid-align/right-grid-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-grid-align-right-grid-align"},{"title":"表格居中对齐","content":"详细用法参考如下示例","link":"grid/align/grid-align/center-grid-align","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"align-grid-align-center-grid-align"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-cascade.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-cascade.json
new file mode 100644
index 000000000..b45b5211a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-cascade.json
@@ -0,0 +1 @@
+[{"title":"Grid-数据级联-正常列级联","content":"
需要在 grid
标签上配 edit-config
对象,activeMethod
编辑前的事件处理编辑项数据集。\ngrid-column
列上面配置 editor
对象,component
用来渲染编辑组件。\nattrs
配置级联数据。\nevents
来设置事件。\n具体参考下面示例。
\n","link":"grid/grid_Example/dataCascading/cascade","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-dataCascading-cascade"},{"title":"Grid-数据级联-任意父级联","content":"
需要在 grid
标签上配 edit-config
对象,activeMethod
编辑前的事件处理编辑项数据集。\ngrid-column
列上面配置 editor
对象,component
用来渲染编辑组件。\nattrs
配置级联数据。\nevents
来设置事件。\n具体参考下面示例。
\n","link":"grid/grid_Example/dataCascading/arbitraryCascade","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-dataCascading-arbitraryCascade"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-context-menu.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-context-menu.json
new file mode 100644
index 000000000..e3670bce3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-context-menu.json
@@ -0,0 +1 @@
+[{"title":"Grid-右键菜单-表头菜单","content":"
配置 :context-menu="{header: {options: headerMenus}, visibleMethod}"
对象来控制表头菜单。\nheaderMenus
里面配置 visible
是否显示菜单, disabled
是否禁用菜单项。\n可配合 visibleMethod
方法来控制菜单权限。\n@context-menu-click
监控菜单点击事件。\n具体参考下面示例。
\n","link":"grid/grid_Example/shortcutMenu/header-menu","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-shortcutMenu-header-menu"},{"title":"Grid-右键菜单-表尾菜单","content":"
必须要配置 :context-menu="{body: {options: bodyMenus}}"
,show-footer
,:footer-method="footerMethod"
才能展示表尾菜单\n配置 :context-menu="{body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}"
对象来控制表头菜单。\nfooterMenus
里面配置 visible
是否显示菜单, disabled
是否禁用菜单项。\n可配合 visibleMethod
方法来控制菜单权限。\n@context-menu-click
监控菜单点击事件。\n具体参考下面示例。
\n","link":"grid/grid_Example/shortcutMenu/footer-menu","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-shortcutMenu-footer-menu"},{"title":"Grid-右键菜单-单元格菜单","content":"
配置 context-menu="{body: {options: bodyMenus},visibleMethod}"
对象来控制单元格菜单。\nbodyMenus
里面配置 visible
是否显示菜单,disabled
是否禁用菜单项。\n可配合 visibleMethod
方法来控制菜单权限。\n@cell-context-menu
监控菜单弹出前事件。\n@context-menu-click
监控菜单点击事件。\n具体参考下面示例。
\n","link":"grid/grid_Example/shortcutMenu/cell-menu","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-shortcutMenu-cell-menu"},{"title":"Grid-右键菜单-菜单权限","content":"
配置 :context-menu="{header: {options: headerMenus},body: {options: bodyMenus}, footer: {options: footerMenus},visibleMethod}"
对象来控制表头菜单。\nheader,bodyMenus,footer
里面配置 visible
是否显示菜单, disabled
是否禁用菜单项。\n使用配合 visibleMethod
方法来控制菜单权限。\n@cell-context-menu
监控菜单弹出前事件。\n@context-menu-click
监控菜单点击事件。\n具体参考下面示例。
\n","link":"grid/grid_Example/shortcutMenu/menu-permissions","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-shortcutMenu-menu-permissions"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-custom-style.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-custom-style.json
new file mode 100644
index 000000000..344556a35
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-custom-style.json
@@ -0,0 +1 @@
+[{"title":"设置行样式","content":"
通过 row-class-name
自定义设置表格的行样式
\n
设置行样式
\n","link":"grid/custom-style/row-style","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"custom-style-row-style"},{"title":"设置表头样式","content":"
通过 header-cell-class-name
和 header-row-class-name
设置表头的单元格和行样式
\n
设置表头单元格样式
\n","link":"grid/custom-style/header-style/header-cell-style","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"custom-style-header-style-header-cell-style"},{"title":"设置表头单元格样式","content":"详细用法参考如下示例","link":"grid/custom-style/header-style/header-row-style","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"custom-style-header-style-header-row-style"},{"title":"表尾样式(自定义表尾行样式)","content":"
通过 footer-cell-class-name
和 footer-row-class-name
设置表尾的单元格和行样式
\n","link":"grid/custom-style/footer-style/footer-cell-style","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"custom-style-footer-style-footer-cell-style"},{"title":"表尾样式(自定义表尾单元格样式)","content":"详细用法参考如下示例","link":"grid/custom-style/footer-style/footer-row-style","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"custom-style-footer-style-footer-row-style"},{"title":"单元格样式","content":"
通过 cell-class-name
自定义设置表格的单元格样式
\n","link":"grid/custom-style/cell-style","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"custom-style-cell-style"},{"title":"列样式","content":"
通过 class-name
自定义设置表格的列样式
\n","link":"grid/column/class-name","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"column-class-name"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-customized.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-customized.json
new file mode 100644
index 000000000..a8b371199
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-customized.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "列宽",
+ "content": "
在 grid
标签上配置 resizable="true"
可以调整列宽,并在 toolbar
标签上配置 resizable="{storage: true}"
保存在本地的 localStroage
里,刷新页面表格的列宽按照拖动后的列宽显示
\n",
+ "link": "grid/custom/column-width",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-column-width"
+ },
+ {
+ "title": "简化版列设置",
+ "content": "
在 toolbar
标签上配置 :setting="{simple: true, customDisable: customDisable}"
开启简化版列设置 通过customDisable
方法自定义当前选项是否禁用
\n",
+ "link": "grid/custom/column-simple",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-column-simple"
+ },
+ {
+ "title": "手动重置列操作",
+ "content": "
方法说明
\n
resetResizable()
:手动重置列宽拖动的操作,还原到初始状态\nresetCustoms()
:手动重置列的显示/隐藏操作,还原到初始状态\nresetAll()
:手动重置列的所有操作,还原到初始状态
\n
\n
请先对列宽进行拖动、隐藏列等操作,然后单击对应按钮查看效果。
\n",
+ "link": "grid/custom/resetResizable",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-resetResizable"
+ },
+ {
+ "title": "排序",
+ "content": "
在 column
标签上配置 sortable
可以排序(未配置的列,在个性化面板中的排序图标会隐藏),并在 toolbar
标签上配置 setting
开启个性化设置,在个性化面板里进行排序,排序过后会保存在本地的 localStroage
里,刷新页面页面上会显示排序过后的数据
\n",
+ "link": "grid/custom/column-sort",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-column-sort"
+ },
+ {
+ "title": "排序类型",
+ "content": "
在 column
标签上配置 sortable
可以排序,并在 toolbar
标签上配置 setting
开启个性化设置,在个性化面板里选择其它设置,其它设置里可以选择排序类型,排序类型有当前页排序和所有数据排序选项,默认是当前页排序
\n",
+ "link": "grid/custom/sort-type",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-sort-type"
+ },
+ {
+ "title": "列冻结",
+ "content": "
在 column
标签上配置 fixed="left"
可以固定在左侧,并在 toolbar
标签上配置 setting
开启个性化设置,在个性化面板里可以设置是否固定列
\n",
+ "link": "grid/custom/column-fixed",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-column-fixed"
+ },
+ {
+ "title": "本地记录",
+ "content": "
配置 setting
的 sortable
为 sortablejs
可实现拖拽排序列功能, 此功能在多级列头下无效
\n",
+ "link": "grid/custom/ordercolumn-local",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-ordercolumn-local"
+ },
+ {
+ "title": "加载远端数据",
+ "content": "
通过 reloadCustoms
方法,将第二个参数置为 true
可按序加载列
\n",
+ "link": "grid/custom/ordercolumn-remote",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-ordercolumn-remote"
+ },
+ {
+ "title": "列显示隐藏",
+ "content": "
在 toolbar
标签上配置 setting
开启个性化设置,在个性化面板里可以设置是否显示和隐藏列
\n",
+ "link": "grid/custom/column-visible-hidden",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-column-visible-hidden"
+ },
+ {
+ "title": "手动隐藏显示列",
+ "content": "
通过调用 hideColumn(column)
方法隐藏指定列,showColumn(column)
方法显示指定列。使用这两个方法隐藏/显示列时,还需要再调用 refreshColumn()
方法刷新列配置才能实际生效。
\n",
+ "link": "grid/hide/hideColumn",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "hide-hideColumn"
+ },
+ {
+ "title": "个性化面板拖拽前事件",
+ "content": "
在 toolbar
标签上配置 setting
开启个性化设置,在个性化面板里配置 onBeforeMove
拖拽前事件,也可配置 filter
设置类名, 拖拽个性化面板某一行会触发个性化面板的拖拽前事件。
\n",
+ "link": "grid/custom/prsonalized-drag",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-prsonalized-drag"
+ },
+ {
+ "title": "分页条数",
+ "content": "
在 toolbar
标签上配置 setting
开启个性化设置,在个性化面板里选择其它设置,其它设置里可以选择每页显示的条数,可以通过 setting
的 other
属性控制显示其他设置,Boolean
类型默认为 true
\n",
+ "link": "grid/custom/page-size",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-page-size"
+ },
+ {
+ "title": "本地存储",
+ "content": "
在 toolbar
标签上配置 :setting="{storage:'local'}"
开启个性化并保存到本地 localSotrage
里
\n
\n
\n",
+ "link": "grid/custom/local-storage",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-local-storage"
+ },
+ {
+ "title": "服务端存储",
+ "content": "
在 toolbar
标签上配置 :setting="{storage:'remote'}"
开启个性化并启用远程服务获取个性化数据,并配置 @remote-setting
调用 reloadCustoms
方法更新个性化数据。\n 注意\n如果是根据服务端数据控制显示/隐藏列,调用接口获取到个性化的数据后需手动调用 reloadCustoms
方法更新。\n
\n
\n
\n",
+ "link": "grid/custom/server-storage",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "custom-server-storage"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-data-source.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-data-source.json
new file mode 100644
index 000000000..2b04e65ae
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-data-source.json
@@ -0,0 +1 @@
+[{"title":"绑定静态数据","content":"
表格属性设置 data
开启双向绑定静态数据。
\n","link":"grid/tiny-first-menu/static-data","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-static-data"},{"title":"开启服务请求","content":"
表格属性设置 fetch-data
开启服务请求。
\n","link":"grid/tiny-first-menu/request-service","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-request-service"},{"title":"自动加载数据","content":"
表格属性 auto-load
设置是否开启自动请求服务,配置 fetch-data 时有效。如下示例设置 auto-load
为 false 后,就不会自动加载数据。
\n","link":"grid/tiny-first-menu/auto-load","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-auto-load"},{"title":"表格列的配置信息","content":"
通过表格属性 columns
设置表格列的配置信息
\n","link":"grid/tiny-first-menu/columns","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-columns"},{"title":"开启异步渲染","content":"
异步渲染配置步骤:\n1、表格属性设置 is-async-column
开启异步渲染;\n2、表格列设置 format-config
开启该列数据异步渲染。
\n","link":"grid/tiny-first-menu/column-asyn-rendering","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-column-asyn-rendering"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-drag.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-drag.json
new file mode 100644
index 000000000..d242d28ef
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-drag.json
@@ -0,0 +1 @@
+[{"title":"行拖拽","content":"
通过设置 drop-config
的 row
属性控制行拖拽,默认为开启行拖拽,行拖拽事件有 @row-drop-start
、row-drop-move
、row-drop-end
。
\n","link":"grid/drag/row-drag","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"drag-row-drag"},{"title":"拖拽控制","content":"
可以通过设置 drop-config
的 onBeforeMove
事件控制行拖动,也可以配置drop-config
的 filter
与自定义样式结合使用来限制拖动
\n","link":"grid/drag/row-drag-ctrl","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"drag-row-drag-ctrl"},{"title":"列拖拽","content":"
通过设置 drop-config
的 column
属性控制列拖拽,默认为开启列拖拽,列拖拽事件有 @column-drop-start
、column-drop-move
、column-drop-end
。
\n","link":"grid/drag/column-drag","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"drag-column-drag"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-dynamically-columns.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-dynamically-columns.json
new file mode 100644
index 000000000..11c9010b8
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-dynamically-columns.json
@@ -0,0 +1 @@
+[{"title":"Grid-根据选择日期动态生成列","content":"详细用法参考如下示例","link":"grid/grid_Example/dynamicallyColumns","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-dynamicallyColumns"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-edit.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-edit.json
new file mode 100644
index 000000000..e64e2cf67
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-edit.json
@@ -0,0 +1 @@
+[{"title":"行编辑","content":"
表格属性设置 edit-config
开启编辑模式,然后在该属性对象内设置 mode: 'row'
开启行编辑,即::edit-config="{ mode: 'row' }"
。
\n","link":"grid/tiny-first-menu/row-editing","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-row-editing"},{"title":"还原更改","content":"
调用方法 revertData(rows, field)
可以还原指定行 row 或者整个表格的数据。rows 为对象则还原一行数据,为数组则还原多行数据,field 可不指定。不指定任何参数时则还原整个表格数据。
\n","link":"grid/edit/revertData","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"edit-revertData"},{"title":"检查数据是否改变","content":"
hasRowChange(row, field)
检查行或列数据是否发生改变,field 可不指定。
\n","link":"grid/edit/hasRowChange","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"edit-hasRowChange"},{"title":"单元格编辑","content":"
表格属性设置 edit-config
开启编辑模式,然后在该属性对象内设置 mode: 'cell'
开启行编辑,即::edit-config="{ mode: 'cell' }"
。\n表格列属性设置 show-icon
设置列头是否显示编辑图标,在编辑时有效。
\n","link":"grid/tiny-first-menu/cell-editing","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-cell-editing"},{"title":"手动激活编辑","content":"
setActiveCell(row, field)
方法可激活指定单元格编辑。setActiveRow(row)
方法激活行编辑,如果是 mode=cell 则默认激活第一个单元格。
\n","link":"grid/methods/set-active-cell","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-set-active-cell"},{"title":"单元格格式化","content":"
表格列属性 format-value
格式化单元格编辑器组件的传入值。
\n","link":"grid/tiny-first-menu/format-value","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-format-value"},{"title":"自定义编辑规则","content":"
表格属性设置 edit-config
开启编辑模式,然后在该属性对象内设置 activeMethod
自定义编辑规则。
\n","link":"grid/tiny-first-menu/custom-editing","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-custom-editing"},{"title":"自定义编辑校验规则","content":"
表格属性设置 edit-config
开启编辑模式,并配置 edit-rules
对象来设置校验对象和校验规则,然后在 editor
对象中设置 isValidAlways
开启编辑实时校验。
\n","link":"grid/tiny-first-menu/editor-is-salid-always","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-editor-is-salid-always"},{"title":"开启编辑状态","content":"
表格属性设置 edit-config
开启编辑模式,然后在该属性对象内设置 showStatus
开启或关闭单元格更新状态(单元格左上角倒三角形更新标识),默认值为 true
开启状态。
\n","link":"grid/tiny-first-menu/status-of-editing","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-status-of-editing"},{"title":"关闭编辑状态","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/status-of-noediting","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-status-of-noediting"},{"title":"点击触发编辑","content":"
表格属性设置 edit-config
开启编辑模式,然后在该属性对象内设置 trigger
修改触发方式。可选值有 点击触发(click)/ 双击触发(dblclick)/ 手动触发(manual)
,默认值为 click 点击触发
。
\n","link":"grid/tiny-first-menu/trigger-mode-for-editing","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-trigger-mode-for-editing"},{"title":"双击触发编辑","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/trigger-mode-db-editing","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-trigger-mode-db-editing"},{"title":"手动触发编辑","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/trigger-mode-hm-editing","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-trigger-mode-hm-editing"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-editor.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-editor.json
new file mode 100644
index 000000000..4f110946e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-editor.json
@@ -0,0 +1 @@
+[{"title":"Grid-编辑器-内置编辑器","content":"
grid
标签上配置 edit-config
。在 grid-column
列配置 editor
对象, component
渲染内置编辑组件, events
配置组件事件。具体参考下面示例。
\n
说明
\n
3.0 内置编辑器只支持 Input
和 Select
组件,需要使用其他组件可参考自定义编辑器
\n
\n","link":"grid/grid_Example/gridEdit/inner-editor","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridEdit-inner-editor"},{"title":"Grid-编辑器-自定义编辑器","content":"
grid
标签上配置 edit-config
。\n在 grid-column
列配置 editor
对象, component
渲染自定义编辑组件。\n自定义编辑默认编辑框为小框,可以配合样式修改编辑框。\n具体参考下面示例。
\n","link":"grid/grid_Example/gridEdit/custom-editor","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridEdit-custom-editor"},{"title":"引入 3.0 组件作为编辑器","content":"
通过 属性配置
方式引入 TinyVue Select
组件。
\n","link":"grid/grid_Example/gridEdit/custom-editor-select","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridEdit-custom-editor-select"},{"title":"Grid-编辑器-下拉多选","content":"
配置列为下拉多选时,单元格渲染需要自行实现,如下例中使用format-text
渲染多个枚举值。也可以使用renderer
自己实现自定义的组件去渲染。
\n","link":"grid/edit/mutil-render","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"edit-mutil-render"},{"title":"Grid-编辑器-自定义编辑器","content":"
grid
标签上配置 edit-config
。\n在 grid-column
列配置 editor
对象, component
渲染自定义编辑组件, 通过其events选项配置编辑器组件的事件。\n自定义编辑默认编辑框为小框,可以配合样式修改编辑框。\n具体参考下面示例。
\n","link":"grid/news/editor-events","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"news-editor-events"},{"title":"Popeditor 弹窗编辑","content":"
在 grid-column
列元素上配置 editor
属性,该对象中可以指定 component
为 Popeditor
、attrs
为 Popeditor 组件的属性。需要注意的是,引入 Popeditor 组件后,需要在 data()
中进行实例化。
\n","link":"grid/grid_Example/gridEdit/popeditor-in-grid","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridEdit-popeditor-in-grid"},{"title":"Popeditor 弹窗编辑,配置远程搜索","content":"详细用法参考如下示例","link":"grid/grid_Example/gridEdit/popeditor-in-grid-remote-search","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridEdit-popeditor-in-grid-remote-search"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-empty-data-tip.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-empty-data-tip.json
new file mode 100644
index 000000000..11bcaea85
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-empty-data-tip.json
@@ -0,0 +1 @@
+[{"title":"自定义提示","content":"
空数据时默认显示 图标 + 文字
提示,用户也可通过设置插槽 v-slot:empty
或者 属性 render-empty
来自定义提示内容。
\n","link":"grid/tiny-first-menu/empty-data-tip","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-empty-data-tip"},{"title":"默认提示","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/empty-data-default-tip","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-empty-data-default-tip"},{"title":"固定居中","content":"
配置 is-center-empty
为 true
时,拖动横向滚动条可以保持空数据提示使终相对表格宽度居中显示
\n","link":"grid/tiny-first-menu/empty-data-iscenter","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-empty-data-iscenter"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-event.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-event.json
new file mode 100644
index 000000000..f7e72c7c3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-event.json
@@ -0,0 +1 @@
+[{"title":"表头点击事件","content":"
在 grid
标签上配置 header-cell-click
可以监听到表头的点击事件
\n","link":"grid/event/header-click-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-header-click-event"},{"title":"表头双击事件","content":"
在 grid
标签上配置 header-cell-dblclick
可以监听到表头的双击事件
\n","link":"grid/event/header-dblclick-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-header-dblclick-event"},{"title":"单元格点击事件","content":"
在 grid
标签上配置 cell-click
可以监听到单元格的点击事件
\n","link":"grid/event/cell-click-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-cell-click-event"},{"title":"单元格双击事件","content":"
在 grid
标签上配置 cell-dblclick
可以监听到单元格的双击事件
\n","link":"grid/event/cell-dblclick-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-cell-dblclick-event"},{"title":"鼠标进入单元格事件","content":"
在 grid
标签上配置 cell-dblclick
可以监听到单元格的双击事件
\n","link":"grid/event/cell-mouseenter-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-cell-mouseenter-event"},{"title":"鼠标离开单元格事件","content":"
在 grid
标签上配置 cell-mouseleave
可以监听到鼠标离开单元格事件
\n","link":"grid/event/cell-mouseleave-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-cell-mouseleave-event"},{"title":"事件","content":"
在 grid
标签上配置 scroll
事件,可以监听表格的滚动
\n","link":"grid/event/grid-scroll-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-grid-scroll-event"},{"title":"事件对象","content":"
表格属性 envents
设置表格的事件对象。\n
\n","link":"grid/event/grid-events","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-grid-events"},{"title":"行选中事件","content":"
只对 在 grid
标签上配置 highlightCurrentRow
有效,当手动选中行时触发的事件
\n","link":"grid/event/current-change-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-current-change-event"},{"title":"单元格被激活编辑时会触发该事件","content":"
只对 在 grid
标签上配置 edit-actived
有效,单元格被激活编辑时触发的事件
\n","link":"grid/event/edit-actived-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-edit-actived-event"},{"title":"单元格编辑完成触发该事件","content":"
只对 在 grid
标签上配置 edit-closed
有效,单元格编辑完成触发该事件
\n","link":"grid/event/edit-closed-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-edit-closed-event"},{"title":"两个表格数据相互关联","content":"详细用法参考如下示例","link":"grid/event/table-data-association","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-table-data-association"},{"title":"当单元格激活时如果是禁用状态时会触发该事件","content":"
只对 在 grid
标签上配置 edit-disabled-event
有效,同时需要在 edit-config
配置中的 activeMethod
方法控制单元格是否可以编辑(返回 true
可以编辑,反之亦然)。
\n","link":"grid/event/edit-disabled-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-edit-disabled-event"},{"title":"右键点击表尾单元格事件","content":"
在 grid
标签上配置 footer-cell-context-menu
右键点击表尾单元格事件,配置 footer-cell-click
可以触发点击表尾单元格事件。
\n","link":"grid/event/footer-cell-context-menu-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-footer-cell-context-menu-event"},{"title":"右键点击表头事件","content":"
只对 在 grid
标签上配置 header-cell-context-menu
可以监听右键点击表头事件
\n","link":"grid/event/header-cell-context-menu-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-header-cell-context-menu-event"},{"title":"分页发生改变事件","content":"
只对 在 grid
标签上配置 page-change
可以监听分页发生改变事件
\n","link":"grid/event/page-change-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-page-change-event"},{"title":"分页发生改变前的事件","content":"
通过在 grid
标签上配置 is-before-page-change
选择是否打开页面改变时的前置处理特性。在值为 true
时,翻页操作或者改变页大小操作不会立即生效,留给用户处理业务逻辑,之后通过调用预留的 callback
或者 rollback
使之生效或者失效;通过事件 before-page-change
在进行翻页操作或者改变页大小操作时触发,然后控制是否跳转分页。
\n","link":"grid/event/page-before-change-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-page-before-change-event"},{"title":"勾选行事件","content":"
在 grid
标签上配置 radio-change
可以监听勾选行事件\n只对 type=radio 有效,当手动勾选并且值发生改变时触发的事件
\n","link":"grid/event/radio-change-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-radio-change-event"},{"title":"列宽改变事件","content":"
在 grid
标签上配置 resizable-change
可以监听列宽改变事件
\n","link":"grid/event/resizable-change-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-resizable-change-event"},{"title":"手动勾选全选时触发的事件","content":"
在 grid
标签上配置 select-all
有效\n只对 type=selection 有效,当手动勾选全选时触发的事件
\n","link":"grid/event/select-all-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-select-all-event"},{"title":"勾选行事件","content":"
在 grid
标签上配置 select-change
可以监听到勾选行事件\n只对 type=selection 有效,当手动勾选并且值发生改变时触发的事件
\n","link":"grid/event/select-change-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-select-change-event"},{"title":"行展开收起事件","content":"
在 grid
标签上配置 toggle-expand-change
可以监听到行展开收起事件
\n","link":"grid/event/toggle-expand-change-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-toggle-expand-change-event"},{"title":"树节点展开收起事件","content":"
在 grid
标签上配置 toggle-tree-change
可以监听树节点展开收起事件
\n","link":"grid/event/toggle-tree-change-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-toggle-tree-change-event"},{"title":"工具栏点击事件","content":"
在 grid
标签上配置 resizable-change
可以监听工具栏点击事件
\n","link":"grid/event/toolbar-button-click-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-toolbar-button-click-event"},{"title":"校验不通过事件","content":"
在 grid
标签上配置 valid-error
监听校验不通过事件
\n","link":"grid/event/valid-error-event","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"event-valid-error-event"},{"title":"获取表格行方法","content":"
获取行的方法
\n
getCurrentRow
获取当前行\ngetRowIndex
获取当前行号\ngetRadioRow
Radio 单选选中行\ngetRowById
通过 rowId 获取当前行\ngetRowNode
通过 tr 元素获取行信息
\n
\n","link":"grid/tiny-first-menu/get-row-method","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-get-row-method"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-faq.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-faq.json
new file mode 100644
index 000000000..6b2417e87
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-faq.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "表格列头与单元格错位",
+ "content": "
当出现grid表头与表体单元格错位时,可以选择性地做以下尝试\n1.给每列设置列宽\n2.将show-overflow
、show-header-overflow
都设置为 true
\n3.将 table-layout
设置为 auto
\n",
+ "link": "grid/faq/unbalanced",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "faq-unbalanced"
+ },
+ {
+ "title": "DialogBox弹窗中的可编辑表格编辑器无法正常失焦",
+ "content": "
当可以编辑的表格出现在DialogBox弹出框中,编辑器无法正常失去焦点时需要配置blurOutside
\n",
+ "link": "grid/faq/gridInDialogBox",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "faq-gridInDialogBox"
+ },
+ {
+ "title": "配置式表格如何使用插槽",
+ "content": "
具体可以参考以下代码
\n",
+ "link": "grid/faq/opSlot",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "faq-opSlot"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-filter.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-filter.json
new file mode 100644
index 000000000..f2041521a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-filter.json
@@ -0,0 +1 @@
+[{"title":"过滤","content":"
filter 配置
\n
通过自定义的 filter
的作用域插槽自定义筛选的规则\n可以配置项:\nmulti 设置在显示枚举选项功能是否为多选, 仅在 enumable:true 下有效。\nenumable 设置在过滤面板中显示枚举选项。\ninputFilter 设置在过滤面板中显示输入筛选的项。\ndefaultFilter 设置在过滤面板中显示默认的筛选条件。\nvalues 设置在显示枚举选项功能(enumable)下制定静态数据源。\nlabel 设置枚举数据的显示值属性字段, 默认'label'。\nvalue 设置枚举数据的实际值属性字段, 默认'value'。
\n
\n","link":"grid/filter/default-filter","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"filter-default-filter"},{"title":"自定义参数","content":"
通过 params
添加自定义参数
\n","link":"grid/column/column-params","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"column-column-params"},{"title":"过滤高级设置","content":"
通过 inputFilter
可以给input过滤区域配置自定义组件与条件,通过 extends
可以增加快捷过滤列表
\n","link":"grid/filter/advanced-filter","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"filter-advanced-filter"},{"title":"设置列筛选规则","content":"
通过 filter
属性设置列筛选规则
\n","link":"grid/filter/custom-filter","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"filter-custom-filter"},{"title":"自定义筛选","content":"
通过 params
属性设置额外的参数
\n","link":"grid/grid-params","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid-params"},{"title":"服务端过滤","content":"
配置 remote-filter 开启服务端过滤,服务端过滤会调用表格 fetch-data 进行查询,filter-change 服务端过滤后触发的事件\n该示例中的 services/getGridMockData
服务需要自行实现,示例模拟了远程服务返回的数据\n
\n","link":"grid/filter/server-filter","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"filter-server-filter"},{"title":"输入过滤的默认选项","content":"
通过属性 inputFilter.relation
配置输入过滤的默认选项。\n输入过滤的内置选项:equals
,unequal
,greaterThan
,lessThan
,equalToGreaterThan
,equalToLessThan
,contains
,startwith
,endwith
;也可以配置自定义选项。\n配置自定义选项的同时要配置过滤方法,通过属性 inputFilter.method
配置。
\n","link":"grid/filter/default-relation","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"filter-default-relation"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-fixed.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-fixed.json
new file mode 100644
index 000000000..69c56f412
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-fixed.json
@@ -0,0 +1 @@
+[{"title":"左冻结","content":"
通过 fixed
属性设置列冻结。可选值为 left right
默认为 left
\n","link":"grid/fixed/left-fixed","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"fixed-left-fixed"},{"title":"右冻结","content":"
通过 fixed
属性设置列冻结。可选值为 left right
默认为 left
\n","link":"grid/fixed/right-fixed","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"fixed-right-fixed"},{"title":"操作列冻结","content":"
通过 fixed
属性设置列冻结。可选值为 left right
默认为 left
\n","link":"grid/fixed/multi-column-fixed","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"fixed-multi-column-fixed"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-footer.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-footer.json
new file mode 100644
index 000000000..391c37be4
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-footer.json
@@ -0,0 +1 @@
+[{"title":"表尾统计","content":"详细用法参考如下示例","link":"grid/footer/footer-summation","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"footer-footer-summation"},{"title":"表尾统计(空数据)","content":"详细用法参考如下示例","link":"grid/footer/footer-summation-empty","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"footer-footer-summation-empty"},{"title":"表尾class类名","content":"
\n通过表格列属性 footer-class-name
给表尾的单元格附加 className,也可以是函数 Function({$rowIndex, column, columnIndex, $columnIndex})。\n
\n","link":"grid/footer/footer-class-name","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"footer-footer-class-name"},{"title":"表尾合并行或列","content":"
通过 footer-method
和 footer-span-method
设置表尾合计行或列逻辑 必须配置 show-footer
\n","link":"grid/footer/footer-row-or-column-span","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"footer-footer-row-or-column-span"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-border.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-border.json
new file mode 100644
index 000000000..bc120a176
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-border.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
表格属性设置 border
给表格加上边框。
\n","link":"grid/tiny-first-menu/grid-border","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-border"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-loading-tip.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-loading-tip.json
new file mode 100644
index 000000000..9d16f573e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-loading-tip.json
@@ -0,0 +1 @@
+[{"title":"关闭加载中状态","content":"
表格属性设置 loading
开启或关闭加载状态,默认值为 false
不开启。
\n","link":"grid/tiny-first-menu/grid-loading-off-tip","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-loading-off-tip"},{"title":"开启加载中状态","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/grid-loading-tip","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-loading-tip"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-optimization.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-optimization.json
new file mode 100644
index 000000000..97f139440
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-optimization.json
@@ -0,0 +1 @@
+[{"title":"优化配置项","content":"
optimization(Object) 配置说明
\n
| animat(Boolean) | 表格动画效果开关(关闭后视觉效果更快)默认为 true |\n| delayHover(Number) | 当表格发生拖动、滚动...等行为时,至少多少毫秒之后才允许触发 hover 事件 默认 250ms |\n| scrollX(Object) | 横向 X 虚拟滚动配置(用于特殊场景手动调优)例如:{ gt: 100 } |\n| scrollY(Object) | 纵向 Y 虚拟滚动配置(用于特殊场景手动调优)例如:{ gt: 500 } |
\n
\n
\n","link":"grid/tiny-first-menu/grid-optimization","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-optimization"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-size.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-size.json
new file mode 100644
index 000000000..6bfa527f0
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-size.json
@@ -0,0 +1 @@
+[{"title":"medium","content":"
表格设置 size
属性调整表格尺寸大小。
\n","link":"grid/tiny-first-menu/grid-size","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-size"},{"title":"small","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/grid-size-small","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-size-small"},{"title":"mini","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/grid-size-mini","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-size-mini"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-stripe.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-stripe.json
new file mode 100644
index 000000000..8d2cd871c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-grid-stripe.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"
stripe
是否带有斑马纹 默认不开启。设置 :stripe=\"true\"
时开启(注:需要注意的是,在可编辑表格场景下,临时插入的数据不会有斑马纹样式)
\n","link":"grid/stripe/stripe","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"stripe-stripe"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-header.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-header.json
new file mode 100644
index 000000000..b796d50e9
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-header.json
@@ -0,0 +1 @@
+[{"title":"控制隐藏表头","content":"
设置 showHeader
属性为 fasle
控制隐藏表头,默认为 true
。
\n","link":"grid/header/hide-grid-header","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"header-hide-grid-header"},{"title":"自定义表头","content":"
通过列 slot
插槽自定义表头
\n","link":"grid/header/custom-grid-header","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"header-custom-grid-header"},{"title":"配置自定义表头内容的模板","content":"
设置 header
插槽,配置自定义表头内容的模板。
\n","link":"grid/header/slot-header","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"header-slot-header"},{"title":"基本说明","content":"
通过列属性 header-class-name
给表头的单元格附加 className,也可以是函数 Function({$rowIndex, column, columnIndex, $columnIndex})。\n
\n","link":"grid/header/header-class-name","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"header-header-class-name"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-highlight.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-highlight.json
new file mode 100644
index 000000000..e4fb928d4
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-highlight.json
@@ -0,0 +1 @@
+[{"title":"高亮悬停行","content":"
设置 highlight-hover-row
属性控制鼠标悬停到当前行是否开启高亮。 默认为 true
开启高亮, 如果不需要悬停高亮设置 highlight-hover-row
为 false
。
\n","link":"grid/highlight/highlight-hover-row","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"highlight-highlight-hover-row"},{"title":"设置指定行高亮","content":"
setCurrentRow(row)
可设置某一行为高亮状态。
\n","link":"grid/methods/set-current-row","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-set-current-row"},{"title":"开启选中行高亮","content":"
设置 highlight-current-row
属性控制鼠标选中行是否开启高亮
\n
\n带有斑马线的行无高亮效果\n
\n","link":"grid/highlight/highlight-current-row","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"highlight-highlight-current-row"},{"title":"列头是否开启高亮","content":"
设置 highlight-hover-column
属性为控制鼠标悬停到当前列的列头时是否开启高亮。
\n","link":"grid/highlight/highlight-hover-column","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"highlight-highlight-hover-column"},{"title":"选中列是否开启高亮","content":"
设置 highlight-current-column
属性控制鼠标选中的当前列是否开启高亮显示
\n","link":"grid/highlight/highlight-current-column","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"highlight-highlight-current-column"},{"title":"编辑时高亮单元格边框","content":"
设置 highlight-cell
是否在编辑时高亮单元格边框,只对 editConfig
配置时有效
\n","link":"grid/highlight/highlight-cell","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"highlight-highlight-cell"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-import-export.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-import-export.json
new file mode 100644
index 000000000..56c9a9096
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-import-export.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/export-excel","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-export-excel"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-keyboard.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-keyboard.json
new file mode 100644
index 000000000..5d19fb4a6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-keyboard.json
@@ -0,0 +1 @@
+[{"title":"键盘导航","content":"
按键说明
\n
| Arrow Up ↑ | 移动到当前活动单元格上面的单元格 |\n| Arrow Down ↓ | 移动到当前活动单元格下面的单元格 |\n| Arrow Left ← | 移动到当前活动单元格左边的单元格 |\n| Arrow Right → | 移动到当前活动单元格右边的单元格 |\n| Tab | 移动到当前选中或活动单元格的右侧单元格,如果到最后一列且存在下一行,则从下一行开始移动 |\n| Tab + Shift | 移动到当前选中或活动单元格的左侧单元格,如果到第一列且存在上一行,则从上一行开始移动 |\n| Spacebar | 如果单元格是复选框或单选框则切换勾选状态 |\n| Enter | 取消编辑并移动到当前活动单元格下面的单元格 |\n| Delete | 清空内容 |\n| Backspace | 清空内容并激活选中单元格为编辑状态 |\n| F2 | 激活单元格编辑 |\n| Esc | 取消单元格编辑 |\n| Page Up | 向上翻页滚动 |\n| Page Down | 向下翻页滚动 |\n| Home | 滚动到顶部 |\n| End | 滚动到底部 |
\n
\n","link":"grid/keyboard-navigation","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"keyboard-navigation"},{"title":"设置按键配置项","content":"
表格属性 keyboard-config
设置按键配置项。\n
\n","link":"grid/keyboard-config","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"keyboard-config"},{"title":"设置鼠标配置项","content":"
表格属性 mouse-config
设置鼠标配置项。\n
\n","link":"grid/mouse-config","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"mouse-config"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-large-data.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-large-data.json
new file mode 100644
index 000000000..addf3b7e8
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-large-data.json
@@ -0,0 +1 @@
+[{"title":"滚动分页","content":"
滚动分页配置步骤:\n1、表格属性设置 fetch-data
开启服务请求;\n2、表格属性设置 scroll-load
开启滚动分页。
\n","link":"grid/tiny-first-menu/scroll-paging","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-scroll-paging"},{"title":"虚拟滚动","content":"
虚拟滚动配置步骤:\n1、表格属性设置 height
固定高度;\n2、表格属性设置 optimization
开启虚拟滚动。
\n
optimization(Object) 配置说明
\n
| delayHover(Number) | 当表格发生拖动、滚动...等行为时,至少多少毫秒之后才允许触发 hover 事件 默认 250ms |\n| scrollX(Object) | 横向 X 虚拟滚动配置(用于特殊场景手动调优)例如:{ gt: 100 } |\n| scrollY(Object) | 纵向 Y 虚拟滚动配置(用于特殊场景手动调优)例如:{ gt: 500 } |
\n
\n
开启虚拟滚动注意事项
\n
1、开启虚拟滚动的前提是需要保证每列的宽度一样,可以通过在 <tiny-grid>
标签上的 column-width
属性配置统一的宽度。\n2、开启虚拟滚动将会禁用列宽调整功能,因为列拖拽会改变列宽度,导致虚拟滚动渲染的列数计算有误从而引起表格样式错乱,所以禁止列拖拽。
\n
\n","link":"grid/tiny-first-menu/virtual-rolling","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-virtual-rolling"},{"title":"树表虚拟滚动","content":"
名称 | 类型 | 描述 | 默认值 |
optimization.scrollX.gt | Number | 指定大于多少列时自动启动 X 虚拟滚动 | 100 |
optimization.scrollX.rSize | Number | 每次渲染列数 | |
optimization.scrollX.vSize | Number | 指定可视区域列数 | |
optimization.scrollX.adaptive | Boolean | 自动适配最优的渲染方式(设置为 false 列数组只会在滚动完成后截取一次,便于大数据场景提升性能,但是会短暂白屏,渲染完成后即恢复) | true |
optimization.scrollY.gt | Number | 指定大于多少行时自动启动 Y 虚拟滚动 | 500 |
optimization.scrollY.rSize | Number | 每次渲染行数 | |
optimization.scrollY.adaptive | Boolean | 自动适配最优的渲染方式(设置为 false 行数组只会在滚动完成后截取一次,便于大数据场景提升性能,但是会短暂白屏,渲染完成后即恢复) | true |
\n
\n","link":"grid/tiny-first-menu/grid-large-tree-data","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-large-tree-data"},{"title":"全量加载","content":"当表格数据过多时会有性能问题,用户可通过 $refs
获取表格对象,设置表格对象的 loadData
方法启用全量加载来优化性能。
\n","link":"grid/tiny-first-menu/full-data-loading","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-full-data-loading"},{"title":"生成 1000 列","content":"通过 loadColumn(columns)
方法可以加载列配置,对于需要重新加载列的场景下可能会用到。
\n","link":"grid/large-data/load-column","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"large-data-load-column"},{"title":"滚动到指定位置","content":"方法说明
\n
scrollTo(scrollLeft, scrollTop)
:滚动到对应的位置\nscrollToRow(row)
:滚动到对应的行\nscrollToColumn(column)
:手滚动到对应的列
\n
\n","link":"grid/large-data/scroll-to","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"large-data-scroll-to"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-nested-grid.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-nested-grid.json
new file mode 100644
index 000000000..f586c1712
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-nested-grid.json
@@ -0,0 +1 @@
+[{"title":"嵌套表格","content":"通过在默认插槽 default
中使用表格组件,实现嵌套表格功能。
\n","link":"grid/grid_Example/nestedGrid","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-nestedGrid"},{"title":"检查行是否已展开","content":"通过调用 hasRowExpand(row)
方法可以检查行是否已展开,参数 row 为行数据对象。
\n","link":"grid/expand/hasRowExpand","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"expand-hasRowExpand"},{"title":"设置展开所有行","content":"通过调用 setAllRowExpansion(checked)
方法可设置所有行的展开与否。
\n","link":"grid/methods/set-all-row-expansion","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-set-all-row-expansion"},{"title":"设置展开指定行","content":"通过调用 setRowExpansion(rows, checked)
方法可设置展开指定行,第二个参数设置这一行展开与否,展开指定行时,通过调用clearRowExpand()方法先,关闭已展开的行。
\n","link":"grid/methods/set-row-expansion","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-set-row-expansion"},{"title":"手动切换展开行","content":"通过调用 toggleRowExpansion(row)
方法可手动切换展开行。
\n","link":"grid/methods/toggle-row-expansion","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-toggle-row-expansion"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-operation-column.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-operation-column.json
new file mode 100644
index 000000000..43c54e520
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-operation-column.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "基本用法",
+ "content": "表格列属性设置 type="radio"
显示单选列。
\n",
+ "link": "grid/tiny-first-menu/default-serial-column",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "tiny-first-menu-default-serial-column"
+ },
+ {
+ "title": "手动取消单选行",
+ "content": "详细用法参考如下示例",
+ "link": "grid/tiny-first-menu/clearRadioRow",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "tiny-first-menu-clearRadioRow"
+ },
+ {
+ "title": "翻页后保留选中状态",
+ "content": "通过配置select-config
中的reserve
为true
并设置row-id
,开启翻页后保留选中状态功能。
\n",
+ "link": "grid/tiny-first-menu/gridPagerReserve",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "tiny-first-menu-gridPagerReserve"
+ },
+ {
+ "title": "手动选中某一行",
+ "content": "setRadioRow(row)
用于单选行,设置某一行为选中状态。
\n",
+ "link": "grid/methods/set-radio-row",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "methods-set-radio-row"
+ },
+ {
+ "title": "单选配置项",
+ "content": "radio-config
配置项,可以配置单选框的默认选中项和禁用配置等特性。
\n",
+ "link": "grid/tiny-first-menu/radio-config",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "tiny-first-menu-radio-config"
+ },
+ {
+ "title": "单选禁用",
+ "content": "单选模式,通过 radio-config
配置项的属性 checkMethod
,传入自定义方法判断哪些数据项被禁用,方法会判断每个数据项,需返回值为 true
或者 false
,代表此数据项启用或者禁用。
\n",
+ "link": "grid/disable-radio",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "disable-radio"
+ },
+ {
+ "title": "显示多选列",
+ "content": "表格列属性设置 type="selection"
显示多选列。
\n",
+ "link": "grid/tiny-first-menu/custom-serial-column",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "tiny-first-menu-custom-serial-column"
+ },
+ {
+ "title": "手动取消多选行",
+ "content": "详细用法参考如下示例",
+ "link": "grid/tiny-first-menu/clearSelection",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "tiny-first-menu-clearSelection"
+ },
+ {
+ "title": "手动选中所有行",
+ "content": "setAllSelection(checked)
用于多选行,可设置所有行的选中状态。
\n",
+ "link": "grid/methods/set-all-selection",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "methods-set-all-selection"
+ },
+ {
+ "title": "手动选中指定行",
+ "content": "setSelection(rows, checked)
用于多选行,可设置指定行为选中状态,第一个参数可传入对象或数组,如果是对象则选择单行,如果是数组则选择多行,第二个参数为选中与否。
\nTIP
\n
setSelection
方法不会触发 select-change
事件,只有点击才会触发。
多选模式,通过 select-config
配置项的属性checkField
指定行数据的某个字段去决定这行数据的选中状态(并且选中状态和这个字段是双向绑定的)。
\n
\n",
+ "link": "grid/methods/set-selection",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "methods-set-selection"
+ },
+ {
+ "title": "手动切换所有行选中状态",
+ "content": "toggleAllSelection()
方法可直接切换所有行的选中状态。
\n",
+ "link": "grid/methods/toggle-all-selection",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "methods-toggle-all-selection"
+ },
+ {
+ "title": "手动切换指定行选中状态",
+ "content": "toggleRowSelection(row)
方法可直接切换某一行的选中状态。
\n",
+ "link": "grid/methods/toggle-row-selection",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "methods-toggle-row-selection"
+ },
+ {
+ "title": "多选禁用",
+ "content": "多选模式,通过 select-config
配置项的属性 checkMethod
,传入自定义方法判断哪些数据项被禁用,方法会判断每个数据项,需返回值为 true
或者 false
,代表此数据项启用或者禁用。
\n",
+ "link": "grid/disable-selection",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "disable-selection"
+ },
+ {
+ "title": "自定义操作列内容",
+ "content": "通过插槽设置自定义操作列,即 <tiny-grid-column>
自定义操作列内容 </tiny-grid-column>
。
\n",
+ "link": "grid/tiny-first-menu/custom-operation-column",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "tiny-first-menu-custom-operation-column"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-pager.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-pager.json
new file mode 100644
index 000000000..88d8311b3
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-pager.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "使用默认分页组件",
+ "content": "如果不配置 {component: Pager}
则默认使用内置的分页组件。
\n",
+ "link": "grid/pager/inner-default-pager",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "pager-inner-default-pager"
+ },
+ {
+ "title": "使用第三方分页组件",
+ "content": "第三方分页组件配置步骤:\n1、import
引入自己引入的分页组件(这里使用官方的分页组件示范) Pager
组件,即 import Pager from '@opentiny/vue-pager'
或者 { Pager } from '@opentiny/vue'
。\n2、Pager
传入给 data()
函数存储起来以便模板中使用。\n3、表格属性设置 pager
进行分页相关配置,通过 pager
的属性 {component: Pager}
注入分页组件。\n4、配置 seq-serial 属性可以设置翻页后序号连续显示,默认是不连续显示的
\n",
+ "link": "grid/pager/inner-pager",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "pager-inner-pager"
+ },
+ {
+ "title": "提示保存数据",
+ "content": "配置 showSaveMsg
属性,当检查到表格数据存在修改时,会提示用户进行保存
\n",
+ "link": "grid/pager/showSaveMsg",
+ "component": " Grid 表格",
+ "findIntroStr": "表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。",
+ "demoId": "pager-showSaveMsg"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-renderer.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-renderer.json
new file mode 100644
index 000000000..a120dd369
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-renderer.json
@@ -0,0 +1 @@
+[{"title":"内置渲染器","content":"内置渲染器设置当前表格列的显示获取类型。\n在 grid-column
列配置 format-text
对象,配合 format-config
可以控制数据格式。
\nTIP
\n
format-text
的可取值包括:
\n
\ninteger
:显示成整数。 \nnumber
:显示成小数。 \nmoney
:显示成钱数。 \n- rate:显示成百分比的数据。
\n- filesize:显示成文件大小的数据。
\n- boole:显示成对号或者叉号的图标。
\n- date:显示成年月日。
\n- dateTime:显示成年月日时分。
\n- longDateTime:显示成年月日时分秒。
\n- time:显示成时分。
\n- longTime:显示成时分秒。
\n- yearMonth:显示成年月。
\n- enum:通过数据的值,查询出要显示的文本。
\n- ellipsis:显示成省略的内容,鼠标移到该单元格上,显示完整内容的提示信息。需要同时配置 format 的 len 属性。
\n
\n
\n","link":"grid/grid_Example/gridRenderer/inner-renderer","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridRenderer-inner-renderer"},{"title":"自定义渲染器","content":"自定义渲染器可以自定义渲染单元格,也可渲染一个 vue 组件
。在 grid-column
列配置 renderer
,支持方法和对象配置。具体参考下面示例。
\n","link":"grid/grid_Example/gridRenderer/custom-renderer","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridRenderer-custom-renderer"},{"title":"列异步数据渲染","content":"将列format-config
的 async
属性配置为true
后,支持动态修改其data
数据自动渲染。 这种整列异步渲染一般将type
设置为enum
,通过value
与label
可以配置渲染单元格的映射。
\n","link":"grid/news/async-colunm-render","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"news-async-colunm-render"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-reverse-column-row.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-reverse-column-row.json
new file mode 100644
index 000000000..e1bc65fab
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-reverse-column-row.json
@@ -0,0 +1 @@
+[{"title":"Grid-表格行列反转","content":"需要在 grid
标签上配 :columns="tableColumn"
:show-header="false"
。点击“反转表格”按钮可查看效果,现阶段只能执行一次,执行多次会有问题。具体参考下面示例。
\n","link":"grid/grid_Example/reverseRow","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-reverseRow"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-row-grouping.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-row-grouping.json
new file mode 100644
index 000000000..794c676a7
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-row-grouping.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"row-group
属性可以配置行分组,行分组会将具有相同值的列进行分组展示。
\n","link":"grid/row-grouping","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"row-grouping"},{"title":"自定义分组","content":"row-group
配置项 render
可以自定义渲染分组内容, closeable
可以控制分组行是否可以折叠。
\n","link":"grid/rowGroupRender","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"rowGroupRender"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-serial-column.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-serial-column.json
new file mode 100644
index 000000000..57597c95f
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-serial-column.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"表格列属性设置 type="index"
显示序号列。
\n","link":"grid/tiny-first-menu/default-serial-column","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-default-serial-column"},{"title":"自定义序号规则","content":"表格列属性设置 type="index"
显示序号列,index-method
方法设置自定义序号规则。
\n","link":"grid/tiny-first-menu/custom-serial-column","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-custom-serial-column"},{"title":"自定义序号列的起始值","content":"表格列属性设置 type="index"
显示序号列,start-index
设置自定义序号列的起始值。
\n","link":"grid/tiny-first-menu/start-index","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-start-index"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-slot.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-slot.json
new file mode 100644
index 000000000..16f839da6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-slot.json
@@ -0,0 +1 @@
+[{"title":"默认插槽","content":"详细用法参考如下示例","link":"grid/slot/default-slot","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"slot-default-slot"},{"title":"工具栏插槽","content":"详细用法参考如下示例","link":"grid/slot/buttons-slot","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"slot-buttons-slot"},{"title":"空数据显示插槽","content":"详细用法参考如下示例","link":"grid/slot/empty-slot","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"slot-empty-slot"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-sort.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-sort.json
new file mode 100644
index 000000000..6f666b3a0
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-sort.json
@@ -0,0 +1 @@
+[{"title":"默认排序","content":"通过表格列设置 sortable
属性开启该列排序功能。
\n","link":"grid/sort/default-sort","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"sort-default-sort"},{"title":"唯一主键","content":"通过表格设置 row-id
自定义行数据唯一主键的字段名。该属性的默认值为 _XID
\n","link":"grid/tiny-first-menu/row-id","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-row-id"},{"title":"多字段组合排序","content":"通过表格列设置 sortable
属性开启该列排序功能,然后设置 sort-by
属性实现多字段组合排序,数组列表就是排序的字段列表。
\n","link":"grid/sort/combinations-sort","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"sort-combinations-sort"},{"title":"自定义排序","content":"通过表格列设置 sortable
属性开启该列排序功能,然后设置 sort-method
方法实现自定义排序。
\n","link":"grid/sort/custom-sort","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"sort-custom-sort"},{"title":"手动排序","content":"通过 sort(field, order)
方法可手动对表格进行排序(如果 order 为空则自动切换排序)。
\n","link":"grid/methods/sort","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-sort"},{"title":"表格服务端排序","content":"通过表格列设置 sortable
属性开启该列排序功能,然后表格设置 remote-sort
方法开启服务端排序。\n该示例中的 services/getGridMockData
服务需要自行实现,示例模拟了远程服务返回的数据\n
\n","link":"grid/sort/server-sort","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"sort-server-sort"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-span.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-span.json
new file mode 100644
index 000000000..b9f6d6e95
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-span.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过表格列属性 row-span
设置内置的行合并规则,该属性仅适用于普通表格,嵌套树表不支持。
\n","link":"grid/span/row-span/row-span-easy","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"span-row-span-row-span-easy"},{"title":"自定义合并规则","content":"通过表格列属性 span-method
设置自定义合并规则。
\n","link":"grid/span/row-span/row-span","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"span-row-span-row-span"},{"title":"列合并","content":"列合并是通过表格列设置方法 span-method
实现的自定义合并规则。例如:
\n\n实现2列合并
\n
\n","link":"grid/span/column-span","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"span-column-span"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-summary.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-summary.json
new file mode 100644
index 000000000..904953a2f
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-summary.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 footer-method
和 show-footer
配置自定义统计。
\n","link":"grid/summary/custom-summary","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"summary-custom-summary"},{"title":"设置配置式的统计","content":"通过 summary-config
设置配置式的统计。
\n","link":"grid/summary/configuration-summary","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"summary-configuration-summary"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-tip.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-tip.json
new file mode 100644
index 000000000..8ce26db71
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-tip.json
@@ -0,0 +1 @@
+[{"title":"列头提示","content":"列头提示有2种,一种是 show-header-tip
提示(内容是否超出都会提示),另一种是 show-header-overflow
内容超出当前行时隐藏并提示。
\nTIP
\n
show-header-overflow
可选值有:
\n
\ntooltip
:内容超出部分显示 ...
,左侧/右侧弹出提示层显示全部信息,show-overflow
开启时的缺省提示 \ntitle
:和原生标签的 title
属性一致 \nellipsis
:内容超出部分显示 ...
,没有提示 \n
\n
\n","link":"grid/tip/column-header-tip","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tip-column-header-tip"},{"title":"单元格提示","content":"单元格提示有2种,一种是 show-tip
提示(内容是否超出都会提示),另一种是 show-overflow
内容超出当前行时隐藏并提示。
\nTIP
\n
show-overflow
可选值有:
\n
\ntitle
:和原生标签的 title
属性一致 \nellipsis
:内容超出部分显示 ...
,没有提示 \ntooltip
:内容超出部分显示 ...
,左侧/右侧弹出提示层显示全部信息,show-overflow
开启时的缺省提示\ntooltip
提示可通过 Grid
属性 :tooltip-config
进行配置,配置方式参考 Tooltip
组件 \n
\n
\n","link":"grid/tip/cell-tip","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tip-cell-tip"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-toolbar.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-toolbar.json
new file mode 100644
index 000000000..139d6e36d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-toolbar.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"工具栏配置步骤:\n1、表格以插槽方式引入表格工具栏组件 GridToolbar
,并设置工具栏组件属性 slot="toolbar"
。\n2、设置工具栏组件属性 buttons
进行按钮组相关配置。\n3、表格事件设置 @toolbar-button-click
获取工具栏 buttons
的事件,用户可自定义实现增删改操作的业务逻辑。
\n新增的行需要标记新增状态的样式时需要配置 edit-config 的 markInsert 项为 true
\n
\n","link":"grid/tiny-first-menu/insert-delete-update","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-insert-delete-update"},{"title":"取消删除","content":"在工具栏中配置 mark_cancel
的 code,勾选数据后,单击 删除/取消删除
按钮,勾选的数据将标记删除线。再单击 保存
按钮请求服务删除标记的数据。已标记删除线的数据勾选后再次单击 删除/取消删除
按钮,会取消删除线。\n 需要配置 fetch-data 请求服务时才有标记删除线和取消删除线的效果\n
\n","link":"grid/toolbar/cancel-delete","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"toolbar-cancel-delete"},{"title":"清空数据","content":"clearData 方法手动清空单元格内容,如果不传参数,则清空整个表格内容。如果传了行则清空指定行内容,如果传了指定字段,则清空该字段内容。具体参考下面示例。
\n","link":"grid/tiny-first-menu/clearData","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-clearData"},{"title":"指定行插入数据和删除指定行","content":"通过 insertAt(records, row)
方法可以在指定行插入一行或多行数据。remove(rows)
方法可以删除指定一行或多行数据,rows 为对象则是一行,数组则是多行数据,为空则删除所有数据。
\n","link":"grid/toolbar/insert-remove-rows","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"toolbar-insert-remove-rows"},{"title":"服务端数据保存和删除方法","content":"通过表格属性 save-data
服务端数据保存方法。\n通过表格属性 delete-data
服务端数据删除方法。
\n","link":"grid/tiny-first-menu/save-data","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-save-data"},{"title":"设置工具栏尺寸大小","content":"工具栏配置步骤:\n1、表格以插槽方式引入表格工具栏组件 GridToolbar
,并设置工具栏组件属性 slot="toolbar"
。\n2、设置工具栏组件属性 buttons
进行按钮组相关配置。\n3、表格事件设置 @toolbar-button-click
获取工具栏 buttons
的事件,用户可自定义实现复制行操作的业务逻辑。
\n\nsize
属性设置工具栏尺寸大小,包括 large、medium、small、mini 四种不同大小。不设置时为默认尺寸。 \n
\n","link":"grid/tiny-first-menu/copy-row-data","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-copy-row-data"},{"title":"开启表格刷新功能","content":"工具栏配置步骤:\n1、表格以插槽方式引入表格工具栏组件 GridToolbar
,并设置工具栏组件属性 slot="toolbar"
。\n2、设置工具栏组件属性 refresh
开启表格刷新功能。
\n\n- 设置工具栏属性
loading
开启/关闭加载中。\n自定义实现刷新时直接调用handleFetch('reload')
\n
\n","link":"grid/tiny-first-menu/refresh-grid","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-refresh-grid"},{"title":"开启表格全屏功能","content":"工具栏配置步骤:\n1、表格以插槽方式引入表格工具栏组件 GridToolbar
,并设置工具栏组件属性 slot="toolbar"
。\n2、设置工具栏组件属性 full-screen
开启表格全屏功能。
\n","link":"grid/tiny-first-menu/grid-full-screen","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-full-screen"},{"title":"全屏时改变表格高度","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/grid-full-screen-height","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-grid-full-screen-height"},{"title":"工具栏自定义插槽","content":"工具栏配置步骤:\n1、表格以插槽方式引入表格工具栏组件 GridToolbar
,并设置工具栏组件插槽 #toolbar
。\n2、通过工具栏组件的插槽 #buttons
自定义内容。
\n","link":"grid/tiny-first-menu/custom-toolbar","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-custom-toolbar"},{"title":"配置式","content":"通过 v-bind
绑定一个对象来实现配置式。在绑定的对象中 toolbar
字段用于工具栏配置,可配合 events
字段对工具栏中按钮进行 toolbarButtonClick
事件配置。另外,pager
字段用于分页配置,fetchData
字段用于请求服务。
\n","link":"grid/toolbar/toolbar-op-config","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"toolbar-toolbar-op-config"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-tree-grid.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-tree-grid.json
new file mode 100644
index 000000000..7c86c5cdf
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-tree-grid.json
@@ -0,0 +1 @@
+[{"title":"有子级的数据结构","content":"在 grid 标签上配置 tree-config="{children: 'children'}"以树的形式来展示数据,还需要在展示树节点的字段上配置 tree-node 属性
\n","link":"grid/tree-table/tree-grid-base","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-base"},{"title":"扁平化数据结构","content":"注意:扁平化的数据结构需要调用 aggregateTableData 方法把数据转换成带有子级的数据才能正常的显示出树表的结构
\n","link":"grid/tree-table/tree-grid-data","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-data"},{"title":"操作列","content":"列通过配置 type="radio" 实现单选,配置 type="selection" 实现多选
\n","link":"grid/tree-table/tree-grid-operation-column","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-operation-column"},{"title":"手动展开所有树节点","content":"setAllTreeExpansion(checked)
可设置所有树节点的展开与否。
\n","link":"grid/methods/set-all-tree-expansion","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-set-all-tree-expansion"},{"title":"手动展开指定树节点","content":"setTreeExpansion(rows, checked)
可设置展开指定的树形节点,第二个参数设置这一行展开与否。
\n","link":"grid/methods/set-tree-expansion","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-set-tree-expansion"},{"title":"手动切换展开树形节点","content":"toggleTreeExpansion(row)
可设置切换展开树形节点。
\n","link":"grid/methods/toggle-tree-expansion","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"methods-toggle-tree-expansion"},{"title":"冻结列","content":"在列的标签上可以通过配置 fixed="left" 属性把该列固定在左侧,配置 fixed="right" 属性把该列固定在右侧
\n","link":"grid/tree-table/tree-grid-fixed-column","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-fixed-column"},{"title":"展开行","content":"在 column 标签上配置 type="expand" 展开行,可以通过 v-slot 插槽插入需要的模板信息
\n","link":"grid/tree-table/tree-grid-expand","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-expand"},{"title":"检查树节点是否已展开","content":"通过 hasTreeExpand(row)
方法可以检查树节点是否已展开,参数 row 为行数据对象。
\n","link":"grid/tree-table/hasTreeExpand","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-hasTreeExpand"},{"title":"展开行序号列配置","content":"在 treeConfig
属性里配置 ordered
为 false
展开行,序号列按父子级的结构排序。默认 ordered
属性为 true
展开行后序号列按序号排序。
\n","link":"grid/tree-table/tree-grid-index","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-index"},{"title":"基本用法","content":"表格属性 expand-config
设置展开行配置项。
\n","link":"grid/tree-table/tree-grid-expand-config","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-expand-config"},{"title":"增删改","content":"在 grid-toolbar 标签上配置 slot="toolbar" 插槽,配置相关的操作按钮 ,注意:新增数据需要在 grid 标签上配置 edit-config 编辑框的配置信息,并通过 ref 获取到组件实例调用方法进行相关操作,findTree、filterTree 是工具类里的查找和过滤方法。由于tree数据节构的特殊性,grid的getInsertRecords
与getRecordset
方法无法获取到新增数据,此类数据需要用户自行处理。
\n","link":"grid/tree-table/tree-grid-insert-delete-update","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-insert-delete-update"},{"title":"键盘操作","content":"键盘移动高亮行,设置斑马线属性 stripe 为 false,鼠标悬停高亮行 highlight-hover-row 为 false,高亮当前行 highlight-current-row ,并配置 keyboard-config={isArrow: true} 属性启用方向键功能\n | Arrow Up ↑ | 移动到高亮行的上一行\n | Arrow Down ↓ | 移动到高亮行的下一行\n | Enter | 展开节点,进入子节点\n | Backspace | 关闭节点,返回到父节点
\n","link":"grid/tree-table/tree-grid-keyboard-operation","component":" 树表","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tree-table-tree-grid-keyboard-operation"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-validation.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-validation.json
new file mode 100644
index 000000000..81fe674b0
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-validation.json
@@ -0,0 +1 @@
+[{"title":"编辑时校验","content":"grid 标签配置 edit-config 对象,并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。
\n","link":"grid/grid_Example/gridValid/editing-validation","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-editing-validation"},{"title":"隐藏列编辑时校验","content":"grid 标签配置 edit-config 对象且列配置type:visible 且配置isValidAlways属性时, 即列总是显示可编辑状态时,支持编辑时校验,并配置 edit-rules 对象来设置校验对象和校验规则。具体参考下面示例。
\n","link":"grid/grid_Example/gridValid/editing-isvalidalways-validation","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-editing-isvalidalways-validation"},{"title":"数据关联校验","content":"在自定义校验时,validator
方法rule
参数中可获取到当前行与列的信息。可以按业务的需求实现数据关联的校验逻辑
\n","link":"grid/grid_Example/gridValid/row-data-valid","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-row-data-valid"},{"title":"自定义组件与插槽编辑器校验","content":"在使用自定义组件时,组件需要实现v-model
的功能。在使用插槽时想要实时校验需要手动触发组件的校验方法
\n","link":"grid/grid_Example/gridValid/custcomp","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-custcomp"},{"title":"选中时校验","content":"grid 标签配置 edit-config 对象,并配置 edit-rules 对象来设置校验对象和校验规则,通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验,具体参考下面示例。
\n","link":"grid/grid_Example/gridValid/select-validation","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-select-validation"},{"title":"提交前校验","content":"grid 标签配置 edit-config 对象,并配置 edit-rules 对象来设置校验对象和校验规则,通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验,具体参考下面示例。
\n","link":"grid/grid_Example/gridValid/before-submit-validation","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-before-submit-validation"},{"title":"触发校验时自动定位到当前校验的单元格","content":"grid 编辑器引入 tiny.0 组件,标签配置 edit-config 对象,并配置 edit-rules 对象来设置校验对象和校验规则,通过按钮点击事件调用 this.$refs.basicGrid.validate()方法来触发表格校验,具体参考下面示例。
\n","link":"grid/grid_Example/gridValid/validation-scroll-to-col","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-validation-scroll-to-col"},{"title":"错误提示配置项","content":"表格默认错误提示显示在 body
上, 可以通过设置 tooltip-config
的 appendTobody
设置为 false
来解决页面滚动时tip位置错误的问题。设置 placement
属性调整默认显示方向。tooltip-config
的配置可参参考 tooltip 组件
\n","link":"grid/grid_Example/gridValid/tipconfig","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"grid_Example-gridValid-tipconfig"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid-width-height.json b/examples/docs/resources/pc/demo-config/zh-CN/grid-width-height.json
new file mode 100644
index 000000000..645186957
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid-width-height.json
@@ -0,0 +1 @@
+[{"title":"开启列宽拖拽","content":"列宽默认开启,如需禁用需要设置resizable
为false
\n","link":"grid/tiny-first-menu/resize-column-width","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-resize-column-width"},{"title":"表格列属性设置宽度","content":"表格列属性设置 width 固定宽度,支持数值和百分比。
\n","link":"grid/tiny-first-menu/fixed-column-width","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-fixed-column-width"},{"title":"列宽自适应撑开","content":"表格属性设置 fit 自动撑开,默认值为 true 开启自适应撑开,值为 false 时必须设置列宽度,否则表格宽度由单元格内容撑开。
\n","link":"grid/tiny-first-menu/adaptive-column-width","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-adaptive-column-width"},{"title":"列宽不自适应撑开","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/adaptive-un-column-width","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-adaptive-un-column-width"},{"title":"表格属性设置高度","content":"表格属性设置 height 固定表格高度。
\n","link":"grid/tiny-first-menu/fixed-grid-height","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-fixed-grid-height"},{"title":"关闭响应式表格宽高","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/adaptive-grid-off-width-height","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-adaptive-grid-off-width-height"},{"title":"开启响应式表格宽高","content":"表格属性设置 autoResize 属性开启响应式表格宽高的同时,将高度heigh
设置为auto
就可以自动跟随父容器高度。
\n","link":"grid/news/auto-height","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"news-auto-height"},{"title":"设置 minHeight 最小高度","content":"表格属性设置 minHeight 限制最小高度,maxHeight 限制最大高度。
\n","link":"grid/tiny-first-menu/min-grid-height","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-min-grid-height"},{"title":"设置 maxHeight 最大高度","content":"详细用法参考如下示例","link":"grid/tiny-first-menu/max-min-grid-height","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-max-min-grid-height"},{"title":"设置总体列宽","content":"通过属性 column-min-width
设置总体列可以调整到的最小宽度,不设置时默认为列头 span 的宽度 + 36(头部固定宽度)。\n
\n","link":"grid/tiny-first-menu/column-min-width","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-column-min-width"},{"title":"本列最小宽度","content":"通过表格列属性 min-width
本列最小宽度;会自动将剩余空间按比例分配。\n
\n","link":"grid/tiny-first-menu/min-width","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-min-width"},{"title":"设置所有列宽度","content":"通过属性 column-width
设置所有列宽度,默认值为均匀分配。\n
\n","link":"grid/tiny-first-menu/column-width","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"tiny-first-menu-column-width"},{"title":"重新计算表格","content":"通过 recalculate()
方法可以重新计算表格,当父容器宽度变化时可通过该方法重新计算表格。
\n","link":"grid/recalculate","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"recalculate"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/grid.json b/examples/docs/resources/pc/demo-config/zh-CN/grid.json
new file mode 100644
index 000000000..b26157bdd
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/grid.json
@@ -0,0 +1 @@
+[{"title":"标签式","content":"详细用法参考如下示例","link":"grid/basicUsage","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"basicUsage"},{"title":"配置式","content":"详细用法参考如下示例","link":"grid/basicUsage-conf","component":" Grid 表格","findIntroStr":"表格组件,提供了非常强大数据表格功能,在 Grid 可以展示数据列表,可以对数据列表进行选择、编辑等。","demoId":"basicUsage-conf"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/hrapprover.json b/examples/docs/resources/pc/demo-config/zh-CN/hrapprover.json
new file mode 100644
index 000000000..b932d4bab
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/hrapprover.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"hrapprover/basic-usage","component":" Hrapprover 权签人","findIntroStr":"权签人业务组件用于根据部门查询权签人。","demoId":"basic-usage"},{"title":"权签类别","content":"可通过 category
设置权签类别,默认值是 0303
,发送权签人请求的category参数。
\n","link":"hrapprover/category-type","component":" Hrapprover 权签人","findIntroStr":"权签人业务组件用于根据部门查询权签人。","demoId":"category-type"},{"title":"禁用","content":"通过 value
设置权签人的值。 通过 disabled
设置组件是否禁用,默认值为 false。
\n","link":"hrapprover/disabled","component":" Hrapprover 权签人","findIntroStr":"权签人业务组件用于根据部门查询权签人。","demoId":"disabled"},{"title":"自定义服务","content":"通过 fetch-hrapprover 属性可以指定一个方法,在方法中可实现请求自定义的服务。
\n","link":"hrapprover/custom-service","component":" Hrapprover 权签人","findIntroStr":"权签人业务组件用于根据部门查询权签人。","demoId":"custom-service"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/icon.json b/examples/docs/resources/pc/demo-config/zh-CN/icon.json
new file mode 100644
index 000000000..20874256e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/icon.json
@@ -0,0 +1,26 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "icon/basic-usage",
+ "component": " Icon 图标",
+ "findIntroStr": "提供了一套常用的图标集合,从 @opentiny/vue-icon 引入相应的图标类函数。图标类函数首字母大写/小写均可引入,执行该函数以生成一个图标类。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "显示 Title",
+ "content": "通过在 Icon 的父级元素上增加 title
属性来实现给 Icon 图标增加 Title 的功能。
\n",
+ "link": "icon/show-title",
+ "component": " Icon 图标",
+ "findIntroStr": "提供了一套常用的图标集合,直接通过设置类名为 `icon-iconName` 来使用。",
+ "demoId": "show-title"
+ },
+ {
+ "title": "图标集合",
+ "content": "全部图标参考如下",
+ "link": "icon/list",
+ "component": " Icon 图标",
+ "findIntroStr": "提供了一套常用的图标集合,直接通过设置类名为 `icon-iconName` 来使用。",
+ "demoId": "list"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/image.json b/examples/docs/resources/pc/demo-config/zh-CN/image.json
new file mode 100644
index 000000000..a7ebffce5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/image.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 src
设置预览的图片路径。
\n","link":"image/basic-usage","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"basic-usage"},{"title":"自适应容器尺寸","content":"可通过 fit
属性确定图片如何适应到容器框,同原生 css 的 object-fit 属性。
\nobject-fit 说明
\n
fill:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比\ncontain:被替换的内容大小可以填充元素的内容框\ncover:被替换的内容大小保持其宽高比,同时填充元素的整个内容框\nnone:被替换的内容尺寸不会被改变\nscale-down:内容的尺寸就像是指定了none 或 contain,取决于哪一个将导致更小的对象尺寸。
\n
\n","link":"image/auto-fit-container-size","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"auto-fit-container-size"},{"title":"占位内容","content":"可通过 slot = placeholder
自定义占位内容。
\n","link":"image/custom-placeholder","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"custom-placeholder"},{"title":"懒加载","content":"可通过 lazy
开启懒加载功能,当图片滚动到可视范围内才会加载。可通过 scroll-container
来设置滚动容器,若未定义,则为最近一个 overflow
值为 auto
或 scroll
的父元素。
\n提示
\n
lazy 懒加载的图片必须是远程的图片,不支持静态图片懒加载。
\n
\n","link":"image/lazy-load","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"lazy-load"},{"title":"预览大图","content":"通过 preview-src-list
开启预览大图的功能。
\n","link":"image/preview-src-list","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"preview-src-list"},{"title":"图片预览层级","content":"可通过 z-index
设置预览图片的层级。
\n","link":"image/preview-z-index","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"preview-z-index"},{"title":"加载成功事件","content":"图片加载成功触发 load
事件。
\n","link":"image/load-event","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"load-event"},{"title":"加载失败事件","content":"图片加载失败触发 error
事件。
\n","link":"image/load-error","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"load-error"},{"title":"加载失败","content":"可通过 slot = error
自定义加载失败内容。
\n","link":"image/custom-load-failed-text","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"custom-load-failed-text"},{"title":"对话框中预览图片","content":"在 dialog-box
元素中嵌入 image
进行图片预览。
\n","link":"image/preview-in-dialog","component":" Image 图片预览","findIntroStr":"图片容器,在保留原生 img 的特性下,支持懒加载,自定义占位、加载失败等功能。","demoId":"preview-in-dialog"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/input.json b/examples/docs/resources/pc/demo-config/zh-CN/input.json
new file mode 100644
index 000000000..c1693abee
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/input.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"input/basic-usage","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"basic-usage"},{"title":"可清空","content":"可通过 clearable
属性设置输入框显示清空图标按钮。
\n","link":"input/clearable","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"clearable"},{"title":"密码显示","content":"当 type
为 password
时,可通过 show-password
属性设置输入框显示密码显示/隐藏切换图标按钮。
\n","link":"input/show-password","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"show-password"},{"title":"type 属性","content":"通过对应的 type
属性,可以设置为对应的类型。默认为 text,可选值为 text,textarea 和其他 原生 input 的 type 值
\n","link":"input/type","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"type"},{"title":"尺寸","content":"可通过 size
属性设置尺寸大小,可选值:medium / small / mini
。注意:只在 type!="textarea"
时有效。
\n","link":"input/size","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"size"},{"title":"form","content":"可通过 form
属性设置原生属性 form 。
\n","link":"input/form","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"form"},{"title":"原生属性","content":"可设置 name
disabled
readonly
等原生属性。
\n","link":"input/name","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"name"},{"title":"输入框关联文字","content":"可通过 label
属性设置输入框关联的 label 文字。
\n","link":"input/label","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"label"},{"title":"头部图标","content":"可通过 prefix-icon
属性设置输入框头部图标。
\n","link":"input/prefix-icon","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"prefix-icon"},{"title":"尾部图标","content":"可通过 suffix-icon
属性设置输入框尾部图标。
\n","link":"input/suffix-icon","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"suffix-icon"},{"title":"可缩放文本域","content":"可通过 resize
属性设置文本域的缩放。可选值:none / both / horizontal / vertical
。注意:只在 type="textarea"
时有效。
\n","link":"input/resize","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"resize"},{"title":"文本域行数","content":"可通过 rows
属性设置文本域显示行数。注意:只在 text="textarea"
时有效。
\n","link":"input/rows","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"rows"},{"title":"文本域宽度","content":"可通过 cols
属性设置文本域显示宽度。注意:只在 text="textarea"
时有效。
\n","link":"input/cols","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"cols"},{"title":"可自适应文本高度的文本域","content":"可通过 autosize
属性设置文本域自适应内容高度。可传入对象,如{ minRows: 2, maxRows: 6 }
。注意:只对 type="textarea"
有效。
\n","link":"input/autosize","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"autosize"},{"title":"输入框的 tabindex","content":"可通过 tabindex
属性设置输入框的 tabindex
\n","link":"input/tabindex","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"tabindex"},{"title":"前置内容","content":"配置 prepend
slot,设置输入框前置内容,注意:只对 type="text"
有效。
\n","link":"input/slot-prepend","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"slot-prepend"},{"title":"后置内容","content":"配置 append
slot,设置输入框后置内容,注意:只对 type="text"
有效。
\n","link":"input/slot-append","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"slot-append"},{"title":"头部内容","content":"配置 prefix
slot,设置输入框头部内容,注意:只对 type="text"
有效。
\n","link":"input/slot-prefix","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"slot-prefix"},{"title":"尾部内容","content":"配置 suffix
slot,设置输入框尾部内容,注意:只对 type="text"
有效。
\n","link":"input/slot-suffix","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"slot-suffix"},{"title":"最大值","content":"可通过 max
属性设置输入框最大值。max
是原生属性。
\n","link":"input/max","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"max"},{"title":"最小值","content":"可通过 min
属性设置输入框最小值。min
是原生属性。
\n","link":"input/min","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"min"},{"title":"最大输入长度","content":"可通过 maxlength
属性设置输入框最大输入长度。maxlength
是原生属性。
\n","link":"input/maxlength","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"maxlength"},{"title":"输入字数统计","content":"可通过 show-word-limit
属性设置是否显示输入字数统计,只在 type = "text" 或 type = "textarea" 时有效
\n","link":"input/show-word-limit","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"show-word-limit"},{"title":"计数器","content":"可通过 counter
属性设置显示输入框字符计数器。
\n","link":"input/counter","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"counter"},{"title":"输入字段的合法数字间隔","content":"可通过 step
属性设置输入字段的合法数字间隔。step
是原生属性。
\n","link":"input/step","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"step"},{"title":"输入时触发表单校验","content":"可通过 validate-event
属性设置输入时触发表单校验。通过 trigger
配置触发校验规则的方式,为 change
时,当输入框值改变即触发校验,为 blur
时则失焦后触发校验。
\n","link":"input/validate-event","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"validate-event"},{"title":"自动获取焦点","content":"可通过 autofocus
属性设置自动获取焦点。autofocus
是原生属性。
\n","link":"input/autofocus","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"autofocus"},{"title":"自动补全","content":"可通过 autocomplete
属性设置自动补全,默认值为 off ,可选 on 。
\n","link":"input/autocomplete","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"autocomplete"},{"title":"失焦事件","content":"输入框失去焦点时触发 blur
事件。
\n","link":"input/event-blur","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"event-blur"},{"title":"值改变事件","content":"输入框值改变时触发 change
事件。
\n","link":"input/event-change","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"event-change"},{"title":"清除事件","content":"点击输入框清除按钮时触发 clear
事件。
\n","link":"input/event-clear","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"event-clear"},{"title":"聚焦事件","content":"输入框获取焦点时触发 focus
事件。
\n","link":"input/event-focus","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"event-focus"},{"title":"记忆历史输入","content":"详细用法参考如下示例","link":"input/method-addMemory","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"method-addMemory"},{"title":"失去焦点","content":"详细用法参考如下示例","link":"input/method-blur","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"method-blur"},{"title":"获取焦点","content":"详细用法参考如下示例","link":"input/method-focus","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"method-focus"},{"title":"选中输入框文本","content":"详细用法参考如下示例","link":"input/method-select","component":" Input 输入框","findIntroStr":"通过鼠标或键盘输入字符。","demoId":"method-select"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/ip-address.json b/examples/docs/resources/pc/demo-config/zh-CN/ip-address.json
new file mode 100644
index 000000000..3a70c21bd
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/ip-address.json
@@ -0,0 +1 @@
+[{"title":"IPv4 类型","content":"可通过 type
属性配置 IPv4
类型,默认是 IPv4
。
\n","link":"ip-address/ipv4-type","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"ipv4-type"},{"title":"IPv6 类型","content":"可通过 type
属性配置为 IPv6
类型,默认是 IPv4
。
\n","link":"ip-address/ipv6-type","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"ipv6-type"},{"title":"文本只读","content":"通过 readonly
属性设置文本的只读行,默认为 false 。
\n","link":"ip-address/readonly","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"readonly"},{"title":"禁用","content":"通过 disabled
属性设置文本是否禁用,默认为 false。
\n","link":"ip-address/disabled","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"disabled"},{"title":"输入框大小","content":"可设置为medium
,small
,mini
\n","link":"ip-address/size","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"size"},{"title":"属性设置分隔符","content":"可通过 delimiter
属性设置分隔符(图标类)。
\n","link":"ip-address/delimiter","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"delimiter"},{"title":"默认插槽","content":"可通过默认插槽设置分隔符。
\n","link":"ip-address/slots","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"slots"},{"title":"focus 事件","content":"文本框获取焦点时触发 focus
事件。
\n","link":"ip-address/focus","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"focus"},{"title":"blur 事件","content":"文本框失去焦点时触发 blur
事件。
\n","link":"ip-address/blur","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"blur"},{"title":"change 事件","content":"文本框内容改变后触发 change
事件。
\n","link":"ip-address/change","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"change"},{"title":"select 事件","content":"文本框内容选中时触发 select
事件。
\n","link":"ip-address/select","component":" IpAddress 输入框","findIntroStr":"IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致,同时提供数据绑定功能。","demoId":"select"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/layout.json b/examples/docs/resources/pc/demo-config/zh-CN/layout.json
new file mode 100644
index 000000000..23f8d6ec6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/layout.json
@@ -0,0 +1,98 @@
+[
+ {
+ "title": "栅格布局",
+ "content": "通过使用 Row
, Col
组件的 span
属性实现栅格系统布局。\n 该系统默认为12栅格,Col
组件的 span
之和大于12时,布局会自动换行显示。
\n",
+ "link": "layout/base",
+ "component": " Layout 布局",
+ "findIntroStr": "采用12栅格布局,可使页面布局变得非常简单与清晰。",
+ "demoId": "base"
+ },
+ {
+ "title": "对齐方式",
+ "content": "通过设置Row
的 flex
属性为 true
来启用 flex 布局,并通过 justify
与 align
属性调整子元素的对齐方式。
\n提示
\n
flex 布局存在 IE 兼容性问题,只能在 IE 10 以上运行。
\n
\n",
+ "link": "layout/alignment",
+ "component": " Layout 布局",
+ "findIntroStr": "采用栅格布局,可使布局方法变得非常简单与清晰。",
+ "demoId": "alignment"
+ },
+ {
+ "title": "排序",
+ "content": "在启用 flex
布局时,可通过设置 Row
组件的 order
属性,给带 no
属性的 col
排序。
\n提示
\n
flex 布局存在 IE 兼容性问题,只能在 IE 10 以上运行。
\n
\n",
+ "link": "layout/order",
+ "component": " Layout 布局",
+ "findIntroStr": "采用栅格布局,可使布局方法变得非常简单与清晰。",
+ "demoId": "order"
+ },
+ {
+ "title": "偏移",
+ "content": "通过设置 Col
组件的 offset
属性来指定分栏偏移的栏数。
\n",
+ "link": "layout/offset",
+ "component": " Layout 布局",
+ "findIntroStr": "采用栅格布局,可使布局方法变得非常简单与清晰。",
+ "demoId": "offset"
+ },
+ {
+ "title": "垂直排列方式",
+ "content": "通过使用 Row
组件的 align
属性实现\tflex 布局下的垂直排列方式。
\n",
+ "link": "row/align",
+ "component": " Row 行配置",
+ "findIntroStr": "定义 Layout 的行配置信息。",
+ "demoId": "align"
+ },
+ {
+ "title": "栅格间隔",
+ "content": "通过使用 Row
组件的 gutter
属性实现栅格间隔。
\n",
+ "link": "row/gutter",
+ "component": " Row 行配置",
+ "findIntroStr": "定义 Layout 的行配置信息。",
+ "demoId": "gutter"
+ },
+ {
+ "title": "水平排列方式",
+ "content": "通过使用 Row
组件的 justify
属性实现 flex 布局下的水平排列方式。
\n",
+ "link": "row/justify",
+ "component": " Row 行配置",
+ "findIntroStr": "定义 Layout 的行配置信息。",
+ "demoId": "justify"
+ },
+ {
+ "title": "排序方式",
+ "content": "通过使用 Row
组件的 order
属性实现 flex 布局下排序方式。
\n",
+ "link": "row/order",
+ "component": " Row 行配置",
+ "findIntroStr": "定义 Layout 的行配置信息。",
+ "demoId": "order1"
+ },
+ {
+ "title": "自定义元素标签",
+ "content": "通过使用 Row
组件的 tag
属性实现自定义元素标签,可选任意标签。
\n",
+ "link": "row/tag1",
+ "component": " Row 行配置",
+ "findIntroStr": "定义 Layout 的行配置信息。",
+ "demoId": "tag1"
+ },
+ {
+ "title": "移动",
+ "content": "通过设置 Col
组件的 move
属性来指定分栏偏移的栏数。
\n",
+ "link": "col/col-move",
+ "component": " Col 列配置",
+ "findIntroStr": "定义 Layout 的列配置信息。",
+ "demoId": "col-move"
+ },
+ {
+ "title": "响应式布局",
+ "content": "参照了 Bootstrap 的响应式设计,预设了五个响应尺寸:xs
、sm
、md
、lg
和 xl
。
\n",
+ "link": "layout/responsive-layout",
+ "component": " Col 列配置",
+ "findIntroStr": "定义 Layout 的列配置信息。",
+ "demoId": "responsive-layout"
+ },
+ {
+ "title": "自定义元素标签",
+ "content": "可选任意标签。
\n",
+ "link": "col/tag",
+ "component": " Col 列配置",
+ "findIntroStr": "定义 Layout 的列配置信息。",
+ "demoId": "tag"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/link-menu.json b/examples/docs/resources/pc/demo-config/zh-CN/link-menu.json
new file mode 100644
index 000000000..27f58291d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/link-menu.json
@@ -0,0 +1 @@
+[{"title":"数据源","content":"通过 data
属性设置菜单的数据源,同时在数据对象中可通过 disabled
设置该节点是否可被勾选。
\n","link":"link-menu/data-resource","component":" LinkMenu 收藏夹菜单","findIntroStr":"LinkMenu 收藏夹形式的菜单,支持可配置菜单项。","demoId":"data-resource1"},{"title":"收藏菜单标题","content":"通过 title
属性定义收藏菜单标题。
\n","link":"link-menu/data-resource","component":" LinkMenu 收藏夹菜单","findIntroStr":"LinkMenu 收藏夹形式的菜单,支持可配置菜单项。","demoId":"data-resource"},{"title":"菜单内容超长时换行显示","content":"通过 wrap
属性设置菜单内容超长时换行显示。
\n","link":"link-menu/data-resource","component":" LinkMenu 收藏夹菜单","findIntroStr":"LinkMenu 收藏夹形式的菜单,支持可配置菜单项。","demoId":"data-resource2"},{"title":"可收藏栏目数","content":"通过 max-item
属性指定可勾选并收藏的栏目数。指定 default-expand-all
为 false 时,打开菜单弹窗时所有节点为折叠状态。
\n","link":"link-menu/menu-items","component":" LinkMenu 收藏夹菜单","findIntroStr":"LinkMenu 收藏夹形式的菜单,支持可配置菜单项。","demoId":"menu-items"},{"title":"自定义菜单数据服务","content":"通过 get-menu-data-sync
自定义菜单数据服务。
\n","link":"link-menu/get-menu-data-sync","component":" LinkMenu 收藏夹菜单","findIntroStr":"LinkMenu 收藏夹形式的菜单,支持可配置菜单项。","demoId":"get-menu-data-sync"},{"title":"自定义折叠展开图标","content":"通过 icon
属性自定义折叠展开图标。通过 search-icon
属性自定义搜索图标。
\n","link":"link-menu/custom-icon","component":" LinkMenu 收藏夹菜单","findIntroStr":"LinkMenu 收藏夹形式的菜单,支持可配置菜单项。","demoId":"custom-icon"},{"title":"菜单内容超长时省略显示","content":"通过 ellipsis
属性设置菜单内容超长时省略显示。
\n","link":"link-menu/custom-icon","component":" LinkMenu 收藏夹菜单","findIntroStr":"LinkMenu 收藏夹形式的菜单,支持可配置菜单项。","demoId":"custom-icon1"},{"title":"自定义菜单弹窗底部","content":"通过 foot
插槽自定义菜单弹窗的底部内容。sureNodevalue
方法用于获取选中的菜单节点并关闭菜单弹窗,同时展示选中的菜单。hideDialog
方法用于关闭弹窗。插槽可结合这两个方法一起使用。
\n","link":"link-menu/custom-foot","component":" LinkMenu 收藏夹菜单","findIntroStr":"LinkMenu 收藏夹形式的菜单,支持可配置菜单项。","demoId":"custom-foot"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/link.json b/examples/docs/resources/pc/demo-config/zh-CN/link.json
new file mode 100644
index 000000000..cd0b5a468
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/link.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"link/basic-usage","component":" Link 文字链接","findIntroStr":"文字超链接。","demoId":"basic-usage"},{"title":"主题样式","content":"通过 type
属性设置链接的主题类型。
\n","link":"link/link-style","component":" Link 文字链接","findIntroStr":"文字超链接。","demoId":"link-style"},{"title":"禁用链接","content":"通过 disabled
属性可以指定是否禁用链接。
\n","link":"link/dynamic-disable","component":" Link 文字链接","findIntroStr":"文字超链接。","demoId":"dynamic-disable"},{"title":"聚焦时不显示下划线","content":"鼠标悬停在链接上时,默认会显示下划线,设置 underline
为 false 后聚焦时不显示下划线。
\n","link":"link/focus-no-underline","component":" Link 文字链接","findIntroStr":"文字超链接。","demoId":"focus-no-underline"},{"title":"自定义图标","content":"通过属性 icon
、默认插槽、icon
插槽都可以自定义图标。
\n","link":"link/custom-icon","component":" Link 文字链接","findIntroStr":"文字超链接。","demoId":"custom-icon"},{"title":"链接地址","content":"通过属性 href
指定链接需要跳转的地址,可配合原生属性 target
一起使用。
\n","link":"link/config-href","component":" Link 文字链接","findIntroStr":"文字超链接。","demoId":"config-href"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/loading.json b/examples/docs/resources/pc/demo-config/zh-CN/loading.json
new file mode 100644
index 000000000..ed0290c2a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/loading.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过静态方法 Loading.service
在指定 target
上设置加载。
\n","link":"loading/basic-usage","component":" Loading 加载","findIntroStr":"加载数据时显示的动画效果。","demoId":"basic-usage"},{"title":"自定义加载提示文本","content":"通过 text
自定义加载文字的提示文本。
\n","link":"loading/loading-tip-text","component":" Loading 加载","findIntroStr":"加载数据时显示的动画效果。","demoId":"loading-tip-text"},{"title":"自定义遮罩背景色","content":"通过 background
自定义背景颜色和透明度。
\n","link":"loading/background","component":" Loading 加载","findIntroStr":"加载数据时显示的动画效果。","demoId":"background"},{"title":"自定义样式","content":"通过 customClass
指定类名进行样式修改。
\n","link":"loading/custom-class","component":" Loading 加载","findIntroStr":"加载数据时显示的动画效果。","demoId":"custom-class"},{"title":"修饰符","content":"详细用法参考如下示例","link":"loading/body","component":" Loading 加载","findIntroStr":"加载数据时显示的动画效果。","demoId":"body"},{"title":"全局加载","content":"通过 v-loading.lock.fullscreen
指令方式或者服务方式进行全局加载,如需使用指令方式全局加载需要如下操作:\n在 Vue 2
版本环境中添加 Vue.use(Loading)
\n在 Vue 3
版本环境中添加 app.use(Loading)
\n","link":"loading/fullscreen","component":" Loading 加载","findIntroStr":"加载数据时显示的动画效果。","demoId":"fullscreen"},{"title":"自定义加载图标","content":"通过 spinner
自定义加载图标。
\n","link":"loading/spinner","component":" Loading 加载","findIntroStr":"加载数据时显示的动画效果。","demoId":"spinner"},{"title":"区域加载","content":"通过 target
指定 Loading 需要覆盖的 DOM 节点。
\n","link":"loading/target","component":" Loading 加载","findIntroStr":"加载数据时显示的动画效果。","demoId":"target"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/locales.json b/examples/docs/resources/pc/demo-config/zh-CN/locales.json
new file mode 100644
index 000000000..e88cb8d2e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/locales.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"配置 local
属性后,不会自动调用服务,仅用做当前语言切换,不会刷新页面。
\n","link":"locales/basic-usage","component":" Locales 语言选择","findIntroStr":"Locales 语言选择组件,在有两种语言时会直接显示成语种,当语言数大于 2 时,将显示一个下拉列表。","demoId":"basic-usage"},{"title":"自定义服务","content":"get-locale
可用于自定义获取所有语言。get-current-locale
用于获取当前语言。get-change-locale-url
用于获取改变语言后的 URL,参数为切换后的语言。
\n","link":"locales/custom-service","component":" Locales 语言选择","findIntroStr":"Locales 语言选择组件,在有两种语言时会直接显示成语种,当语言数大于 2 时,将显示一个下拉列表。","demoId":"custom-service"},{"title":"语言切换","content":"提供 change-lang
函数用于自定义语言切换的逻辑,不设置则使用内置的切换方法。
\n","link":"locales/change-lang","component":" Locales 语言选择","findIntroStr":"Locales 语言选择组件,在有两种语言时会直接显示成语种,当语言数大于 2 时,将显示一个下拉列表。","demoId":"change-lang"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/logon-user.json b/examples/docs/resources/pc/demo-config/zh-CN/logon-user.json
new file mode 100644
index 000000000..0a3e0ade5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/logon-user.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"logon-user/basic-usage","component":" LogonUser 登录用户","findIntroStr":"LogonUser 用于显示当前登录人的 显示名(displayName) 或 长工号(userCN)。","demoId":"basic-usage"},{"title":"自定义服务","content":"可通过 service
属性设置自定义服务。
\n","link":"logon-user/custom-service","component":" LogonUser 登录用户","findIntroStr":"LogonUser 用于显示当前登录人的 显示名(displayName) 或 长工号(userCN)。","demoId":"custom-service"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/logout.json b/examples/docs/resources/pc/demo-config/zh-CN/logout.json
new file mode 100644
index 000000000..a70f500e5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/logout.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"logout/basic-usage","component":" Logout 注销","findIntroStr":"Logout 登录或退出链接。","demoId":"basic-usage"},{"title":"自定义服务","content":"可通过 service
属性设置自定义服务。
\n","link":"logout/custom-service","component":" Logout 注销","findIntroStr":"Logout 登录或退出链接。","demoId":"custom-service"},{"title":"自定义配置注销后跳转地址","content":"详细用法参考如下示例","link":"logout/redirecturl","component":" Logout 注销","findIntroStr":"Logout 登录或退出链接。","demoId":"redirecturl"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/milestone.json b/examples/docs/resources/pc/demo-config/zh-CN/milestone.json
new file mode 100644
index 000000000..9ed08bf5a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/milestone.json
@@ -0,0 +1,122 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "milestone/basic-usage",
+ "component": "Milestone 里程碑",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "数据源",
+ "content": "通过 data
属性设置里程碑数据。
\n",
+ "link": "milestone/data-source",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "data-source"
+ },
+ {
+ "title": "数据字段映射",
+ "content": "数据字段映射属性说明
\n
completed-field
:设置里程碑完成状态对应的取值,默认为 completed
\nflag-content-field
:设置节点旗子数据中描述对应的字段名,默认为 content
\nflag-field
:设置节点信息中旗子数据所在字段名,默认为 flags
\nflag-name-field
:设置节点旗子数据中名称对应的字段名,默认为 name
\nflag-status-field
:设置节点旗子数据中状态对应的字段名,默认为 status
\nname-field
:设置节点信息中名称对应的字段名,默认为 name
\nstatus-field
:设置数据状态对应的字段名,默认为 status
\ntime-field
:设置节点时间信息对应的字段名,默认为 time
\n
\n",
+ "link": "milestone/data-field-mapping",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "data-field-mapping"
+ },
+ {
+ "title": "旗帜数据来源前面节点",
+ "content": "通过 flag-before
可设置里程碑上活动(即旗子)上的数据从前面还是后面节点上获取,默认为 false
取后面节点上的数据。
\n",
+ "link": "milestone/flag-before",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "flag-before"
+ },
+ {
+ "title": "进度条颜色",
+ "content": "通过 line-style
属性设置线条颜色。
\n",
+ "link": "milestone/line-style",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "line-style"
+ },
+ {
+ "title": "状态与颜色对应关系",
+ "content": "milestones-status
属性对象中,键对应 data
属性的数据中的 status
字段,然后控制不同状态与颜色的对应关系。
\n",
+ "link": "milestone/milestones-status",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "milestones-status"
+ },
+ {
+ "title": "取消未完成状态序号显示",
+ "content": "设置 show-number
为 false 后,里程碑未完成的节点上将不显示序号,默认为 true 。
\n",
+ "link": "milestone/show-number",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "show-number"
+ },
+ {
+ "title": "已完成节点实心显示",
+ "content": "通过设置 solid
属性为 true 可设置已经完成节点显示为实心,且光晕不透明,默认为 false 。
\n",
+ "link": "milestone/solid-style",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "solid-style"
+ },
+ {
+ "title": "宽度",
+ "content": "通过 space
属性设置步骤条的宽度。
\n",
+ "link": "milestone/milestone-space",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "milestone-space"
+ },
+ {
+ "title": "序号起始值",
+ "content": "通过 start
属性设置里程碑节点的序号起始值,默认为 -1 。
\n",
+ "link": "milestone/start-index",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "start-index"
+ },
+ {
+ "title": "自定义节点图标",
+ "content": "通过 icon
作用域插槽可自定义图标。
\n",
+ "link": "milestone/custom-icon-slot",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "custom-icon-slot"
+ },
+ {
+ "title": "自定义节点下方内容",
+ "content": "通过 bottom
作用域插槽可自定义节点下方的内容。
\n",
+ "link": "milestone/custom-bottom",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "custom-bottom"
+ },
+ {
+ "title": "自定义节点上方内容",
+ "content": "通过 top
作用域插槽可自定义节点上方的内容。
\n",
+ "link": "milestone/custom-top",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "custom-top"
+ },
+ {
+ "title": "自定义旗帜内容",
+ "content": "通过 flag
作用域插槽可自定义节点旗帜的内容。
\n",
+ "link": "milestone/custom-flag",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "custom-flag"
+ },
+ {
+ "title": "事件",
+ "content": "单击里程碑节点时触发 click
事件,参数(index:节点索引, node:节点数据信息)。单击里程碑旗帜时触发 flag-click
事件,参数(index:节点内旗子的索引, node:节点上旗子的数据信息)。
\n",
+ "link": "milestone/milestone-events",
+ "component": " Milestone",
+ "findIntroStr": "里程碑模式是一个高度定制化的组件,用户可以自定义组件的状态,节点颜色,线条颜色等。支持在节点间插入活动旗子,tip 显示活动信息。",
+ "demoId": "milestone-events"
+ }
+]
\ No newline at end of file
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/modal.json b/examples/docs/resources/pc/demo-config/zh-CN/modal.json
new file mode 100644
index 000000000..757513ed4
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/modal.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"可通过 Modal.alert
方法设置弹出框,通过 Modal.confirm
方法设置确认弹出框。
\n","link":"modal/base","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"base"},{"title":"最大化显示","content":"可通过 fullscreen
属性设置是否最大化显示。
\n","link":"modal/fullscreen","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"fullscreen"},{"title":"按 Esc 键关闭弹出框","content":"可通过 esc-closable
属性设置是否允许按 Esc 键关闭窗口,默认为 false
。
\n","link":"modal/esc-closable","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"esc-closable"},{"title":"自动关闭延时","content":"可通过 duration
属性设置自动关闭的延迟时间,只对 type=message 有效。
\n","link":"modal/duration","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"duration"},{"title":"防止重复提示","content":"如果不想窗口重复点击,可以设置唯一的 id
防止重复提示,只对 type=message 有效。
\n","link":"modal/id","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"id"},{"title":"锁住滚动条","content":"可通过 lock-scroll
属性设置是否锁住滚动条,不允许页面滚动。
\n","link":"modal/lock-scroll","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"lock-scroll"},{"title":"锁住页面","content":"可通过 lock-view
属性设置是否锁住页面,不允许窗口之外的任何操作。
\n","link":"modal/lock-view","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"lock-view"},{"title":"显示遮罩层","content":"可通过 mask
属性设置是否显示遮罩层,默认为 true
。
\n","link":"modal/lock-view","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"lock-view1"},{"title":"点击遮罩层关闭窗口","content":"可通过 mask-closable
属性设置是否允许点击遮罩层关闭窗口。
\n","link":"modal/mask-closable","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"mask-closable"},{"title":"自定义内容","content":"可通过 message
属性设置窗口的内容。
\n","link":"modal/message","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"message"},{"title":"调整窗口大小","content":"可通过和width
和height
设置窗口的宽高,而通过 resize
设置是否允许拖动调整窗口大小。
\n","link":"modal/resize","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"resize"},{"title":"调整窗口大小后窗口显示的最小宽度","content":"配置 resize
可拖拽属性为 true
后,可通过 min-width
属性设置拖拽后窗口的最小宽度。
\n","link":"modal/min-width","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"min-width"},{"title":"调整窗口大小后窗口显示的最小高度","content":"配置 resize
可拖拽属性为 true
后,可通过 min-height
属性设置拖拽后窗口的最小高度。
\n","link":"modal/min-height","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"min-height"},{"title":"不显示底部","content":"可通过 showFooter
属性设置是否显示底部,默认为 true
。
\n","link":"modal/showFooter","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"showFooter"},{"title":"不显示头部","content":"可通过 showHeader
属性设置是否显示头部,默认为 true
。
\n","link":"modal/showHeader","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"showHeader"},{"title":"消息状态","content":"可通过 status
属性设置消息状态,可选值有 info | success | warning | error | loading
。
\n","link":"modal/status","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"status"},{"title":"标题","content":"可通过 title
属性设置窗口的标题。
\n","link":"modal/title","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"title"},{"title":"距离顶部的位置","content":"可通过 top
属性设置消息距离顶部的位置,只对 type=message 有效。
\n","link":"modal/top","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"top"},{"title":"窗口类型","content":"可通过 type
属性设置窗口类型,可选值 alert | confirm | message
。
\n","link":"modal/type","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"type"},{"title":"绑定值","content":"可通过 value/v-model
属性绑定值。
\n","link":"modal/value","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"value"},{"title":"自定义堆叠顺序","content":"可通过 zIndex
属性设置自定义堆叠顺序(对于某些特殊场景,比如被遮挡时可能会用到)。
\n","link":"modal/zIndex","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"zIndex"},{"title":"取消按钮事件","content":"点击取消按钮时触发 cancel
事件。
\n","link":"modal/cancel-event","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"cancel-event"},{"title":"关闭按钮事件","content":"点击关闭按钮时会触发 close
事件。
\n","link":"modal/close-event","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"close-event"},{"title":"确定按钮事件","content":"点击确定按钮时会触发 confirm
事件。
\n","link":"modal/confirm-event","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"confirm-event"},{"title":"窗口关闭事件","content":"窗口关闭时会触发 hide
事件。
\n","link":"modal/hide-event","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"hide-event"},{"title":"窗口显示事件","content":"在窗口显示时会触发 show
事件。
\n","link":"modal/show-event","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"show-event"},{"title":"窗口缩放事件","content":"窗口缩放时会触发 zoom
事件。
\n","link":"modal/zoom-event","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"zoom-event"},{"title":"关闭弹窗,是否重置表单数据","content":"Modal嵌套表单使用时,关闭弹窗时,重置表单数据
\n设置 is-form-reset
为false,则关闭弹窗是不重置表单
","link":"modal/is-form-reset","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"is-form-reset"},{"title":"默认插槽","content":"可通过 templete
设置默认插槽。
\n","link":"modal/value","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"value1"},{"title":"底部插槽","content":"可通过 slot="footer"
设置底部插槽。
\n","link":"modal/footer-slot","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"footer-slot"},{"title":"嵌套 grid","content":"可通过插槽嵌套 grid
\n","link":"modal/grid","component":" Modal 模态框","findIntroStr":"Modal 模态框","demoId":"grid"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/nav-menu.json b/examples/docs/resources/pc/demo-config/zh-CN/nav-menu.json
new file mode 100644
index 000000000..8b870018b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/nav-menu.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 data
属性配置菜单数据,若不配置默认读取后台服务,比如 Jalor 6,读取 services/jalor/web/support/workspace/current 服务的 leftMenuNode 数据。
\n","link":"nav-menu/basic-usage","component":" NavMenu 导航菜单","findIntroStr":"NavMenu 导航菜单,主要用于定义页面顶部导航的菜单。","demoId":"basic-usage"},{"title":"数据源","content":"通过 data
属性配置菜单数据。
\n","link":"nav-menu/data-resource","component":" NavMenu 导航菜单","findIntroStr":"NavMenu 导航菜单,主要用于定义页面顶部导航的菜单。","demoId":"data-resource"},{"title":"显示策略","content":"当一级菜单无法在当前菜单容器里显示完全时,可以通过 overflow
属性配置显示策略,共有 auto
、retract
、fixed
、hidden
4个选项,默认为 auto
。
\noverflow 选项说明
\n
auto:菜单栏右侧显示 更多
菜单,鼠标悬停该菜单时,将显示剩余未展示的菜单。\nfixed:菜单栏左侧显示 三明治折叠/展开
图标,鼠标悬停该图标时,将显示所有菜单。\nretract:菜单栏不显示任何菜单,只显示 三明治折叠/展开
图标,鼠标悬停该图标时,将显示所有菜单。\nhidden:剩余未展示的菜单隐藏不显示。
\n
\n","link":"nav-menu/overflow","component":" NavMenu 导航菜单","findIntroStr":"NavMenu 导航菜单,主要用于定义页面顶部导航的菜单。","demoId":"overflow"},{"title":"Toolbar 插槽","content":"提供 toolbar
插槽用于自定义 Toolbar 。
\n","link":"nav-menu/slot-toolbar","component":" NavMenu 导航菜单","findIntroStr":"NavMenu 导航菜单,主要用于定义页面顶部导航的菜单。","demoId":"slot-toolbar"},{"title":"Logo 插槽","content":"提供 logo
插槽用于自定义 Logo 。
\n","link":"nav-menu/slot-logo","component":" NavMenu 导航菜单","findIntroStr":"NavMenu 导航菜单,主要用于定义页面顶部导航的菜单。","demoId":"slot-logo"},{"title":"菜单跳转处理","content":"提供 before-skip
钩子函数,用于菜单点击跳转前处理相关逻辑,返回 false
将无法跳转。
\n","link":"nav-menu/before-skip","component":" NavMenu 导航菜单","findIntroStr":"NavMenu 导航菜单,主要用于定义页面顶部导航的菜单。","demoId":"before-skip"},{"title":"使用组件默认服务时,菜单跳转处理","content":"如果使用组件的默认服务 /workspace/current
获取菜单数据 response.data.leftMenuNode.children
,那么在使用 before-skip
时,需配置属性 prevent
,用来阻止默认的跳转行为。属性 prevent
默认值为 false
。
\n","link":"nav-menu/before-skip-prevent","component":" NavMenu 导航菜单","findIntroStr":"NavMenu 导航菜单,主要用于定义页面顶部导航的菜单。","demoId":"before-skip-prevent"},{"title":"自定义服务","content":"通过 fetch-menu-data
可以自定义菜单服务,若数据中字段不是默认的 title
、url
,则可以通过 fields
对数据中的字段进行映射。
\n","link":"nav-menu/custom-service","component":" NavMenu 导航菜单","findIntroStr":"NavMenu 导航菜单,主要用于定义页面顶部导航的菜单。","demoId":"custom-service"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/notify.json b/examples/docs/resources/pc/demo-config/zh-CN/notify.json
new file mode 100644
index 000000000..849219151
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/notify.json
@@ -0,0 +1,114 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "notify/basic-usage",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "消息类型",
+ "content": "可通过 type
设置不同的类型。可选值:success、warning、info、error,默认值:info 。
\n",
+ "link": "notify/type",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "type"
+ },
+ {
+ "title": "自动关闭延时",
+ "content": "可通过 duration
属性设置自动关闭的延迟时间,默认值:4500ms 。
\n",
+ "link": "notify/duration",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "duration"
+ },
+ {
+ "title": "显示位置",
+ "content": "可通过 position
属性设置通知框显示位置,默认值:bottom-right 。
\n",
+ "link": "notify/position",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "position"
+ },
+ {
+ "title": "标题",
+ "content": "可通过 title
属性设置通知框标题。
\n",
+ "link": "notify/title",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "title"
+ },
+ {
+ "title": "自定义内容",
+ "content": "可通过 message
属性设置通知框的内容。
\n",
+ "link": "notify/message",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "message"
+ },
+ {
+ "title": "不显示关闭按钮",
+ "content": "showClose message
属性设置通知框是否显示关闭按钮,默认值:true 。
\n",
+ "link": "notify/showClose",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "showClose"
+ },
+ {
+ "title": "不显示类型图标",
+ "content": "可通过 showIcon
属性设置通知框是否显示类型图标,默认值:true 。
\n",
+ "link": "notify/showIcon",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "showIcon"
+ },
+ {
+ "title": "自定义关闭图标",
+ "content": "可通过 closeIcon
属性设置通知框关闭图标,默认值:IconClose 。
\n",
+ "link": "notify/closeIcon",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "closeIcon"
+ },
+ {
+ "title": "自定义类型图标",
+ "content": "可通过 statusIcon
属性设置通知框类型图标,默认值:IconInfoSolid 。
\n",
+ "link": "notify/statusIcon",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "statusIcon"
+ },
+ {
+ "title": "关闭通知框前触发的事件",
+ "content": "可通过 beforeClose
属性设置通知框关闭前的事件。
\n",
+ "link": "notify/beforeClose",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "beforeClose"
+ },
+ {
+ "title": "点击关闭按钮时触发事件",
+ "content": "可通过 onClose
属性设置通知点击关闭按钮时触发事件。
\n",
+ "link": "notify/onClose",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "close"
+ },
+ {
+ "title": "配置防抖",
+ "content": "可通过 debounceDelay
设置防抖时间\n",
+ "link": "notify/debounceDelay",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "debounceDelay"
+ },
+ {
+ "title": "垂直方向偏离距离",
+ "content": "
可通过 verticalOffset
设置垂直方向偏离距离\n",
+ "link": "notify/verticalOffset",
+ "component": "Notify 通知",
+ "findIntroStr": "Notify 通知,主要用于弹出提示。",
+ "demoId": "verticalOffset"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/numeric.json b/examples/docs/resources/pc/demo-config/zh-CN/numeric.json
new file mode 100644
index 000000000..e72b82d16
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/numeric.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"numeric/basic-usage","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"basic-usage"},{"title":"可清空特性","content":"
可通过 allow-empty
属性设置计数器内容的可清空特性。默认为 false
,表示不可清空。
\n","link":"numeric/allow-empty","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"allow-empty"},{"title":"步长","content":"可通过 step
属性设置计数器的步长。
\n","link":"numeric/about-step","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"about-step"},{"title":"数值循环","content":"可通过设置 max
属性设置计数器允许的最大值,通过设置 min
属性设置计数器允许的最小值,通过设置 circulate
属性设置向上到达最大值后从最小值开始,或反过来。
\n","link":"numeric/max-min","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"max-min"},{"title":"尺寸","content":"可通过 size
属性设置计数器尺寸。可取值 medium / small / mini
。
\n","link":"numeric/numeric-size","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"numeric-size"},{"title":"控制按钮","content":"可通过 controls
属性设置计数器是否有控制按钮。
\n","link":"numeric/controls","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"controls"},{"title":"控制按钮显示位置","content":"可通过 controls-position
属性设置控制按钮显示的位置。
\n","link":"numeric/controls-position","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"controls-position"},{"title":"关联文字","content":"可通过 label
属性设置输入框关联的 label 文字。
\n","link":"numeric/controls","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"controls1"},{"title":"disabled","content":"通过设置 disabled 控制是否禁用计数器","link":"numeric/dynamic-disabled","component":"Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"dynamic-disabled"},{"title":"name","content":"可通过 name
属性设置原生属性。
\n","link":"numeric/controls","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"controls2"},{"title":"数值精度","content":"可通过 precision 属性设置计数器的精度值。
\n","link":"numeric/precision","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"precision"},{"title":"鼠标滚轮滚动改变值","content":"可通过 mouseWheel
属性控制鼠标滚动滑轮是否能改变数值。
\n","link":"numeric/mouse-wheel","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"mouse-wheel"},{"title":"聚焦事件","content":"输入框获得焦点时触发 focus
事件。
\n","link":"numeric/focus-event","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"focus-event"},{"title":"失焦事件","content":"输入框失去焦点时触发 blur
事件。
\n","link":"numeric/blur-event","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"blur-event"},{"title":"值改变事件","content":"输入框值被改变时触发 change
事件。
\n","link":"numeric/change-event","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"change-event"},{"title":"根据商品数量自动计算价格","content":"根据商品数量自动计算价格。
\n","link":"numeric/calculate-according-to-num-of-goods","component":" Numeric 计数器","findIntroStr":"Numeric 计数器可用于输入数字,可自定义数值范围,步进大小。支持鼠标键盘增减。","demoId":"calculate-according-to-num-of-goods"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/pager.json b/examples/docs/resources/pc/demo-config/zh-CN/pager.json
new file mode 100644
index 000000000..86df8593a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/pager.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"pager/basic-usage","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"basic-usage"},{"title":"当前页","content":"通过 current-page
设置初始加载页码数, 通过 total
设置总条数
\n","link":"pager/current-page","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"current-page"},{"title":"number 模式","content":"通过 mode="number"
设置组件渲染模式
\n","link":"pager/pager-mode-number","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-mode-number"},{"title":"fixed 模式","content":"通过 mode="fixed"
设置组件渲染模式
\n","link":"pager/pager-mode-fixed","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-mode-fixed"},{"title":"simple 模式","content":"通过 mode="simple"
设置组件渲染模式
\n","link":"pager/pager-mode-simple","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-mode-simple"},{"title":"complete 模式","content":"通过 mode="complete"
设置组件渲染模式
\n","link":"pager/pager-mode","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-mode"},{"title":"总页数","content":"通过 page-count
设置总页数
\n","link":"pager/page-count","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"page-count"},{"title":"分页事件size-change","content":"size-change
每页条数改变时触发
\n","link":"pager/pager-events","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-events"},{"title":"分页事件current-change","content":"current-change
切换当前页码时触发
\n","link":"pager/pager-events-current-change","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-events-current-change"},{"title":"分页事件prev-click","content":"prev-click
切换至前一页时触发
\n","link":"pager/pager-events-prev-click","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-events-prev-click"},{"title":"分页事件next-click","content":"next-click
切换至后一页时触发
\n","link":"pager/pager-events-nextclick","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-events-nextclick"},{"title":"分页事件before-page-change","content":"before-page-change
切换分页前事件
\n","link":"pager/before-page-change","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"before-page-change"},{"title":"分页下拉框显示位置","content":"popper-append-to-body
分页下拉框元素是否追加到body元素节点下,该属性的默认值为 true
,默认追加到body元素节点下 。
\n若不想追加到body元素节点下,设置 :popper-append-to-body=\"false\"
","link":"pager/page-append-to-body","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"popper-append-to-body"},{"title":"自定义分页下拉框的类名","content":"popper-class
可以自定义分页下拉框的类名
","link":"pager/popper-class","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"popper-class"},{"title":"自定义分页布局","content":"layout
设置分页布局,通过在layout
里调整slot
的位置,从而调整插槽内容渲染的位置
\n","link":"pager/custom-layout","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"custom-layout"},{"title":"页码按钮数量","content":"pager-count
设置页码数量
\n","link":"pager/pager-count","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-count"},{"title":"每页显示数量","content":"page-sizes
和 page-size
结合使用调整每页显示数量
\n","link":"pager/page-size","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"page-size"},{"title":"只有一页时隐藏分页","content":"hide-on-single-page
只有一页时隐藏分页
\n","link":"pager/hide-on-single-page","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"hide-on-single-page"},{"title":"自定义上下页按钮文本","content":"prev-text
,next-text
自定义上下页按钮文本
\n","link":"pager/custom-next-prev-text","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"custom-next-prev-text"},{"title":"Grid 表格分页","content":"Grid 表格使用分页组件\n该示例中的 services/getGridMockData
服务需要自行实现,示例模拟了远程服务返回的数据\n
\n","link":"pager/pager-in-grid","component":" Pager 分页","findIntroStr":"当数据量过多时,使用分页分解数据,常用于 Grid 和 Repeater 组件。","demoId":"pager-in-grid"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/pop-editor.json b/examples/docs/resources/pc/demo-config/zh-CN/pop-editor.json
new file mode 100644
index 000000000..9014623ab
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/pop-editor.json
@@ -0,0 +1,258 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "popeditor/base",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "base"
+ },
+ {
+ "title": "自定义查询条件",
+ "content": "通过 conditions
属性可以自定义查询条件,组件内置的输入框支持按回车触发搜索的功能。
\n",
+ "link": "popeditor/conditions",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "conditions"
+ },
+ {
+ "title": "布局与配置",
+ "content": "通过 condition
项目里属性里的span
配置栅格,labelWidth
配置label宽度。 component
配置自定义组件,并通过 attrs
配置组件属性
\n",
+ "link": "popeditor/condition-layout",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "condition-layout"
+ },
+ {
+ "title": "Form 表单中使用并开启表单校验",
+ "content": "详细用法参考如下示例",
+ "link": "popeditor/condition-form",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "condition-form"
+ },
+ {
+ "title": "拖动窗口",
+ "content": "通过 draggable
属性设置弹出窗口拖动特性。默认为 true
表示可在标题栏按住鼠标左键拖动窗口,设置为 false
则固定窗口位置不可拖动。
\n",
+ "link": "popeditor/draggable",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "draggable"
+ },
+ {
+ "title": "不可清除",
+ "content": "通过 show-clear-btn
属性设置是否可以清除。
\n",
+ "link": "popeditor/showClearBtn",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "showClearBtn"
+ },
+ {
+ "title": "全屏展示",
+ "content": "通过配置 resize
控制是否全屏展示
\n",
+ "link": "popeditor/resize",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "resize"
+ },
+ {
+ "title": "表格编辑",
+ "content": "gridOp 当 popseletor 为 grid 时生效,目前支持配置 columns 表格列 和 data 数据源,详细配置项参考 Grid 表格组件,需同时配置 textField、valueField 字段。
\n",
+ "link": "popeditor/grid",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "grid"
+ },
+ {
+ "title": "宽度",
+ "content": "通过 width
属性配置宽。\n通过 dialog-class
自定义配置弹窗类名
\n",
+ "link": "popeditor/width",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "width"
+ },
+ {
+ "title": "自定义图标",
+ "content": "通过 icon
属性可以自定义组件图标,需引入对应的 svg 图标。
\n",
+ "link": "popeditor/icon",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "icon"
+ },
+ {
+ "title": "多选",
+ "content": "通过设置 multi
属性为 true 实现多选。\n通过设置 show-history
当弹出面板配置的是表格时,设置历史记录标签页是否显示表格,默认为 false。
\n",
+ "link": "popeditor/multi",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "multi"
+ },
+ {
+ "title": "多选且初始数据为数组",
+ "content": "详细用法参考如下示例",
+ "link": "popeditor/multi-value-array",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "multi-value-array"
+ },
+ {
+ "title": "change 事件",
+ "content": "change
Popeditor 组件 Input 框的 change 事件。 page-change
Popeditor 组件表格模式带分页切换事件。
\n",
+ "link": "popeditor/events",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "events"
+ },
+ {
+ "title": "close 事件",
+ "content": "close
弹框关闭时触发的事件。
\n",
+ "link": "popeditor/close-event",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "close-event"
+ },
+ {
+ "title": "只读",
+ "content": "通过 readonly
属性设置为是否只读。
\n",
+ "link": "popeditor/readonly",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "readonly"
+ },
+ {
+ "title": "输入框的 tabindex",
+ "content": "通过 tabindex
属性置是否可通过 Tab 键获焦及获焦顺序(readonly
属性设置为 false 时有效)。
\n",
+ "link": "popeditor/tabindex",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "tabindex"
+ },
+ {
+ "title": "重置",
+ "content": "通过 before-reset
属性设置重置前的钩子函数。
\n",
+ "link": "popeditor/before-reset",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "before-reset"
+ },
+ {
+ "title": "组件查询条件插槽",
+ "content": "通过插槽 search
自定义弹出面板查询结构。
\n",
+ "link": "popeditor/slot",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "slot"
+ },
+ {
+ "title": "禁用",
+ "content": "通过 disabled
属性设置为是否只读。
\n",
+ "link": "popeditor/disabled",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "disabled"
+ },
+ {
+ "title": "弹出窗筛选条件支持可清空",
+ "content": "clearable
Popeditor 组件 支持在搜索表单配置清除按钮。
\n",
+ "link": "popeditor/clearable",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "clearable"
+ },
+ {
+ "title": "显示字段映射",
+ "content": "通过 text-field
属性设置组件显示的字段。
\n",
+ "link": "popeditor/textField",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "textField"
+ },
+ {
+ "title": "提交字段映射",
+ "content": "通过 value-field
属性设置组件提交给后台的字段。
\n",
+ "link": "popeditor/title",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "title1"
+ },
+ {
+ "title": "自定义标题",
+ "content": "通过 title
属性设置弹出窗口标题,支持国际化信息配置。
\n",
+ "link": "popeditor/title",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "title"
+ },
+ {
+ "title": "远程搜索",
+ "content": "通过 remote-search
属性配置远程搜索,在 remoteSearch 方法里可以把 conditions 搜索条件传给后台,后台处理好数据后就能正常的显示在页面上。
\n",
+ "link": "popeditor/remote-search",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "remote-search"
+ },
+ {
+ "title": "分页",
+ "content": "showPager
属性只有当 popseletor
为 grid
时才能生效,默认值为 false
不启用分页,配置为 true
后还需配置 pagerOp
属性;并且需要监听 page-change
事件改变 gridOp
的 data
数据源
\n",
+ "link": "popeditor/pager",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "常用的操作按钮,提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。",
+ "demoId": "pager"
+ },
+ {
+ "title": "渲染反查",
+ "content": "在组件加载的第一批数据中不含有当前所设置的 value
对应的数据时,可以设置 text-render-source
进行反查
\n",
+ "link": "popeditor/render-text",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "render-text"
+ },
+ {
+ "title": "开启树模式",
+ "content": "通过 popseletor
属性开启树模式,然后 tree-op
属性是 Tree
组件的 op 配置方式
。
\n",
+ "link": "popeditor/tree",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "tree"
+ },
+ {
+ "title": "树模式单选",
+ "content": "通过 popseletor
属性开启树模式,然后 tree-op
属性是 Tree
组件的 op 配置方式
。
\n",
+ "link": "popeditor/single-select-radio",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "single-select-radio"
+ },
+ {
+ "title": "编辑框大小",
+ "content": "通过 size
属性设置 PopEditor 编辑框大小,可选值有 medium
、small
、mini
。
\n",
+ "link": "popeditor/size",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "size"
+ },
+ {
+ "title": "数据超出隐藏",
+ "content": "在数据的列上配置 showOverflow
属性用于设置数据超出列宽时的显示和隐藏。值的类型可以为 Boolean 和 String,有三个值可以选择,如下所示。默认为换行显示全部内容。
\n可选值说明
\n
tooltip:内容超出部分显示 ...,左侧/右侧弹出提示层显示全部信息。\ntitle:和原生标签的 title 属性一致。\nellipsis:内容超出部分显示 ...,没有提示。\ntrue:为 true 时,效果和 tooltip 一致。
\n
\n",
+ "link": "popeditor/showOverflow",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "showOverflow"
+ },
+ {
+ "title": "单选时触发勾选的方式",
+ "content": "弹出编辑为单选时,默认只能通过单击单选按钮进行勾选。但也可以通过设置属性 trigger
为 row
实现单击行中任意位置进行勾选。或者设置 trigger
为 cell
,单击操作列的单元格上任意位置进行勾选。
\n",
+ "link": "popeditor/trigger",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "trigger"
+ },
+ {
+ "title": "设置历史记录标签页",
+ "content": "当弹出面板配置的是表格时,通过配置 show-history
设置历史记录标签页是否显示表格,该值默认为false。
\n",
+ "link": "popeditor/show-history",
+ "component": " PopEditor 弹出编辑",
+ "findIntroStr": "该组件只能在弹出的面板中选择数据,不能手动输入数据;弹出面板中显示为 Tree 组件或者 Grid 组件。",
+ "demoId": "show-history"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/pop-upload.json b/examples/docs/resources/pc/demo-config/zh-CN/pop-upload.json
new file mode 100644
index 000000000..bcfd03bce
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/pop-upload.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 action
属性设置上传的服务接口。
\n","link":"pop-upload/basic-usage","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"basic-usage"},{"title":"自定义请求头","content":"通过 headers
属性自定义上传请求头信息。
\n","link":"pop-upload/custom-request-headers","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"custom-request-headers"},{"title":"上传时附带的额外参数","content":"通过 data
属性自定义上传时附带的额外参数。
\n","link":"pop-upload/data","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"data"},{"title":"设置组件大小","content":"可设置为:medium
,small
,mini
\n通过 disabled
属性设置是否禁用,默认值为 false 。
\n","link":"pop-upload/size","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"size"},{"title":"覆盖默认请求","content":"通过配置 http-request
覆盖默认的上传行为,可以自定义上传的实现
\n","link":"pop-upload/http-request","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"http-request"},{"title":"上传的文件字段名","content":"通过 upload-name
属性设置上传的文件字段名,默认值为 file 。
\n","link":"pop-upload/upload-name","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"upload-name1"},{"title":"发送 cookie 凭证信息","content":"详细用法参考如下示例","link":"pop-upload/upload-name","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"upload-name"},{"title":"文件上传弹框中取消按钮的文本","content":"通过 cancel-button-text
属性指定取消按钮的文本内容
\n","link":"pop-upload/fill-button-text","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"fill-button-text1"},{"title":"文件上传弹框中提交按钮的文本","content":"详细用法参考如下示例","link":"pop-upload/fill-button-text","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"fill-button-text2"},{"title":"打开弹出框的按钮的文本","content":"详细用法参考如下示例","link":"pop-upload/fill-button-text","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"fill-button-text4"},{"title":"最大上传文件数","content":"通过 limit
属性可以指定最大上传的文件数量,配置 multiple
属性后可同时选择多个文件。
\n","link":"pop-upload/file-limit","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"file-limit"},{"title":"可上传文件类型","content":"通过 accept
属性可以对选择文件时的文件类型进行控制,而 upload-file-type
属性可以指定在上传时进行校验的文件类型。
\n","link":"pop-upload/file-type","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"file-type"},{"title":"可上传文件大小","content":"通过 max-upload-file-size
属性指定可上传文件的大小。
\n","link":"pop-upload/max-upload-file-size","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"max-upload-file-size"},{"title":"阻止删除文件","content":":before-remove(移除文件前回调事件),方法里面return true/false,表示是否可以删除
\n","link":"pop-upload/prevent-delete-file","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"prevent-delete-file"},{"title":"阻止上传文件","content":":before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
\n","link":"pop-upload/before-upload","component":" PopUpload 弹出框上传","findIntroStr":"点击所设置的元素,弹出上传对话框。","demoId":"before-upload"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/popover.json b/examples/docs/resources/pc/demo-config/zh-CN/popover.json
new file mode 100644
index 000000000..d61972397
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/popover.json
@@ -0,0 +1,138 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "popover/basic-usage",
+ "component": "Popover 弹出框",
+ "findIntroStr": "Popover可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "添加内容",
+ "content": "content
设置要显示的内容。
\n",
+ "link": "popover/popover-content",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "popover-content"
+ },
+ {
+ "title": "箭头偏移",
+ "content": "arrow-offset
设置箭头的偏移量,来改变箭头的位置。
\n",
+ "link": "popover/arrow-offset",
+ "component": " Popover",
+ "findIntroStr": "Popover可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "arrow-offset"
+ },
+ {
+ "title": "弹出框偏移",
+ "content": "offset
设置弹框的偏移量,来改变弹框的位置。
\n",
+ "link": "popover/frame-offset",
+ "component": " Popover",
+ "findIntroStr": "Popover可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "frame-offset"
+ },
+ {
+ "title": "延迟隐藏",
+ "content": "close-delay
弹出框延迟隐藏单位为毫秒(Number)
\n",
+ "link": "popover/close-delay",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "close-delay"
+ },
+ {
+ "title": "禁用",
+ "content": "disabled
设置是否禁用弹出框。
\n",
+ "link": "popover/dynamic-disable",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "延迟显示",
+ "content": "open-delay
,设置延迟时间 ( type:number,单位毫秒 )
\n",
+ "link": "popover/open-delay",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "open-delay"
+ },
+ {
+ "title": "显示位置",
+ "content": "placement
设置弹出框的的位置,可选值为(top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end)
\n",
+ "link": "popover/popover-placement",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "popover-placement"
+ },
+ {
+ "title": "自定义样式",
+ "content": "popper-class
可配置单个或多个 class
\n",
+ "link": "popover/popper-class",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "自定义渐变动画",
+ "content": "transition
设置弹框的显示隐藏淡入淡出动画,默认取值 fade-in-linear,fade-in ( 无动画效果 )
\n",
+ "link": "popover/custom-transition",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "custom-transition"
+ },
+ {
+ "title": "触发方式",
+ "content": "trigger
设定弹出框的触发方式 click
点击触发 focus
鼠标长按触发 hover
鼠标悬浮触发 manual
点击触发,再次点击隐藏
\n",
+ "link": "popover/trigger-mode",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "trigger-mode"
+ },
+ {
+ "title": "隐藏提示框箭头",
+ "content": "visible-arrow
设定是否显示提示框的箭头
\n",
+ "link": "popover/hidden-arrow",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "hidden-arrow"
+ },
+ {
+ "title": "宽度",
+ "content": "width
弹出框的宽度,height
弹出框的高度。两者默认值为auto,由子内容撑开。
\n",
+ "link": "popover/popover-width",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "popover-width"
+ },
+ {
+ "title": "弹出框选项",
+ "content": "popper-options
配置弹出框选项
\n",
+ "link": "popover/popper-options",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "popper-options"
+ },
+ {
+ "title": "触发源",
+ "content": "slot
设置弹出框的触发源
\n",
+ "link": "popover/trigger-reference",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "trigger-reference"
+ },
+ {
+ "title": "自定义提示文本",
+ "content": "content
设置自定义文本,也可在标签内直接嵌套默认插槽为自定义文本
\n",
+ "link": "popover/custom-tip-text",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "custom-tip-text"
+ },
+ {
+ "title": "事件",
+ "content": "input
加载完触发回调\n\nhide
隐藏时触发回调\n\nshow
显示时触发回调\n\nafter-leave
显示时触发回调\n\nafter-enter
显示动画播放完毕后触发回调
\n",
+ "link": "popover/popover-events",
+ "component": " Popover",
+ "findIntroStr": "Popover 可通过对一个触发源操作触发弹出框,支持自定义弹出内容,延迟触发和渐变动画",
+ "demoId": "popover-events"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/progress.json b/examples/docs/resources/pc/demo-config/zh-CN/progress.json
new file mode 100644
index 000000000..81aa8a2d5
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/progress.json
@@ -0,0 +1,82 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "progress/basic-usage",
+ "component": " Progress 进度条",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "line 类型",
+ "content": "type="line"
显示为 line 类型
\n",
+ "link": "progress/progress-type",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "progress-type"
+ },
+ {
+ "title": "circle 类型",
+ "content": "type="circle"
显示为 circle 类型。width
可以调整环形进度条画布宽度,默认值为126px。
\n",
+ "link": "progress/progress-type-circle",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "progress-type-circle"
+ },
+ {
+ "title": "dashboard 类型",
+ "content": "type="dashboard"
显示为 dashboard 类型。width
可以调整环形进度条画布宽度,默认值为126px。
\n",
+ "link": "progress/progress-type-dashboard",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "progress-type-dashboard"
+ },
+ {
+ "title": "宽度",
+ "content": "stroke-width
进度条的宽度,单位 px
\n",
+ "link": "progress/progress-width",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "progress-width"
+ },
+ {
+ "title": "状态",
+ "content": "status
进度条当前状态(success/exception/warning)
\n",
+ "link": "progress/progress-status",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "progress-status"
+ },
+ {
+ "title": "文字内显或不显",
+ "content": "show-text
是否显示进度条文字内容
\n",
+ "link": "progress/text-inside-or-no-text",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "text-inside-or-no-text"
+ },
+ {
+ "title": "自定义颜色",
+ "content": "通过 color
设置进度条颜色。color 进度条背景色(会覆盖 status 状态颜色)
\n",
+ "link": "progress/custom-color",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "custom-color"
+ },
+ {
+ "title": "自定义显示文字",
+ "content": "text-inside
进度条显示文字内置在进度条内(只在 type=line 时可用),format
自定义进度条的文字
\n",
+ "link": "progress/format-text",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "format-text"
+ },
+ {
+ "title": "动态控制进度条变化",
+ "content": "通过设置 percentage
动态控制进度条变化
\n",
+ "link": "progress/dynamic-control-changes",
+ "component": " Progress",
+ "findIntroStr": "用于展示操作进度,告知用户当前状态和预期。",
+ "demoId": "dynamic-control-changes"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/radio.json b/examples/docs/resources/pc/demo-config/zh-CN/radio.json
new file mode 100644
index 000000000..9bb1f0e08
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/radio.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 v-model
绑定变量,设置的变量值为默认选中的 Radio,变量值对应 label
属性的值。通过 text
也可以配置显示文本,与默认插槽配置纯文本的结果一致\n\nlabel
可以是 String
、Number
或 Boolean
。
\n","link":"radio/basic-usage","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"basic-usage"},{"title":"配置式单选组","content":"提供 options
属性,支持通过配置对象数组数据的形式来渲染单选组。使用该属性后,可以不用再在标签中以插槽的形式插入 <radio>
或 <radio-button>
标签。\n\noptions
对象数组中包括三个字段:label
、text
、events
。\n\n另外还提供 type
属性,配合 options
属性一起使用,默认值为 radio
。还可以配置为 button
,配置后单选组将以按钮的形式展示。
\n","link":"radio/group-options","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"group-options"},{"title":"带有边框","content":"可通过设置 border
属性,给单选框增加边框。
\n","link":"radio/with-border","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"with-border"},{"title":"禁用状态","content":"设置 disabled
属性即可启动禁用状态,默认为 false 。
\n","link":"radio/dynamic-disable","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"dynamic-disable"},{"title":"垂直布局","content":"可在 RadioGroup 组件上设置 vertical
属性,使单选框垂直布局。
\n","link":"radio/vertical","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"vertical"},{"title":"颜色设置","content":"按钮形式的 Radio 激活时可通过 text-color
属性设置文本颜色,通过 fill
属性设置填充色和边框色。
\n","link":"radio/active-color","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"active-color"},{"title":"文字内容","content":"可在 Radio 组件上设置 text
属性,设置内容。
\n","link":"radio/radio-text","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"radio-text"},{"title":"按钮内容","content":"通过 label
属性可以设置 Radio 的内容
\n","link":"radio/radio-button","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"radio-button"},{"title":"name","content":"详细用法参考如下示例","link":"radio/radio-button","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"radio-button1"},{"title":"尺寸设置","content":"可对按钮形式的 Radio 或带有边框的 Radio 设置 size
属性,以改变其尺寸,包括 medium、small、mini 三个选项。
\n","link":"radio/radio-size","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"radio-size"},{"title":"单选框事件","content":"可在 Radio、RadioGroup 组件上设置 change
事件,当绑定值变化时触发,回调函数为选中的 Radio label 值。
\n","link":"radio/radio-events","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"radio-events"},{"title":"循环配置 Radio","content":"可在 RadioGroup 组件上设置 options
属性,可循环配置 Radio。
\n","link":"radio/group-options","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"group-options1"},{"title":"默认插槽","content":"通过 default
默认插槽列表。
\n","link":"radio/radio-default","component":" Radio 单选框","findIntroStr":"用于配置不同场景的选项,在一组备选项中进行单选。","demoId":"radio-default"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/rate.json b/examples/docs/resources/pc/demo-config/zh-CN/rate.json
new file mode 100644
index 000000000..465f4eba0
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/rate.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"rate/basic-usage","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"basic-usage"},{"title":"自定义 3 分段颜色","content":"可通过 colors
定义 3 分段颜色。
\n","link":"rate/custom-3-threshold-colors","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"custom-3-threshold-colors"},{"title":"自定义禁用时未选中图标颜色","content":"可通过 disabled-void-color
自定义禁用时未选中图标颜色。
\n","link":"rate/disabled-not-selected-color","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"disabled-not-selected-color"},{"title":"自定义禁用时未选中图标类名","content":"可通过 disabled-void-icon-class
自定义禁用时未选中图标类名。
\n","link":"rate/disabled-not-selected-class","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"disabled-not-selected-class"},{"title":"自定义 3 分段图标样式","content":"可通过 icon-classes
自定义 3 分段图标样式。
\n","link":"rate/custom-3-threshold-icon","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"custom-3-threshold-icon"},{"title":"辅助文字及颜色","content":"可通过 texts show-text text-color
三个属性分别设置辅助文字内容、是否显示辅助文字及辅助文字颜色。
\n","link":"rate/texts-and-text-color","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"texts-and-text-color"},{"title":"大小及占位宽度","content":"可通过 size space
分别大小和占位宽度。
\n","link":"rate/size-and-space","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"size-and-space"},{"title":"自定义未选中图标颜色","content":"可通过 void-color
定义未选中图标颜色。
\n","link":"rate/not-selected-color","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"not-selected-color"},{"title":"自定义未选中图标类名","content":"可通过 void-icon-class
定义未选中图标类名。
\n","link":"rate/not-selected-class","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"not-selected-class"},{"title":"图标下文字提示","content":"可通过 text-on-bottom
定义是否在图标下显示文字提示。
\n","link":"rate/text-on-bottom","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"text-on-bottom"},{"title":"半选","content":"可通过 allow-half
定义是否支持半选。
\n","link":"rate/allow-half","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"allow-half"},{"title":"禁用","content":"可通过 disabled
定义是否禁用。
\n","link":"rate/dynamic-disable","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"dynamic-disable"},{"title":"分数显示","content":"可通过 show-score score-template
分别定义是否显示分数和显示的模板。
\n","link":"rate/show-score","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"show-score"},{"title":"单选模式","content":"可通过 radio
设置单选模式。
\n","link":"rate/radio-rate","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"radio-rate"},{"title":"最大分值","content":"可通过 max
设置最大分值。
\n","link":"rate/max-score","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"max-score"},{"title":"界限值","content":"可通过 low-threshold high-threshold
分别设置下限值和上限值,通过colors
配置显示星的颜色
\n","link":"rate/threshold-value","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"threshold-value"},{"title":"事件","content":"监听 change
事件触发处理方法。
\n","link":"rate/rate-events","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"rate-events"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/roles.json b/examples/docs/resources/pc/demo-config/zh-CN/roles.json
new file mode 100644
index 000000000..96af9a6a1
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/roles.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"\n注意 Roles 组件请求的是 mock 数据,开发时请用真实服务。\n通过 change(userId)
可以监听切换事件,入参是切换后的用户ID。
\n
\n","link":"roles/base","component":" Roles 角色切换","findIntroStr":"Roles 角色组件,提供当前用户的角色列表,并可以在不同角色间进行切换。","demoId":"base"},{"title":"自定义查询服务","content":"\n注意 Roles 组件请求的是 mock 数据,开发时请用真实服务。\n通过 fetch-role
自定义查询服务。
\n
\n","link":"roles/fetch-role","component":" Roles 角色切换","findIntroStr":"Roles 角色组件,提供当前用户的角色列表,并可以在不同角色间进行切换。","demoId":"fetch-role"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/scroll-text.json b/examples/docs/resources/pc/demo-config/zh-CN/scroll-text.json
new file mode 100644
index 000000000..b02544fdc
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/scroll-text.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"scroll-text/basic-usage","component":" ScrollText 文字滚动","findIntroStr":"常用于文字提示信息滚动轮播显示。","demoId":"basic-usage"},{"title":"文字滚动方向","content":"可通过 direction
设置文字滚动方向。
\n","link":"scroll-text/scroll-direction","component":" ScrollText 文字滚动","findIntroStr":"常用于文字提示信息滚动轮播显示。","demoId":"scroll-direction"},{"title":"鼠标悬停时文本停止滚动","content":"可通过 hover-stop
设鼠标悬停时文本是否停止滚动。
\n","link":"scroll-text/hover-stop","component":" ScrollText 文字滚动","findIntroStr":"常用于文字提示信息滚动轮播显示。","demoId":"hover-stop"},{"title":"自定义文本内容","content":"可通过 text
自定义文本内容。
\n","link":"scroll-text/custom-scroll-text","component":" ScrollText 文字滚动","findIntroStr":"常用于文字提示信息滚动轮播显示。","demoId":"custom-scroll-text"},{"title":"通过 solt 插槽自定义文本内容","content":"可通过 solt 插槽自定义文本内容。
\n","link":"scroll-text/slots","component":" ScrollText 文字滚动","findIntroStr":"常用于文字提示信息滚动轮播显示。","demoId":"slots"},{"title":"滚动时间间隔","content":"可通过 time
设置滚动时间间隔。
\n","link":"scroll-text/scroll-time","component":" ScrollText 文字滚动","findIntroStr":"常用于文字提示信息滚动轮播显示。","demoId":"scroll-time"},{"title":"自定义文本样式","content":"可通过 class
自定义文本样式。
\n","link":"scroll-text/custom-text-style","component":" ScrollText 文字滚动","findIntroStr":"常用于文字提示信息滚动轮播显示。","demoId":"custom-text-style"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/search.json b/examples/docs/resources/pc/demo-config/zh-CN/search.json
new file mode 100644
index 000000000..9c22c694e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/search.json
@@ -0,0 +1,90 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "search/basic-usage",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "可清除",
+ "content": "可通过 clearable
属性设置显示清空图标按钮。
\n",
+ "link": "search/clearable",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "clearable"
+ },
+ {
+ "title": "迷你模式",
+ "content": "可通过 mini
设置组件为mini模式。
\n",
+ "link": "search/mini-mode",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "mini-mode"
+ },
+ {
+ "title": "透明模式",
+ "content": "可通过 transparent
设置组件为透明模式(mini
模式下有效)。搜索类型
\n",
+ "link": "search/transparent-mode",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "transparent-mode"
+ },
+ {
+ "title": "默认值搜索",
+ "content": "可通过 v-model
配置组件默认搜索条件。
\n",
+ "link": "search/default-value",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "default-value"
+ },
+ {
+ "title": "搜索类型",
+ "content": "可通过 search-types
配置组件可选的搜索类型。
\n",
+ "link": "search/search-types",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "search-types"
+ },
+ {
+ "title": "自定义搜索类型的内容",
+ "content": "详细用法参考如下示例",
+ "link": "search/custom-search-types",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "custom-search-types"
+ },
+ {
+ "title": "自定义搜索类型",
+ "content": "搜索类型
\n",
+ "link": "search/show-selected-types",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "show-selected-types"
+ },
+ {
+ "title": "自定义 search 事件",
+ "content": "详细用法参考如下示例",
+ "link": "search/search-events",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "search-events"
+ },
+ {
+ "title": "自定义 change 事件",
+ "content": "详细用法参考如下示例",
+ "link": "search/change-events",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "change-events"
+ },
+ {
+ "title": "自定义 select 事件",
+ "content": "详细用法参考如下示例",
+ "link": "search/select-events",
+ "component": " Search 搜索",
+ "findIntroStr": "指定条件对象进行搜索数据。",
+ "demoId": "select-events"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/select.json b/examples/docs/resources/pc/demo-config/zh-CN/select.json
new file mode 100644
index 000000000..6b3219e73
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/select.json
@@ -0,0 +1,442 @@
+[
+ {
+ "title": "基本用法",
+ "content": "v-model
的值为当前被选中的 tiny-option
的 value
属性值。
\n",
+ "link": "select/basic-usage",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "下拉面板可搜索",
+ "content": "通过 searchable
配置下拉面板是否显示搜索框
\n",
+ "link": "select/searchable",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "searchable"
+ },
+ {
+ "title": "多选",
+ "content": "通过 multiple
属性启用多选功能,此时 v-model
的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现。
\n",
+ "link": "select/multiple",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "multiple"
+ },
+ {
+ "title": "折叠 Tag",
+ "content": "多选时通过设置 collapse-tags
属性将选中值合并为一段文字。
\n",
+ "link": "select/collapse-tags",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "collapse-tags"
+ },
+ {
+ "title": "选择个数限制",
+ "content": "multiple-limit
属性可指定多选时用户最多可以选择的项目数,默认为 0 不限制。
\n",
+ "link": "select/multiple-limit",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "multiple-limit"
+ },
+ {
+ "title": "大数据虚拟滚动",
+ "content": "通过 options
设置下拉选项并且设置 optimization
开启大数据虚拟滚动功能。使用标签配置选项时不支持开启虚拟滚动。\n多选模式下,最大选中项数 multiple-limit
默认值为 20,如果选中项比较多,建议开启 collapse-tags
进行折叠显示。
\n",
+ "link": "select/optimization",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "optimization"
+ },
+ {
+ "title": "禁用",
+ "content": "设置 disabled
属性后整个选择器不可用。
\n",
+ "link": "select/disabled",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "disabled"
+ },
+ {
+ "title": "下拉选项某些项禁用",
+ "content": "tiny-options 标签设置 disabled
属性后该选项不可用。
\n",
+ "link": "select/disabled-options",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "disabled-options"
+ },
+ {
+ "title": "下拉多选默认选中且禁用",
+ "content": "默认选中的标签设置 disabled
属性后,该选项禁用。
\n",
+ "link": "select/disabled-and-selected-options",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "disabled-and-selected-options"
+ },
+ {
+ "title": "medium",
+ "content": "通过 size
属性定义输入框尺寸,可选项有 medium、small、mini 。\n通过 options
配置 Select 数据项,使用后不需要再配置 tiny-option。
\n",
+ "link": "select/size-medium",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "size-medium"
+ },
+ {
+ "title": "small",
+ "content": "详细用法参考如下示例",
+ "link": "select/size-small",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "size-small"
+ },
+ {
+ "title": "mini",
+ "content": "详细用法参考如下示例",
+ "link": "select/size-mini",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "size-mini"
+ },
+ {
+ "title": "分组",
+ "content": "使用 tiny-option-group
对备选项进行分组,它的 label
属性为分组名,使用 disabled
属性设置该分组下所有选项为禁用。
\n",
+ "link": "select/option-group",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "option-group"
+ },
+ {
+ "title": "分组禁用部分选项",
+ "content": "使用 tiny-option-group
对备选项进行分组,禁用部分分组。
\n",
+ "link": "select/option-group-disable",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "option-group-disable"
+ },
+ {
+ "title": "change clear blur focus 事件",
+ "content": "事件说明
\n
change:选中值发生变化时触发,回调参数为目前的选中值\nclear:可清空的单选模式下用户点击清空按钮时触发\nblur:当 input 失去焦点时触发\nfocus:当 input 获得焦点时触发
\n
\n",
+ "link": "select/envts-change",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "envts-change"
+ },
+ {
+ "title": "visible-change remove-tag 事件",
+ "content": "事件说明
\n
visible-change:下拉框出现/隐藏时触发,回调参数为:出现则为 true,隐藏则为 false\nremove-tag:多选模式下移除tag时触发,回调参数为移除的 tag 值
\n
\n",
+ "link": "select/envts-remove",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "envts-remove"
+ },
+ {
+ "title": "可搜索",
+ "content": "通过 filterable
属性可启用搜索功能。默认情况下,Select 会找出所有 label
属性包含输入值的选项。如果希望使用其他的搜索逻辑,可以通过传入一个 filter-method
来实现。filter-method
为一个 Function,它会在输入值发生变化时调用,参数为当前输入值。
\n",
+ "link": "select/filter-method",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "filter-method"
+ },
+ {
+ "title": "搜索允许复制",
+ "content": "搜索单选场景,不能复制输入框的内容,需要添加属性 allow-copy
才能复制。属性 allow-copy
默认为 false
。\n在鼠标悬浮在输入框上时,按下鼠标左键并移动鼠标,可选中之前输入文本;\n在鼠标悬浮在输入框上时,点击鼠标左键,还是原有行为,即输入内容变为 placeholder,内容清空,进入输入状态;
\n",
+ "link": "select/search-allow-copy",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "search-allow-copy"
+ },
+ {
+ "title": "创建条目",
+ "content": "通过 allow-create
属性可通过在输入框中输入文字来创建选项中并不存在的新的条目。注意此时 filterable
属性必须为真。而default-first-option
属性设置为 true 后,通过按下回车就可以选中当前选项列表中的第一个选项,无需使用鼠标或键盘方向键进行定位。
\n",
+ "link": "select/allow-create",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "allow-create"
+ },
+ {
+ "title": "远程搜索",
+ "content": "为了启用远程搜索,需要将 filterable
和 remote
设置为 true
,同时传入一个 remote-method
。remote-method
为一个 Function,它会在输入值发生变化时调用,参数为当前输入值。reserve-keyword
属性在多选且可搜索时,可以在选中一个选项后保留当前的搜索关键词。
\n",
+ "link": "select/remote-method",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "remote-method"
+ },
+ {
+ "title": "获焦时触发远程搜索",
+ "content": "详细用法参考如下示例",
+ "link": "select/focus-remote-method",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "focus-remote-method"
+ },
+ {
+ "title": "远程搜索允许复制",
+ "content": "远程搜索单选场景,不能复制输入框的内容,需要添加属性 allow-copy
才能复制。属性 allow-copy
默认为 false
。\n在鼠标悬浮在输入框上时,按下鼠标左键并移动鼠标,可选中之前输入文本;\n在鼠标悬浮在输入框上时,点击鼠标左键,还是原有行为,即输入内容变为 placeholder,内容清空,进入输入状态;
\n",
+ "link": "select/remote-search-allow-copy",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "remote-search-allow-copy"
+ },
+ {
+ "title": "选项可清除",
+ "content": "通过 clearable
属性可将选择器清空,鼠标悬停于选择器上时,会出现清除图标。需要注意的是,clearable
属性仅适用于单选。
\n",
+ "link": "select/clearable",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "clearable"
+ },
+ {
+ "title": "name",
+ "content": "通过 name
属性可已设置 name 的属性
\n",
+ "link": "select/name",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "name"
+ },
+ {
+ "title": "Select选择器选项可复制",
+ "content": "设置 tag-selectable
属性后,输入框中已选择的选项可通过鼠标选择,然后按 Ctrl + C 或右键进行复制。
\n",
+ "link": "select/tag-select",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "tag-select"
+ },
+ {
+ "title": "Select选择器选项支持复制所有",
+ "content": "设置 copyable
属性后,可以复制所有的 tag
文本内容以逗号分隔
\n",
+ "link": "select/tag-copy-all",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "tag-copy-all"
+ },
+ {
+ "title": "绑定值为对象",
+ "content": "如果绑定值为对象时,则必须要配置 value-key
属性指定 value 唯一标识的键名。
\n",
+ "link": "select/binding-obj",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "binding-obj"
+ },
+ {
+ "title": "自定义无匹配搜索文字",
+ "content": "通过 no-match-text
属性可自定义搜索条件无匹配时显示的文字。
\n",
+ "link": "select/no-match-text",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "no-match-text"
+ },
+ {
+ "title": "自定义空数据显示文字",
+ "content": "通过 no-data-text
属性可以自定义选项为空时显示的文字。
\n",
+ "link": "select/no-data-text",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "no-data-text"
+ },
+ {
+ "title": "弹出框样式与定位",
+ "content": "通过 popper-class
属性可自定义下拉弹框的样式。popper-append-to-body
\t指定是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false 。
\n",
+ "link": "select/popup-style-position",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "popup-style-position"
+ },
+ {
+ "title": "获取焦点既弹出下拉菜单",
+ "content": "设置 automatic-dropdown
属性为 true 后,对于不可搜索的 Select,在输入框获得焦点后将自动弹出选项菜单。
\n",
+ "link": "select/automatic-dropdown",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "automatic-dropdown"
+ },
+ {
+ "title": "自定义头部内容",
+ "content": "通过 prefix
插槽自定义输入框头部内容。
\n",
+ "link": "select/custom-prefix",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "custom-prefix"
+ },
+ {
+ "title": "自定义下拉内容",
+ "content": "通过 Option 的默认插槽实现,将自定义的 HTML 模板插入 tiny-option
的 slot 中即可。
\n",
+ "link": "select/custom-options",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "custom-options"
+ },
+ {
+ "title": "自定义触发源插槽",
+ "content": "通过 reference
插槽自定义触发源的 HTML 模板。
\n",
+ "link": "select/custom-reference-slot",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "custom-reference-slot"
+ },
+ {
+ "title": "不展示全选选项",
+ "content": "show-alloption
属性设置为 false 后将不展示 全选
选项,默认为 true 。
\n",
+ "link": "select/show-alloption",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "show-alloption"
+ },
+ {
+ "title": "改变输入框的值",
+ "content": "详细用法参考如下示例",
+ "link": "select/set-input-value",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "set-input-value"
+ },
+ {
+ "title": "手动获取焦点",
+ "content": "通过调用 focus()
方法使 input 获取焦点。
\n",
+ "link": "select/manual-focus-blur",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "manual-focus-blur"
+ },
+ {
+ "title": "下拉列表跟随输入框宽度",
+ "content": "通过 is-drop-inherit-width
属性设置下拉列表是否跟随输入框宽度。默认为 false
表示不跟随,内容可撑开下拉列表宽度,设置为 true
则跟随宽度。
\n",
+ "link": "select/is-drop-inherit-width",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "is-drop-inherit-width"
+ },
+ {
+ "title": "默认插槽",
+ "content": "通过 default
默认插槽列表。
\n",
+ "link": "select/slot-default",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "slot-default"
+ },
+ {
+ "title": "底部插槽",
+ "content": "通过 footer
使用底部插槽。
\n",
+ "link": "select/slot-footer",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "slot-footer"
+ },
+ {
+ "title": "空数据插槽",
+ "content": "通过 empty
设置没有数据时显示的提示语。
\n",
+ "link": "select/slot-empty",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "slot-empty"
+ },
+ {
+ "title": "嵌套单选 Grid",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-radio-grid",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-radio-grid"
+ },
+ {
+ "title": "嵌套单选 Grid,可搜索,可清除",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-checkbox-grid-clearable",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-checkbox-grid-clearable"
+ },
+ {
+ "title": "嵌套多选 Grid",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-checkbox-grid",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-checkbox-grid"
+ },
+ {
+ "title": "text-field",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-checkbox-grid",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-checkbox-grid1"
+ },
+ {
+ "title": "value-field",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-checkbox-grid",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-checkbox-grid2"
+ },
+ {
+ "title": "嵌套 Grid 数据项禁用",
+ "content": "下拉表格多选模式,通过 select-config
配置项的属性 checkMethod
,传入自定义方法判断哪些数据项被禁用,方法会判断每个数据项,需返回值为 true
或者 false
,代表此数据项启用或者禁用。下拉表格单选模式,通过 radio-config
配置项的属性 checkMethod
,传入自定义方法判断哪些数据项被禁用,方法会判断每个数据项,需返回值为 true
或者 false
,代表此数据项启用或者禁用。
\n",
+ "link": "select/disable-grid-select-radio",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "disable-grid-select-radio"
+ },
+ {
+ "title": "嵌套 Grid 开启远程搜索(多选)",
+ "content": "配置 render-type
为 grid
嵌套Grid;将 filterable
和 remote
设置为 true
,同时传入 remote-method
方法,开启远程搜索。如需自动搜索和显示展开按钮,需设置 remote-config
\n",
+ "link": "select/nest-grid-remote-filter",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-grid-remote-filter"
+ },
+ {
+ "title": "嵌套 Grid 开启远程搜索(单选)",
+ "content": "配置 render-type
为 grid
嵌套Grid;将 filterable
和 remote
设置为 true
,同时传入 remote-method
方法,开启远程搜索。如需自动搜索和显示展开按钮,需设置 remote-config
\n",
+ "link": "select/nest-remote-grid",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-remote-grid"
+ },
+ {
+ "title": "嵌套 Grid 且数据量大",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-radio-grid-much-data",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-radio-grid-much-data"
+ },
+ {
+ "title": "嵌套单选 Tree",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-radio-tree",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-radio-tree"
+ },
+ {
+ "title": "嵌套多选 Tree",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-checkbox-tree",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-checkbox-tree"
+ },
+ {
+ "title": "可搜索 tree",
+ "content": "详细用法参考如下示例",
+ "link": "select/nest-filterable-tree",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "nest-filterable-tree"
+ },
+ {
+ "title": "配置方式",
+ "content": "通过设置 cache-op
开启缓存功能并且通过 options
设置下来选项。
\n",
+ "link": "select/cache-usage",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "cache-usage"
+ },
+ {
+ "title": "插槽方式",
+ "content": "通过 slot 设置列表渲染组件为 vue-option
来输出下拉列表,则需要手动加入缓存功能。
\n",
+ "link": "select/memoize-usage",
+ "component": " Select 选择器",
+ "findIntroStr": "Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。",
+ "demoId": "memoize-usage"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/slide-bar.json b/examples/docs/resources/pc/demo-config/zh-CN/slide-bar.json
new file mode 100644
index 000000000..907657feb
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/slide-bar.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"slide-bar/basic-usage","component":" SlideBar 滚动块","findIntroStr":"SlideBar 滚动块,可以用作文字块的滑动。","demoId":"basic-usage"},{"title":"每次滚动块数","content":"可通过 wheel-blocks
设置每次滚动块数。\n可通过 value
调用服务时候获取数据的来源
\n","link":"slide-bar/wheel-blocks","component":" SlideBar 滚动块","findIntroStr":"SlideBar 滚动块,可以用作文字块的滑动。","demoId":"wheel-blocks"},{"title":"自定义滚动块内容","content":"通过插槽自定义滚动块内容。
\n","link":"slide-bar/custom-content","component":" SlideBar 滚动块","findIntroStr":"SlideBar 滚动块,可以用作文字块的滑动。","demoId":"custom-content"},{"title":"自定义 DOM 标签","content":"可通过 tag sub-tag
自定义 DOM 标签。
\n","link":"slide-bar/custom-tag","component":" SlideBar 滚动块","findIntroStr":"SlideBar 滚动块,可以用作文字块的滑动。","demoId":"custom-tag"},{"title":"滚动块事件","content":"详细用法参考如下示例","link":"slide-bar/slide-bar-events","component":" SlideBar 滚动块","findIntroStr":"SlideBar 滚动块,可以用作文字块的滑动。","demoId":"slide-bar-events"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/slider.json b/examples/docs/resources/pc/demo-config/zh-CN/slider.json
new file mode 100644
index 000000000..fdaa31061
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/slider.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"slider/basic-usage","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"basic-usage"},{"title":"竖向模式","content":"通过设置vertical
属性来展示滑块竖向模式(不设置,默认为横向模式)\n竖向模式可以通过 height
设置组件高度
\n","link":"slider/vertical-mode","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"vertical-mode"},{"title":"最大最小值","content":"通过设置min
max
来设置滑块取值范围
\n","link":"slider/max-min","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"max-min"},{"title":"当前值","content":"通过设置format-tooltip
来属性设置 value
\n","link":"slider/format-tooltip","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"format-tooltip"},{"title":"范围选择","content":"通过v-model
为数组 设定初始范围选择
\n","link":"slider/range-select","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"range-select"},{"title":"输入框模式","content":"通过配置show-input
,开启滑块输入框模式
\n","link":"slider/show-iput","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"show-iput"},{"title":"快捷键操作","content":"设置总步数,即按快捷键 PageDown/PageUp 时,每次移动的距离是(最大值-最小值)/分页数
\n","link":"slider/shortcut-operation","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"shortcut-operation"},{"title":"禁用","content":"通过设置属性disabled
,设置滑动滑块禁止滑动
\n","link":"slider/dynamic-disable","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"dynamic-disable"},{"title":"提示","content":"通过设定:show-tip="false"
,关闭滑块提示。(默认开启)
\n","link":"slider/show-tip","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"show-tip"},{"title":"步长","content":"通过设置step
来配置滑块滑动的步长
\n","link":"slider/about-step","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"about-step"},{"title":"change 事件","content":"change 事件
\n","link":"slider/slider-event-change","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"slider-event-change"},{"title":"start 滑块开始滑动事件","content":"start 滑块开始滑动事件
\n","link":"slider/slider-event-start","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"slider-event-start"},{"title":"stop 滑块停止滑动事件","content":"stop 滑块停止滑动事件
\n","link":"slider/slider-event-stop","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"slider-event-stop"},{"title":"自定义插槽","content":"详细用法参考如下示例","link":"slider/slider-slot","component":" Slider 滑块","findIntroStr":"通过鼠标滑动滑块来确定位置和大小。多种形式,横向、纵向和范围滑块。","demoId":"slider-slot"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/split.json b/examples/docs/resources/pc/demo-config/zh-CN/split.json
new file mode 100644
index 000000000..afdddf982
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/split.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"split/basic-usage","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"basic-usage"},{"title":"面板阈值","content":"详细用法参考如下示例","link":"split/split-threshold","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"split-threshold"},{"title":"分割方式","content":"同个mode设置分割类型,可选值为 horizontal
(横向) 或 vertical
(纵向);默认值horizontal
。
\n","link":"split/split-mode","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"split-mode"},{"title":"不可拖拽","content":"详细用法参考如下示例","link":"split/basic-usage1","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"basic-usage1"},{"title":"movestart 事件","content":"开始移动事件
\n","link":"split/movestart-event","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"movestart-event"},{"title":"moving 事件","content":"移动中事件
\n","link":"split/moving-event","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"moving-event"},{"title":"moveend 事件","content":"移动完成事件
\n","link":"split/moveend-event","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"moveend-event"},{"title":"左右面板插槽","content":"详细用法参考如下示例","link":"split/left-right-slot","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"left-right-slot"},{"title":"上下面板插槽","content":"详细用法参考如下示例","link":"split/top-bottom-slot","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"top-bottom-slot"},{"title":"拖拽插槽","content":"详细用法参考如下示例","link":"split/trigger-slot","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"trigger-slot"},{"title":"嵌套使用","content":"详细用法参考如下示例","link":"split/nested-use","component":" Split 面板分割","findIntroStr":"常用于将一片区域,分割为可以拖拽调整宽度或高度的两部分区域。","demoId":"nested-use"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/steps.json b/examples/docs/resources/pc/demo-config/zh-CN/steps.json
new file mode 100644
index 000000000..d49cfc26e
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/steps.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"steps/data-resource","component":" Steps 步骤条","findIntroStr":"Steps 步骤条","demoId":"data-resource"},{"title":"普通步骤条","content":"使用 tiny-time-line
标签,并设置 type
为 normal
实现普通步骤条。
\n","link":"steps/normal-steps","component":" Steps 步骤条","findIntroStr":"Steps 步骤条","demoId":"normal-steps"},{"title":"高级向导","content":"设置 type
为 advanced
启用高级向导功能。
\n","link":"steps/advanced-steps","component":" Steps 步骤条","findIntroStr":"Steps 步骤条","demoId":"advanced-steps"},{"title":"时间线步骤条","content":"使用 tiny-time-line
标签,并设置 type
为 timeline
实现时间线步骤条。同时若配置 vertical
属性,时间线步骤条将变成竖向模式,而若再配置 reverse
属性,则还可以实现时间线步骤条竖向模式的反向形式。
\n","link":"steps/timeline-steps","component":" Steps 步骤条","findIntroStr":"Steps 步骤条","demoId":"timeline-steps"},{"title":"自定义数据项","content":"默认情况下,绑定数据的子对象包含 name、count、status 字段。\nname-field
:设置节点信息中名称对应的字段名,默认为 'name' 。\ncount-field
:设置高级向导里徽标计数对应的字段名,默认为 'count' 。\nstatus-field
:设置数据状态对应的字段名,默认为 'status' 。
\n","link":"steps/custom-steps-item","component":" Steps 步骤条","findIntroStr":"Steps 步骤条","demoId":"custom-steps-item"},{"title":"订单流程","content":"通过 Steps 组件模拟订单流程。
\n","link":"steps/order-progress","component":" Steps 步骤条","findIntroStr":"Steps 步骤条","demoId":"order-progress"},{"title":"点击事件","content":"点击节点时触发 click
事件。
\n","link":"steps/click","component":" Steps 步骤条","findIntroStr":"Steps 步骤条","demoId":"click"},{"title":"插槽的使用","content":"通过作用域插槽 item
自定义步骤条节点内容。
\n","link":"steps/slot","component":" Steps 步骤条","findIntroStr":"Steps 步骤条","demoId":"slot"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/switch.json b/examples/docs/resources/pc/demo-config/zh-CN/switch.json
new file mode 100644
index 000000000..5e2391b58
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/switch.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"switch/basic-usage","component":" Switch 开关","findIntroStr":"Switch 在两种状态间切换选择。","demoId":"basic-usage"},{"title":"迷你尺寸","content":"详细用法参考如下示例","link":"switch/mini-mode","component":" Switch 开关","findIntroStr":"设置是否显示为 mini 模式,默认为 false。当设置 `mini` 为 `true` 时,不会显示文字提示。","demoId":"mini-mode"},{"title":"自定义开关显示","content":"通过具名插槽 open 和 close 自定义 Switch 显示。前提是配置show-text
为true
","link":"switch/custom-open-close","component":" Switch 开关","findIntroStr":"通过具名插槽 open 和 close 自定义 Switch 显示。","demoId":"custom-open-close"},{"title":"自定义开关取值","content":"false-value
属性表示的是关闭时取付给 false-value
的值。\ntrue-value
属性表示的是开启时取付给 true-value
的值,v-model里定义的属性名是 value
时就能拿的到 true-value
或false-value
里的值。
\n","link":"switch/custom-true-false-value","component":" Switch 开关","findIntroStr":"通过 true-value 和 false-value 属性设置 Switch 在开和关状态下的不同取值。","demoId":"custom-true-false-value"},{"title":"禁用状态","content":"disable
属性表示的是当前状态是无法被使用的,默认值为false(true/false)。
\n","link":"switch/dynamic-disable","component":" Switch 开关","findIntroStr":"通过 disabled 属性设置 Switch 禁用状态。","demoId":"dynamic-disable"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/tabs.json b/examples/docs/resources/pc/demo-config/zh-CN/tabs.json
new file mode 100644
index 000000000..82dc15f48
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/tabs.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 v-model
设置初始激活的标签页,绑定的值对应 tiny-tab-item
元素中 name
属性的值。一个 tiny-tab-item
为一个标签页,通过 title
属性设置标签页标题。
\n","link":"tabs/basic-usage","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"basic-usage"},{"title":"card 类型","content":"通过 tab-style
设置标签页风格类型, 通过 active-name
设置初始激活的标签页 。
\n","link":"tabs/tab-style-card","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"tab-style-card"},{"title":"bordercard 类型","content":"通过 tab-style
设置标签页风格类型为 bordercard
。
\n","link":"tabs/tab-style-bordercard","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"tab-style-bordercard"},{"title":"标签页可增加","content":"设置 with-add
属性启用标签可增加功能。同时通过 add
事件自定义实现增加标签页的逻辑。配置 show-more-tabs
属性后当标签页超过一定宽度时将显示 更多
按钮。
\n","link":"tabs/with-add","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"with-add"},{"title":"标签页可关闭","content":"通过 withClose
属性设置是否可关闭标签页。同时可通过 close
事件自定义实现关闭标签页的逻辑。
\n","link":"tabs/tabs-events-close","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"tabs-events-close1"},{"title":"top 显示位置","content":"通过 position
属性设置标签页显示位置,可选值有 top
、right
、bottom
、left
,默认为 top
。
\n","link":"tabs/position","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"position"},{"title":"右侧显示","content":"详细用法参考如下示例","link":"tabs/position-right","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"position-right"},{"title":"下方显示","content":"详细用法参考如下示例","link":"tabs/position-bottom","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"position-bottom"},{"title":"左侧显示","content":"详细用法参考如下示例","link":"tabs/position-left","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"position-left"},{"title":"离开前事件","content":"before-leave
切换标签之前的钩子函数,若返回 false 或者返回 Promise 且被 reject,则阻止切换,返回 true 则可以切换。
\n","link":"tabs/before-leave","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"before-leave"},{"title":"可自动撑开","content":"stretch
属性设置标签的宽度是否自撑开,默认为 false 。
\n","link":"tabs/stretch-wh","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"stretch-wh"},{"title":"add 事件","content":"点击新增按钮增加标签页时触发 add
事件
\n","link":"tabs/tabs-events-add","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"tabs-events-add"},{"title":"click 事件","content":"单击标签页时触发 click
事件
\n","link":"tabs/tabs-events-click","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"tabs-events-click"},{"title":"close 事件","content":"关闭标签页时触发 close
事件
\n","link":"tabs/tabs-events-close","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"tabs-events-close"},{"title":"edit 事件","content":"点击新增按钮增加标签页 或 标签页被关闭后触发 edit
事件
\n","link":"tabs/tabs-events-edit","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"tabs-events-edit"},{"title":"自定义标签页标题","content":"通过 tiny-tab-item
的 title
插槽自定义标签页标题,比如在标题前增加图标。
\n","link":"tabs/custom-tab-title","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"custom-tab-title"},{"title":"循环创建标签页","content":"通过 v-for
根据数据循环创建多个 tiny-tab-item
。
\n","link":"tabs/tabdata-title","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"tabdata-title"},{"title":"标签页切换不同 Grid","content":"\nTabs 组件里使用 Grid 组件需要 Grid 设置属性 :auto-resize="true"
,这样才能让 Grid 自适应父元素响应变化。
\n
\n","link":"tabs/show-different-grid-data","component":" Tabs 标签页","findIntroStr":"分隔内容上有关联但属于不同类别的数据集合。","demoId":"show-different-grid-data"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/tag.json b/examples/docs/resources/pc/demo-config/zh-CN/tag.json
new file mode 100644
index 000000000..c19961e04
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/tag.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"tag/basic-usage","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"basic-usage"},{"title":"颜色","content":"可通过 color
设置标签背景色。
\n","link":"tag/color3","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"color3"},{"title":"边框","content":"可通过 hit
设置标签边框,可选值(true/false)true为有边框,false无边框,默认值为 false。
\n","link":"tag/hit","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"hit"},{"title":"尺寸","content":"可通过 size
设置Tag标签大小,可选值(medium / small / mini)。
\n","link":"tag/tag-size","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"tag-size"},{"title":"主题","content":"可通过 effect
设置Tag标签主题,可选值(dark / light / plain)。\ntype
可以为标签设置相应的类型,可选值(success / info / warning / danger)。
\n","link":"tag/effect","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"effect"},{"title":"动态编辑标签","content":"通过点击+ New Tag
在文本框中输入你要定义的标签名就能在标签列表中最后一个创建标签 。closable
属性可以为标签设置成可去除标签。
\n","link":"tag/create","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"create"},{"title":"可移除标签","content":"详细用法参考如下示例","link":"tag/closeable","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"closeable"},{"title":"Click 事件","content":"详细用法参考如下示例","link":"tag/tag-event-click","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"tag-event-click"},{"title":"Close 事件","content":"详细用法参考如下示例","link":"tag/tag-event-close","component":" Tag 标签","findIntroStr":"Tag 标签组件,用于标记事物的属性和维度","demoId":"tag-event-close"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/textpopup.json b/examples/docs/resources/pc/demo-config/zh-CN/textpopup.json
new file mode 100644
index 000000000..9e3613182
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/textpopup.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"text-popup/basic-usage","component":" TextPopup 输入框","findIntroStr":"TextPopup 输入框,提供数据绑定功能。","demoId":"basic-usage"},{"title":"提示占位文本","content":"placeholder
属性的值为 string
此属性会把值默认显示到输入框中。
\n","link":"text-popup/placeholder","component":" TextPopup 输入框","findIntroStr":"TextPopup 输入框,提供数据绑定功能。","demoId":"placeholder"},{"title":"只读","content":"可通过 readonly
设置是否只读。
\n","link":"text-popup/readonly","component":" TextPopup 输入框","findIntroStr":"TextPopup 输入框,提供数据绑定功能。","demoId":"readonly"},{"title":"分隔符","content":"可通过 separtor
设置分隔符,在文本框中输入回车就是分隔符的位置。
\n","link":"text-popup/separtor","component":" TextPopup 输入框","findIntroStr":"TextPopup 输入框,提供数据绑定功能。","demoId":"separtor"},{"title":"绑定值","content":"可通过 value
或 v-model
设置绑定值。
\n","link":"text-popup/value","component":" TextPopup 输入框","findIntroStr":"TextPopup 输入框,提供数据绑定功能。","demoId":"value"},{"title":"清除 value 值","content":"详细用法参考如下示例","link":"text-popup/clear-value","component":" TextPopup 输入框","findIntroStr":"TextPopup 输入框,提供数据绑定功能。","demoId":"clear-value"},{"title":"宽度","content":"可通过 width
设置宽度。
\n","link":"text-popup/width","component":" TextPopup 输入框","findIntroStr":"TextPopup 输入框,提供数据绑定功能。","demoId":"width"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/time-line.json b/examples/docs/resources/pc/demo-config/zh-CN/time-line.json
new file mode 100644
index 000000000..98c4f89da
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/time-line.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 data
属性设置时间线步骤条数据,通过 active
属性设置步骤条的选中步骤。
\n","link":"time-line/basic-usage","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"basic-usage"},{"title":"横向时间线","content":"通过 horizontal
属性设置横向时间线。
\n","link":"time-line/horizontal-step","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"horizontal-step"},{"title":"竖向时间线","content":"通过 vertical
属性设置竖向时间线。
\n","link":"time-line/vertical-step","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"vertical-step"},{"title":"竖向时间线的方向","content":"通过 reverse
属性设置竖向步骤条的方向。
\n","link":"time-line/vertical-step-reverse","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"vertical-step-reverse"},{"title":"宽度设置","content":"通过 space
属性设置步骤条的宽度。
\n","link":"time-line/set-step-width","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"set-step-width"},{"title":"数据映射","content":"通过 name-field
属性设置节点信息中名称对应的字段名,通过 time-field
属性设置节点时间信息对应的字段名。
\n","link":"time-line/different-data","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"different-data"},{"title":"设置序号起始值","content":"通过 start
属性设置步骤条序号起始值。
\n","link":"time-line/set-start-value","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"set-start-value"},{"title":"显示组件内部状态","content":"通过 show-status
属性设置是否显示组件内部状态。默认为 false
,表示不显示。
\n","link":"time-line/show-status","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"show-status"},{"title":"未完成的序号显示","content":"通过 show-number
属性设置未完成的状态是否显示序号。
\n","link":"time-line/show-number","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"show-number"},{"title":"自定义横向时间线","content":"slot
为 top
可以自定义步骤条顶部内容,slot
为 bottom
可以自定义步骤条底部内容。
\n","link":"time-line/custom-normal-step","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"custom-normal-step"},{"title":"自定义竖向时间线","content":"slot
为 left
可以自定义步骤条左侧内容,slot
为 right
可以自定义步骤条右侧内容。
\n","link":"time-line/custom-vertical-step","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"custom-vertical-step"},{"title":"click 事件","content":"单击时触发 click 事件
\n","link":"time-line/vertical-step-reverse","component":" TimeLine 时间线","findIntroStr":"TimeLine 时间线","demoId":"vertical-step-reverse1"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/time-picker.json b/examples/docs/resources/pc/demo-config/zh-CN/time-picker.json
new file mode 100644
index 000000000..b76f53e1d
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/time-picker.json
@@ -0,0 +1,146 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "time-picker/basic-usage",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "选择范围",
+ "content": "picker-options 设置时间选择范围
\n",
+ "link": "time-picker/basic-usage",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "basic-usage1"
+ },
+ {
+ "title": "箭头选择",
+ "content": "arrow-control
属性设置是否使用箭头进行时间选择,仅对 <tiny-time-picker>
有效
\n",
+ "link": "date-picker/clearable",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "clearable1"
+ },
+ {
+ "title": "清除输入",
+ "content": "通过 clear-icon
自定义清空图标
\n",
+ "link": "time-picker/clear-icon",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "clear-icon"
+ },
+ {
+ "title": "尺寸设置medium",
+ "content": "通过 size
自定义组价尺寸
\n",
+ "link": "time-picker/size-medium",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "size-medium"
+ },
+ {
+ "title": "尺寸设置small",
+ "content": "通过 size
自定义组价尺寸
\n",
+ "link": "time-picker/size-small",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "size-small"
+ },
+ {
+ "title": "尺寸设置mini",
+ "content": "通过 size
自定义组价尺寸
\n",
+ "link": "time-picker/size-mini",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "size-mini"
+ },
+ {
+ "title": "清除按钮",
+ "content": "通过 clearable
属性设置是否显示清除按钮,默认值为 true
\n",
+ "link": "time-picker/clearable",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "clearable"
+ },
+ {
+ "title": "自定义后置图标",
+ "content": "通过 suffix-icon
属性设置日期输入框后置图标,从 @opentiny/vue-icon
中导入一个图标并进行初始化后传给 suffix-icon
。
\n",
+ "link": "time-picker/suffix-icon",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "suffix-icon"
+ },
+ {
+ "title": "时间格式化",
+ "content": "format
时间格式化显示\ntimestamp
JS 时间戳,仅 value-format 可用;组件绑定值为 number 类型
\n",
+ "link": "time-picker/format",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "format"
+ },
+ {
+ "title": "时间显示类型",
+ "content": "通过 hh
属性可设置 12 小时制。 HH
属性为 24 小时制,须和 A 或 a 使用。 h
与 H
属性设置不补 0。\n通过 mm
属性可设置分钟显示格式,例如 01。 m
属性设置不补 0。\n通过 ss
属性可设置秒的显示格式,例如 01。 s
属性设置不补 0。\n通过 a
属性可设置显示时间为 am/pm A
属性设置显示时间为 AM/PM。
\n",
+ "link": "time-picker/time-low",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "time-low"
+ },
+ {
+ "title": "日期显示格式",
+ "content": "WW
属性设置周,例如 01, W
属性设置不补 0。\nyyyy
属性设置年,例如 2020。\nMM
属性设置月,例如 01 M
属性设置不补 0。\ndd
属性设置日,例如 01 d
属性设置不补 0。
\n",
+ "link": "time-picker/date",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "date"
+ },
+ {
+ "title": "范围选择",
+ "content": "is-range
设置是否为范围选择,默认为 false,range-separator
,设置范围选择分隔符(为可选值)默认为‘-’
\n",
+ "link": "time-picker/is-range",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "is-range"
+ },
+ {
+ "title": "选择器打开时默认时间设置",
+ "content": "通过 default-value
设置选择器打开显示默认时间
\n",
+ "link": "time-picker/default-value",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "default-value"
+ },
+ {
+ "title": "原生属性",
+ "content": "通过 name
属性设置默认 name
\n",
+ "link": "time-picker/name",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "name"
+ },
+ {
+ "title": "下拉框的类名",
+ "content": "通过 popper-class
属性设置下拉框的类名
\n",
+ "link": "time-picker/popper-class",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "文本框不可输入",
+ "content": "日期输入框默认可以输入日期,设置 editable
为 false 后,将不能输入。
\n",
+ "link": "time-picker/editable",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "editable"
+ },
+ {
+ "title": "事件",
+ "content": "当聚焦和失焦时会触发 focus 和 bulr 事件,当确定选值时会触发 change 事件
\n",
+ "link": "time-picker/event-blur",
+ "component": " TimePicker 时间选择器",
+ "findIntroStr": "用于设置/选择日期,包括年月/年月日/年月日时分/年月日时分秒日期格式。",
+ "demoId": "event-blur"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/time-select.json b/examples/docs/resources/pc/demo-config/zh-CN/time-select.json
new file mode 100644
index 000000000..2d24f623a
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/time-select.json
@@ -0,0 +1,130 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/basic-usage",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "固定时间范围",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/range-placeholder",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "range-placeholder"
+ },
+ {
+ "title": "选择器打开时默认时间设置",
+ "content": "通过 default-value
设置选择器打开显示默认时间
\n",
+ "link": "time-select/default-value",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "default-value"
+ },
+ {
+ "title": "指定时间点",
+ "content": "picker-options 设置时间点
\n",
+ "link": "time-select/picker-options",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "picker-options"
+ },
+ {
+ "title": "后置图标",
+ "content": "通过 suffix-icon
属性设置日期输入框后置图标,从 @opentiny/vue-icon
中导入一个图标并进行初始化后传给 suffix-icon
。
\n",
+ "link": "time-select/suffix-icon",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "suffix-icon"
+ },
+ {
+ "title": "自定义清空图标",
+ "content": "通过 clear-icon
自定义清空图标
\n",
+ "link": "time-select/clear-icon",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "clear-icon"
+ },
+ {
+ "title": "显示清除按钮",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/clear-icon",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "clearable"
+ },
+ {
+ "title": "原生属性",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/clear-icon",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "name"
+ },
+ {
+ "title": "事件",
+ "content": "focus
input 框聚焦时触发,blur
input 框失焦时触发
\n",
+ "link": "time-select/event-blur",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "event-blur"
+ },
+ {
+ "title": "文本框不可编辑",
+ "content": "日期输入框默认可以输入日期,设置 editable
为 false 后,将不能输入。
\n",
+ "link": "time-select/editable",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "editable"
+ },
+ {
+ "title": "禁用",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/disabled",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "disabled"
+ },
+ {
+ "title": "自定义类名",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/popper-class",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "mini 尺寸",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/size-mini",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "size-mini"
+ },
+ {
+ "title": "small 尺寸",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/size-small",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "size-small"
+ },
+ {
+ "title": "medium 尺寸",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/size-medium",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "size-medium"
+ },
+ {
+ "title": "手动获取焦点",
+ "content": "详细用法参考如下示例",
+ "link": "time-select/focus",
+ "component": " TimeSelect 时间选择器",
+ "findIntroStr": "时间选值框是下拉框的特例,按时分格式(不支持自定义格式)展示下拉列表以供用户选择,并能扩展下拉框部分参数。",
+ "demoId": "focus"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/toggle-menu.json b/examples/docs/resources/pc/demo-config/zh-CN/toggle-menu.json
new file mode 100644
index 000000000..d8a9e50e4
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/toggle-menu.json
@@ -0,0 +1,130 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "toggle-menu/basic-usage",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "自定义菜单左侧图标",
+ "content": "可通过 icon
属性自定义菜单左侧图标。
\n",
+ "link": "toggle-menu/custom-icon",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "custom-icon"
+ },
+ {
+ "title": "自定义菜单数据",
+ "content": "可通过 get-menu-data-sync
自定义菜单数据服务。(deprecated v3.4.0废弃, v3.16.0移除;移除原因:如果是同步数据则和:data功能重复)
\n",
+ "link": "toggle-menu/get-menu-data-sync",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "get-menu-data-sync"
+ },
+ {
+ "title": "自定义菜单异步数据服务",
+ "content": "可通过 get-menu-data-async
自定义菜单异步数据服务。
\n",
+ "link": "toggle-menu/get-menu-data-async",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "get-menu-data-async"
+ },
+ {
+ "title": "props 选项映射",
+ "content": "可通过 props
配置选项映射字段该属性的默认值为 {children: 'children',label: 'label',disabled: 'disabled'} 。
\n",
+ "link": "toggle-menu/toggle-props",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "toggle-props"
+ },
+ {
+ "title": "自定义节点内容",
+ "content": "通过 node
插槽自定义节点内容。
\n",
+ "link": "toggle-menu/slot-node",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "slot-node"
+ },
+ {
+ "title": "默认展开所有节点",
+ "content": "可通过 default-expand-all
属性设置是否默认展开所有节点,通过 expand-on-click-node
属性设置是否可以通过点击节点展开/收起菜单。
\n",
+ "link": "toggle-menu/default-expand-all",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "default-expand-all"
+ },
+ {
+ "title": "拖拽节点",
+ "content": "可通过 draggable
属性设置是否开启拖拽节点的功能,默认值为 false
。\n可通过 ellipsis
属性设置是否开启文本内容超长是省略显示,默认值为 false
\n",
+ "link": "toggle-menu/draggable",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "draggable"
+ },
+ {
+ "title": "显示过滤搜索框",
+ "content": "可通过 show-filter
属性设置是否展示过滤搜索框,默认为 true
,可设置为false
不展示过滤搜索框。
\n",
+ "link": "toggle-menu/show-filter",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "show-filter"
+ },
+ {
+ "title": "自动过滤",
+ "content": "可通过 placeholder
属性设置输入框的占位符。 通过设置 automatic-filtering
为false
关闭输入时自动过滤功能,默认值为 true。
\n",
+ "link": "toggle-menu/automatic-filtering",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "automatic-filtering"
+ },
+ {
+ "title": "内容超出换行",
+ "content": "详细用法参考如下示例",
+ "link": "toggle-menu/show-filter",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "show-filter1"
+ },
+ {
+ "title": "点击节点事件",
+ "content": "node-click
点击节点后触发的事件。
\n",
+ "link": "toggle-menu/node-click",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "node-click"
+ },
+ {
+ "title": "展开节点事件",
+ "content": "node-expand
展开节点后触发的事件。
\n",
+ "link": "toggle-menu/node-expand",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "node-expand"
+ },
+ {
+ "title": "收缩节点事件",
+ "content": "node-collapse
收缩节点后触发的事件。
\n",
+ "link": "toggle-menu/node-collapse",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "node-collapse"
+ },
+ {
+ "title": "拖放节点事件",
+ "content": "node-drop
拖放节点后触发的事件,需要设置 draggable
属性为 true
。
\n",
+ "link": "toggle-menu/node-drop",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "node-drop"
+ },
+ {
+ "title": "拖拽事件",
+ "content": "node-drag-start
拖拽节点后的事件,node-drag-enter
拖拽进入其他节点时触发的事件,node-drag-over
在拖拽节点时触发的事件,node-drag-leave
拖拽离开某个节点时触发的事件,node-drag-end
拖拽结束时触发的事件。
\n",
+ "link": "toggle-menu/drag-events",
+ "component": " ToggleMenu 收缩菜单",
+ "findIntroStr": "以树形方式显示、适用于版型定制的一种组件,菜单可收缩,收缩后只显示图标,点击图标展示子节点菜单。",
+ "demoId": "drag-events"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/tooltip.json b/examples/docs/resources/pc/demo-config/zh-CN/tooltip.json
new file mode 100644
index 000000000..7adf806c6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/tooltip.json
@@ -0,0 +1,122 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "tooltip/basic-usage",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "自定义渐变动画",
+ "content": "通过 transition
定义渐变动画,默认选值为 tiny-fade-in-linear
\n",
+ "link": "tooltip/custom-transition",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "custom-transition"
+ },
+ {
+ "title": "禁用",
+ "content": "通过 diabled
设置禁用
\n",
+ "link": "tooltip/dynamic-disable",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "dynamic-disable"
+ },
+ {
+ "title": "手动控制",
+ "content": "手动控制模式,通过设置 manual
属性为 true 后,mouseenter 和 mouseleave 事件将不会生效,然后可以通过设置 v-model
动态控制显示和隐藏
\n",
+ "link": "tooltip/manual-control-tip",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "manual-control-tip"
+ },
+ {
+ "title": "智能出现控制",
+ "content": "提示的智能出现的模式,设置为 auto
时,tooltip只有在文本超长时,才显示出来。
\n",
+ "link": "tooltip/visible-show",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "visible-show"
+ },
+ {
+ "title": "主题",
+ "content": "通过 effect
属性设置主题,可选值 dark/light 两种主题,默认值为 dark
\n",
+ "link": "tooltip/tooltip-theme",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "tooltip-theme"
+ },
+ {
+ "title": "自动隐藏和延迟时间",
+ "content": "通过 hide-after
属性设置 Tooltip 组件出现后自动隐藏延时,单位毫秒,为 0 则不会自动隐藏。通过 open-delay
属性设置 Tooltip 组件延迟出现的时间,单位毫秒。
\n",
+ "link": "tooltip/open-delay",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "open-delay"
+ },
+ {
+ "title": "偏移量",
+ "content": "通过 offset
属性设置 Tooltip 组件出现位置的偏移量。
\n",
+ "link": "tooltip/tooltip-offset",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "tooltip-offset"
+ },
+ {
+ "title": "鼠标是否可进入",
+ "content": "通过 enterable
属性设置鼠标是否可进入到 tooltip 中。
\n",
+ "link": "tooltip/enterable",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "enterable"
+ },
+ {
+ "title": "是否显示箭头",
+ "content": "通过 visible-arrow
属性设置是否显示 Tooltip 箭头。
\n",
+ "link": "tooltip/visible-arrow",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "visible-arrow"
+ },
+ {
+ "title": "添加样式类名",
+ "content": "通过 popper-class
属性为 Tooltip 的 popper 添加类名。
\n",
+ "link": "tooltip/popper-class",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "popper-class"
+ },
+ {
+ "title": "自定义渲染函数",
+ "content": "通过 renderContent
自定义渲染函数,返回需要渲染的节点内容 arg1:Vue的渲染函数h arg2:传递给组件的content文本。
\n",
+ "link": "tooltip/tooltip-render-content",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "tooltip-render-content"
+ },
+ {
+ "title": "插槽",
+ "content": "通过 content
插槽添加自定义内容。
\n",
+ "link": "tooltip/tooltip-content",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "tooltip-content"
+ },
+ {
+ "title": "popper配置",
+ "content": "通过 popper-options
属性为 Tooltip 的 popper 配置参数,具体可参考popper.js
\n",
+ "link": "tooltip/popper-options",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "popper-options"
+ },
+ {
+ "title": "tabindex 配置",
+ "content": "通过配置 tabindex
, 配置的属性会自动添加到该组件的触发原上。
\n",
+ "link": "tooltip/tabindex",
+ "component": " ToolTip 文字提示",
+ "findIntroStr": "动态显示提示信息,一般通过鼠标事件进行响应。",
+ "demoId": "tabindex"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/transfer.json b/examples/docs/resources/pc/demo-config/zh-CN/transfer.json
new file mode 100644
index 000000000..46ac34dc6
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/transfer.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 value
属性进行双向绑定,其指定的值为默认选择的值,将展示在右侧列表。\n\ndata
属性提供数据源,其是一个对象数组,对象中默认字段有 key、label、disabled 。
\n","link":"transfer/basic-usage","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"basic-usage"},{"title":"数据源","content":"可请求服务获取数据,再将数据赋予 data
。
\n","link":"transfer/data-source","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"data-source"},{"title":"展示全部移动按钮","content":"可通过 show-all-btn
属性设置展示全部移动按钮。
\n","link":"transfer/show-all-btn","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"show-all-btn"},{"title":"自定义列表标题","content":"通过 titles
属性可对左右列表的标题进行自定义。
\n","link":"transfer/custom-transfer-titles","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"custom-transfer-titles"},{"title":"自定义按钮文案","content":"通过 button-texts
属性自定义左右穿梭的按钮文本。
\n","link":"transfer/custom-button-texts","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"custom-button-texts"},{"title":"搜索框占位符","content":"通过 filter-placeholder
属性自定义搜索框占位符。
\n","link":"transfer/filter-placeholder","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"filter-placeholder"},{"title":"自定义搜索方法","content":"提供 filter-method
钩子函数,可自定义搜索的方法。
\n","link":"transfer/custom-filter-method","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"custom-filter-method"},{"title":"默认勾选项","content":"通过 left-default-checked
、right-default-checked
属性分别指定左右侧列表默认的勾选数据。
\n","link":"transfer/default-checked","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"default-checked"},{"title":"自定义数据项渲染","content":"使用 render-content 自定义数据项
\n","link":"transfer/custom-render-content","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"custom-render-content"},{"title":"列表顶部勾选状态文案","content":"指定 format
属性后,勾选数据时,左右侧列表顶部将展示已勾选数据和所有数据的比值。
\n","link":"transfer/checked-format-text","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"checked-format-text"},{"title":"可搜索","content":"通过 filterable
属性开启左右侧列表的搜索功能。
\n","link":"transfer/filterable","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"filterable"},{"title":"数据源的字段别名","content":"当数据对象中的字段和默认不一致时,可通过 props
属性进行映射。
\n","link":"transfer/props-of-data-source","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"props-of-data-source"},{"title":"右侧排序策略","content":"通过 target-order
属性设置右侧列表元素的排序策略,有 original、push、unshift 三个选项,默认为 original 。
\n排序策略
\n
若为 original,则保持与数据源相同的顺序\n若为 push,则新加入的元素排在最后\n若为 unshift,则新加入的元素排在最前
\n
\n","link":"transfer/target-order","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"target-order"},{"title":"左右拖拽","content":"使用拖拽功能时请先安装 sortablejs 插件
\n
\n通过 drop-config
属性配置 sortablejs 插件进行左右拖拽穿梭。
\n","link":"transfer/drop-config","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"drop-config"},{"title":"穿梭框事件","content":"主要有 change
、left-check-change
、right-check-change
三个事件。
\n事件说明
\n
change:右侧列表元素变化时触发\nleft-check-change:左侧列表元素被用户选中 / 取消选中时触发\nright-check-change:右侧列表元素被用户选中 / 取消选中时触发
\n
\n","link":"transfer/transfer-events","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"transfer-events"},{"title":"手动清空搜索框","content":"调用 clearQuery()
方法可清空左右侧列表的搜索框,参数为 left 或者 right 。
\n","link":"transfer/manual-clear-query","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"manual-clear-query"},{"title":"自定义列表底部","content":"通过 left-footer
、right-footer
插槽可分别对左右列表底部进行自定义。
\n","link":"transfer/custom-footer","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"custom-footer"},{"title":"面板插槽","content":"可通过 left-panel
和 right-panel
自定义左、右侧面板内容;通过 button
自定义穿梭按钮
\n","link":"transfer/panel-slot","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"panel-slot"},{"title":"嵌套表格","content":"当 render
属性里的 plugin
设置为 Table
时指定穿梭框渲染成表格,具体配置可参考 grid
组件的配置。
\n","link":"transfer/nested-table","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"nested-table"},{"title":"嵌套树","content":"当 render
属性里的 plugin
设置为 Tree
时指定穿梭框渲染成树,通过 treeConfig
属性配置树相关的配置(具体配置可参考 tree
组件的配置)。
\n","link":"transfer/nested-tree","component":" Transfer 穿梭框","findIntroStr":"穿梭框,提供表格数据的双向选择。","demoId":"nested-tree"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/tree-menu.json b/examples/docs/resources/pc/demo-config/zh-CN/tree-menu.json
new file mode 100644
index 000000000..fa3c83516
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/tree-menu.json
@@ -0,0 +1,186 @@
+[
+ {
+ "title": "基本用法",
+ "content": "不配置数据时,默认从框架服务读取数据。
\n",
+ "link": "tree-menu/basic-usage",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "数据源",
+ "content": "通过 data
设置树形菜单的数据。
\n",
+ "link": "tree-menu/data-resource",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "data-resource"
+ },
+ {
+ "title": "自定义菜单服务数据",
+ "content": "通过 get-menu-data-sync
自定义菜单服务数据,直接返回数据。
\n",
+ "link": "tree-menu/get-menu-data-sync",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "get-menu-data-sync"
+ },
+ {
+ "title": "文字超长省略显示",
+ "content": "可通过 ellipsis
配置当菜单文字过长时,显示成省略号。通过 prefix-icon
自定义前置图标。
\n",
+ "link": "tree-menu/text-ellipsis",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "text-ellipsis"
+ },
+ {
+ "title": "文字超长换行显示",
+ "content": "可通过 wrap
配置当菜单文字过长时,换行显示。通过 showTitle 属性配置是否展示 title,默认值为 true。\n可通过 show-filter
配置是否显示搜索过滤框,默认为 true。\n可通过 show-title
配置是否显示 title ,默认为 true。
\n",
+ "link": "tree-menu/text-wrap",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "text-wrap"
+ },
+ {
+ "title": "父子级不相关联",
+ "content": "通过 check-strictly
设置选择时父子级不相关联,需要与 show-checkbox
同时使用 。
\n",
+ "link": "tree-menu/check-strictly",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "check-strictly"
+ },
+ {
+ "title": "默认展开某节点",
+ "content": "通过 default-expanded-keys
设置初始化展开某一节点 。
\n",
+ "link": "tree-menu/default-expanded-keys",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "default-expanded-keys"
+ },
+ {
+ "title": "懒加载子节点",
+ "content": "可通过 lazy
是否懒加载子节点,需与 load 方法结合使用。
\n",
+ "link": "tree-menu/lazy-load",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "lazy-load"
+ },
+ {
+ "title": "搜索规则配置",
+ "content": "可配置 filter-node-method
进行搜索规则配置,默认为模糊匹配,以下示例是精确配置。
\n",
+ "link": "tree-menu/filter-node-method",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "filter-node-method"
+ },
+ {
+ "title": "默认展开全部菜单",
+ "content": "可通过属性 default-expand-all
配置默认展开全部菜单。\n通过属性 default-checked-keys
配置默认选中,需要与 show-checkbox
, node-key
同时使用。
\n",
+ "link": "tree-menu/default-expand-all",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "default-expand-all"
+ },
+ {
+ "title": "自定义空数据文本",
+ "content": "可通过属性 empty-text
配置空数据显示文本。
\n",
+ "link": "tree-menu/empty-text",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "empty-text"
+ },
+ {
+ "title": "拖动菜单",
+ "content": "可通过属性置 draggable
实现菜单拖拽。
\n",
+ "link": "tree-menu/can-draggable",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "can-draggable"
+ },
+ {
+ "title": "拖拽菜单回调事件",
+ "content": "拖拽菜单回调事件,配合 draggable
使用。
\n",
+ "link": "tree-menu/event-allow-draggable",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "event-allow-draggable"
+ },
+ {
+ "title": "节点被展开时触发的事件",
+ "content": "节点被展开时触发的事件
\n",
+ "link": "tree-menu/event-node-expand",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "event-node-expand"
+ },
+ {
+ "title": "节点被关闭时触发的事件",
+ "content": "节点被关闭时触发的事件
\n",
+ "link": "tree-menu/event-node-collapse",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "event-node-collapse"
+ },
+ {
+ "title": "节点选中状态发生变化时的回调",
+ "content": "节点选中状态发生变化时的回调
\n",
+ "link": "tree-menu/event-check-change",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "event-check-change"
+ },
+ {
+ "title": "点击文字展开菜单",
+ "content": "可通过属性 expand-on-click-node
配置点击文字即可展开子菜单。
\n",
+ "link": "tree-menu/expand-on-click-node",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "expand-on-click-node"
+ },
+ {
+ "title": "水平缩进",
+ "content": "可通过属性 indent
控制子级相对于父级菜单的水平缩进距离,单位 px 。
\n",
+ "link": "tree-menu/tree-menu-indent",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "tree-menu-indent"
+ },
+ {
+ "title": "手风琴",
+ "content": "通过 accordion
设置手风琴效果。
\n",
+ "link": "tree-menu/accordion",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "accordion"
+ },
+ {
+ "title": "节点可勾选",
+ "content": "可配置 show-checkbox
属性设置节点是否可被勾选。
\n",
+ "link": "tree-menu/show-checkbox",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "show-checkbox"
+ },
+ {
+ "title": "自定义搜索图标",
+ "content": "可配置 search-icon
属性设置自定义搜索图标
\n",
+ "link": "tree-menu/search-icon",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "search-icon"
+ },
+ {
+ "title": "插槽",
+ "content": "可通过配置默认作用域插槽来显示菜单内容。
\n",
+ "link": "tree-menu/tree-menu-slot",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "tree-menu-slot"
+ },
+ {
+ "title": "事件",
+ "content": "current-change
当前选中节点变化时触发的事件。
\n",
+ "link": "tree-menu/event-current-change",
+ "component": " TreeMenu 树型菜单",
+ "findIntroStr": "以树形方式显示的菜单,适用于版型定制的一种组件。",
+ "demoId": "event-current-change"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/tree.json b/examples/docs/resources/pc/demo-config/zh-CN/tree.json
new file mode 100644
index 000000000..3bd467ed0
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/tree.json
@@ -0,0 +1,266 @@
+[
+ {
+ "title": "基本用法",
+ "content": "详细用法参考如下示例",
+ "link": "tree/basic-usage",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "basic-usage"
+ },
+ {
+ "title": "数据源",
+ "content": "通过配置 data
属性来设置数据源,可配置静态数据源和动态数据源。
\n",
+ "link": "tree/data-source",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "data-source"
+ },
+ {
+ "title": "禁用状态",
+ "content": "数据源里面带 disabled: true
渲染时自动禁用。
\n",
+ "link": "tree/disable-node",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "disable-node"
+ },
+ {
+ "title": "自定义空数据文本",
+ "content": "配置 template #empty
设置自定义空数据文本。
\n",
+ "link": "tree/custom-empty-text",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "custom-empty-text"
+ },
+ {
+ "title": "展开后渲染",
+ "content": "配置 render-after-expand
属性设置是否展开后渲染数据,默认为 true
。
\n",
+ "link": "tree/render-after-expand",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "render-after-expand"
+ },
+ {
+ "title": "唯一标识",
+ "content": "通过 node-key
属性设置唯一标识。
\n 设置选中节点,获取选中节点,新增节点,删除节点等操作,需要设置节点的唯一标识属性
",
+ "link": "tree/node-key",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "node-key"
+ },
+ {
+ "title": "父子不互相关联",
+ "content": "通过 check-strictly
属性设置父子层级勾选不关联。
\n",
+ "link": "tree/check-strictly",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "check-strictly"
+ },
+ {
+ "title": "默认展开所有节点",
+ "content": "通过 default-expand-all
属性设置默认展开所有节点。
\n",
+ "link": "tree/default-expand-all",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "default-expand-all"
+ },
+ {
+ "title": "点击节点展开收缩",
+ "content": "通过 expand-on-click-node
属性设置点击节点内容时可展开/收起节点。
\n",
+ "link": "tree/expand-on-click-node",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "expand-on-click-node"
+ },
+ {
+ "title": "点击节点时选中",
+ "content": "通过 check-on-click-node
属性设置点击节点内容同时可以勾选数据/去勾选数据。\n通过 icon-trigger-click-node
属性控制点击图标是否触发 node-click 事件,默认为 true。
\n",
+ "link": "tree/check-on-click-node",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "check-on-click-node"
+ },
+ {
+ "title": "自动展开父节点",
+ "content": "通过 auto-expand-parent
属性是否展示父节点,默认为 true
。
\n",
+ "link": "tree/auto-expand-parent",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "auto-expand-parent"
+ },
+ {
+ "title": "默认勾选的节点",
+ "content": "通过 default-checked-keys
属性设置默认勾选数据。
\n",
+ "link": "tree/default-checked-keys",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "default-checked-keys"
+ },
+ {
+ "title": "默认展开指定节点",
+ "content": "通过 default-expanded-keys
属性设置默认展开的节点。
\n",
+ "link": "tree/default-expanded-keys",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "default-expanded-keys"
+ },
+ {
+ "title": "当前选中节点标志",
+ "content": "通过 current-node-key
设置当前选中节点标志,要配合 node-key="id" 使用。
\n",
+ "link": "tree/current-node-key",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "current-node-key"
+ },
+ {
+ "title": "默认插槽",
+ "content": "通过 default
插槽,可自定义树节点的内容,参数为 { node, data }。
\n",
+ "link": "tree/slot-deffault",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "slot-deffault"
+ },
+ {
+ "title": "自定义内容区渲染",
+ "content": "通过 render-content
属性设置自定义内容。
\n",
+ "link": "tree/render-content",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "render-content"
+ },
+ {
+ "title": "是否开启多选模式",
+ "content": "通过 show-checkbox
属性设置节点是否可被选择,默认为 false
。
\n",
+ "link": "tree/show-checkbox",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "show-checkbox"
+ },
+ {
+ "title": "可拖拽节点",
+ "content": "通过 draggable
属性设置节点是否可拖拽。
\n",
+ "link": "tree/node-draggable",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "node-draggable"
+ },
+ {
+ "title": "自定义节点能否被拖拽",
+ "content": "通过 allow-drag
钩子函数判断节点能否被拖拽,返回值为 false
时,节点不能拖拽。
\n",
+ "link": "tree/allow-drag",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "allow-drag"
+ },
+ {
+ "title": "自定义目标节点能否被放置",
+ "content": "通过 allow-drop
属性设置拖拽时判断目标节点能否被放置。type 参数有三种情况:'prev'、'inner' 和 'next',分别表示放置在目标节点前、插入至目标节点和放置在目标节点后。
\n",
+ "link": "tree/allow-drop",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "allow-drop"
+ },
+ {
+ "title": "数据节点属性配置",
+ "content": "通过 props
属性设置数据节点属性的配置,该属性的默认值为 {children: 'children',label: 'label',disabled: 'disabled'}
。
\n",
+ "link": "tree/node-props-config",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "node-props-config"
+ },
+ {
+ "title": "懒加载子节点",
+ "content": "通过 lazy
属性设置是否懒加载子节点,需与 load
方法结合使用。默认值为 false
。
\n",
+ "link": "tree/lazy-load-node",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "lazy-load-node"
+ },
+ {
+ "title": "高亮当前选择节点",
+ "content": "通过 highlight-current
属性设置高亮当前选择的节点。
\n",
+ "link": "tree/highlight-current",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "highlight-current"
+ },
+ {
+ "title": "节点过滤",
+ "content": "通过 filter-node-method
属性设置节点过滤的方法。
\n",
+ "link": "tree/filter-node",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "filter-node"
+ },
+ {
+ "title": "手风琴模式",
+ "content": "通过 accordion
属性设置是否每次只打开一个同级树节点展开(手风琴模式),默认值为 false
。
\n",
+ "link": "tree/accordion-mode",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "accordion-mode"
+ },
+ {
+ "title": "水平缩进",
+ "content": "通过 indent
属性控制水平缩进距离,单位 px
,默认值为 18px
。
\n",
+ "link": "tree/indent",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "indent"
+ },
+ {
+ "title": "自定义展开折叠图标",
+ "content": "通过 icon
属性设置树节点展开折叠图标,从 @opentiny/vue-icon
中导入一个图标并进行初始化后传给 icon
属性。
\n",
+ "link": "tree/custom-node-icon",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "custom-node-icon"
+ },
+ {
+ "title": "展开折叠图标分别设置",
+ "content": "通过 expandIcon
属性设置展开的图标,通过 shrinkIcon
属性设置折叠的图标。
\n",
+ "link": "tree/set-tree-icon",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "set-tree-icon"
+ },
+ {
+ "title": "可自定义右键菜单内容",
+ "content": "通过 show-contextmenu
属性设置是否开启弹窗右键菜单,调用实例的 closeMenu
方法可以关闭自定义菜单。
\n",
+ "link": "tree/contextmenu",
+ "component": " Tree 树形控件",
+ "findIntroStr": "右键点击节点弹出自定义菜单",
+ "demoId": "contextmenu"
+ },
+ {
+ "title": "拖拽节点事件",
+ "content": "详细用法参考如下示例",
+ "link": "tree/drag-events",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "drag-events"
+ },
+ {
+ "title": "勾选节点事件",
+ "content": "详细用法参考如下示例",
+ "link": "tree/node-events",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "node-events"
+ },
+ {
+ "title": "鼠标右键点击节点事件",
+ "content": "详细用法参考如下示例",
+ "link": "tree/node-contextmenu",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "node-contextmenu"
+ },
+ {
+ "title": "单选",
+ "content": "通过 show-radio
属性设置树节点的单选特性,默认为 false
,与 show-checkbox
属性互斥,不能同时设置为 true
。
\n",
+ "link": "tree/single-select-radio",
+ "component": " Tree 树形控件",
+ "findIntroStr": "可进行展示有父子层级的数据,支持选择,异步加载等功能。但不推荐用它来展示菜单,展示菜单推荐使用树菜单。",
+ "demoId": "single-select-radio"
+ }
+]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/user-account.json b/examples/docs/resources/pc/demo-config/zh-CN/user-account.json
new file mode 100644
index 000000000..db10f5414
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/user-account.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"user-account/basic-usage","component":" UserAccount 用户账号","findIntroStr":"用户账号组件,用于显示用户账号、注销及自定义功能。","demoId":"basic-usage"},{"title":"自定义服务","content":"设置自定义服务
\n","link":"user-account/custom-service","component":" UserAccount 用户账号","findIntroStr":"用户账号组件,用于显示用户账号、注销及自定义功能。","demoId":"custom-service"},{"title":"自定义功能","content":"通过默认插槽自定义功能
\n","link":"user-account/custom-operation","component":" UserAccount 用户账号","findIntroStr":"用户账号组件,用于显示用户账号、注销及自定义功能。","demoId":"custom-operation"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/user-contact.json b/examples/docs/resources/pc/demo-config/zh-CN/user-contact.json
new file mode 100644
index 000000000..c1f38d017
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/user-contact.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"user-contact/basic-usage","component":" UserContact 联系人","findIntroStr":"UserContact 联系人组件,展现用户账号和基本联系方式,包括用户描述、头像、姓名三种元素,任意组合。","demoId":"basic-usage"},{"title":"设置数据源","content":"可通过 data
设置数据源, imgUrl
表示的是图片路径, userName
表示的是姓名, userDescription
表示的是用户描述。
\n","link":"user-contact/data-source","component":" UserContact 联系人","findIntroStr":"UserContact 联系人组件,展现用户账号和基本联系方式,包括用户描述、头像、姓名三种元素,任意组合。","demoId":"data-source"},{"title":"定制弹框不显示的内容","content":"定制弹框不显示的内容\nshow-img
是否显示头像,值为 true 时显示, false 隐藏,默认 true。\nshow-name
是否显示名字,值为 true 时显示, false 隐藏,默认 true。\nshow-description
是否显示用户描述,值为 true 时显示, false 隐藏,默认 true。
\n","link":"user-contact/not-displayed-content","component":" UserContact 联系人","findIntroStr":"UserContact 联系人组件,展现用户账号和基本联系方式,包括用户描述、头像、姓名三种元素,任意组合。","demoId":"not-displayed-content"},{"title":"自定义默认插槽","content":"详细用法参考如下示例","link":"user-contact/slots-usercontact","component":" UserContact 联系人","findIntroStr":"UserContact 联系人组件,展现用户账号和基本联系方式,包括用户描述、头像、姓名三种元素,任意组合。","demoId":"slots-usercontact"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/user-head.json b/examples/docs/resources/pc/demo-config/zh-CN/user-head.json
new file mode 100644
index 000000000..6cd42481b
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/user-head.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"详细用法参考如下示例","link":"user-head/basic-usage","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"basic-usage"},{"title":"小头像","content":"可通过 min
设置小头像。
\n","link":"user-head/min-user-head","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"min-user-head"},{"title":"圆形头像","content":"可通过 round
设置圆形头像。
\n","link":"user-head/round-user-head","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"round-user-head"},{"title":"文字头像","content":"可通过 type="label"
设置文字头像。
\n","link":"user-head/label-user-head","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"label-user-head"},{"title":"图标头像","content":"可通过 type="icon"
设置图标头像。
\n","link":"user-head/icon-user-head","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"icon-user-head"},{"title":"图片头像","content":"可通过 type="image"
设置图片头像。
\n","link":"user-head/image-user-head","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"image-user-head"},{"title":"头像消息计数","content":"详细用法参考如下示例","link":"user-head/message-count-total","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"message-count-total"},{"title":"使用小红点代替具体数值","content":"详细用法参考如下示例","link":"user-head/message-count-type","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"message-count-type"},{"title":"消息计数上限","content":"详细用法参考如下示例","link":"user-head/message-count-limit","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"message-count-limit"},{"title":"自定义颜色","content":"可通过 color
自定义颜色,图标或文字类型(type属性值为 icon 或 label )的情况下,设置字体颜色和背景色。
\n","link":"user-head/color","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"color"},{"title":"自定义背景颜色","content":"可通过 background-color
自定义背景颜色。
\n","link":"user-head/custom-background-color","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"custom-background-color"},{"title":"自定义图像内容","content":"通过插槽自定义图像内容。
\n","link":"user-head/custom-user-head-content","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"custom-user-head-content"},{"title":"Grid 单元格展示头像","content":"详细用法参考如下示例","link":"user-head/render-user-head-in-grid","component":" UserHead 用户头像","findIntroStr":"UserHead 用户头像组件,用来代表用户或事物,支持图片、图标或字符展示。","demoId":"render-user-head-in-grid"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/user-link.json b/examples/docs/resources/pc/demo-config/zh-CN/user-link.json
new file mode 100644
index 000000000..7a6bf768c
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/user-link.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"注意 UserLink 组件请求的是 mock 数据,其他用户查询不了,开发时请用真实服务。
\n","link":"user-link/basic-usage","component":" UserLink 用户信息链接","findIntroStr":"用户信息链接组件,可显示用户详细信息对话框的特殊链接。","demoId":"basic-usage"},{"title":"显示字段映射","content":"通过 text-field 设置显示字段信息,默认是 userCN\n注意 UserLink 组件请求的是 mock 数据,其他用户查询不了,开发时请用真实服务。
\n","link":"user-link/text-field","component":" UserLink 用户信息链接","findIntroStr":"用户信息链接组件,可显示用户详细信息对话框的特殊链接。","demoId":"text-field"},{"title":"自定义文本分隔符","content":"通过 text-split 自定义文本分隔符,默认是 ','\n注意 UserLink 组件请求的是 mock 数据,其他用户查询不了,开发时请用真实服务。
\n","link":"user-link/text-split","component":" UserLink 用户信息链接","findIntroStr":"用户信息链接组件,可显示用户详细信息对话框的特殊链接。","demoId":"text-split"},{"title":"值字段映射","content":"通过 value-field 设置值字段映射,默认是 userId\n注意 UserLink 组件请求的是 mock 数据,其他用户查询不了,开发时请用真实服务。
\n","link":"user-link/value-field","component":" UserLink 用户信息链接","findIntroStr":"用户信息链接组件,可显示用户详细信息对话框的特殊链接。","demoId":"value-field"},{"title":"自定义值分隔符","content":"通过 value-split 自定义值分隔符,默认是 ','\n注意 UserLink 组件请求的是 mock 数据,其他用户查询不了,开发时请用真实服务。
\n","link":"user-link/value-split","component":" UserLink 用户信息链接","findIntroStr":"用户信息链接组件,可显示用户详细信息对话框的特殊链接。","demoId":"value-split"},{"title":"自定义服务","content":"注意 UserLink 组件请求的是 mock 数据,其他用户查询不了,开发时请用真实服务。
\n","link":"user-link/custom-service","component":" UserLink 用户信息链接","findIntroStr":"用户信息链接组件,可显示用户详细信息对话框的特殊链接。","demoId":"custom-service"},{"title":"基本用法","content":"注意 UserLink 组件请求的是 mock 数据,其他用户查询不了,开发时请用真实服务。
\n","link":"user-link/cache-users","component":" UserLink 用户信息链接","findIntroStr":"用户信息链接组件,可显示用户详细信息对话框的特殊链接。","demoId":"cache-users"},{"title":"自定义默认值","content":"通过 value 自定义默认值,默认为空注意 value 值与 v-model 不能同时使用,同时使用时 v-model 权重更高
\n","link":"user-link/value","component":" UserLink 用户信息链接","findIntroStr":"用户信息链接组件,可显示用户详细信息对话框的特殊链接。","demoId":"value"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/user.json b/examples/docs/resources/pc/demo-config/zh-CN/user.json
new file mode 100644
index 000000000..651df3557
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/user.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"注意 User 组件请求的是 mock 数据,其他用户查询不了,开发时请用真实服务。
\n","link":"user/basic-usage","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"basic-usage"},{"title":"多用户","content":"设置 multiple
属性即可启用多用户形式。
\n","link":"user/multiple-users","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"multiple-users"},{"title":"折叠 Tag","content":"设置 multiple
属性即可启用多用户形式。\n通过 collapse-tags
配置多用户模式下是否展示折叠标签,默认为 false。
\n","link":"user/multiple-users-tag","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"multiple-users-tag"},{"title":"user选择器选项可复制","content":"通过 tag-selectable
输入框中已选择的选项可通过鼠标选择,然后按 Ctrl + C 或右键进行复制。
\n","link":"user/tag-copy","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"tag-copy"},{"title":"user选择器选项可复制","content":"设置 copyable
属性后,可以复制所有的 tag
文本内容以逗号分隔
\n","link":"user/tag-copy-all","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"tag-copy-all"},{"title":"禁用状态","content":"设置 disabled
属性可禁用 User 组件。
\n","link":"user/dynamic-disable","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"dynamic-disable"},{"title":"超出提示","content":"设置 collapse-show-overflow-tooltip
此属性必须设置缓存 cache
为 true
时才会生效。
\n","link":"user/collapse-show-overflow-tooltip","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"collapse-show-overflow-tooltip"},{"title":"值分隔符","content":"通过 value-split
属性可指定多用户下获取到的 value 值中不同用户之间的分隔符,默认为 ,
。\n通过 text-split
属性可指定多用户模式下输入匹配的文本分隔符,默认为 ,
,可选值为 !~%(=+^{/}).!]<->[\\,:*#;
。
\n","link":"user/value-split","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"value-split"},{"title":"取值字段映射","content":"通过 value-field
属性可指定获取到的 value 值的形式,默认为 userId,还包括 userAccount。
\n","link":"user/value-field","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"value-field"},{"title":"显示字段映射","content":"通过 text-field
属性可指定显示用户的哪个字段信息。
\n","link":"user/text-field","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"text-field"},{"title":"缓存用户","content":"通过 cache
属性指定用户数据是否缓存,默认为缓存。\n\ncache-key
属性可以自定义缓存的 key 值,默认为 tiny-user 。\n\ncache-fields
属性用于指定缓存哪些用户数据。
\n","link":"user/cache-users","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"cache-users"},{"title":"延时加载","content":"通过 delay
属性指定延时加载的时间,单位是毫秒。
\n","link":"user/delay-load","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"delay-load"},{"title":"输入完指定长度后加载","content":"通过 suggest-length
属性可指定输入多少个字符后开始请求服务。
\n","link":"user/load-after-input-the-length","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"load-after-input-the-length"},{"title":"值改变事件","content":"通过 change
事件能获取用户类型。
\n","link":"user/event-change","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"event-change"},{"title":"用户查询错误提示","content":"通过 error
事件能获取查询失败的输入。
\n","link":"user/event-error","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"event-error"},{"title":"自定义选项文本","content":"通过 options
插槽设置自定义下拉选项文本。
\n","link":"user/user-options","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"user-options"},{"title":"自定义服务","content":"通过 service
属性可自定义用户服务,当用户在文本框中输入准确的账号时,会在下拉菜单中出现此用户。\n通过 sort-by-fetch-data
联想时下拉框的数据顺序和接口返回的数据顺序一致
\n","link":"user/custom-service","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"custom-service"},{"title":"自定义排序","content":"通过 sortable
属性引用 sortablejs
进行排序。
\n","link":"user/custom-sort","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"custom-sort"},{"title":"尺寸设置","content":"通过 size
属性可指定用户输入框的尺寸,包括 medium、small、mini 三个选项。
\n","link":"user/user-select-size","component":" User 用户","findIntroStr":"通过 Select 选择器组件实现对用户的查询,包括 单用户 和 多用户 两种形式。","demoId":"user-select-size"}]
diff --git a/examples/docs/resources/pc/demo-config/zh-CN/wizard.json b/examples/docs/resources/pc/demo-config/zh-CN/wizard.json
new file mode 100644
index 000000000..4ab29c5fc
--- /dev/null
+++ b/examples/docs/resources/pc/demo-config/zh-CN/wizard.json
@@ -0,0 +1 @@
+[{"title":"基本用法","content":"通过 base-flow
属性设置基本流程图模式,以节点图示的方式,显示流程节点及节点间关系,节点的信息只有节点名称和状态。
\n","link":"wizard/base-flow","component":" Wizard 流程图","findIntroStr":"以特定的图形符号加上说明,表示各流程节点关系的组件。","demoId":"base-flow"},{"title":"页向导流程图","content":"通过 page-guide
属性设置页向导流程图模式,用于导航当前页面与上一页面、下一页面的前后关系,包括流程图区域、页面展示区域、功能按钮区域。
\n","link":"wizard/page-guide","component":" Wizard 流程图","findIntroStr":"以特定的图形符号加上说明,表示各流程节点关系的组件。","demoId":"page-guide"},{"title":"垂直流程图","content":"通过 vertical
属性设置垂直流程图模式,以节点图示的方式竖向显示流程节点及节点间关系,节点的信息包含节点名称、状态、完成时间、用户。
\n","link":"wizard/vertical","component":" Wizard 流程图","findIntroStr":"以特定的图形符号加上说明,表示各流程节点关系的组件。","demoId":"vertical"},{"title":"时间线流程图","content":"通过 time-line-flow
属性设置时间线流程图,通过 time-icon
属性自定义时间图标。以时间点的方式竖向显示流程节点处理信息,包括节点名称、状态、完成时间、用户。
\n","link":"wizard/time-line-flow","component":" Wizard 流程图","findIntroStr":"以特定的图形符号加上说明,表示各流程节点关系的组件。","demoId":"time-line-flow"},{"title":"步骤插槽","content":"页向导流程图里通过 stepbutton
插槽可以自定义步骤按钮或内容。
\n","link":"wizard/slot-step-button","component":" Wizard 流程图","findIntroStr":"以特定的图形符号加上说明,表示各流程节点关系的组件。","demoId":"slot-step-button"},{"title":"基本插槽","content":"通过 base
配置基本内容。
\n","link":"wizard/slot-base","component":" Wizard 流程图","findIntroStr":"以特定的图形符号加上说明,表示各流程节点关系的组件。","demoId":"slot-base"}]
diff --git a/examples/docs/resources/pc/demo/action-menu/basic-usage.vue b/examples/docs/resources/pc/demo/action-menu/basic-usage.vue
new file mode 100644
index 000000000..4a00382ba
--- /dev/null
+++ b/examples/docs/resources/pc/demo/action-menu/basic-usage.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/action-menu/disabled.vue b/examples/docs/resources/pc/demo/action-menu/disabled.vue
new file mode 100644
index 000000000..2af19072c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/action-menu/disabled.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/action-menu/item-click.vue b/examples/docs/resources/pc/demo/action-menu/item-click.vue
similarity index 97%
rename from example/src/demo/pc/action-menu/item-click.vue
rename to examples/docs/resources/pc/demo/action-menu/item-click.vue
index a889f1107..bb4747fcc 100644
--- a/example/src/demo/pc/action-menu/item-click.vue
+++ b/examples/docs/resources/pc/demo/action-menu/item-click.vue
@@ -2,7 +2,7 @@
-
+
+
diff --git a/examples/docs/resources/pc/demo/action-menu/slot-item.vue b/examples/docs/resources/pc/demo/action-menu/slot-item.vue
new file mode 100644
index 000000000..1ce4cbd70
--- /dev/null
+++ b/examples/docs/resources/pc/demo/action-menu/slot-item.vue
@@ -0,0 +1,42 @@
+
+
+
+
+ {{ data.name }}
+
+
+
+
+
diff --git a/example/src/demo/pc/action-menu/spacing.vue b/examples/docs/resources/pc/demo/action-menu/spacing.vue
similarity index 97%
rename from example/src/demo/pc/action-menu/spacing.vue
rename to examples/docs/resources/pc/demo/action-menu/spacing.vue
index a1ee81ef3..85ec24ed9 100644
--- a/example/src/demo/pc/action-menu/spacing.vue
+++ b/examples/docs/resources/pc/demo/action-menu/spacing.vue
@@ -6,7 +6,7 @@
-
diff --git a/example/src/demo/pc/action-menu/visible-change.vue b/examples/docs/resources/pc/demo/action-menu/visible-change.vue
similarity index 100%
rename from example/src/demo/pc/action-menu/visible-change.vue
rename to examples/docs/resources/pc/demo/action-menu/visible-change.vue
diff --git a/examples/docs/resources/pc/demo/alert/base.vue b/examples/docs/resources/pc/demo/alert/base.vue
new file mode 100644
index 000000000..e53fc9507
--- /dev/null
+++ b/examples/docs/resources/pc/demo/alert/base.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/alert/center.vue b/examples/docs/resources/pc/demo/alert/center.vue
new file mode 100644
index 000000000..a01e19a41
--- /dev/null
+++ b/examples/docs/resources/pc/demo/alert/center.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/alert/closable.vue b/examples/docs/resources/pc/demo/alert/closable.vue
similarity index 93%
rename from example/src/demo/pc/alert/closable.vue
rename to examples/docs/resources/pc/demo/alert/closable.vue
index e6cf3141b..64b97ba4a 100644
--- a/example/src/demo/pc/alert/closable.vue
+++ b/examples/docs/resources/pc/demo/alert/closable.vue
@@ -5,7 +5,7 @@
-
diff --git a/example/src/demo/pc/alert/show-icon.vue b/examples/docs/resources/pc/demo/alert/show-icon.vue
similarity index 94%
rename from example/src/demo/pc/alert/show-icon.vue
rename to examples/docs/resources/pc/demo/alert/show-icon.vue
index e86f0eed3..f89f0d712 100644
--- a/example/src/demo/pc/alert/show-icon.vue
+++ b/examples/docs/resources/pc/demo/alert/show-icon.vue
@@ -5,7 +5,7 @@
-
diff --git a/examples/docs/resources/pc/demo/alert/slot-default.vue b/examples/docs/resources/pc/demo/alert/slot-default.vue
new file mode 100644
index 000000000..d318ba0c7
--- /dev/null
+++ b/examples/docs/resources/pc/demo/alert/slot-default.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/alert/title.vue b/examples/docs/resources/pc/demo/alert/title.vue
new file mode 100644
index 000000000..42e34d4b4
--- /dev/null
+++ b/examples/docs/resources/pc/demo/alert/title.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+ 通过 slot 设置自定义 title
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/alert/type.vue b/examples/docs/resources/pc/demo/alert/type.vue
new file mode 100644
index 000000000..45e8e5437
--- /dev/null
+++ b/examples/docs/resources/pc/demo/alert/type.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/amount/amount-disable.vue b/examples/docs/resources/pc/demo/amount/amount-disable.vue
similarity index 96%
rename from example/src/demo/pc/amount/amount-disable.vue
rename to examples/docs/resources/pc/demo/amount/amount-disable.vue
index 6dd2d081e..5a5f18368 100644
--- a/example/src/demo/pc/amount/amount-disable.vue
+++ b/examples/docs/resources/pc/demo/amount/amount-disable.vue
@@ -5,7 +5,7 @@
-
diff --git a/example/src/demo/pc/amount/custom-currency.vue b/examples/docs/resources/pc/demo/amount/custom-currency.vue
similarity index 92%
rename from example/src/demo/pc/amount/custom-currency.vue
rename to examples/docs/resources/pc/demo/amount/custom-currency.vue
index 48277dbcd..ae5c30652 100644
--- a/example/src/demo/pc/amount/custom-currency.vue
+++ b/examples/docs/resources/pc/demo/amount/custom-currency.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/amount/digits-maxlen.vue b/examples/docs/resources/pc/demo/amount/digits-maxlen.vue
similarity index 95%
rename from example/src/demo/pc/amount/digits-maxlen.vue
rename to examples/docs/resources/pc/demo/amount/digits-maxlen.vue
index c608f28a5..d66da887c 100644
--- a/example/src/demo/pc/amount/digits-maxlen.vue
+++ b/examples/docs/resources/pc/demo/amount/digits-maxlen.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/anchor/basic-usage.vue b/examples/docs/resources/pc/demo/anchor/basic-usage.vue
new file mode 100644
index 000000000..5d24aff01
--- /dev/null
+++ b/examples/docs/resources/pc/demo/anchor/basic-usage.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/anchor/is-affix.vue b/examples/docs/resources/pc/demo/anchor/is-affix.vue
new file mode 100644
index 000000000..aa9f584ad
--- /dev/null
+++ b/examples/docs/resources/pc/demo/anchor/is-affix.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/anchor/on-change.vue b/examples/docs/resources/pc/demo/anchor/on-change.vue
new file mode 100644
index 000000000..667524da3
--- /dev/null
+++ b/examples/docs/resources/pc/demo/anchor/on-change.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/anchor/set-container.vue b/examples/docs/resources/pc/demo/anchor/set-container.vue
new file mode 100644
index 000000000..8fbf9fa1c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/anchor/set-container.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/area/area-events.vue b/examples/docs/resources/pc/demo/area/area-events.vue
new file mode 100644
index 000000000..7c292cc2b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/area/area-events.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/area/basic-usage.vue b/examples/docs/resources/pc/demo/area/basic-usage.vue
new file mode 100644
index 000000000..91a81572e
--- /dev/null
+++ b/examples/docs/resources/pc/demo/area/basic-usage.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/area/custom-service.vue b/examples/docs/resources/pc/demo/area/custom-service.vue
new file mode 100644
index 000000000..33da8622c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/area/custom-service.vue
@@ -0,0 +1,157 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/area/disabled.vue b/examples/docs/resources/pc/demo/area/disabled.vue
new file mode 100644
index 000000000..fbca618f8
--- /dev/null
+++ b/examples/docs/resources/pc/demo/area/disabled.vue
@@ -0,0 +1,28 @@
+
+
+ 启用/禁用
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/area/size.vue b/examples/docs/resources/pc/demo/area/size.vue
new file mode 100644
index 000000000..03512e42f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/area/size.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/autocomplete/append-prepend.vue b/examples/docs/resources/pc/demo/autocomplete/append-prepend.vue
similarity index 98%
rename from example/src/demo/pc/autocomplete/append-prepend.vue
rename to examples/docs/resources/pc/demo/autocomplete/append-prepend.vue
index f6c9af7ce..e72428e86 100644
--- a/example/src/demo/pc/autocomplete/append-prepend.vue
+++ b/examples/docs/resources/pc/demo/autocomplete/append-prepend.vue
@@ -7,7 +7,7 @@
-
+
+
diff --git a/examples/docs/resources/pc/demo/autocomplete/clearable.vue b/examples/docs/resources/pc/demo/autocomplete/clearable.vue
new file mode 100644
index 000000000..03d325622
--- /dev/null
+++ b/examples/docs/resources/pc/demo/autocomplete/clearable.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/autocomplete/cust-template.vue b/examples/docs/resources/pc/demo/autocomplete/cust-template.vue
similarity index 98%
rename from example/src/demo/pc/autocomplete/cust-template.vue
rename to examples/docs/resources/pc/demo/autocomplete/cust-template.vue
index a085a452c..6cb5e7a1d 100644
--- a/example/src/demo/pc/autocomplete/cust-template.vue
+++ b/examples/docs/resources/pc/demo/autocomplete/cust-template.vue
@@ -9,7 +9,7 @@
-
+
+
diff --git a/example/src/demo/pc/autocomplete/debounce.vue b/examples/docs/resources/pc/demo/autocomplete/debounce.vue
similarity index 98%
rename from example/src/demo/pc/autocomplete/debounce.vue
rename to examples/docs/resources/pc/demo/autocomplete/debounce.vue
index 040718c0a..729e8f4c8 100644
--- a/example/src/demo/pc/autocomplete/debounce.vue
+++ b/examples/docs/resources/pc/demo/autocomplete/debounce.vue
@@ -4,7 +4,7 @@
-
+
+
diff --git a/examples/docs/resources/pc/demo/autocomplete/hide-loading.vue b/examples/docs/resources/pc/demo/autocomplete/hide-loading.vue
new file mode 100644
index 000000000..262ac93c7
--- /dev/null
+++ b/examples/docs/resources/pc/demo/autocomplete/hide-loading.vue
@@ -0,0 +1,79 @@
+
+
+
+ 默认有加载图标:
+
+
+ 隐藏加载图标:
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/autocomplete/highlight-first-item.vue b/examples/docs/resources/pc/demo/autocomplete/highlight-first-item.vue
similarity index 98%
rename from example/src/demo/pc/autocomplete/highlight-first-item.vue
rename to examples/docs/resources/pc/demo/autocomplete/highlight-first-item.vue
index 0bfbabd0b..d1813664c 100644
--- a/example/src/demo/pc/autocomplete/highlight-first-item.vue
+++ b/examples/docs/resources/pc/demo/autocomplete/highlight-first-item.vue
@@ -4,7 +4,7 @@
-
+
+
diff --git a/example/src/demo/pc/autocomplete/prefix-suffix-slot.vue b/examples/docs/resources/pc/demo/autocomplete/prefix-suffix-slot.vue
similarity index 98%
rename from example/src/demo/pc/autocomplete/prefix-suffix-slot.vue
rename to examples/docs/resources/pc/demo/autocomplete/prefix-suffix-slot.vue
index 4f3d23a84..02a6b77e5 100644
--- a/example/src/demo/pc/autocomplete/prefix-suffix-slot.vue
+++ b/examples/docs/resources/pc/demo/autocomplete/prefix-suffix-slot.vue
@@ -11,7 +11,7 @@
-
+
+
diff --git a/example/src/demo/pc/autocomplete/select-event.vue b/examples/docs/resources/pc/demo/autocomplete/select-event.vue
similarity index 98%
rename from example/src/demo/pc/autocomplete/select-event.vue
rename to examples/docs/resources/pc/demo/autocomplete/select-event.vue
index 83f68fed5..01af89e0a 100644
--- a/example/src/demo/pc/autocomplete/select-event.vue
+++ b/examples/docs/resources/pc/demo/autocomplete/select-event.vue
@@ -10,7 +10,7 @@
-
+
+
diff --git a/example/src/demo/pc/autocomplete/value-key.vue b/examples/docs/resources/pc/demo/autocomplete/value-key.vue
similarity index 75%
rename from example/src/demo/pc/autocomplete/value-key.vue
rename to examples/docs/resources/pc/demo/autocomplete/value-key.vue
index 004d027fe..dd35df3bc 100644
--- a/example/src/demo/pc/autocomplete/value-key.vue
+++ b/examples/docs/resources/pc/demo/autocomplete/value-key.vue
@@ -1,10 +1,10 @@
-
+
-
diff --git a/example/src/demo/pc/badge/badge-class.vue b/examples/docs/resources/pc/demo/badge/badge-class.vue
similarity index 100%
rename from example/src/demo/pc/badge/badge-class.vue
rename to examples/docs/resources/pc/demo/badge/badge-class.vue
diff --git a/examples/docs/resources/pc/demo/badge/base.vue b/examples/docs/resources/pc/demo/badge/base.vue
new file mode 100644
index 000000000..8dd739fb9
--- /dev/null
+++ b/examples/docs/resources/pc/demo/badge/base.vue
@@ -0,0 +1,13 @@
+
+ 我的待办
+
+
+
diff --git a/example/src/demo/pc/badge/dynamic-hidden.vue b/examples/docs/resources/pc/demo/badge/dynamic-hidden.vue
similarity index 96%
rename from example/src/demo/pc/badge/dynamic-hidden.vue
rename to examples/docs/resources/pc/demo/badge/dynamic-hidden.vue
index 2b28332c2..581265653 100644
--- a/example/src/demo/pc/badge/dynamic-hidden.vue
+++ b/examples/docs/resources/pc/demo/badge/dynamic-hidden.vue
@@ -6,7 +6,7 @@
-
diff --git a/examples/docs/resources/pc/demo/badge/max.vue b/examples/docs/resources/pc/demo/badge/max.vue
new file mode 100644
index 000000000..594b70cb1
--- /dev/null
+++ b/examples/docs/resources/pc/demo/badge/max.vue
@@ -0,0 +1,13 @@
+
+ 最大值显示
+
+
+
diff --git a/example/src/demo/pc/badge/offset.vue b/examples/docs/resources/pc/demo/badge/offset.vue
similarity index 100%
rename from example/src/demo/pc/badge/offset.vue
rename to examples/docs/resources/pc/demo/badge/offset.vue
diff --git a/examples/docs/resources/pc/demo/badge/slot-content.vue b/examples/docs/resources/pc/demo/badge/slot-content.vue
new file mode 100644
index 000000000..c8cd3f959
--- /dev/null
+++ b/examples/docs/resources/pc/demo/badge/slot-content.vue
@@ -0,0 +1,22 @@
+
+
+ 自定义内容插槽
+ 自定义
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/badge/slot-default.vue b/examples/docs/resources/pc/demo/badge/slot-default.vue
new file mode 100644
index 000000000..39c122311
--- /dev/null
+++ b/examples/docs/resources/pc/demo/badge/slot-default.vue
@@ -0,0 +1,17 @@
+
+
+
+ 自定义默认插槽
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/badge/target.vue b/examples/docs/resources/pc/demo/badge/target.vue
new file mode 100644
index 000000000..8e8535666
--- /dev/null
+++ b/examples/docs/resources/pc/demo/badge/target.vue
@@ -0,0 +1,17 @@
+
+
+ 当前标签打开
+
+ 新建标签打开
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/badge/type.vue b/examples/docs/resources/pc/demo/badge/type.vue
new file mode 100644
index 000000000..4f74c7634
--- /dev/null
+++ b/examples/docs/resources/pc/demo/badge/type.vue
@@ -0,0 +1,25 @@
+
+
+ 默认类型
+
+ danger 类型
+
+ primary 类型
+
+ success 类型
+
+ warning 类型
+
+ info 类型
+
+
+
+
diff --git a/example/src/demo/pc/breadcrumb/base-on-route.vue b/examples/docs/resources/pc/demo/breadcrumb/base-on-route.vue
similarity index 95%
rename from example/src/demo/pc/breadcrumb/base-on-route.vue
rename to examples/docs/resources/pc/demo/breadcrumb/base-on-route.vue
index b286302bb..c66839695 100644
--- a/example/src/demo/pc/breadcrumb/base-on-route.vue
+++ b/examples/docs/resources/pc/demo/breadcrumb/base-on-route.vue
@@ -4,7 +4,7 @@
-
diff --git a/examples/docs/resources/pc/demo/breadcrumb/options.vue b/examples/docs/resources/pc/demo/breadcrumb/options.vue
new file mode 100644
index 000000000..e11fb1c78
--- /dev/null
+++ b/examples/docs/resources/pc/demo/breadcrumb/options.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/breadcrumb/separator.vue b/examples/docs/resources/pc/demo/breadcrumb/separator.vue
similarity index 98%
rename from example/src/demo/pc/breadcrumb/separator.vue
rename to examples/docs/resources/pc/demo/breadcrumb/separator.vue
index 933b43c97..55524a5c5 100644
--- a/example/src/demo/pc/breadcrumb/separator.vue
+++ b/examples/docs/resources/pc/demo/breadcrumb/separator.vue
@@ -18,7 +18,7 @@
-
diff --git a/example/src/demo/pc/bulletin-board/active-name.vue b/examples/docs/resources/pc/demo/bulletin-board/active-name.vue
similarity index 99%
rename from example/src/demo/pc/bulletin-board/active-name.vue
rename to examples/docs/resources/pc/demo/bulletin-board/active-name.vue
index ef4b9a1b2..00e05643f 100644
--- a/example/src/demo/pc/bulletin-board/active-name.vue
+++ b/examples/docs/resources/pc/demo/bulletin-board/active-name.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/bulletin-board/icon.vue b/examples/docs/resources/pc/demo/bulletin-board/icon.vue
new file mode 100644
index 000000000..6abb28b73
--- /dev/null
+++ b/examples/docs/resources/pc/demo/bulletin-board/icon.vue
@@ -0,0 +1,101 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/bulletin-board/more-link.vue b/examples/docs/resources/pc/demo/bulletin-board/more-link.vue
similarity index 99%
rename from example/src/demo/pc/bulletin-board/more-link.vue
rename to examples/docs/resources/pc/demo/bulletin-board/more-link.vue
index 1c9aeaf36..ef62634b7 100644
--- a/example/src/demo/pc/bulletin-board/more-link.vue
+++ b/examples/docs/resources/pc/demo/bulletin-board/more-link.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/bulletin-board/tab-title.vue b/examples/docs/resources/pc/demo/bulletin-board/tab-title.vue
similarity index 99%
rename from example/src/demo/pc/bulletin-board/tab-title.vue
rename to examples/docs/resources/pc/demo/bulletin-board/tab-title.vue
index dd09e0689..58a6b8e83 100644
--- a/example/src/demo/pc/bulletin-board/tab-title.vue
+++ b/examples/docs/resources/pc/demo/bulletin-board/tab-title.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/bulletin-board/url.vue b/examples/docs/resources/pc/demo/bulletin-board/url.vue
similarity index 96%
rename from example/src/demo/pc/bulletin-board/url.vue
rename to examples/docs/resources/pc/demo/bulletin-board/url.vue
index 4361103e7..e35afca70 100644
--- a/example/src/demo/pc/bulletin-board/url.vue
+++ b/examples/docs/resources/pc/demo/bulletin-board/url.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/button-group/data.vue b/examples/docs/resources/pc/demo/button-group/data.vue
new file mode 100644
index 000000000..e16138c64
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button-group/data.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/button-group/disabled.vue b/examples/docs/resources/pc/demo/button-group/disabled.vue
new file mode 100644
index 000000000..1e90b0e96
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button-group/disabled.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/button-group/event-edit.vue b/examples/docs/resources/pc/demo/button-group/event-edit.vue
similarity index 97%
rename from example/src/demo/pc/button-group/event-edit.vue
rename to examples/docs/resources/pc/demo/button-group/event-edit.vue
index ed9d2f2ad..f13da07ca 100644
--- a/example/src/demo/pc/button-group/event-edit.vue
+++ b/examples/docs/resources/pc/demo/button-group/event-edit.vue
@@ -4,7 +4,7 @@
-
diff --git a/example/src/demo/pc/button-group/show-edit.vue b/examples/docs/resources/pc/demo/button-group/show-edit.vue
similarity index 96%
rename from example/src/demo/pc/button-group/show-edit.vue
rename to examples/docs/resources/pc/demo/button-group/show-edit.vue
index b716d0243..59be53a7e 100644
--- a/example/src/demo/pc/button-group/show-edit.vue
+++ b/examples/docs/resources/pc/demo/button-group/show-edit.vue
@@ -4,7 +4,7 @@
-
diff --git a/examples/docs/resources/pc/demo/button-group/slot-default.vue b/examples/docs/resources/pc/demo/button-group/slot-default.vue
new file mode 100644
index 000000000..a2bd0891c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button-group/slot-default.vue
@@ -0,0 +1,18 @@
+
+
+ Button1
+ Button2
+ Button3
+
+
+
+
diff --git a/example/src/demo/pc/button-group/text-value-field.vue b/examples/docs/resources/pc/demo/button-group/text-value-field.vue
similarity index 96%
rename from example/src/demo/pc/button-group/text-value-field.vue
rename to examples/docs/resources/pc/demo/button-group/text-value-field.vue
index 4d5a0a8b0..565f387ac 100644
--- a/example/src/demo/pc/button-group/text-value-field.vue
+++ b/examples/docs/resources/pc/demo/button-group/text-value-field.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/button/base.vue b/examples/docs/resources/pc/demo/button/base.vue
new file mode 100644
index 000000000..794ac1f72
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/base.vue
@@ -0,0 +1,57 @@
+
+
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+ 朴素按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+ 圆角按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/button/circle.vue b/examples/docs/resources/pc/demo/button/circle.vue
similarity index 98%
rename from example/src/demo/pc/button/circle.vue
rename to examples/docs/resources/pc/demo/button/circle.vue
index 7060a778d..ac9f44d03 100644
--- a/example/src/demo/pc/button/circle.vue
+++ b/examples/docs/resources/pc/demo/button/circle.vue
@@ -19,7 +19,7 @@
-
diff --git a/examples/docs/resources/pc/demo/button/dynamic-disabled.vue b/examples/docs/resources/pc/demo/button/dynamic-disabled.vue
new file mode 100644
index 000000000..b4cddfba3
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/dynamic-disabled.vue
@@ -0,0 +1,40 @@
+
+
+
+
+ {{ disabled ? '点击启用按钮' : '点击禁用按钮' }}
+
+
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/button/icon.vue b/examples/docs/resources/pc/demo/button/icon.vue
new file mode 100644
index 000000000..d5977aebd
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/icon.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/button/image.vue b/examples/docs/resources/pc/demo/button/image.vue
similarity index 80%
rename from example/src/demo/pc/button/image.vue
rename to examples/docs/resources/pc/demo/button/image.vue
index 6d6c4f794..126b00e0e 100644
--- a/example/src/demo/pc/button/image.vue
+++ b/examples/docs/resources/pc/demo/button/image.vue
@@ -5,7 +5,7 @@
-
diff --git a/examples/docs/resources/pc/demo/button/plain.vue b/examples/docs/resources/pc/demo/button/plain.vue
new file mode 100644
index 000000000..18e033749
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/plain.vue
@@ -0,0 +1,20 @@
+
+
+ 朴素按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/button/reset-time.vue b/examples/docs/resources/pc/demo/button/reset-time.vue
new file mode 100644
index 000000000..11147a8e1
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/reset-time.vue
@@ -0,0 +1,17 @@
+
+
+ 默认禁用
+ 无禁用
+ 禁用 5 秒
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/button/round.vue b/examples/docs/resources/pc/demo/button/round.vue
new file mode 100644
index 000000000..33167bd25
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/round.vue
@@ -0,0 +1,20 @@
+
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/button/size.vue b/examples/docs/resources/pc/demo/button/size.vue
new file mode 100644
index 000000000..8b0b50f3e
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/size.vue
@@ -0,0 +1,19 @@
+
+
+ 默认按钮
+ 超大按钮
+ 中等按钮
+ 小型按钮
+ 超小按钮
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/button/slot-default.vue b/examples/docs/resources/pc/demo/button/slot-default.vue
new file mode 100644
index 000000000..11ba7bfaa
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/slot-default.vue
@@ -0,0 +1,30 @@
+
+
+
默认按钮
+
+ 上传
+
+
+
+
+ 图片按钮
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/button/text.vue b/examples/docs/resources/pc/demo/button/text.vue
new file mode 100644
index 000000000..3391778db
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/text.vue
@@ -0,0 +1,16 @@
+
+
+ 文本按钮
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/button/type.vue b/examples/docs/resources/pc/demo/button/type.vue
new file mode 100644
index 000000000..0b7ab2934
--- /dev/null
+++ b/examples/docs/resources/pc/demo/button/type.vue
@@ -0,0 +1,21 @@
+
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+ 文本按钮
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/calendar/basic-usage.vue b/examples/docs/resources/pc/demo/calendar/basic-usage.vue
new file mode 100644
index 000000000..8a7f36adb
--- /dev/null
+++ b/examples/docs/resources/pc/demo/calendar/basic-usage.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/calendar/calendar-mode.vue b/examples/docs/resources/pc/demo/calendar/calendar-mode.vue
similarity index 90%
rename from example/src/demo/pc/calendar/calendar-mode.vue
rename to examples/docs/resources/pc/demo/calendar/calendar-mode.vue
index d9c697553..db2becf03 100644
--- a/example/src/demo/pc/calendar/calendar-mode.vue
+++ b/examples/docs/resources/pc/demo/calendar/calendar-mode.vue
@@ -2,7 +2,7 @@
-
+
+
diff --git a/example/src/demo/pc/carousel/card-mode.vue b/examples/docs/resources/pc/demo/carousel/card-mode.vue
similarity index 86%
rename from example/src/demo/pc/carousel/card-mode.vue
rename to examples/docs/resources/pc/demo/carousel/card-mode.vue
index 2e1f8dcb0..00d54710a 100644
--- a/example/src/demo/pc/carousel/card-mode.vue
+++ b/examples/docs/resources/pc/demo/carousel/card-mode.vue
@@ -6,7 +6,7 @@
-
+
+
diff --git a/example/src/demo/pc/carousel/up-down-carousel.vue b/examples/docs/resources/pc/demo/carousel/up-down-carousel.vue
similarity index 86%
rename from example/src/demo/pc/carousel/up-down-carousel.vue
rename to examples/docs/resources/pc/demo/carousel/up-down-carousel.vue
index 41a058b0b..0078850a3 100644
--- a/example/src/demo/pc/carousel/up-down-carousel.vue
+++ b/examples/docs/resources/pc/demo/carousel/up-down-carousel.vue
@@ -6,7 +6,7 @@
-
+
+
diff --git a/example/src/demo/pc/cascader-panel/cascader-panel-props.vue b/examples/docs/resources/pc/demo/cascader-panel/cascader-panel-props.vue
similarity index 99%
rename from example/src/demo/pc/cascader-panel/cascader-panel-props.vue
rename to examples/docs/resources/pc/demo/cascader-panel/cascader-panel-props.vue
index 23b8d3bb4..dacbb2852 100644
--- a/example/src/demo/pc/cascader-panel/cascader-panel-props.vue
+++ b/examples/docs/resources/pc/demo/cascader-panel/cascader-panel-props.vue
@@ -13,7 +13,7 @@
>
-
+
+
diff --git a/example/src/demo/pc/cascader-panel/custom-option-content.vue b/examples/docs/resources/pc/demo/cascader-panel/custom-option-content.vue
similarity index 99%
rename from example/src/demo/pc/cascader-panel/custom-option-content.vue
rename to examples/docs/resources/pc/demo/cascader-panel/custom-option-content.vue
index 0a8ac6198..b9c4ee032 100644
--- a/example/src/demo/pc/cascader-panel/custom-option-content.vue
+++ b/examples/docs/resources/pc/demo/cascader-panel/custom-option-content.vue
@@ -7,7 +7,7 @@
-
diff --git a/examples/docs/resources/pc/demo/cascader/basic-usage.vue b/examples/docs/resources/pc/demo/cascader/basic-usage.vue
new file mode 100644
index 000000000..be6f4e85f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/cascader/basic-usage.vue
@@ -0,0 +1,212 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/cascader/check-strictly-multiple.vue b/examples/docs/resources/pc/demo/cascader/check-strictly-multiple.vue
similarity index 81%
rename from example/src/demo/pc/cascader/check-strictly-multiple.vue
rename to examples/docs/resources/pc/demo/cascader/check-strictly-multiple.vue
index 0ac3304df..e518fae7e 100644
--- a/example/src/demo/pc/cascader/check-strictly-multiple.vue
+++ b/examples/docs/resources/pc/demo/cascader/check-strictly-multiple.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/cascader/clearable.vue b/examples/docs/resources/pc/demo/cascader/clearable.vue
new file mode 100644
index 000000000..a09aca9d0
--- /dev/null
+++ b/examples/docs/resources/pc/demo/cascader/clearable.vue
@@ -0,0 +1,220 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/cascader/collapse-tags.vue b/examples/docs/resources/pc/demo/cascader/collapse-tags.vue
new file mode 100644
index 000000000..153506fbd
--- /dev/null
+++ b/examples/docs/resources/pc/demo/cascader/collapse-tags.vue
@@ -0,0 +1,217 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/cascader/default-multiple.vue b/examples/docs/resources/pc/demo/cascader/default-multiple.vue
similarity index 84%
rename from example/src/demo/pc/cascader/default-multiple.vue
rename to examples/docs/resources/pc/demo/cascader/default-multiple.vue
index ce6f6ba07..c9dd89008 100644
--- a/example/src/demo/pc/cascader/default-multiple.vue
+++ b/examples/docs/resources/pc/demo/cascader/default-multiple.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/cascader/expand-trigger.vue b/examples/docs/resources/pc/demo/cascader/expand-trigger.vue
similarity index 99%
rename from example/src/demo/pc/cascader/expand-trigger.vue
rename to examples/docs/resources/pc/demo/cascader/expand-trigger.vue
index cac223f82..bb3b08024 100644
--- a/example/src/demo/pc/cascader/expand-trigger.vue
+++ b/examples/docs/resources/pc/demo/cascader/expand-trigger.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/cascader/filterable-multiple.vue b/examples/docs/resources/pc/demo/cascader/filterable-multiple.vue
similarity index 99%
rename from example/src/demo/pc/cascader/filterable-multiple.vue
rename to examples/docs/resources/pc/demo/cascader/filterable-multiple.vue
index eeab4d5a9..cb2b3679a 100644
--- a/example/src/demo/pc/cascader/filterable-multiple.vue
+++ b/examples/docs/resources/pc/demo/cascader/filterable-multiple.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/cascader/props-children.vue b/examples/docs/resources/pc/demo/cascader/props-children.vue
similarity index 99%
rename from example/src/demo/pc/cascader/props-children.vue
rename to examples/docs/resources/pc/demo/cascader/props-children.vue
index 0475f08c3..7f6ff0d11 100644
--- a/example/src/demo/pc/cascader/props-children.vue
+++ b/examples/docs/resources/pc/demo/cascader/props-children.vue
@@ -11,7 +11,7 @@
>
-
diff --git a/examples/docs/resources/pc/demo/chart/bar/base.vue b/examples/docs/resources/pc/demo/chart/bar/base.vue
new file mode 100644
index 000000000..f00ac48d6
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/bar/base.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/bar/demo2.vue b/examples/docs/resources/pc/demo/chart/bar/demo2.vue
new file mode 100644
index 000000000..a7a681d5f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/bar/demo2.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/bar/demo3.vue b/examples/docs/resources/pc/demo/chart/bar/demo3.vue
new file mode 100644
index 000000000..4623362a5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/bar/demo3.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/bar/demo4.vue b/examples/docs/resources/pc/demo/chart/bar/demo4.vue
new file mode 100644
index 000000000..43de33986
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/bar/demo4.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/bar/demo5.vue b/examples/docs/resources/pc/demo/chart/bar/demo5.vue
new file mode 100644
index 000000000..37c53e1cd
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/bar/demo5.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/bar/demo6.vue b/examples/docs/resources/pc/demo/chart/bar/demo6.vue
new file mode 100644
index 000000000..beea02094
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/bar/demo6.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/bar/demo7.vue b/examples/docs/resources/pc/demo/chart/bar/demo7.vue
new file mode 100644
index 000000000..b338cec49
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/bar/demo7.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/base.vue b/examples/docs/resources/pc/demo/chart/base.vue
new file mode 100644
index 000000000..b6aa8b47b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/base.vue
@@ -0,0 +1,81 @@
+
+
+
折线图
+
+
+
+
+
+
柱状图
+
+
+
+
+
饼图
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/bmap/base.vue b/examples/docs/resources/pc/demo/chart/bmap/base.vue
new file mode 100644
index 000000000..d8cd07156
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/bmap/base.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/boxplot/base.vue b/examples/docs/resources/pc/demo/chart/boxplot/base.vue
new file mode 100644
index 000000000..4e19e18cb
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/boxplot/base.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/boxplot/multiple.vue b/examples/docs/resources/pc/demo/chart/boxplot/multiple.vue
new file mode 100644
index 000000000..cbb803d94
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/boxplot/multiple.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/boxplot/vertical.vue b/examples/docs/resources/pc/demo/chart/boxplot/vertical.vue
new file mode 100644
index 000000000..0f5a4bcc2
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/boxplot/vertical.vue
@@ -0,0 +1,105 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/candle/base.vue b/examples/docs/resources/pc/demo/chart/candle/base.vue
new file mode 100644
index 000000000..9ba97f21f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/candle/base.vue
@@ -0,0 +1,329 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/candle/demo2.vue b/examples/docs/resources/pc/demo/chart/candle/demo2.vue
new file mode 100644
index 000000000..f11694a36
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/candle/demo2.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/candle/demo3.vue b/examples/docs/resources/pc/demo/chart/candle/demo3.vue
new file mode 100644
index 000000000..6fab3245a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/candle/demo3.vue
@@ -0,0 +1,332 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/candle/demo4.vue b/examples/docs/resources/pc/demo/chart/candle/demo4.vue
new file mode 100644
index 000000000..06440cadc
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/candle/demo4.vue
@@ -0,0 +1,333 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/candle/demo5.vue b/examples/docs/resources/pc/demo/chart/candle/demo5.vue
new file mode 100644
index 000000000..ec8fd54a6
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/candle/demo5.vue
@@ -0,0 +1,340 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/candle/demo6.vue b/examples/docs/resources/pc/demo/chart/candle/demo6.vue
new file mode 100644
index 000000000..3281fc78b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/candle/demo6.vue
@@ -0,0 +1,333 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/candle/demo7.vue b/examples/docs/resources/pc/demo/chart/candle/demo7.vue
new file mode 100644
index 000000000..3552a8540
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/candle/demo7.vue
@@ -0,0 +1,334 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/events/base.vue b/examples/docs/resources/pc/demo/chart/events/base.vue
new file mode 100644
index 000000000..1e5d97a6f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/events/base.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/funnel/base.vue b/examples/docs/resources/pc/demo/chart/funnel/base.vue
new file mode 100644
index 000000000..9aa6d74a0
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/funnel/base.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/funnel/demo2.vue b/examples/docs/resources/pc/demo/chart/funnel/demo2.vue
new file mode 100644
index 000000000..3e2cdec7d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/funnel/demo2.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/funnel/demo3.vue b/examples/docs/resources/pc/demo/chart/funnel/demo3.vue
new file mode 100644
index 000000000..ea78c250d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/funnel/demo3.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/funnel/demo4.vue b/examples/docs/resources/pc/demo/chart/funnel/demo4.vue
new file mode 100644
index 000000000..fe0d537d2
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/funnel/demo4.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/funnel/demo5.vue b/examples/docs/resources/pc/demo/chart/funnel/demo5.vue
new file mode 100644
index 000000000..8c6c696ce
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/funnel/demo5.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/funnel/demo6.vue b/examples/docs/resources/pc/demo/chart/funnel/demo6.vue
new file mode 100644
index 000000000..381398a97
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/funnel/demo6.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/funnel/demo7.vue b/examples/docs/resources/pc/demo/chart/funnel/demo7.vue
new file mode 100644
index 000000000..dfc263dcc
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/funnel/demo7.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/gauge/base.vue b/examples/docs/resources/pc/demo/chart/gauge/base.vue
new file mode 100644
index 000000000..d1f382739
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/gauge/base.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/gauge/demo2.vue b/examples/docs/resources/pc/demo/chart/gauge/demo2.vue
new file mode 100644
index 000000000..90e66e829
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/gauge/demo2.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/gauge/demo3.vue b/examples/docs/resources/pc/demo/chart/gauge/demo3.vue
new file mode 100644
index 000000000..0c985f2d9
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/gauge/demo3.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/gauge/demo4.vue b/examples/docs/resources/pc/demo/chart/gauge/demo4.vue
new file mode 100644
index 000000000..b7c031ae6
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/gauge/demo4.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/gauge/demo5.vue b/examples/docs/resources/pc/demo/chart/gauge/demo5.vue
new file mode 100644
index 000000000..a1476afdb
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/gauge/demo5.vue
@@ -0,0 +1,261 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/graph/base.vue b/examples/docs/resources/pc/demo/chart/graph/base.vue
new file mode 100644
index 000000000..041761b09
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/graph/base.vue
@@ -0,0 +1,127 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/graph/demo2.vue b/examples/docs/resources/pc/demo/chart/graph/demo2.vue
new file mode 100644
index 000000000..f2ea0b9d7
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/graph/demo2.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/graph/demo3.vue b/examples/docs/resources/pc/demo/chart/graph/demo3.vue
new file mode 100644
index 000000000..ee32923e7
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/graph/demo3.vue
@@ -0,0 +1,356 @@
+
+
+ 增加
+ 删除
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/heatmap/base.vue b/examples/docs/resources/pc/demo/chart/heatmap/base.vue
new file mode 100644
index 000000000..31dc948af
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/heatmap/base.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/heatmap/demo2.vue b/examples/docs/resources/pc/demo/chart/heatmap/demo2.vue
new file mode 100644
index 000000000..40dd246db
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/heatmap/demo2.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/heatmap/demo3.vue b/examples/docs/resources/pc/demo/chart/heatmap/demo3.vue
new file mode 100644
index 000000000..74626e1c1
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/heatmap/demo3.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/heatmap/demo4.vue b/examples/docs/resources/pc/demo/chart/heatmap/demo4.vue
new file mode 100644
index 000000000..a76ab3352
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/heatmap/demo4.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/heatmap/demo5.vue b/examples/docs/resources/pc/demo/chart/heatmap/demo5.vue
new file mode 100644
index 000000000..a1bda085a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/heatmap/demo5.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/histogram/base.vue b/examples/docs/resources/pc/demo/chart/histogram/base.vue
new file mode 100644
index 000000000..2a1cf6fb5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/histogram/base.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/histogram/demo2.vue b/examples/docs/resources/pc/demo/chart/histogram/demo2.vue
new file mode 100644
index 000000000..c37d37093
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/histogram/demo2.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/histogram/demo3.vue b/examples/docs/resources/pc/demo/chart/histogram/demo3.vue
new file mode 100644
index 000000000..c3a5efa2b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/histogram/demo3.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/histogram/demo4.vue b/examples/docs/resources/pc/demo/chart/histogram/demo4.vue
new file mode 100644
index 000000000..9dc44b2a1
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/histogram/demo4.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/histogram/demo5.vue b/examples/docs/resources/pc/demo/chart/histogram/demo5.vue
new file mode 100644
index 000000000..e34eabe86
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/histogram/demo5.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/histogram/demo6.vue b/examples/docs/resources/pc/demo/chart/histogram/demo6.vue
new file mode 100644
index 000000000..f4373de4a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/histogram/demo6.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/histogram/demo7.vue b/examples/docs/resources/pc/demo/chart/histogram/demo7.vue
new file mode 100644
index 000000000..1b92edc91
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/histogram/demo7.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/histogram/demo8.vue b/examples/docs/resources/pc/demo/chart/histogram/demo8.vue
new file mode 100644
index 000000000..a0397d891
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/histogram/demo8.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/base.vue b/examples/docs/resources/pc/demo/chart/line/base.vue
new file mode 100644
index 000000000..2de6fbbf0
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/base.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/demo2.vue b/examples/docs/resources/pc/demo/chart/line/demo2.vue
new file mode 100644
index 000000000..ece96af9a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/demo2.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/demo3.vue b/examples/docs/resources/pc/demo/chart/line/demo3.vue
new file mode 100644
index 000000000..fa08441ed
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/demo3.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/demo4.vue b/examples/docs/resources/pc/demo/chart/line/demo4.vue
new file mode 100644
index 000000000..b6f4a3fa1
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/demo4.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/demo5.vue b/examples/docs/resources/pc/demo/chart/line/demo5.vue
new file mode 100644
index 000000000..8209eacfa
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/demo5.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/demo6.vue b/examples/docs/resources/pc/demo/chart/line/demo6.vue
new file mode 100644
index 000000000..d06f0bc63
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/demo6.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/demo7.vue b/examples/docs/resources/pc/demo/chart/line/demo7.vue
new file mode 100644
index 000000000..a73407be5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/demo7.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/demo8.vue b/examples/docs/resources/pc/demo/chart/line/demo8.vue
new file mode 100644
index 000000000..47c26e99f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/demo8.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/line/demo9.vue b/examples/docs/resources/pc/demo/chart/line/demo9.vue
new file mode 100644
index 000000000..48f7685dc
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/line/demo9.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/liquidfill/base.vue b/examples/docs/resources/pc/demo/chart/liquidfill/base.vue
new file mode 100644
index 000000000..8cb982a2f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/liquidfill/base.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/liquidfill/demo2.vue b/examples/docs/resources/pc/demo/chart/liquidfill/demo2.vue
new file mode 100644
index 000000000..994facc49
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/liquidfill/demo2.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/liquidfill/demo3.vue b/examples/docs/resources/pc/demo/chart/liquidfill/demo3.vue
new file mode 100644
index 000000000..180255bf0
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/liquidfill/demo3.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/liquidfill/demo4.vue b/examples/docs/resources/pc/demo/chart/liquidfill/demo4.vue
new file mode 100644
index 000000000..1c7011aba
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/liquidfill/demo4.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/liquidfill/demo5.vue b/examples/docs/resources/pc/demo/chart/liquidfill/demo5.vue
new file mode 100644
index 000000000..e3251ccf8
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/liquidfill/demo5.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/map/base.vue b/examples/docs/resources/pc/demo/chart/map/base.vue
new file mode 100644
index 000000000..12855e93f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/map/base.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/map/china.js b/examples/docs/resources/pc/demo/chart/map/china.js
new file mode 100644
index 000000000..439cea9d0
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/map/china.js
@@ -0,0 +1,876 @@
+export default {
+ type: 'FeatureCollection',
+ features: [
+ {
+ id: '710000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@°Ü¯Û'],
+ [
+ '@@ƛĴÕƊÉɼģºðʀ\\ƎsÆNŌÔĚänÜƤɊĂǀĆĴĤNJŨxĚĮǂƺòƌâÔ®ĮXŦţƸZûÐƕƑGđ¨ĭMó·ęcëƝɉlÝƯֹÅŃ^Ó·śŃNjƏďíåɛGɉ¿@ăƑ¥ĘWǬÏĶŁâ'
+ ],
+ ['@@\\p|WoYG¿¥Ij@¢'],
+ ['@@
¡@V^RqBbAnTXeRz¤L«³I'],
+ ['@@ÆEEkWqë @'],
+ ['@@fced']
+ ],
+ encodeOffsets: [
+ [[122886, 24033]],
+ [[123335, 22980]],
+ [[122375, 24193]],
+ [[122518, 24117]],
+ [[124427, 22618]],
+ [[124862, 26043]]
+ ]
+ },
+ properties: {
+ cp: [121.509062, 24.044332],
+ name: '台湾',
+ childNum: 6
+ }
+ },
+ {
+ id: '130000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@o~Z]ªrºc_ħ²G¼s`jΟnüsÂłNX_M`ǽÓnUK
Ĝēs¤©yrý§uģcJe'],
+ ['@@U`Ts¿mÂ'],
+ [
+ '@@oºƋÄdeVDJj£J|ÅdzÂFt~KŨ¸IÆv|¢r}èonb}`RÎÄn°ÒdÞ²^®lnÐèĄlðÓ×]ªÆ}LiñÖ`^°Ç¶p®đDcŋ`ZÔ¶êqvFÆN®ĆTH®¦O¾IbÐã´BĐɢŴÆíȦpĐÞXR·nndO¤OÀĈƒQgµFo|gȒęSWb©osx|hYhgŃfmÖĩnºTÌSp¢dYĤ¶UĈjlǐpäìë|³kÛfw²Xjz~ÂqbTÑěŨ@|oMzv¢ZrÃVw¬ŧĖ¸f°ÐTªqs{S¯r æÝlNd®²Ğ džiGĘJ¼lr}~K¨ŸƐÌWöÆzR¤lêmĞLÎ@¡|q]SvKÑcwpÏÏĿćènĪWlĄkT}J¤~ÈTdpddʾĬBVtEÀ¢ôPĎƗè@~kü\\rÊĔÖæW_§¼F´©òDòjYÈrbĞāøŀG{ƀ|¦ðrb|ÀH`pʞkvGpuARhÞÆǶgĘTǼƹS£¨¡ù³ŘÍ]¿ÂyôEP xX¶¹ÜO¡gÚ¡IwÃé¦ÅBÏ|Ç°
N«úmH¯âDùyŜŲIÄuШD¸dɂFOhđ©OiÃ`ww^ÌkÑH«ƇǤŗĺtFu
{Z}Ö@U´
ʚLg®¯Oı°Ãw ^VbÉsmA
ê]]w§RRl£ȭµu¯b{ÍDěïÿȧuT£ġěŗƃĝQ¨fVƋƅna@³@ďyýIĹÊKŭfċŰóxV@tƯJ]eR¾fe|rHA|h~Ėƍl§ÏlTíb ØoÅbbx³^zÃĶ¶Sj®AyÂhðk`«P˵EFÛ¬Y¨Ļrõqi¼Wi°§Ð±´°^[À|ĠO@ÆxO\\ta\\tĕtû{ġȧXýĪÓjùÎRb^ÎfK[ÝděYfíÙTyuUSyŌŏů@Oi½éŅaVcř§ax¹XŻácWU£ôãºQ¨÷Ñws¥qEHÙ|šYQoŕÇyáĂ£MðoťÊP¡mWO¡v{ôvîēÜISpÌhp¨ jdeŔQÖjX³àĈ[n`Yp@UcM`RKhEbpŞlNut®EtqnsÁgAiúoHqCXhfgu~ÏWP½¢G^}¯ÅīGCÑ^ãziMáļMTÃƘrMc|O_¯Ŏ´|morDkO\\mĆJfl@cĢ¬¢aĦtRıÒ¾ùƀ^juųœKUFyƝ
īÛ÷ąV×qƥV¿aȉd³BqPBmaËđŻģmÅ®V¹d^KKonYg¯XhqaLdu¥ÍpDž¡KąÅkĝęěhq}HyÃ]¹ǧ£
Í÷¿qᵧg¤o^á¾ZE¤i`ij{nOl»WÝĔįhgF[¿¡ßkOüš_ūiDZàUtėGyl}ÓM}jpEC~¡FtoQiHkk{Ãmï'
+ ]
+ ],
+ encodeOffsets: [[[119712, 40641]], [[121616, 39981]], [[116462, 37237]]]
+ },
+ properties: {
+ cp: [114.502461, 38.045474],
+ name: '河北',
+ childNum: 3
+ }
+ },
+ {
+ id: '140000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@ÞĩÒSra}ÁyWix±Üe´lèßÓǏokćiµVZģ¡coTS˹ĪmnÕńehZg{gtwªpXaĚThȑp{¶Eh®RćƑP¿£Pmc¸mQÝWďȥoÅîɡųAďä³aÏJ½¥PGąSM
EÅruµéYÓŌ_dĒCoȵ]¯_²ÕjāK~©ÅØ^ÔkïçămÏk]±cݯÑÃmQÍ~_apm
~ç¡qu{JÅŧ·Ls}EyÁÆcI{¤IiCfUcƌÃp§]ě«vD@¡SÀµMÅwuYY¡DbÑc¡h×]nkoQdaMç~eDÛtT©±@¥ù@É¡ZcW|WqOJmĩl«ħşvOÓ«IqăV¥D[mI~Ó¢cehiÍ]Ɠ~ĥqX·eƷn±}v[ěďŕ]_œ`¹§ÕōIo©bs^}Ét±ū«³p£ÿ·Wµ|¡¥ăFÏs×¥ŅxÊdÒ{ºvĴÎêÌɊ²¶ü¨|ÞƸµȲLLúÉƎ¤ϊęĔV`_bªS^|dzY|dz¥pZbÆ£¶ÒK}tĦÔņƠPYznÍvX¶Ěn ĠÔzý¦ª÷ÑĸÙUȌ¸dòÜJð´ìúNM¬XZ´¤ŊǸ_tldI{¦ƀðĠȤ¥NehXnYGR° ƬDj¬¸|CĞKqºfƐiĺ©ª~ĆOQª ¤@ìǦɌ²æBÊTŸʂōĖĴŞȀÆÿȄlŤĒötνî¼ĨXh|ªM¤Ðz'
+ ],
+ encodeOffsets: [[116874, 41716]]
+ },
+ properties: {
+ cp: [111.849248, 36.857014],
+ name: '山西',
+ childNum: 1
+ }
+ },
+ {
+ id: '150000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ [
+ '@@Č^â£ĂhĖMÈÄw\\fŦ°W ¢¾luŸDw\\̀ʉÌÛM
Ā[bÓEn}¶Vc
ês¯PqFB
|S³C|kñHdiÄ¥sʼnÅ
PóÑÑE^ÅPpy_YtShQ·aHwsOnʼnÃs©iqjUSiº]ïW«gW¡ARëśijĘ
ů`çõh]y»ǃǛҤxÒm~zf}pf|ÜroÈzrKÈĵSƧżĠu¦ö'
+ ],
+ [
+ '@@sKC
GS|úþXgp{ÁX¿ć{ƱȏñZáĔyoÁhA}ŅĆfdʼn_¹Y°ėǩÑ¡H¯¶oMQqð¡Ë|Ñ`ƭŁX½·óÛxğįÅcQs«tȋDžFù^it«Č¯[hAi©á¥ÇĚ×l|¹y¯YȵƓñǙµïċĻ|Düȭ¶¡oŽäÕG\\ÄT¿Òõr¯LguÏYęRƩɷŌO\\İТæ^Ŋ IJȶȆbÜGĝ¬¿ĚVĎgª^íu½jÿĕęjık@Ľ]ėl¥ËĭûÁėéV©±ćn©ȇÍq¯½YÃÔʼnÉNÑÅÝy¹NqáʅDǡËñƁYÅy̱os§ȋµʽǘǏƬɱàưN¢ƔÊuľýľώȪƺɂļxZĈ}ÌʼnŪĺœĭFЛĽ̅ȣͽÒŵìƩÇϋÿȮǡŏçƑůĕ~ǼȳÐUfdIxÿ\\G zâɏÙOº·pqy£@qþ@Ǟ˽IBäƣzsÂZÁàĻdñ°ŕzéØűzșCìDȐĴĺf®Àľưø@ɜÖÞKĊŇƄ§͑těï͡VAġÑÑ»d³öǍÝXĉĕÖ{þĉu¸ËʅğU̎éhɹƆ̗̮ȘNJ֥ड़ࡰţાíϲäʮW¬®ҌeרūȠkɬɻ̼ãüfƠSצɩςåȈHϚÎKdzͲOðÏȆƘ¼CϚǚ࢚˼ФÔ¤ƌĞ̪Qʤ´¼mȠJˀƲÀɠmǐnǔĎȆÞǠN~ʢĜ¶ƌĆĘźʆȬ˪ĚĒ¸ĞGȖƴƀj`ĢçĶāàŃºēĢĖćYÀŎüôQÐÂŎŞdžŞêƖoˆDĤÕºÑǘÛˤ³̀gńƘĔÀ^ªƂ`ªt¾äƚêĦĀ¼ÐĔǎ¨Ȕ»͠^ˮÊȦƤøxRrŜH¤¸ÂxDÄ|ø˂˜ƮЬɚwɲFjĔ²Äw°dždÀÉ_ĸdîàŎjÊêTЪŌŜWÈ|tqĢUB~´°ÎFCU¼pĀēƄN¦¾O¶łKĊOjĚj´ĜYp{¦SĚÍ\\TתV÷Ší¨ÅDK°ßtŇĔK¨ǵÂcḷ̌ĚǣȄĽFlġUĵŇȣFʉɁMğįʏƶɷØŭOǽ«ƽū¹Ʊő̝Ȩ§ȞʘĖiɜɶʦ}¨֪ࠜ̀ƇǬ¹ǨE˦ĥªÔêFxúQEr´Wrh¤Ɛ \\talĈDJÜ|[Pll̚¸ƎGú´P¬W¦^¦H]prRn|or¾wLVnÇIujkmon£cX^Bh`¥V¦U¤¸}xRj[^xN[~ªxQ[`ªHÆÂExx^wN¶Ê|¨ìMrdYpoRzNyÀDs~bcfÌ`L¾n|¾T°c¨È¢ar¤`[|òDŞĔöxElÖdHÀI`Ď\\Àì~ÆR¼tf¦^¢ķ¶eÐÚMptgjɡČÅyġLûŇV®ÄÈƀĎ°P|ªVVªj¬ĚÒêp¬E|ŬÂc|ÀtƐK f{ĘFĒƌXƲąo½Ę\\¥o}Ûu£çkX{uĩ«āíÓUŅßŢqŤ¥lyň[oi{¦LńðFȪȖĒL¿Ìf£K£ʺoqNwğc`uetOj×°KJ±qÆġmĚŗos¬
qehqsuH{¸kH¡
ÊRǪÇƌbȆ¢´äÜ¢NìÉʖ¦â©Ż؛Ç@Vu»Aylßí¹ĵê
ÝlISò³C¹Ìâ²i¶Ìoú^H²CǜңDŽ z¼g^èöŰ_IJĕê}gÁnUI«m
]jvV¼euhwqAaW_µj
»çjioQR¹ēÃßt@r³[ÛlćË^ÍÉáGOUÛOB±XkŹ£k|e]olkVͼÕqtaÏõjgÁ£§U^RLËnX°ÇBz^~wfvypV ¯ƫĉ˭ȫƗŷɿÿĿƑ˃ĝÿÃǃßËőó©ǐȍŒĖM×ÍEyxþp]ÉvïèvƀnÂĴÖ@V~Ĉ³MEĸÅĖtējyÄDXÄxGQuv_i¦aBçw˛wD©{tāmQ{EJ§KPśƘƿ¥@sCTÉ}ɃwƇy±gÑ}T[÷kÐ禫
SÒ¥¸ëBX½HáŵÀğtSÝÂa[ƣ°¯¦Pï¡]£ġÒk®G²èQ°óMq}EóƐÇ\\@áügQÍu¥FTÕ¿Jû]|mvāÎYua^WoÀa·ząÒot׶CLƗi¯¤mƎHNJ¤îìɾŊìTdåwsRÖgĒųúÍġäÕ}Q¶¿A[¡{d×uQAMxVvMOmăl«ct[wº_ÇÊjb£ĦS_éQZ_lwgOiýe`YYLq§IÁdz£ÙË[ÕªuƏ³ÍTs·bÁĽäė[b[ŗfãcn¥îC¿÷µ[ŏÀQōĉm¿Á^£mJVmL[{Ï_£F¥Ö{ŹA}
×Wu©ÅaųijƳhB{·TQqÙIķËZđ©Yc|M¡
LeVUóK_QWk_ĥ¿ãZ»X\\ĴuUèlG®ěłTĠğDŃOrÍdÆÍz]±
ŭ©Å]ÅÐ}UË¥©TċïxgckfWgi\\ÏĒ¥HkµEë{»ÏetcG±ahUiñiWsɁ·cCÕk]wȑ|ća}w
VaĚá G°ùnM¬¯{ÈÐÆA¥ÄêJxÙ¢hP¢ÛºµwWOóFÁz^ÀŗÎú´§¢T¤ǻƺSėǵhÝÅQgvBHouʝl_o¿Ga{ïq{¥|ſĿHĂ÷aĝÇqZñiñC³ª
»E`¨åXēÕqÉû[l}ç@čƘóO¿¡FUsAʽīccocÇS}£IS~ălkĩXçmĈ
ŀÐoÐdxÒuL^T{r@¢ÍĝKén£kQyÅõËXŷƏL§~}kq»IHėDžjĝ»ÑÞoå°qTt|r©ÏS¯·eŨĕx«È[eM¿yupN~¹ÏyN£{©għWí»Í¾səšDž_ÃĀɗ±ąijĉʍŌŷSÉA±åǥɋ@ë£R©ąP©}ĹªƏj¹erLDĝ·{i«ƫC£µ'
+ ]
+ ],
+ encodeOffsets: [[[127444, 52594]], [[113793, 40312]]]
+ },
+ properties: {
+ cp: [111.670801, 41.818311],
+ name: '内蒙古',
+ childNum: 2
+ }
+ },
+ {
+ id: '210000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@L@@sa'],
+ ['@@MnNm'],
+ ['@@dc'],
+ ['@@eÀC@b'],
+ ['@@f
XwkbrÄ`qg'],
+ ['@@^jtWQ'],
+ ['@@~ Y]c'],
+ ['@@G`ĔN^_¿ZÃM'],
+ ['@@iX¶BY'],
+ ['@@YZ'],
+ ['@@L_{Epf'],
+ ['@@^WqCT\\'],
+ ['@@\\[§t|¤_'],
+ ['@@m`n_'],
+ ['@@Ïxnj{q_×^Giip'],
+ [
+ '@@@é^BntaÊU]x ¯ÄPIJ°hʙK³VÕ@Y~|EvĹsǦL^pòŸÒG Ël]xxÄ_fT¤Ď¤cPC¨¸TVjbgH²sdÎdHt`B²¬GJję¶[ÐhjeXdlwhðSȦªVÊÏÆZÆŶ®²^ÎyÅÎcPqńĚDMħĜŁHkçvV[ij¼WYÀäĦ`XlR`ôLUVfK¢{NZdĒªYĸÌÚJRr¸SA|ƴgŴĴÆbvªØX~źB|¦ÕE¤Ð`\\|KUnnI]¤ÀÂĊnŎR®Ő¿¶\\ÀøíDm¦ÎbŨabaĘ\\ľã¸atÎSƐ´©v\\ÖÚÌǴ¤Â¨JKrZ_ZfjþhPkx`YRIjJcVf~sCN¤ EhæmsHy¨SðÑÌ\\\\ĐRZk°IS§fqŒßýáĞÙÉÖ[^¯ǤŲê´\\¦¬ĆPM¯£»uïpùzExanµyoluqe¦W^£ÊL}ñrkqWňûPUP¡ôJoo·U}£[·¨@XĸDXmÛݺGUCÁª½{íĂ^cjk¶Ã[q¤LÉö³cux«zZf²BWÇ®Yß½ve±ÃCý£W{Ú^q^sÑ·¨ÍOt¹·C¥GDrí@wÕKţëV·i}xËÍ÷i©ĝɝǡ]{c±OW³Ya±_ç©HĕoƫŇqr³Lys[ñ³¯OSďOMisZ±ÅFC¥Pq{Ã[Pg}\\¿ghćO
k^ģÁFıĉĥMoEqqZûěʼn³F¦oĵhÕP{¯~TÍlªNßYÐ{Ps{ÃVUeĎwk±ʼnVÓ½ŽJãÇÇ»Jm°dhcÀffdF~ĀeĖd`sx² ®EżĀdQÂd^~ăÔH¦\\LKpĄVez¤NP ǹÓRÆąJSha[¦´ÂghwmBШźhI|VV|p] ¼èNä¶ÜBÖ¼L`¼bØæKVpoúNZÞÒKxpw|ÊEMnzEQIZZNBčÚFÜçmĩWĪñtÞĵÇñZ«uD±|Əlij¥ãn·±PmÍada CLǑkùó¡³Ï«QaċÏOÃ¥ÕđQȥċƭy³ÃA'
+ ]
+ ],
+ encodeOffsets: [
+ [[123686, 41445]],
+ [[126019, 40435]],
+ [[124393, 40128]],
+ [[126117, 39963]],
+ [[125322, 40140]],
+ [[126686, 40700]],
+ [[126041, 40374]],
+ [[125584, 40168]],
+ [[125453, 40165]],
+ [[125362, 40214]],
+ [[125280, 40291]],
+ [[125774, 39997]],
+ [[125976, 40496]],
+ [[125822, 39993]],
+ [[125509, 40217]],
+ [[122731, 40949]]
+ ]
+ },
+ properties: {
+ cp: [123.429096, 41.796767],
+ name: '辽宁',
+ childNum: 16
+ }
+ },
+ {
+ id: '220000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@pä³PClFbbÍzwBGĭZÅi»lYċ²SgkÇ£^Sqd¯R
©é£¯S\\cZ¹iűƏCuƍÓXoR}M^o£
R}oªUF
uuXHlEÅÏ©¤ÛmTþ¤D²ÄufàÀXXȱAeyYw¬dvõ´KÊ£\\rµÄlidā]|DÂVH¹Þ®ÜWnCķ W§@\\¸~¤Vp¸póIO¢VOŇürXql~òÉK]¤¥Xrfkvzpm¶bwyFoúv𼤠N°ąO¥«³[éǡű_°Õ\\ÚÊĝþâőàerR¨JYlďQ[ ÏYëЧTGztnß¡gFkMāGÁ¤ia Éȹ`\\xs¬dĆkNnuNUuP@vRY¾\\¢
GªóĄ~RãÖÎĢùđŴÕhQxtcæëSɽʼníëlj£ƍG£nj°KƘµDsØÑpyƸ®¿bXp]vbÍZuĂ{n^IüÀSÖ¦EvRÎûh@â[ƏÈô~FNr¯ôçR±HÑlĢ^¤¢OðævxsŒ]ÞÁTĠs¶¿âÆGW¾ìA¦·TѬè¥ÏÐJ¨¼ÒÖ¼ƦɄxÊ~StD@Ă¼Ŵ¡jlºWvÐzƦZвCH AxiukdGgetqmcÛ£Ozy¥cE}|
¾cZ
k¿uŐã[oxGikfeäT@
SUwpiÚFM©£è^Ú`@v¶eňf heP¶täOlÃUgÞzŸU`l}ÔÆUvØ_Ō¬Öi^ĉi§²ÃB~¡ĈÚEgc|DC_Ȧm²rBx¼MÔ¦ŮdĨÃâYxƘDVÇĺĿg¿cwÅ\\¹¥Yĭl¤OvLjM_a W`zļMž·\\swqÝSAqŚij¯°kRē°wx^ĐkǂÒ\\]nrĂ}²ĊŲÒøãh·M{yMzysěnĒġV·°G³¼XÀ¤¹i´o¤ŃÈ`ÌDzÄUĞd\\iÖmÈBĤÜɲDEh LG¾ƀľ{WaYÍÈĢĘÔRîĐj}ÇccjoUb½{h§Ǿ{KƖµÎ÷GĀÖŠåưÎslyiē«`å§H¥Ae^§GK}iã\\c]v©ģZmÃ|[M}ģTɟĵÂÂ`ÀçmFK¥ÚíÁbX³ÌQÒHof{]ept·GŋĜYünĎųVY^ydõkÅZW«WUa~U·SbwGçǑiW^qFuNĝ·EwUtW·Ýďæ©PuqEzwAVXRãQ`©GMehccďÏd©ÑW_ÏYƅ»
é\\ɹ~ǙG³mØ©BšuT§Ĥ½¢Ã_ýL¡ýqT^rme\\PpZZbyuybQefµ]UhĿDCmûvaÙNSkCwncćfv~
YÇG'
+ ],
+ encodeOffsets: [[130196, 42528]]
+ },
+ properties: {
+ cp: [125.3245, 43.886841],
+ name: '吉林',
+ childNum: 1
+ }
+ },
+ {
+ id: '230000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@ƨĶTLÇyqpÇÛqe{~oyen}s`qiXGù]Ëp½©lÉÁp]Þñ´FĂ^fäîºkàz¼BUvÈ@'],
+ [
+ '@@UµNÿ¥īèçHÍøƕ¶Lǽ|g¨|a¾pVidd~ÈiíďÓQġėÇZÎXb½|ſÃH½KFgɱCģÛÇAnjÕc[VĝDZÃËÇ_ £ń³pj£º¿»WH´¯U¸đĢmtĜyzzNN|g¸÷äűѱĉā~mq^[ǁÑďlw]¯xQĔ¯l°řĴrBÞTxr[tŽ¸ĻN_yX`biNKu
P£kZĮ¦[ºxÆÀdhĹŀUÈƗCwáZħÄŭcÓ¥»NAw±qȥnD`{ChdÙFć}¢A±Äj¨]ĊÕjŋ«×`VuÓÅ~_kŷVÝyhVkÄãPsOµfgeŇ
µf@u_Ù ÙcªNªÙEojVxT@ãSefjlwH\\pŏäÀvlY½d{F~¦dyz¤PÜndsrhfHcvlwjF£G±DÏƥYyÏu¹XikĿ¦ÏqƗǀOŜ¨LI|FRĂn sª|C˜zxAè¥bfudTrFWÁ¹Am|ĔĕsķÆF´N}ć
UÕ@Áijſmuçuð^ÊýowFzØÎĕNőǏȎôªÌŒDŽàĀÄ˄ĞŀƒʀĀƘŸˮȬƬĊ°Uzouxe]}
AyÈW¯ÌmKQ]Īºif¸ÄX|sZt|½ÚUÎ lk^p{f¤lºlÆW A²PVÜPHÊâ]ÎĈÌÜk´\\@qàsĔÄQºpRij¼èi`¶bXrBgxfv»uUi^v~J¬mVp´£´VWrnP½ì¢BX¬hðX¹^TjVriªjtŊÄmtPGx¸bgRsT`ZozÆO]ÒFôÒOÆŊvÅpcGêsx´DR{AEOr°x|íb³Wm~DVjºéNNËܲɶGxŷCSt}]ûōSmtuÇÃĕNāg»íT«u}ç½BĵÞʣ¥ëÊ¡MÛ³ãȅ¡ƋaǩÈÉQG¢·lG|tvgrrf«ptęŘnÅĢrI²¯LiØsPf_vĠdxM prʹL¤¤eËÀđKïÙVY§]Ióáĥ]ķK¥j|pŇ\\kzţ¦šnņäÔVĂîĪ¬|vW®l¤èØrxm¶ă~lÄƯĄ̈́öȄEÔ¤ØQĄĄ»ƢjȦOǺ¨ìSŖÆƬyQv`cwZSÌ®ü±DŽ]ŀç¬B¬©ńzƺŷɄeeOĨSfm ĊƀP̎ēz©ĊÄÕÊmgÇsJ¥ƔŊśæÎÑqv¿íUOµªÂnĦÁ_½ä@êí
£P}Ġ[@gġ}gɊ×ûÏWXá¢užƻÌsNͽƎÁ§čŐAēeL³àydl¦ĘVçŁpśdžĽĺſÊQíÜçÛġÔsĕ¬Ǹ¯YßċġHµ ¡eå`ļrĉŘóƢFìĎWøxÊkƈdƬv|I|·©NqńRŀ¤éeŊŀàŀU²ŕƀBQ£Ď}L¹Îk@©ĈuǰųǨÚ§ƈnTËÇéƟÊcfčŤ^XmHĊĕË«W·ċëx³ǔķÐċJāwİ_ĸȀ^ôWr°oú¬Ħ
ŨK~ȰCĐ´Ƕ£fNÎèâw¢XnŮeÂÆĶ¾¾xäLĴĘlļO¤ÒĨA¢Êɚ¨®ØCÔ ŬGƠƦYĜĘÜƬDJg_ͥœ@čŅĻA¶¯@wÎqC½Ĉ»NăëKďÍQÙƫ[«ÃígßÔÇOÝáWñuZ¯ĥŕā¡ÑķJu¤E 寰WKɱ_d_}}vyõu¬ï¹ÓU±½@gÏ¿rýDg
Cdµ°MFYxw¿CG£Rƛ½Õ{]L§{qqą¿BÇƻğëܭNJË|c²}Fµ}ÙRsÓpg±QNqǫŋRwŕnéÑÉK«SeYR
ŋ@{¤SJ}D Ûǖ֍]gr¡µŷjqWÛham³~S«Þ]'
+ ]
+ ],
+ encodeOffsets: [[[127123, 51780]], [[134456, 44547]]]
+ },
+ properties: {
+ cp: [128.642464, 46.756967],
+ name: '黑龙江',
+ childNum: 2
+ }
+ },
+ {
+ id: '320000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@cþÅPi`ZRu¥É\\]~°Y`µÓ^phÁbnÀşúòaĬºTÖŒbe¦¦{¸ZâćNp©Hr|^mjhSEb\\afv`sz^lkljÄtg¤D¾X¿À|ĐiZȀåB·î}GL¢õcßjayBFµÏC^ĭcÙt¿sğH]j{s©HM¢QnDÀ©DaÜÞ·jgàiDbPufjDk`dPOîhw¡ĥ¥GP²ĐobºrYî¶aHŢ´ ]´rılw³r_{£DB_Ûdåuk|Ũ¯F Cºyr{XFye³Þċ¿ÂkĭB¿MvÛpm`rÚã@Ę¹hågËÖƿxnlč¶Åì½Ot¾dJlVJĂǀŞqvnO^JZż·Q}êÍÅmµÒ]ƍ¦Dq}¬R^èĂ´ŀĻĊIÔtIJyQŐĠMNtR®òLhĚs©»}OÓGZz¶A\\jĨFäOĤHYJvÞHNiÜaĎÉnFQlNM¤B´ĄNöɂtpŬdfå
qm¿QûùŞÚb¤uŃJŴu»¹ĄlȖħŴw̌ŵ²ǹǠ͛hĭłƕrçü±Yxcitğ®jű¢KOķCoy`å®VTa_Ā]ŐÝɞï²ʯÊ^]afYǸÃĆēĪȣJđ͍ôƋÄÄÍīçÛɈǥ£ÛmY`ó£Z«§°Ó³QafusNıDž_k}¢m[ÝóDµ¡RLčiXyÅNïă¡¸iĔÏNÌŕoēdōîåŤûHcs}~Ûwbù¹£¦ÓCtOPrE^ÒogĉIµÛÅʹK
¤½phMü`oæŀ'
+ ],
+ encodeOffsets: [[121740, 32276]]
+ },
+ properties: {
+ cp: [119.767413, 33.041544],
+ name: '江苏',
+ childNum: 1
+ }
+ },
+ {
+ id: '330000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@E^dQ]K'],
+ ['@@jX^j'],
+ ['@@sfbU'],
+ ['@@qP\\xz[ck'],
+ ['@@R¢FX}°[s_'],
+ ['@@Cb\\}'],
+ ['@@e|v\\la{u'],
+ ['@@v~u}'],
+ ['@@QxÂF¯}'],
+ ['@@¹nvÞs¯o'],
+ ['@@rSkUEj'],
+ ['@@biZP'],
+ ['@@p[}INf'],
+ ['@@À¿'],
+ ['@@¹dnb
'],
+ ['@@rSBnR'],
+ ['@@g~h}'],
+ ['@@FlEk'],
+ ['@@OdPc'],
+ ['@@v[u\\'],
+ ['@@FjâL~wyoo~sµL\\'],
+ ['@@¬e¹aN'],
+ ['@@\\nÔ¡q]L³ë\\ÿ®QÖ'],
+ ['@@ÊA©[¬'],
+ ['@@Kxv'],
+ ['@@@hlIk]'],
+ ['@@pW{o||j'],
+ ['@@Md|_mC'],
+ ['@@¢
X£ÏylD¼XtH'],
+ ['@@hlÜ[LykAvyfw^E¤'],
+ ['@@fp¤MusR'],
+ ['@@®_ma~LÁ¬Z'],
+ ['@@iMxZ'],
+ ['@@ZcYd'],
+ ['@@Z~dOSo|A¿qZv'],
+ ['@@@`EN¡v'],
+ ['@@|TY{'],
+ ['@@@n@m'],
+ ['@@XWkCT\\'],
+ ['@@ºwZRkĕWO¢'],
+ ['@@X®±Grƪ\\ÔáXq{'],
+ ['@@ůTG°ĄLHm°UC'],
+ [
+ '@@¤aÜx~}dtüGæţŎíĔcŖpMËÐjē¢·ðĄÆMzjWKĎ¢Q¶À_ê_Bıi«pZgf¤Nrq]§ĂN®«H±yƳí¾×ŸīàLłčŴǝĂíÀBŖÕªÁŖHŗʼnåqûõi¨hÜ·ñt»¹ýv_[«¸mYL¯Qª
mĉÅdMgÇjcº«ę¬K´B«Âącoċ\\xKd¡gěŧ«®á[~ıxu·ÅKsËÉc¢Ù\\ĭƛëbf¹ģSĜkáƉÔĈZB{aMµfzʼnfåÂŧįƋǝÊĕġć£g³neą»@¦S®\\ßðChiqªĭiAuAµ_W¥ƣO\\lċĢttC¨£t`PZäuXßBsĻyekOđġĵHuXBµ]×\\°®¬F¢¾pµ¼kŘó¬Wät¸|@L¨¸µrºù³Ù~§WIZW®±Ð¨ÒÉx`²pĜrOògtÁZ}þÙ]¡FKwsPlU[}¦Rvn`hq¬\\nQ´ĘRWb_ rtČFIÖkĦPJ¶ÖÀÖJĈĄTĚòC ²@Pú
Øz©PCÈÚĒ±hŖl¬â~nm¨f©iļ«mntuÖZÜÄjL®EÌFª²iÊxبIÈhhst'
+ ],
+ ['@@o\\VzRZ}y'],
+ ['@@@°¡mÛGĕ¨§Ianá[ýƤjfæØLäGr']
+ ],
+ encodeOffsets: [
+ [[125592, 31553]],
+ [[125785, 31436]],
+ [[125729, 31431]],
+ [[125513, 31380]],
+ [[125223, 30438]],
+ [[125115, 30114]],
+ [[124815, 29155]],
+ [[124419, 28746]],
+ [[124095, 28635]],
+ [[124005, 28609]],
+ [[125000, 30713]],
+ [[125111, 30698]],
+ [[125078, 30682]],
+ [[125150, 30684]],
+ [[124014, 28103]],
+ [[125008, 31331]],
+ [[125411, 31468]],
+ [[125329, 31479]],
+ [[125626, 30916]],
+ [[125417, 30956]],
+ [[125254, 30976]],
+ [[125199, 30997]],
+ [[125095, 31058]],
+ [[125083, 30915]],
+ [[124885, 31015]],
+ [[125218, 30798]],
+ [[124867, 30838]],
+ [[124755, 30788]],
+ [[124802, 30809]],
+ [[125267, 30657]],
+ [[125218, 30578]],
+ [[125200, 30562]],
+ [[124968, 30474]],
+ [[125167, 30396]],
+ [[124955, 29879]],
+ [[124714, 29781]],
+ [[124762, 29462]],
+ [[124325, 28754]],
+ [[123990, 28459]],
+ [[125366, 31477]],
+ [[125115, 30363]],
+ [[125369, 31139]],
+ [[122495, 31878]],
+ [[125329, 30690]],
+ [[125192, 30787]]
+ ]
+ },
+ properties: {
+ cp: [120.153576, 29.287459],
+ name: '浙江',
+ childNum: 45
+ }
+ },
+ {
+ id: '340000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@^iuLX^'],
+ ['@@e©Ehl'],
+ [
+ '@@°ZÆëϵmkǀwÌÕæhºgBĝâqÙĊzÖgņtÀÁĂÆáhEz|WzqD¹°Eŧl{ævÜcA`¤C`|´qxIJkq^³³GšµbíZ
¹qpa±ď OH¦Ħx¢gPícOl_iCveaOjCh߸iÝbÛªCC¿mRV§¢A|t^iĠGÀtÚsd]ĮÐDE¶zAb àiödK¡~H¸íæAǿYj{ď¿À½W®£ChÃsikkly]_teu[bFaTign{]GqªoĈMYá|·¥f¥őaSÕėNµñĞ«Im_m¿Âa]uĜp
Z_§{Cäg¤°r[_YjÆOdý[I[á·¥Q_nùgL¾mvˊBÜƶĊJhpc¹O]iŠ]¥ jtsggJǧw×jÉ©±EFËKiÛÃÕYv
sm¬njĻª§emná}k«ŕgđ²ÙDÇ¤í¡ªOy×Où±@DñSęćăÕIÕ¿IµĥOjNÕËT¡¿tNæŇàåyķrĕq§ÄĩsWÆßF¶X®¿mw
RIÞfßoG³¾©uyHį{Ɓħ¯AFnuP
ÍÔzVdàôº^Ðæd´oG¤{S¬ćxã}ŧ×Kǥĩ«ÕOEзÖdÖsƘѨ[Û^Xr¢¼§xvÄƵ`K§ tÒ´Cvlo¸fzŨð¾NY´ı~ÉĔē
ßúLÃÃ_ÈÏ|]ÂÏFlg`ben¾¢pUh~ƴĖ¶_r sĄ~cƈ]|r c~`¼{À{ȒiJjz`îÀT¥Û³
]u}f
ïQl{skloNdjäËzDvčoQďHI¦rbtHĔ~BmlRV_ħTLnñH±DL¼Lªl§Ťa¸ĚlK²\\RòvDcÎJbt[¤D@®hh~kt°ǾzÖ@¾ªdbYhüóZ ň¶vHrľ\\ÊJuxAT|dmÀO[ÃÔG·ĚąĐlŪÚpSJ¨ĸLvÞcPæķŨ®mÐálwKhïgA¢ųÆ©Þ¤OÈm°K´'
+ ]
+ ],
+ encodeOffsets: [[[121722, 32278]], [[119475, 30423]], [[119168, 35472]]]
+ },
+ properties: {
+ cp: [117.283042, 31.26119],
+ name: '安徽',
+ childNum: 3
+ }
+ },
+ {
+ id: '350000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@zht´]'],
+ ['@@aj^~ĆG©O'],
+ ['@@ed¨C}}i'],
+ ['@@@vPGsQ'],
+ ['@@sBzddW]Q'],
+ ['@@S¨Q{'],
+ ['@@NVucW'],
+ ['@@qptBAq'],
+ ['@@¸[mu'],
+ ['@@Q\\pD]_'],
+ ['@@jSwUadpF'],
+ ['@@eXª~'],
+ ['@@AjvFso'],
+ ['@@fT_Çí\\v|ba¦jZÆy°'],
+ ['@@IjJi'],
+ ['@@wJIx«¼AoNe{M'],
+ ['@@K±¡ÓČäeZ'],
+ [
+ '@@k¡¹Eh~c®wBkUplÀ¡I~Māe£bN¨gZý¡a±Öcp©PhI¢Qq
ÇGj|¥U g[Ky¬ŏv@OptÉEF\\@ åA¬V{XģĐBy
cpě
¼³Ăp·¤¥ohqqÚ¡ŅLs^á§qlÀhH¨MCe»åÇGD¥zPO£čÙkJA¼ßėuĕeûÒiÁŧSW¥Qûŗ½ùěcݧSùĩąSWó«íęACµeRåǃRCÒÇZÍ¢ź±^dlstjD¸ZpuÔâÃH¾oLUêÃÔjjēò´ĄWƛ
^Ñ¥Ħ@ÇòmOw¡õyJyD}¢ďÑÈġfZda©º²z£NjD°Ötj¶¬ZSÎ~¾c°¶ÐmxO¸¢Pl´SL|¥AȪĖMņIJg®áIJČĒü` QF¬h|ĂJ@zµ |ê³È ¸UÖŬŬÀEttĸr]ðM¤ĶIJHtÏ AĬkvsq^aÎbvdfÊòSD´Z^xPsĂrvƞŀjJd×ŘÉ ®AΦĤdxĆqAZRÀMźnĊ»İÐZ YXæJyĊ²·¶q§·K@·{sXãô«lŗ¶»o½E¡«¢±¨Y®Ø¶^AvWĶGĒĢPlzfļtàAvWYãO_¤sD§ssČġ[kƤPX¦`¶®BBvĪjv©jx[L¥àï[F
¼ÍË»ğV`«Ip}ccÅĥZEãoP
´B@D¸m±z«Ƴ¿å³BRضWlâþäą`]Z£Tc ĹGµ¶Hm@_©k¾xĨôȉðX«½đCIbćqK³ÁÄš¬OAwã»aLʼnËĥW[ÂGIÂNxij¤D¢îĎÎB§°_JGs¥E@
¤uć
PåcuMuw¢BI¿]zG¹guĮck\\_'
+ ]
+ ],
+ encodeOffsets: [
+ [[123250, 27563]],
+ [[122541, 27268]],
+ [[123020, 27189]],
+ [[122916, 27125]],
+ [[122887, 26845]],
+ [[122808, 26762]],
+ [[122568, 25912]],
+ [[122778, 26197]],
+ [[122515, 26757]],
+ [[122816, 26587]],
+ [[123388, 27005]],
+ [[122450, 26243]],
+ [[122578, 25962]],
+ [[121255, 25103]],
+ [[120987, 24903]],
+ [[122339, 25802]],
+ [[121042, 25093]],
+ [[122439, 26024]]
+ ]
+ },
+ properties: {
+ cp: [118.306239, 26.075302],
+ name: '福建',
+ childNum: 18
+ }
+ },
+ {
+ id: '360000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@ĢĨƐgļ¼ÂMD~ņªe^\\^§ý©j×cZبzdÒa¶lÒJìõ`oz÷@¤u޸´ôęöY¼HČƶajlÞƩ¥éZ[|h}^U ¥pĄžƦO lt¸Æ Q\\aÆ|CnÂOjtĚĤdÈF`¶@Ðë ¦ōÒ¨SêvHĢûXD®
QgÄWiØPÞìºr¤džNĠ¢lĄtZoCƞÔºCxrpĠV®Ê{f_Y`_eq®Aot`@oDXfkp¨|s¬\\DÄSfè©Hn¬
^DhÆyøJhØxĢĀLÊƠPżċĄwȠ̦G®ǒĤäTŠÆ~Ħw«|TF¡nc³Ïå¹]ĉđxe{ÎÓvOEm°BƂĨİ|Gvz½ª´HàpeJÝQxnÀWEµàXÅĪt¨ÃĖrÄwÀFÎ|ňÓMå¼ibµ¯»åDT±m[r«_gmQu~¥V\\OkxtL E¢Ú^~ýêPóqoě±_Êw§ÑªåƗā¼mĉŹ¿NQ
YBąrwģcÍ¥BŗÊcØiIƝĿuqtāwO]³YCñTeÉcaubÍ]trluī
BÐGsĵıN£ï^ķqss¿FūūVÕ·´Ç{éĈýÿOER_đûIċâJhŅıNȩĕB
¦K{Tk³¡OP·wnµÏd¯}½TÍ«YiµÕsC¯iM¤¦¯P|ÿUHvhe¥oFTuõ\\OSsMòđƇiaºćXĊĵà·çhƃ÷Ç{ígu^đgm[×zkKN¶Õ»lčÓ{XSÆv©_ÈëJbVkĔVÀ¤P¾ºÈMÖxlò~ªÚàGĂ¢B±ÌKyáV¼Ã~
`gsÙfIƋlę¹e|~udjuTlXµf`¿Jd[\\L²'
+ ],
+ encodeOffsets: [[116689, 26234]]
+ },
+ properties: {
+ cp: [115.592151, 27.676493],
+ name: '江西',
+ childNum: 1
+ }
+ },
+ {
+ id: '370000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@Xjd]{K'],
+ ['@@itbFHy'],
+ ['@@HlGk'],
+ ['@@TGy'],
+ ['@@K¬U'],
+ ['@@WdXc'],
+ ['@@PtOs'],
+ ['@@LnXhc'],
+ ['@@ppVu]Or'],
+ ['@@cdzAUa'],
+ ['@@udRhnCI'],
+ ['@@oIpR'],
+ [
+ '@@Ľč{fzƤîKÎMĮ]ZF½Y]â£ph¶¨râøÀÎǨ¤^ºÄGz~grĚĜlĞÆLĆdž¢Îo¦cvKbgr°WhmZp L]LºcUÆnżĤÌĒbAnrOA´ȊcÀbƦUØrĆUÜøĬƞEzVL®öØBkŖÝĐĖ¹ŧ̄±ÀbÎÉnb²ĦhņBĖįĦåXćì@L¯´ywƕCéõė ƿ¸lµ¾Z|ZWyFY¨Mf~C¿`à_RÇzwƌfQnny´INoƬèôº|sTJULîVjǎ¾ĒØDz²XPn±ŴPè¸ŔLƔÜƺ_TüÃĤBBċÈöA´faM¨{«M`¶d¡ôÖ°mȰBÔjj´PM|c^d¤u¤Û´ä«ƢfPk¶Môl]Lb}su^ke{lC
MrDÇ]NÑFsmoõľHyGă{{çrnÓEƕZGª¹Fj¢ïW
uøCǷë¡ąuhÛ¡^KxC`C\\bÅxì²ĝÝ¿_NīCȽĿåB¥¢·IŖÕy\\¹kxãČ×GDyäÁçFQ¡KtŵƋ]CgÏAùSedcÚźuYfyMmhUWpSyGwMPqŀÁ¼zK¶GY§Ë@´śÇµƕBm@IogZ¯uTMx}CVKï{éƵP_K«pÛÙqċtkkù]gTğwoɁsMõ³ăAN£MRkmEÊčÛbMjÝGu
IZGPģãħE[iµBEuDPÔ~ª¼ęt]ûG§¡QMsğNPŏįzs£Ug{đJĿļā³]ç«Qr~¥CƎÑ^n¶ÆéÎR~Ż¸YI] PumŝrƿIā[xedzL¯v¯s¬ÁY
~}
ťuŁgƋpÝĄ_ņī¶ÏSR´ÁP~¿Cyċßdwk´SsX|t`Ä ÈðAªìÎT°¦Dda^lĎDĶÚY°`ĪŴǒàŠv\\ebZHŖR¬ŢƱùęOÑM³FÛWp['
+ ]
+ ],
+ encodeOffsets: [
+ [[123806, 39303]],
+ [[123821, 39266]],
+ [[123742, 39256]],
+ [[123702, 39203]],
+ [[123649, 39066]],
+ [[123847, 38933]],
+ [[123580, 38839]],
+ [[123894, 37288]],
+ [[123043, 36624]],
+ [[123344, 38676]],
+ [[123522, 38857]],
+ [[123628, 38858]],
+ [[118260, 36742]]
+ ]
+ },
+ properties: {
+ cp: [118.000923, 36.275807],
+ name: '山东',
+ childNum: 13
+ }
+ },
+ {
+ id: '410000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@ýLùµP³swIÓxcŢĞð´E®ÚPtĴXØx¶@«ŕŕQGYfa[şußǩđš_X³ijÕčC]kbc¥CS¯ëÍB©÷³Si_}mYTt³xlàcČzÀD}ÂOQ³ÐTĨ¯ƗòËŖ[hłŦv~}ÂZ«¤lPÇ£ªÝŴÅR§ØnhctâknÏľŹUÓÝdKuķI§oTũÙďkęĆH¸Ó\\Ä¿PcnS{wBIvÉĽ[GqµuŇôYgûZca©@½Õǽys¯}lgg@C\\£asIdÍuCQñ[L±ęk·ţb¨©kK»KC²òGKmĨS`UQnk}AGēsqaJ¥ĐGRĎpCuÌy ã iMcplk|tRkðev~^´¦ÜSí¿_iyjI|ȑ|¿_»d}q^{Ƈdă}tqµ`Ƴĕg}V¡om½faÇo³TTj¥tĠRyK{ùÓjuµ{t}uËRivGçJFjµÍyqÎàQÂFewixGw½Yŷpµú³XU½ġyłåkÚwZX·l¢Á¢KzOÎÎjc¼htoDHr
|J½}JZ_¯iPq{tę½ĕ¦Zpĵø«kQ
Ť]MÛfaQpě±ǽ¾]uFu÷nčįADp}AjmcEÇaª³o³ÆÍSƇĈÙDIzËčľ^KLiÞñ[aA²zzÌ÷D|[íijgfÕÞd®|`Ć~oĠƑô³ŊD×°¯CsøÀ«ìUMhTº¨¸ǡîSÔDruÂÇZÖEvPZW~ØÐtĄE¢¦Ðy¸bô´oŬ¬²Ês~]®tªapŎJ¨Öº_Ŕ`Ŗ^Đ\\Ĝu~m²Ƹ¸fWĦrƔ}Î^gjdfÔ¡J}\\n C¦þWxªJRÔŠu¬ĨĨmFdM{\\d\\YÊ¢ú@@¦ª²SÜsC}fNècbpRmlØ^gd¢aÒ¢CZZxvƶN¿¢T@uC¬^ĊðÄn|lGlRjsp¢ED}Fio~ÔN~zkĘHVsDzßjŬŢ`Pûàl¢\\ÀEhİgÞē X¼Pk|m'
+ ],
+ encodeOffsets: [[118256, 37017]]
+ },
+ properties: {
+ cp: [113.665412, 33.757975],
+ name: '河南',
+ childNum: 1
+ }
+ },
+ {
+ id: '420000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@AB'],
+ ['@@lskt'],
+ [
+ '@@¾«}{ra®pîÃ\\{øCËyyB±b\\òÝjKL ]ĎĽÌJyÚCƈćÎT´Å´pb©ÈdFin~BCo°BĎÃømv®E^vǾ½Ĝ²RobÜeN^ĺ£R¬lĶ÷YoĖ¥Ě¾|sOr°jY`~I¾®I{GqpCgyl{£ÍÍyPL¡¡¸kWxYlÙæŁĢz¾V´W¶ùŸo¾ZHxjwfxGNÁ³Xéæl¶EièIH ujÌQ~v|sv¶Ôi|ú¢FhQsğ¦SiŠBgÐE^ÁÐ{čnOÂÈUÎóĔÊēIJ}Z³½Mŧïeyp·uk³DsѨL¶_Åuèw»¡WqÜ]\\Ò§tƗcÕ¸ÕFÏǝĉăxŻČƟOKÉġÿ×wg÷IÅzCg]m«ªGeçÃTC«[t§{loWeC@ps_Bprf_``Z|ei¡oċMqow¹DƝÓDYpûsYkıǃ}s¥ç³[§cY§HK«Qy]¢wwö¸ïx¼ņ¾Xv®ÇÀµRĠÐHM±cÏdƒǍũȅȷ±DSyúĝ£ŤĀàtÖÿï[îb\\}pĭÉI±Ñy
¿³x¯No|¹HÏÛmjúË~TuęjCöAwě¬Rđl¯ ÑbŇTĿ_[IčĄʿnM¦ğ\\É[T·k¹©oĕ@A¾wya¥Y\\¥Âaz¯ãÁ¡k¥ne£ÛwE©Êō¶˓uoj_U¡cF¹[WvP©whuÕyBF`RqJUw\\i¡{jEPïÿ½fć
QÑÀQ{°fLÔ~wXgītêݾĺHd³fJd]HJ²
EoU¥HhwQsƐ»Xmg±çve]DmÍPoCc¾_hhøYrŊU¶eD°Č_N~øĹĚ·`z]Äþp¼
äÌQv\\rCé¾TnkžŐÚÜa¼ÝƆĢ¶Ûo
d
ĔňТJqPb ¾|J¾fXƐîĨ_Z¯À}úƲN_ĒÄ^ĈaŐyp»CÇÄKñL³ġM²wrIÒŭxjb[n«øæà ^²h¯ÚŐªÞ¸Y²ĒVø}Ā^İ´LÚm¥ÀJÞ{JVųÞŃx×sxxƈē ģMřÚðòIfĊŒ\\Ʈ±ŒdʧĘDvČ_Àæ~Dċ´A®µ¨ØLV¦êHÒ¤'
+ ]
+ ],
+ encodeOffsets: [[[113712, 34000]], [[115612, 30507]], [[113649, 34054]]]
+ },
+ properties: {
+ cp: [113.298572, 30.684355],
+ name: '湖北',
+ childNum: 3
+ }
+ },
+ {
+ id: '430000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@nFTs'],
+ [
+ '@@ßÅÆá½ÔXrCO
ËRïÿĩTooQyÓ[ŅBE¬ÎÓXaį§Ã¸G °ITxpúxÚij¥ÏĢ¾edÄ©ĸG
àGhM¤Â_U}Ċ}¢pczfþg¤ÇòAVM'
+ ],
+ [
+ '@@©KA·³CQ±Á«³BUƑ¹AtćOwD]JiØSm¯b£ylX
HËѱH«C^õľAŧ¤É¥ïyuǙuA¢^{ÌC´¦ŷJ£^[ª¿ĕ~Ƈ
N
skóā¹¿ï]ă~÷O§@Vm¡Qđ¦¢Ĥ{ºjÔª¥nf´~Õo×ÛąMąıuZmZcÒ IJĪ²SÊDŽŶ¨ƚCÖŎªQؼrŭ«}NÏürʬmjr@ĘrTW SsdHzƓ^ÇÂyUi¯DÅYlŹu{hT}mĉ¹¥ěDÿë©ıÓ[Oº£¥ótł¹MÕƪ`P
DiÛU¾ÅâìUñBÈ£ýhedy¡oċ`pfmjP~kZa
ZsÐd°wj§@Ĵ®w~^kÀÅKvNmX\\¨aŃqvíó¿F¤¡@ũÑVw}S@j}¾«pĂrªg àÀ²NJ¶¶Dô
K|^ª°LX¾ŴäPĪ±£EXd^¶IJÞÜ~u¸ǔMRhsR
e`ÄofIÔ\\Ø ićymnú¨cj ¢»GČìƊÿШXeĈĀ¾Oð Fi ¢|[jVxrIQ_EzAN¦zLU`cªxOTu RLÄ¢dVi`p˔vŎµªÉF~Ød¢ºgİàw¸Áb[¦Zb¦z½xBĖ@ªpºlS¸Ö\\Ĕ[N¥ˀmĎăJ\\ŀ`
ňSÚĖÁĐiOĜ«BxDõĚivSÌ}iùÜnкG{p°M´wÀÒzJ²ò¨ oTçüöoÛÿñőФùTz²CȆȸǎŪƑÐc°dPÎğ˶[Ƚu¯½WM¡ÉB·rínZÒ `¨GA¾\\pēXhÃRCüWGġu
Té§ŎÑ©ò³I±³}_EÃħg®ęisÁPDmÅ{b[RÅs·kPŽƥóRoOV~]{g\\êYƪ¦kÝbiċƵGZ»Ěõ
ó·³vŝ£ø@pyö_ëIkѵbcѧy
×dYتiþ¨[]f]Ņ©C}ÁN»hĻħƏĩ'
+ ]
+ ],
+ encodeOffsets: [[[115640, 30489]], [[112543, 27312]], [[116690, 26230]]]
+ },
+ properties: {
+ cp: [111.782279, 28.09409],
+ name: '湖南',
+ childNum: 3
+ }
+ },
+ {
+ id: '440000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@QdAua'],
+ ['@@lxDLo'],
+ ['@@sbhNLo'],
+ ['@@Ă ā'],
+ ['@@WltO[['],
+ ['@@Kr]S'],
+ ['@@eI]y'],
+ ['@@I|Mym'],
+ ['@@Û³LS¼Y'],
+ ['@@nvºBëui©`¾'],
+ ['@@zdÛJw®'],
+ ['@@°
¯'],
+ ['@@a yAª¸ËJIxØ@ĀHAmÃV¡ofuo'],
+ ['@@sŗÃÔėAƁZÄ ~°ČPäh'],
+ ['@@¶ÝÌvmĞhıQ'],
+ ['@@HdSjĒ¢D}war
u«ZqadYM'],
+ ['@@el\\LqqU'],
+ ['@@~rMo\\'],
+ ['@@f^C'],
+ ['@@øPªoj÷ÍÝħXČx°Q¨ıXNv'],
+ ['@@gÇƳo[~tly'],
+ ['@@EÆC¿'],
+ ['@@OP'],
+ [
+ '@@wđógĝ[³¡VÙæÅöM̳¹pÁaËýý©D©ÜJŹƕģGą¤{Ùū
ÇO²«BƱéAÒĥ¡«BhlmtÃPµyU¯ucd·w_bŝcīímGO|KPȏŹãŝIŕŭŕ@Óoo¿ē±ß}
ŭIJWÈCőâUâǙIğʼn©IijE×
Á³AówXJþ±ÌÜÓĨ£L]ĈÙƺZǾĆĖMĸĤfÎĵlŨnÈĐtFFĤêk¶^k°f¶g}®Faf`vXŲxl¦ÔÁ²¬Ð¦pqÊ̲iXØRDÎ}Ä@ZĠsx®AR~®ETtĄZƈfŠŠHâÒÐAµ\\S¸^wĖkRzalŜ|E¨ÈNĀňZTpBh£\\ĎƀuXĖtKL¶G|»ĺEļĞ~ÜĢÛĊrOÙîvd]n¬VÊĜ°RÖpMƂªFbwEÀ©\\
¤]ŸI®¥D³|Ë]CöAŤ¦
æ´¥¸Lv¼¢ĽBaôF~®²GÌÒEYzk¤°ahlVÕI^CxĈPsBƒºV¸@¾ªR²ĨN]´_eavSivc}p}Đ¼ƌkJÚe th_¸ ºx±ò_xN˲@ă¡ßH©Ùñ}wkNÕ¹ÇO½¿£ĕ]ly_WìIǪ`uTÅxYĒÖ¼kÖµMjJÚwn\\hĒv]îh|ÈƄøèg¸Ķß ĉĈWb¹ƀdéĘNTtP[öSvrCZaGubo´ŖÒÇĐ~¡zCI
özx¢PnÈñ @ĥÒ¦]ƞV}³ăĔñiiÄÓVépKG½ÄÓávYoC·sitiaÀyŧΡÈYDÑům}ý|m[węõĉZÅxUO}÷N¹³ĉo_qtăqwµŁYÙǝŕ¹tïÛUïmRCº
ĭ|µÕÊK½Rē ó]GªęAx»HO£|ām¡diď×YïYWªʼnOeÚtĐ«zđ¹T
āúEá²\\ķÍ}jYàÙÆſ¿Çdğ·ùTßÇţʄ¡XgWÀLJğ·¿ÃOj YÇ÷Qěi'
+ ]
+ ],
+ encodeOffsets: [
+ [[117381, 22988]],
+ [[116552, 22934]],
+ [[116790, 22617]],
+ [[116973, 22545]],
+ [[116444, 22536]],
+ [[116931, 22515]],
+ [[116496, 22490]],
+ [[116453, 22449]],
+ [[113301, 21439]],
+ [[118726, 21604]],
+ [[118709, 21486]],
+ [[113210, 20816]],
+ [[115482, 22082]],
+ [[113171, 21585]],
+ [[113199, 21590]],
+ [[115232, 22102]],
+ [[115739, 22373]],
+ [[115134, 22184]],
+ [[113056, 21175]],
+ [[119573, 21271]],
+ [[119957, 24020]],
+ [[115859, 22356]],
+ [[116561, 22649]],
+ [[116285, 22746]]
+ ]
+ },
+ properties: {
+ cp: [113.280637, 23.125178],
+ name: '广东',
+ childNum: 24
+ }
+ },
+ {
+ id: '450000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@H TQ§A'],
+ [
+ '@@ĨʪLƊDÎĹĐCǦė¸zÚGn£¾rªŀÜt¬@ÖÚSx~øOŒŶÐÂæȠ\\ÈÜObĖw^oÞLf¬°bI lTØBÌF£Ć¹gñĤaYt¿¤VSñK¸¤nM¼JE±½¸ñoÜCƆæĪ^ĚQÖ¦^f´QüÜÊz¯lzUĺš@ìp¶n]sxtx¶@~ÒĂJb©gk{°~c°`Ô¬rV\\la¼¤ôá`¯¹LCÆbxEræOv[H[~|aB£ÖsºdAĐzNÂðsÞÆ
Ĥªbab`ho¡³F«èVlo¤ÔRzpp®SĪº¨ÖºN
ijd`a¦¤F³ºDÎńĀìCĜº¦Ċ~nS|gźvZkCÆj°zVÈÁƔ]LÊFZg
čPkini«qÇczÍY®¬Ů»qR×ō©DÕ§ƙǃŵTÉĩ±ıdÑnYYIJvNĆĆØÜ Öp}e³¦m©iÓ|¹ħņ|ª¦QF¢Â¬ʖovg¿em^ucà÷gÕuíÙćĝ}FĻ¼Ĺ{µHKsLSđƃrč¤[AgoSŇYMÿ§Ç{FśbkylQxĕ]T·¶[B
ÑÏGáşşƇe
ăYSsFQ}BwtYğÃ@~
CÍQ ×Wj˱rÉ¥oÏ ±«ÓÂ¥kwWűmcih³K~µh¯e]lµélEģEďsmÇŧē`ãògK_ÛsUʝćğ¶höO¤Ǜn³c`¡y¦CezYwa[ďĵűMę§]XÎ_íÛ]éÛUćİÕBƣ±
dy¹T^dûÅÑŦ·PĻþÙ`K¦
¢ÍeĥR¿³£[~äu¼dltW¸oRM¢ď\\z}Æzdvň{ÎXF¶°Â_ÒÂÏL©ÖTmu¼ãlīkiqéfA·Êµ\\őDc¥ÝFyÔćcűH_hLÜêĺШc}rn`½Ì@¸¶ªVLhŒ\\Ţĺk~Ġið°|gtTĭĸ^xvKVGréAébUuMJVÃO¡
qĂXËSģãlýà_juYÛÒBG^éÖ¶§EGÅzěƯ¤EkN[kdåucé¬dnYpAyČ{`]þ¯TbÜÈk¡ĠvàhÂƄ¢J'
+ ]
+ ],
+ encodeOffsets: [[[111707, 21520]], [[107619, 25527]]]
+ },
+ properties: {
+ cp: [108.320004, 22.82402],
+ name: '广西',
+ childNum: 2
+ }
+ },
+ {
+ id: '460000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@¦Ŝil¢XƦƞòïè§ŞCêɕrŧůÇąĻõ·ĉ³œ̅kÇm@ċȧŧĥĽʉƅſȓÒ˦ŝE}ºƑ[ÍĜȋ gÎfǐÏĤ¨êƺ\\Ɔ¸ĠĎvʄȀоjNðĀÒRZdžzÐŘΰH¨Ƣb²_Ġ '
+ ],
+ encodeOffsets: [[112750, 20508]]
+ },
+ properties: {
+ cp: [109.83119, 19.031971],
+ name: '海南',
+ childNum: 1
+ }
+ },
+ {
+ id: '510000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@LqKr'],
+ [
+ '@@[ĻéV£_ţġñpG réÏ·~ąSfy×Í·ºſƽiÍıƣıĻmHH}siaX@iÇ°ÁÃ×t«T¤JJJyJÈ`Ohߦ¡uËhIyCjmÿw
ZG
TiSsOB²fNmsPa{M{õE^Hj}gYpaeu¯oáwHjÁ½M¡pMuåmni{fk\\oÎqCwEZ¼KĝAy{m÷LwO×SimRI¯rKõBS«sFe]fµ¢óY_ÆPRcue°Cbo×bd£ŌIHgtrnyPt¦foaXďxlBowz_{ÊéWiêEGhܸºuFĈIxf®Y½ĀǙ]¤EyF²ċw¸¿@g¢§RGv»áW`ÃĵJwi]t¥wO½a[×]`ÃiüL¦LabbTÀåc}ÍhÆh®BHî|îºÉk¤Sy£ia©taį·Ɖ`ō¥UhO
ĝLk}©Fos´JmµlŁu
ønÑJWΪYÀïAetTŅÓGË«bo{ıwodƟ½OġܵxàNÖ¾P²§HKv¾]|BÆåoZ`¡Ø`ÀmºĠ~ÌЧnÇ
¿¤]wğ@srğu~Io[é±¹ ¿ſđÓ@qg¹zƱřaí°KtǤV»Ã[ĩǭƑ^ÇÓ@áťsZÏÅĭƋěpwDóÖáŻneQËq·GCœýS]x·ýq³OÕ¶Qzßti{řáÍÇWŝŭñzÇWpç¿JXĩè½cFÂLiVjx}\\NŇĖ¥GeJA¼ÄHfÈu~¸Æ«dE³ÉMA|bÒ
ćhG¬CMõƤąAvüVéŀ_V̳ĐwQj´·ZeÈÁ¨X´Æ¡Qu·»ÕZ³ġqDoy`L¬gdp°şp¦ėìÅĮZ°Iähzĵf²å ĚÑKpIN|Ñz]ń
·FU×é»R³MÉ»GM«kiér}Ã`¹ăÞmÈnÁîRǀ³ĜoİzŔwǶVÚ£À]ɜ»ĆlƂ²Ġ
þTº·àUȞÏʦ¶I«dĽĢdĬ¿»Ĕ×h\\c¬ä²GêëĤł¥ÀǿżÃÆMº}BÕĢyFVvwxBèĻĒ©ĈtCĢɽŠȣ¦āæ·HĽîôNÔ~^¤Ɗu^s¼{TA¼ø°¢İªDè¾Ň¶ÝJ®Z´ğ~Sn|ªWÚ©òzPOȸbð¢|øĞŒQìÛÐ@ĞǎRS¤Á§d
i´ezÝúØã]HqkIþËQǦÃsǤ[E¬ÉŪÍxXƒ·ÖƁİlƞ¹ª¹|XÊwnÆƄmÀêErĒtD®ċæcQE®³^ĭ¥©l}äQtoŖÜqÆkµªÔĻĴ¡@Ċ°B²Èw^^RsºTĀ£ŚæQPJvÄz^Đ¹Æ¯fLà´GC²dtĀRt¼¤ĦOðğfÔðDŨŁĞƘïPÈ®âbMüÀXZ ¸£@Å»»QÉ]dsÖ×_Í_ÌêŮPrĔĐÕGĂeZÜîĘqBhtO ¤tE[h|YÔZśÎs´xº±Uñt|OĩĠºNbgþJy^dÂY Į]Řz¦gC³R`Āz¢Aj¸CL¤RÆ»@Ŏk\\Ç´£YW}z@Z}öoû¶]´^NÒ}èNªPÍy¹`S°´ATeVamdUĐwʄvĮÕ\\uÆŗ¨Yp¹àZÂmWh{á}WØǍÉüwga§áCNęÎ[ĀÕĪgÖɪXøx¬½Ů¦¦[NÎLÜUÖ´òrÙŠxR^JkijnDX{U~ET{ļº¦PZcjF²Ė@pg¨B{u¨ŦyhoÚD®¯¢ WòàFΤ¨GDäz¦kŮPġqË¥À]eâÚ´ªKxīPÖ|æ[xäJÞĥsNÖ½I¬nĨY´®ÐƐmDŝuäđđEb
ee_v¡}ìęNJē}qÉåT¯µRs¡M@}ůaa¯wvƉåZw\\Z{åû^'
+ ]
+ ],
+ encodeOffsets: [[[108815, 30935]], [[110617, 31811]]]
+ },
+ properties: {
+ cp: [104.065735, 30.659462],
+ name: '四川',
+ childNum: 2
+ }
+ },
+ {
+ id: '520000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@G\\lY£in'],
+ ['@@q|mc¯tÏVSÎ'],
+ [
+ '@@hÑ£IsNgßHHªķÃh_¹¡ĝħń¦uÙùgS¯JH|sÝÅtÁïyMDč»eÕtA¤{b\\}G®u\\åPFqwÅaD
K°ºâ_£ùbµmÁÛĹM[q|hlaªāI}ѵ@swtwm^oµD鼊yVky°ÉûÛR
³e¥]RÕěħ[ƅåÛDpJiVÂF²I
»mN·£LbÒYbWsÀbpkiTZĄă¶Hq`
ĥ_J¯ae«KpÝx]aĕÛPÇȟ[ÁåŵÏő÷Pw}TÙ@Õs«ĿÛq©½m¤ÙH·yǥĘĉBµĨÕnđ]K©œáG级ÕßgǗĦTèƤƺ{¶ÉHÎd¾ŚÊ·OÐjXWrãLyzÉAL¾ę¢bĶėy_qMĔąro¼hĊw¶øV¤w²Ĉ]ÊKx|`ź¦ÂÈdrcÈbe¸`I¼čTF´¼Óýȃr¹ÍJ©k_șl³´_pĐ`oÒh¶pa^ÓĔ}D»^Xy`d[Kv
JPhèhCrĂĚÂ^Êƌ wZLĠ£ÁbrzOIlMMĪŐžËr×ÎeŦtw|¢mKjSǘňĂStÎŦEtqFT¾E쬬ôxÌO¢ K³ŀºäYPVgŎ¦Ŋm޼VZwVlz¤
£Tl®ctĽÚó{GAÇge~Îd¿æaSba¥KKûj®_Ä^\\ؾbP®¦x^sxjĶI_Ä Xâ¼Hu¨Qh¡À@Ëô}±GNìĎlT¸
`V~R°tbÕĊ`¸úÛtÏFDu[MfqGH·¥yAztMFe|R_GkChZeÚ°tov`xbDnÐ{E}ZèxNEÞREn[Pv@{~rĆAB§EO¿|UZ~ìUf¨J²ĂÝÆsªB`s¶fvö¦Õ~dÔq¨¸º»uù[[§´sb¤¢zþF¢Æ
ÀhÂW\\ıËIÝo±ĭŠ£þÊs}¡R]ěDg´VG¢j±®èºÃmpU[Á뺰rÜbNu¸}º¼`niºÔXĄ¤¼ÔdaµÁ_Ã
ftQQgR·Ǔv}Ý×ĵ]µWc¤F²OĩųãW½¯K©
]{LóµCIµ±Mß¿h©āq¬o½~@i~TUxŪÒ¢@£ÀEîôruńb[§nWuMÆLl¿]x}ij½'
+ ]
+ ],
+ encodeOffsets: [[[112158, 27383]], [[112105, 27474]], [[112095, 27476]]]
+ },
+ properties: {
+ cp: [106.713478, 26.578343],
+ name: '贵州',
+ childNum: 3
+ }
+ },
+ {
+ id: '530000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@[ùx½}ÑRHYīĺûsÍniEoã½Ya²ė{c¬ĝgĂsAØÅwďõzFjw}«Dx¿}Uũlê@HÅF¨ÇoJ´Ónũuą¡Ã¢pÒÅØ TF²xa²ËXcÊlHîAßËŁkŻƑŷÉ©hWæßUËs¡¦}teèƶStÇÇ}Fd£jĈZĆƤTč\\D}O÷£U§~ŃGåŃDĝ¸Tsd¶¶Bª¤u¢ŌĎo~t¾ÍŶÒtD¦ÚiôözØX²ghįh½Û±¯ÿm·zR¦Ɵ`ªŊÃh¢rOÔ´£Ym¼èêf¯ŪĽncÚbw\\zlvWªâ ¦gmĿBĹ£¢ƹřbĥkǫßeeZkÙIKueT»sVesbaĕ ¶®dNĄÄpªy¼³BE®lGŭCǶwêżĔÂepÍÀQƞpC¼ŲÈAÎô¶RäQ^Øu¬°_Èôc´¹ò¨P΢hlϦ´ĦÆ´sâÇŲPnÊD^¯°Upv}®BP̪jǬxSöwlfòªvqĸ|`HviļndĜĆhňem·FyÞqóSį¯³X_ĞçêtryvL¤§z¦c¦¥jnŞklD¤øz½ĜàĂŧMÅ|áƆàÊcðÂFÜáŢ¥\\\\ºİøÒÐJĴîD¦zK²ǏÎEh~CDhMn^ÌöÄ©ČZÀaüfɭyœpį´ěFűk]Ôě¢qlÅĆÙa¶~ÄqêljN¬¼HÊNQ´ê¼VظE^ŃÒyM{JLoÒęæe±Ķygã¯JYÆĭĘëo¥Šo¯hcK«z_prC´ĢÖY¼ v¸¢RÅW³Â§fǸYi³xR´ďUË`êĿUûuĆBƣöNDH«ĈgÑaB{ÊNF´¬c·Åv}eÇÃGB»If¦HňĕM
~[iwjUÁKE¾dĪçWIèÀoÈXòyŞŮÈXâÎŚj|àsRyµÖPr´þ ¸^wþTDŔHr¸RÌmfżÕâCôoxĜƌÆĮÐYtâŦÔ@]ÈǮƒ\\Ī¼Ä£UsȯLbîƲŚºyhr@ĒÔƀÀ²º\\êpJ}ĠvqtĠ@^xÀ£È¨mËÏğ}n¹_¿¢×Y_æpÅA^{½Lu¨GO±Õ½ßM¶wÁĢÛPƢ¼pcIJx|ap̬HÐŊSfsðBZ¿©XÏÒKk÷Eû¿S
rEFsÕūkóVǥʼniTL¡n{uxţÏhôŝ¬ğōNNJkyPaqÂğ¤K®YxÉƋÁ]āęDqçgOgILu\\_gz]W¼~CÔē]bµogpÑ_oď`´³Țkl`IªºÎȄqÔþ»E³ĎSJ»_f·adÇqÇc¥Á_Źw{L^ɱćxU£µ÷xgĉp»ĆqNē`rĘzaĵĚ¡K½ÊBzyäKXqiWPÏɸ½řÍcÊG|µƕƣGË÷k°_^ý|_zċBZocmø¯hhcæ\\lMFlư£ĜÆyHF¨µêÕ]HA
àÓ^it `þßäkĤÎT~Wlÿ¨ÔPzUCNVv [jâôDôď[}z¿msSh¯{jïğl}šĹ[őgK©U·µË@¾m_~q¡f¹
ÅË^»f³ø}Q¡Ö˳gͱ^Ç
\\ëÃA_¿bWÏ[¶ƛé£F{īZgm@|kHǭƁć¦UĔť×ë}ǝeďºȡȘÏíBÉ£āĘPªij¶ʼnÿy©nď£G¹¡I±LÉĺÑdĉÜW¥}gÁ{aqÃ¥aıęÏZï`'
+ ],
+ encodeOffsets: [[104636, 22969]]
+ },
+ properties: {
+ cp: [101.512251, 24.740609],
+ name: '云南',
+ childNum: 1
+ }
+ },
+ {
+ id: '540000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@ÂhľxŖxÒVºÅâAĪÝȆµę¯Ňa±r_w~uSÕňqOj]ɄQ
£Z
UDûoY»©M[L¼qãË{VÍçWVi]ë©Ä÷àyƛhÚU°adcQ~Mx¥cc¡ÙaSyFÖkuRýq¿ÔµQĽ³aG{¿FµëªéĜÿª@¬·K·àariĕĀ«V»ŶĴūgèLǴŇƶaftèBŚ£^âǐÝ®M¦ÁǞÿ¬LhJ¾óƾƺcxwf]Y
´¦|QLn°adĊ
\\¨oǀÍŎ´ĩĀd`tÊQŞŕ|¨C^©Ĉ¦¦ÎJĊ{ëĎjª²rÐl`¼Ą[t|¦Stè¾PÜK¸dƄı]s¤î_v¹ÎVòŦj£Əsc¬_Ğ´|Ł¦Av¦w`ăaÝaa¢e¤ı²©ªSªÈMĄwÉØŔì@T¤Ę\\õª@þo´xA sÂtŎKzó´ÇĊµ¢r^nĊƬ×üG¢³ {âĊ]G~bÀgVjzlhǶfOfdªB]pjTOtĊn¤}®¦Č¥d¢¼»ddY¼t¢eȤJ¤}Ǿ¡°§¤AÐlc@ĝsªćļđAçwxUuzEÖġ~AN¹ÄÅȀŻ¦¿ģŁéì±H
ãd«g[ؼēÀcīľġ¬cJµ
ÐʥVȝ¸ßS¹ý±ğkƁ¼ą^ɛ¤Ûÿb[}¬ōõÃ]ËNm®g@Bg}ÍF±ǐyL¥íCIijÏ÷Ñį[¹¦[âšEÛïÁÉdƅß{âNÆāŨß¾ě÷yC£k´ÓH@¹TZ¥¢į·ÌAЧ®Zc
v½Z¹|ÅWZqgW|ieZÅYVÓqdqbc²R@c¥Rã»GeeƃīQ}J[ÒK
¬Ə|oėjġĠÑN¡ð¯EBčnwôɍėª²CλŹġǝʅįĭạ̃ūȹ]ΓͧgšsgȽóϧµǛęgſ¶ҍć`ĘąŌJÞä¤rÅň¥ÖÁUětęuůÞiĊÄÀ\\Æs¦ÓRb|Â^řÌkÄŷ¶½÷f±iMÝ@ĥ°G¬ÃM¥n£Øąğ¯ß§aëbéüÑOčk£{\\eµª×MÉfm«Ƒ{Å×Gŏǩãy³©WÑăû··Qòı}¯ãIéÕÂZ¨īès¶ZÈsæĔTŘvgÌsN@îá¾ó@ÙwU±ÉT廣TđWxq¹Zobs[ׯcĩvėŧ³BM|¹kªħ¥TzNYnÝßpęrñĠĉRS~½ěVVµõ«M££µBĉ¥áºae~³AuĐh`ܳç@BÛïĿa©|z²Ý¼D£àč²ŸIûI āóK¥}rÝ_Á´éMaň¨~ªSĈ½½KÙóĿeƃÆB·¬ën×W|Uº}LJrƳlŒµ`bÔ`QÐÓ@s¬ñIÍ@ûws¡åQÑßÁ`ŋĴ{ĪTÚÅTSijYo|Ç[ǾµMW¢ĭiÕØ¿@Mh
pÕ]jéò¿OƇĆƇpêĉâlØwěsǩĵ¸c
bU¹ř¨WavquSMzeo_^gsÏ·¥Ó@~¯¿RiīB\\qTGªÇĜçPoÿfñòą¦óQīÈáPābß{ZŗĸIæÅhnszÁCËìñÏ·ąĚÝUm®óL·ăUÈíoù´Êj°ŁŤ_uµ^°ìÇ@tĶĒ¡ÆM³Ģ«İĨÅ®ğRāðggheÆ¢zÊ©Ô\\°ÝĎz~ź¤PnMĪÖB£kn駿ćĆKĒ°¼L¶èâz¨u¦¥LDĘz¬ýÎmĘd¾ßFzhg²Fy¦ĝ¤ċņbÎ@yĄæm°NĮZRÖíJ²öLĸÒ¨Y®ƌÐVàtt_ÚÂyĠz]ŢhzĎ{ÂĢXc|ÐqfO¢¤ögÌHNPKŖUú´xx[xvĐCûĀìÖT¬¸^}Ìsòd´_KgžLĴ
ÀBon|H@Êx¦BpŰŌ¿fµƌA¾zLjRx¶FkĄźRzŀ~¶[´HnªVƞuĒȨƎcƽÌm¸ÁÈM¦x͊ëÀxdžBú^´W£dkɾĬpw˂ØɦļĬIŚÊnŔa¸~J°îlɌxĤÊÈðhÌ®gT´øàCÀ^ªerrƘd¢İP|Ė ŸWªĦ^¶´ÂLaT±üWƜǀRÂŶUńĖ[QhlLüAÜ\\qRĄ©'
+ ],
+ encodeOffsets: [[90849, 37210]]
+ },
+ properties: {
+ cp: [89.132212, 30.860361],
+ name: '西藏',
+ childNum: 1
+ }
+ },
+ {
+ id: '610000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@p¢ȮµûGĦ}Ħðǚ¶òƄjɂz°{ºØkÈęâ¦jªBg\\ċ°s¬]jú EȌdž¬stRÆdĠİwܸôW¾ƮłÒ_{Ìû¼jº¹¢GǪÒ¯ĘZ`ºŊecņą~BÂgzpâēòYǠȰÌTΨÂW|fcă§uF@N¢XLRMº[ğȣſï|¥Jkc`sʼnǷY¹W@µ÷K
ãï³ÛIcñ·VȋÚÒķø©þ¥yÓğęmWµÎumZyOŅƟĥÓ~sÑL¤µaÅ
Y¦ocyZ{y c]{Ta©`U_Ěē£ωÊƍKùK¶ȱÝƷ§{û»ÅÁȹÍéuij|¹cÑdìUYOuFÕÈYvÁCqÓTǢí§·S¹NgV¬ë÷Át°DدC´ʼnƒópģ}ċcEË
FéGU¥×K
§¶³BČ}C¿åċ`wġB·¤őcƭ²ő[Å^axwQO
ÿEËߌĤNĔwƇÄńwĪo[_KÓª³ÙnKÇěÿ]ďă_d©·©Ýŏ°Ù®g]±ßå¬÷m\\iaǑkěX{¢|ZKlçhLtŇîŵœè[É@ƉĄEtƇϳħZ«mJ
×¾MtÝĦ£IwÄå\\Õ{OwĬ©LÙ³ÙgBƕŀrÌĢŭO¥lãyC§HÍ£ßEñX¡°ÙCgpťzb`wIvA|§hoĕ@E±iYd¥OĻ¹S|}F@¾oAO²{tfÜ¢FǂÒW²°BĤh^Wx{@¬F¸¡ķn£P|ªĴ@^ĠĈæbÔc¶lYi
^MicĎ°Â[ävï¶gv@ÀĬ·lJ¸sn|¼u~a]ÆÈtŌºJpþ£KKf~¦UbyäIĺãnÔ¿^ŵMThĠܤko¼Ŏìąǜh`[tRd²IJ_XPrɲlXiL§à¹H°Ȧqº®QCbAŌJ¸ĕÚ³ĺ§ `d¨YjiZvRĺ±öVKkjGȊÄePĞZmļKÀ[`ösìhïÎoĬdtKÞ{¬èÒÒBÔpIJÇĬJŊ¦±J«Y§@·pHµàåVKepWftsAÅqC·¬ko«pHÆuK@oHĆÛķhxenS³àǍrqƶRbzy¸ËÐl¼EºpĤ¼x¼½~Ğà@ÚüdK^mÌSj'
+ ],
+ encodeOffsets: [[110234, 38774]]
+ },
+ properties: {
+ cp: [108.948024, 34.263161],
+ name: '陕西',
+ childNum: 1
+ }
+ },
+ {
+ id: '620000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@VuUv'],
+ [
+ '@@ũEĠtt~nkh`Q¦ÅÄÜdwAb×ĠąJ¤DüègĺqBqj°lI¡ĨÒ¤úSHbjÎB°aZ¢KJO[|A£Dx}NìHUnrk kp¼Y kMJn[aGáÚÏ[½rc}aQxOgsPMnUsncZ
sKúvAtÞġ£®ĀYKdnFw¢JE°Latf`¼h¬we|Æbj}GA·~W`¢MC¤tL©IJ°qdfObÞĬ¹ttu`^ZúE`[@Æsîz®¡CƳƜG²R¢RmfwĸgÜą G@pzJM½mhVy¸uÈÔO±¨{LfæU¶ßGĂq\\ª¬²I¥IʼnÈīoıÓÑAçÑ|«LÝcspīðÍg
të_õ\\ĉñLYnĝgRǡÁiHLlõUĹ²uQjYi§Z_c¨´ĹĖÙ·ŋI
aBDR¹ȥr¯GºßK¨jWkɱOqWij\\aQ\\sg_ĆǛōëp»£lğÛgSŶN®À]ÓämĹãJaz¥V}Le¤Lýo¹IsŋÅÇ^bz
³tmEÁ´a¹cčecÇNĊãÁ\\č¯dNj]jZµkÓdaćå]ğij@ ©O{¤ĸm¢E·®«|@Xwg]Aģ±¯XǁÑdzªcwQÚŝñsÕ³ÛV_ý¥\\ů¥©¾÷w©WÕÊĩhÿÖÁRo¸V¬âDb¨hûxÊ×nj~Zâg|XÁnßYoº§ZÅŘv[ĭÖʃuďxcVbnUSf
B¯³_TzºÎO©çMÑ~M³]µ^püµÄY~y@X~¤Z³[Èōl@®Å¼£QK·Di¡ByÿQ_´D¥hŗy^ĭÁZ]cIzýah¹MĪğPs{ò²Vw¹t³ŜË[Ñ}X\\gsF£sPAgěp×ëfYHāďÖqēŭOÏëdLü\\it^c®Rʺ¶¢H°mrY£B¹čIoľu¶uI]vģSQ{UŻÅ}QÂ|Ì°ƅ¤ĩŪU ęĄÌZÒ\\v²PĔ»ƢNHĂyAmƂwVm`]ÈbH`Ì¢²ILvĜH®¤Dlt_¢JJÄämèÔDëþgºƫaʎÌrêYi~ ÎݤNpÀA¾Ĕ¼b
ð÷®üszMzÖĖQdȨýv§Tè|ªHþa¸|Ð ƒwKĢx¦ivr^ÿ ¸l öæfƟĴ·PJv}n\\h¹¶v·À|\\ƁĚN´ĜçèÁz]ġ¤²¨QÒŨTIlªťØ}¼˗ƦvÄùØE«FïËIqōTvāÜŏíÛßÛVj³âwGăÂíNOPìyV³ʼnĖýZso§HÑiYw[ß\\X¦¥c]ÔƩÜ·«jÐqvÁ¦m^ċ±R¦ƈťĚgÀ»IïĨʗƮ°ƝĻþÍAƉſ±tÍEÕÞāNUÍ¡\\ſčåÒʻĘm ƭÌŹöʥëQ¤µÇcƕªoIýIÉ_mkl³ăƓ¦j¡YzŇi}Msßõīʋ }ÁVm_[n}eıUĥ¼ªI{ΧDÓƻėojqYhĹT©oūĶ£]ďxĩǑMĝq`B´ƃ˺Чç~²ņj@¥@đ´ί}ĥtPńǾV¬ufÓÉCtÓ̻
¹£G³]ƖƾŎĪŪĘ̖¨ʈĢƂlɘ۪üºňUðǜȢƢż̌ȦǼĤŊɲĖÂKq´ï¦ºĒDzņɾªǀÞĈĂD½ĄĎÌŗĞrôñnN¼â¾ʄľԆ|DŽ֦ज़ȗlj̘̭ɺƅêgV̍ʆĠ·ÌĊv|ýĖÕWĊǎÞ´õ¼cÒÒBĢ͢UĜð͒s¨ňƃLĉÕÝ@ɛƯ÷¿ĽĹeȏijëCȚDŲyê×Ŗyò¯ļcÂßY
tÁƤyAã˾J@ǝrý@¤
rz¸oP¹ɐÚyáHĀ[Jw
cVeȴÏ»ÈĖ}ƒŰŐèȭǢόĀƪÈŶë;Ñ̆ȤМľĮEŔĹŊũ~ËUă{ĻƹɁύȩþĽvĽƓÉ@ēĽɲßǐƫʾǗĒpäWÐxnsÀ^ƆwW©¦cÅ¡Ji§vúF¶¨c~c¼īeXǚ\\đ¾JwÀďksãAfÕ¦L}waoZD½Ml«]eÒÅaɲáo½FõÛ]ĻÒ¡wYR£¢rvÓ®y®LFLzĈôe]gx}|KK}xklL]c¦£fRtív¦PĤoH{tK'
+ ]
+ ],
+ encodeOffsets: [[[108619, 36299]], [[108589, 36341]]]
+ },
+ properties: {
+ cp: [103.823557, 36.058039],
+ name: '甘肃',
+ childNum: 2
+ }
+ },
+ {
+ id: '630000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@InJm'],
+ [
+ '@@CƽOŃĦsΰ~Ē³¦@@Ņi±è}ШƄ˹A³r_ĞǒNĪĐw¤^ŬĵªpĺSZgrpiƼĘÔ¨C|ÍJ©Ħ»®VIJ~f\\m `UnÂ~ʌĬàöNt~ňjy¢ZiƔ¥Ąk´nl`JÊJþ©pdƖ®È£¶ìRʦźõƮËnʼėæÑƀĎ[¢VÎĂMÖÝÎF²sƊƀÎBļýƞ¯ʘƭðħ¼Jh¿ŦęΌƇ¥²Q]Č¥nuÂÏri¸¬ƪÛ^Ó¦d¥[Wà
x\\ZjÒ¨GtpþYŊĕ´zUOëPîMĄÁxH´áiÜUàîÜŐĂÛSuŎrJð̬EFÁú×uÃÎkrĒ{V}İ«O_ÌËĬ©ÓŧSRѱ§Ģ£^ÂyèçěM³Ƃę{[¸¿u
ºµ[gt£¸OƤĿéYõ·kĀq]juw¥DĩƍõÇPéĽG©ã¤G
uȧþRcÕĕNyyûtøï»a½ē¿BMoį£Íj}éZËqbʍƬh¹ìÿÓAçãnIáI`ks£CGěUy×Cy
@¶ʡÊBnāzGơMē¼±O÷õJËĚăVĪũƆ£¯{ËL½ÌzżVR|ĠTbuvJvµhĻĖHAëáa
OÇðñęNw
œľ·LmI±íĠĩPÉ×®ÿscB³±JKßĊ«`
ađ»·QAmOVţéÿ¤¹SQt]]Çx±¯A@ĉij¢Óļ©l¶ÅÛrŕspãRk~¦ª]Į´FRådČsCqđéFn¿ÅƃmÉx{W©ºƝºįkÕƂƑ¸wWūЩÈF£\\tÈ¥ÄRÈýÌJ lGr^×äùyÞ³fjc¨£ÂZ|ǓMĝÏ@ëÜőRĝ÷¡{aïȷPu°ËXÙ{©TmĠ}Y³ÞIňµç½©C¡į÷¯B»|St»]vųs»}MÓ ÿʪƟǭA¡fs»PY¼c¡»¦cċ¥£~msĉPSi^o©AecPeǵkgyUi¿h}aHĉ^|á´¡HØûÅ«ĉ®]m¡qĉ¶³ÈyôōLÁstB®wn±ă¥HSòė£Së@לÊăxÇN©©T±ª£IJ¡fb®Þbb_Ą¥xu¥B{łĝ³«`dƐt¤ťiñÍUuºí`£^tƃIJc·ÛLO½sç¥Ts{ă\\_»kϱq©čiìĉ|ÍI¥ć¥]ª§D{ŝŖÉR_sÿc³ĪōƿΧp[ĉc¯bKmR¥{³Ze^wx¹dƽŽôIg §Mĕ ƹĴ¿ǣÜÍ]Ý]snåA{eƭ`ǻŊĿ\\ijŬűYÂÿ¬jĖqßb¸L«¸©@ěĀ©ê¶ìÀEH|´bRľÓ¶rÀQþvl®ÕETzÜdb hw¤{LRdcb¯ÙVgƜßzÃôì®^jUèXÎ|UäÌ»rK\\ªN¼pZCüVY¤ɃRi^rPŇTÖ}|br°qňbĚ°ªiƶGQ¾²x¦PmlŜ[Ĥ¡ΞsĦÔÏâ\\ªÚŒU\\f
¢N²§x|¤§xĔsZPòʛ²SÐqF`ªVÞŜĶƨVZÌL`¢dŐIqr\\oäõF礻Ŷ×h¹]ClÙ\\¦ďÌį¬řtTӺƙgQÇÓHţĒ´ÃbEÄlbʔC|CŮkƮ[ʼ¬ň´KŮÈΰÌĪ¶ƶlðļATUvdTGº̼ÔsÊDÔveOg'
+ ]
+ ],
+ encodeOffsets: [[[105308, 37219]], [[95370, 40081]]]
+ },
+ properties: {
+ cp: [96.778916, 35.623178],
+ name: '青海',
+ childNum: 2
+ }
+ },
+ {
+ id: '640000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ [
+ '@@KëÀęĞ«Oęȿȕı]ʼn¡åįÕÔ«ǴõƪĚQÐZhv K°öqÀÑS[ÃÖHƖčËnL]ûc
Ùß@ĝ¾}w»»oģF¹»kÌÏ·{zP§B¢íyÅt@@á]Yv_ssģ¼ißĻL¾ġsKD£¡N_
X¸}B~HaiÅf{«x»ge_bsKF¯¡IxmELcÿZ¤ĢÝsuBLùtYdmVtNmtOPhRw~bd
¾qÐ\\âÙH\\bImlNZ»loqlVmGā§~QCw¤{A\\PKNY¯bFkC¥sks_Ã\\ă«¢ħkJi¯rrAhĹûç£CUĕĊ_ÔBixÅÙĄnªÑaM~ħpOu¥sîeQ¥¤^dkKwlL~{L~hw^ófćKyEKzuÔ¡qQ¤xZÑ¢^ļöܾEp±âbÊÑÆ^fk¬
NC¾YpxbK~¥eÖäBlt¿Đx½I[ĒǙWf»Ĭ}d§dµùEuj¨IÆ¢¥dXªƅx¿]mtÏwßRĶX¢͎vÆzƂZò®ǢÌʆCrâºMÞzÆMÒÊÓŊZľr°Î®Ȉmª²ĈUªĚîøºĮ¦ÌĘk^FłĬhĚiĀĖ¾iİbjÕ'
+ ],
+ ['@@mfwěwMrŢªv@G']
+ ],
+ encodeOffsets: [[[109366, 40242]], [[108600, 36303]]]
+ },
+ properties: {
+ cp: [106.278179, 37.26637],
+ name: '宁夏',
+ childNum: 2
+ }
+ },
+ {
+ id: '650000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@QØĔ²X¨~ǘBºjʐßØvKƔX¨vĊO÷¢i@~cĝe_«E}QxgɪëÏÃ@sÅyXoŖ{ô«ŸuX
êÎf`C¹ÂÿÐGĮÕĞXŪōŸMźÈƺQèĽôe|¿ƸJR¤ĘEjcUóº¯Ĩ_ŘÁMª÷Ð¥OéÈ¿ÖğǤǷÂFÒzÉx[]Ĥĝœ¦EP}ûƥé¿İƷTėƫœŕƅƱB»Đ±ēO
¦E}`cȺrĦáŖuÒª«IJπdƺÏØZƴwʄ¤ĖGĐǂZĶèH¶}ÚZצʥĪï|ÇĦMŔ»İĝLjì¥Βba¯¥ǕǚkĆŵĦɑĺƯxūД̵nơʃĽá½M»òmqóŘĝč˾ăC
ćāƿÝɽ©DZŅ¹đ¥³ðLrÁ®ɱĕģʼnǻ̋ȥơŻǛȡVï¹Ň۩ûkɗġƁ§ʇė̕ĩũƽō^ƕUv£ƁQïƵkŏ½ΉÃŭdzLŇʻ«ƭ\\lŭD{ʓDkaFÃÄa³ŤđÔGRÈƚhSӹŚsİ«ĐË[¥ÚDkº^Øg¼ŵ¸£EÍöůʼnT¡c_ËKYƧUśĵÝU_©rETÏʜ±OñtYwē¨{£¨uM³x½şL©Ùá[ÓÐĥ Νtģ¢\\śnkOw¥±T»ƷFɯàĩÞáB¹Æ
ÑUwŕĽw[mG½Èå~Æ÷QyěCFmĭZīŵVÁƿQƛûXS²b½KϽĉS©ŷXĕ{ĕK·¥Ɨcqq©f¿]ßDõU³hgËÇïģÉɋwk¯í}I·œbmÉřīJɥĻˁ×xoɹīlc
¤³Xù]DžA¿w͉ì¥wÇN·ÂËnƾƍdǧđ®ƝvUm©³G\\}µĿQyŹlăµEwLJQ½yƋBe¶ŋÀůo¥AÉw@{Gpm¿AijŽKLh³`ñcËtW±»ÕSëüÿďDu\\wwwù³VLŕOMËGh£õP¡erÏd{ġWÁ
č|yšg^ğyÁzÙs`s|ÉåªÇ}m¢Ń¨`x¥ù^}Ì¥H«YªƅAйn~ź¯f¤áÀzgÇDIÔ´AňĀÒ¶ûEYospõD[{ù°]uJqU|Soċxţ[õÔĥkŋÞŭZ˺óYËüċrw ÞkrťË¿XGÉbřaDü·Ē÷Aê[ÄäI®BÕĐÞ_¢āĠpÛÄȉĖġDKwbmÄNôfƫVÉvidzHQµâFùÂœ³¦{YGd¢ĚÜO {Ö¦ÞÍÀP^bƾl[vt×ĈÍE˨¡Đ~´î¸ùÎhuè`¸HÕŔVºwĠââWò@{ÙNÝ´ə²ȕn{¿¥{l÷eé^eďXj©î\\ªÑòÜìc\\üqÕ[Č¡xoÂċªbØø|¶ȴZdÆÂońéG\\¼C°ÌÆn´nxÊOĨŪƴĸ¢¸òTxÊǪMīĞÖŲÃɎOvʦƢ~FRěò¿ġ~åŊúN¸qĘ[Ĕ¶ÂćnÒPĒÜvúĀÊbÖ{Äî¸~Ŕünp¤ÂH¾ĄYÒ©ÊfºmÔĘcDoĬMŬS¤s²ʘÚžȂVŦ èW°ªB|IJXŔþÈJĦÆæFĚêYĂªĂ]øªŖNÞüAfɨJ¯ÎrDDĤ`mz\\§~D¬{vJ«lµĂb¤pŌŰNĄ¨ĊXW|ų ¿¾ɄĦƐMTòP÷fØĶK¢ȝ˔Sô¹òEð`Ɩ½ǒÂň×äı§ĤƝ§C~¡hlåǺŦŞkâ~}FøàIJaĞfƠ¥Ŕd®U¸źXv¢aƆúŪtŠųƠjdƺƺÅìnrh\\ĺ¯äɝĦ]èpĄ¦´LƞĬ´ƤǬ˼Ēɸ¤rºǼ²¨zÌPðŀbþ¹ļD¢¹\\ĜÑŚ¶ZƄ³àjĨoâȴLÊȮĐĚăÀêZǚŐ¤qȂ\\L¢ŌİfÆs|zºeªÙæ§{Ā´ƐÚ¬¨Ĵà²łhʺKÞºÖTiƢ¾ªì°`öøu®Ê¾ãØ'
+ ],
+ encodeOffsets: [[88824, 50096]]
+ },
+ properties: {
+ cp: [85.617733, 40.792818],
+ name: '新疆',
+ childNum: 1
+ }
+ },
+ {
+ id: '110000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@ĽOÁûtŷmiÍt_H»Ĩ±d`¹{bw
Yr³S]§§o¹qGtm_SŧoaFLgQN_dV@Zom_ć\\ßc±x¯oœRcfe
£o§ËgToÛJíĔóu
|wP¤XnO¢ÉŦ¯rNÄā¤zâŖÈRpŢZÚ{GrFt¦Òx§ø¹RóäV¤XdżâºWbwŚ¨Ud®bêņ¾jnŎGŃŶnzÚSeîĜZczî¾i]ÍQaúÍÔiþĩȨWĢü|Ėu[qb[swP@ÅğP¿{\\¥A¨ÏѨj¯X\\¯MKpA³[H
īu}}'
+ ],
+ encodeOffsets: [[120023, 41045]]
+ },
+ properties: {
+ cp: [116.405285, 39.904989],
+ name: '北京',
+ childNum: 1
+ }
+ },
+ {
+ id: '120000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [
+ '@@ŬgX§Ü«E
¶F̬O_ïlÁgz±AXeµÄĵ{¶]gitgIj·¥îakS¨ÐƎk}ĕ{gBqGf{¿aU^fIư³õ{YıëNĿk©ïËZŏR§òoY×Ógc
ĥs¡bġ«@dekąI[nlPqCnp{ō³°`{PNdƗqSÄĻNNâyj]äÒD ĬH°Æ]~¡HO¾X}ÐxgpgWrDGpù^LrzWxZ^¨´T\\|~@IzbĤjeĊªz£®ĔvěLmV¾Ô_ÈNW~zbĬvG²ZmDM~~'
+ ],
+ encodeOffsets: [[120237, 41215]]
+ },
+ properties: {
+ cp: [117.190182, 39.125596],
+ name: '天津',
+ childNum: 1
+ }
+ },
+ {
+ id: '310000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@ɧư¬EpƸÁxc'],
+ ['@@©ª'],
+ ['@@MA'],
+ ['@@QpİE§ÉC¾'],
+ ['@@bŝÕÕEȣÚƥêImɇǦèÜĠÚÃƌÃ͎ó'],
+ ['@@ǜûȬɋŭ×^sYɍDŋŽąñCG²«ªč@h_p¯A{oloY¬j@IJ`gQÚhr|ǀ^MIJvtbe´R¯Ô¬¨Yô¤r]ìƬį']
+ ],
+ encodeOffsets: [
+ [[124702, 32062]],
+ [[124547, 32200]],
+ [[124808, 31991]],
+ [[124726, 32110]],
+ [[124903, 32376]],
+ [[124438, 32149]]
+ ]
+ },
+ properties: {
+ cp: [121.472644, 31.231706],
+ name: '上海',
+ childNum: 6
+ }
+ },
+ {
+ id: '500000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ [
+ '@@vjG~nGŘŬĶȂƀƾ¹¸ØÎezĆT¸}êÐqHðqĖä¥^CÆIj²p
\\_ æüY|[YxƊæu°xb®
Űb@~¢NQt°¶Sæ Ê~rljĔëĚ¢~uf`faĔJåĊnÖ]jƎćÊ@£¾a®£Ű{ŶĕFègLk{Y|¡ĜWƔtƬJÑxq±ĢN´òKLÈüD|s`ŋć]Ã`đMûƱ½~Y°ħ`ƏíW½eI½{aOIrÏ¡ĕŇapµÜƅġ^ÖÛbÙŽŏml½SêqDu[RãË»ÿw`»y¸_ĺę}÷`M¯ċfCVµqʼn÷Zgg`d½pDOÎCn^uf²ènh¼WtƏxRGg¦
pVFI±G^Ic´ecGĹÞ½sëĬhxW}KÓeXsbkF¦LØgTkïƵNï¶}Gyw\\oñ¡nmĈzj@Óc£»Wă¹Ój_m»¹·~MvÛaq»ê\\ÂoVnÓØͲ«bq¿efE Ĝ^Q~ Évýş¤²ĮpEİ}zcĺL½¿gÅ¡ýE¡ya£³t\\¨\\vú»¼§·Ñr_oÒý¥u_n»_At©Þűā§IVeëY}{VPÀFA¨ąB}q@|Ou\\FmQFÝ
Mwå}]|FmÏCawu_p¯sfÙgY
DHl`{QEfNysB¦zG¸rHeN\\CvEsÐùÜ_·ÖĉsaQ¯}_UxÃđqNH¬Äd^ÝŰR¬ã°wećJE·vÝ·HgéFXjÉê`|ypxkAwWĐpb¥eOsmzwqChóUQl¥F^lafanòsrEvfQdÁUVfÎvÜ^eftET¬ôA\\¢sJnQTjPØxøK|nBzĞ»LY
FDxÓvr[ehľvN¢o¾NiÂxGpâ¬zbfZo~hGi]öF||NbtOMn eA±tPTLjpYQ|SHYĀxinzDJÌg¢và¥Pg_ÇzIIII£®S¬Øsμ£N'
+ ],
+ ['@@ifjN@s']
+ ],
+ encodeOffsets: [[[109628, 30765]], [[111725, 31320]]]
+ },
+ properties: {
+ cp: [107.304962, 29.533155],
+ name: '重庆',
+ childNum: 2
+ }
+ },
+ {
+ id: '810000',
+ type: 'Feature',
+ geometry: {
+ type: 'MultiPolygon',
+ coordinates: [
+ ['@@AlBk'],
+ ['@@mn'],
+ ['@@EpFo'],
+ [
+ '@@ea¢pl¸Eõ¹hj[]ÔCÎ@lj¡uBX
´AI¹
[yDU]W`çwZkmc
MpÅv}IoJlcafŃK°ä¬XJmÐ đhI®æÔtSHnEÒrÈc'
+ ],
+ ['@@rMUwAS®e']
+ ],
+ encodeOffsets: [
+ [[117111, 23002]],
+ [[117072, 22876]],
+ [[117045, 22887]],
+ [[116975, 23082]],
+ [[116882, 22747]]
+ ]
+ },
+ properties: {
+ cp: [114.173355, 22.320048],
+ name: '香港',
+ childNum: 5
+ }
+ },
+ {
+ id: '820000',
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: ['@@kÊd°å§s'],
+ encodeOffsets: [[116279, 22639]]
+ },
+ properties: {
+ cp: [113.54909, 22.198951],
+ name: '澳门',
+ childNum: 1
+ }
+ }
+ ],
+ UTF8Encoding: true
+}
diff --git a/examples/docs/resources/pc/demo/chart/pie/base.vue b/examples/docs/resources/pc/demo/chart/pie/base.vue
new file mode 100644
index 000000000..51443e56f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/pie/base.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/pie/demo2.vue b/examples/docs/resources/pc/demo/chart/pie/demo2.vue
new file mode 100644
index 000000000..da321f4cd
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/pie/demo2.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/pie/demo3.vue b/examples/docs/resources/pc/demo/chart/pie/demo3.vue
new file mode 100644
index 000000000..5fb9dfc1c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/pie/demo3.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/pie/demo4.vue b/examples/docs/resources/pc/demo/chart/pie/demo4.vue
new file mode 100644
index 000000000..c5aac50e6
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/pie/demo4.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/pie/demo5.vue b/examples/docs/resources/pc/demo/chart/pie/demo5.vue
new file mode 100644
index 000000000..56ad93b61
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/pie/demo5.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/pie/demo6.vue b/examples/docs/resources/pc/demo/chart/pie/demo6.vue
new file mode 100644
index 000000000..bfe599e53
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/pie/demo6.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/pie/demo7.vue b/examples/docs/resources/pc/demo/chart/pie/demo7.vue
new file mode 100644
index 000000000..5f0204ccb
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/pie/demo7.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/props/base.vue b/examples/docs/resources/pc/demo/chart/props/base.vue
new file mode 100644
index 000000000..65f566b92
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/props/base.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/chart/props/demo10.vue b/examples/docs/resources/pc/demo/chart/props/demo10.vue
similarity index 98%
rename from example/src/demo/pc/chart/props/demo10.vue
rename to examples/docs/resources/pc/demo/chart/props/demo10.vue
index 38c7aeac5..ee6b270fb 100644
--- a/example/src/demo/pc/chart/props/demo10.vue
+++ b/examples/docs/resources/pc/demo/chart/props/demo10.vue
@@ -5,7 +5,7 @@
-
+
diff --git a/examples/docs/resources/pc/demo/chart/props/demo6.vue b/examples/docs/resources/pc/demo/chart/props/demo6.vue
new file mode 100644
index 000000000..92ac3d877
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/props/demo6.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/props/demo7.vue b/examples/docs/resources/pc/demo/chart/props/demo7.vue
new file mode 100644
index 000000000..5b62f7646
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/props/demo7.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/props/demo8.vue b/examples/docs/resources/pc/demo/chart/props/demo8.vue
new file mode 100644
index 000000000..10a837747
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/props/demo8.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/props/demo9.vue b/examples/docs/resources/pc/demo/chart/props/demo9.vue
new file mode 100644
index 000000000..bb22f8dda
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/props/demo9.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/question/base.vue b/examples/docs/resources/pc/demo/chart/question/base.vue
new file mode 100644
index 000000000..0e0335e06
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/question/base.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/question/demo2.vue b/examples/docs/resources/pc/demo/chart/question/demo2.vue
new file mode 100644
index 000000000..6abf9cce2
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/question/demo2.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/question/demo3.vue b/examples/docs/resources/pc/demo/chart/question/demo3.vue
new file mode 100644
index 000000000..6bf507689
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/question/demo3.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/question/demo4.vue b/examples/docs/resources/pc/demo/chart/question/demo4.vue
new file mode 100644
index 000000000..e406fdcc1
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/question/demo4.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/question/demo5.vue b/examples/docs/resources/pc/demo/chart/question/demo5.vue
new file mode 100644
index 000000000..58ef6b3cf
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/question/demo5.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
当前父元素宽度: {{ parentElementWidth }},chart 组件{{ isAction ? '已' : '未' }}执行 resize()。
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/radar/base.vue b/examples/docs/resources/pc/demo/chart/radar/base.vue
new file mode 100644
index 000000000..bcd64b852
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/radar/base.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/radar/demo2.vue b/examples/docs/resources/pc/demo/chart/radar/demo2.vue
new file mode 100644
index 000000000..6978d423c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/radar/demo2.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/radar/demo3.vue b/examples/docs/resources/pc/demo/chart/radar/demo3.vue
new file mode 100644
index 000000000..d6fc928a9
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/radar/demo3.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/ring/base.vue b/examples/docs/resources/pc/demo/chart/ring/base.vue
new file mode 100644
index 000000000..8c74c6a17
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/ring/base.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/ring/demo2.vue b/examples/docs/resources/pc/demo/chart/ring/demo2.vue
new file mode 100644
index 000000000..b81334092
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/ring/demo2.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/ring/demo3.vue b/examples/docs/resources/pc/demo/chart/ring/demo3.vue
new file mode 100644
index 000000000..fc69a8125
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/ring/demo3.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/ring/demo4.vue b/examples/docs/resources/pc/demo/chart/ring/demo4.vue
new file mode 100644
index 000000000..f673c8097
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/ring/demo4.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/ring/demo5.vue b/examples/docs/resources/pc/demo/chart/ring/demo5.vue
new file mode 100644
index 000000000..2dbf4ff3e
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/ring/demo5.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/ring/demo6.vue b/examples/docs/resources/pc/demo/chart/ring/demo6.vue
new file mode 100644
index 000000000..901db8f32
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/ring/demo6.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/chart/ring/ring-title.vue b/examples/docs/resources/pc/demo/chart/ring/ring-title.vue
similarity index 98%
rename from example/src/demo/pc/chart/ring/ring-title.vue
rename to examples/docs/resources/pc/demo/chart/ring/ring-title.vue
index c642deb25..4a99b1672 100644
--- a/example/src/demo/pc/chart/ring/ring-title.vue
+++ b/examples/docs/resources/pc/demo/chart/ring/ring-title.vue
@@ -4,7 +4,7 @@
-
diff --git a/examples/docs/resources/pc/demo/chart/sankey/demo2.vue b/examples/docs/resources/pc/demo/chart/sankey/demo2.vue
new file mode 100644
index 000000000..c5f656e16
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/sankey/demo2.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/scatter/base.vue b/examples/docs/resources/pc/demo/chart/scatter/base.vue
new file mode 100644
index 000000000..daed8fa2d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/scatter/base.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/scatter/demo2.vue b/examples/docs/resources/pc/demo/chart/scatter/demo2.vue
new file mode 100644
index 000000000..1273ae2a9
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/scatter/demo2.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/scatter/demo3.vue b/examples/docs/resources/pc/demo/chart/scatter/demo3.vue
new file mode 100644
index 000000000..16250dbe4
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/scatter/demo3.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/scatter/demo4.vue b/examples/docs/resources/pc/demo/chart/scatter/demo4.vue
new file mode 100644
index 000000000..05e117767
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/scatter/demo4.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/scatter/demo5.vue b/examples/docs/resources/pc/demo/chart/scatter/demo5.vue
new file mode 100644
index 000000000..dedbf82dc
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/scatter/demo5.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/scatter/demo6.vue b/examples/docs/resources/pc/demo/chart/scatter/demo6.vue
new file mode 100644
index 000000000..9ee75cf0d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/scatter/demo6.vue
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/scatter/demo7.vue b/examples/docs/resources/pc/demo/chart/scatter/demo7.vue
new file mode 100644
index 000000000..76f9710f4
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/scatter/demo7.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/scatter/demo8.vue b/examples/docs/resources/pc/demo/chart/scatter/demo8.vue
new file mode 100644
index 000000000..1757660e3
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/scatter/demo8.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/sunburst/base.vue b/examples/docs/resources/pc/demo/chart/sunburst/base.vue
new file mode 100644
index 000000000..d739cc603
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/sunburst/base.vue
@@ -0,0 +1,296 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/sunburst/demo2.vue b/examples/docs/resources/pc/demo/chart/sunburst/demo2.vue
new file mode 100644
index 000000000..8f17bfc2d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/sunburst/demo2.vue
@@ -0,0 +1,857 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/tree/base.vue b/examples/docs/resources/pc/demo/chart/tree/base.vue
new file mode 100644
index 000000000..8340d6044
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/tree/base.vue
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/tree/demo2.vue b/examples/docs/resources/pc/demo/chart/tree/demo2.vue
new file mode 100644
index 000000000..25d11a44c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/tree/demo2.vue
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/tree/demo3.vue b/examples/docs/resources/pc/demo/chart/tree/demo3.vue
new file mode 100644
index 000000000..e5a7e8952
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/tree/demo3.vue
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/tree/demo4.vue b/examples/docs/resources/pc/demo/chart/tree/demo4.vue
new file mode 100644
index 000000000..0fe9115f3
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/tree/demo4.vue
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/tree/demo5.vue b/examples/docs/resources/pc/demo/chart/tree/demo5.vue
new file mode 100644
index 000000000..89088ce99
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/tree/demo5.vue
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/waterfall/base.vue b/examples/docs/resources/pc/demo/chart/waterfall/base.vue
new file mode 100644
index 000000000..1c79d9f21
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/waterfall/base.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/waterfall/demo2.vue b/examples/docs/resources/pc/demo/chart/waterfall/demo2.vue
new file mode 100644
index 000000000..7dd16bf7d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/waterfall/demo2.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/waterfall/demo3.vue b/examples/docs/resources/pc/demo/chart/waterfall/demo3.vue
new file mode 100644
index 000000000..dad61d5df
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/waterfall/demo3.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/waterfall/demo4.vue b/examples/docs/resources/pc/demo/chart/waterfall/demo4.vue
new file mode 100644
index 000000000..f0f0485d4
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/waterfall/demo4.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/waterfall/demo5.vue b/examples/docs/resources/pc/demo/chart/waterfall/demo5.vue
new file mode 100644
index 000000000..e574ac91a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/waterfall/demo5.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/wordcloud/base.vue b/examples/docs/resources/pc/demo/chart/wordcloud/base.vue
new file mode 100644
index 000000000..66f36ae3c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/wordcloud/base.vue
@@ -0,0 +1,167 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/wordcloud/demo2.vue b/examples/docs/resources/pc/demo/chart/wordcloud/demo2.vue
new file mode 100644
index 000000000..2b7c1513a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/wordcloud/demo2.vue
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/wordcloud/demo3.vue b/examples/docs/resources/pc/demo/chart/wordcloud/demo3.vue
new file mode 100644
index 000000000..6722bb85d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/wordcloud/demo3.vue
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/chart/wordcloud/demo4.vue b/examples/docs/resources/pc/demo/chart/wordcloud/demo4.vue
new file mode 100644
index 000000000..99c04b8c4
--- /dev/null
+++ b/examples/docs/resources/pc/demo/chart/wordcloud/demo4.vue
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/checkbox/basic-usage.vue b/examples/docs/resources/pc/demo/checkbox/basic-usage.vue
new file mode 100644
index 000000000..8fabc241d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/checkbox/basic-usage.vue
@@ -0,0 +1,18 @@
+
+ 复选框
+
+
+
diff --git a/example/src/demo/pc/checkbox/button-chek-box.vue b/examples/docs/resources/pc/demo/checkbox/button-chek-box.vue
similarity index 96%
rename from example/src/demo/pc/checkbox/button-chek-box.vue
rename to examples/docs/resources/pc/demo/checkbox/button-chek-box.vue
index ca92bdc97..fa1b8d057 100644
--- a/example/src/demo/pc/checkbox/button-chek-box.vue
+++ b/examples/docs/resources/pc/demo/checkbox/button-chek-box.vue
@@ -5,7 +5,7 @@
-
diff --git a/examples/docs/resources/pc/demo/checkbox/indeterminate.vue b/examples/docs/resources/pc/demo/checkbox/indeterminate.vue
new file mode 100644
index 000000000..f97a20c8a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/checkbox/indeterminate.vue
@@ -0,0 +1,45 @@
+
+
+
全选
+
+
+ {{ city }}
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/checkbox/min-max.vue b/examples/docs/resources/pc/demo/checkbox/min-max.vue
new file mode 100644
index 000000000..3b1ff5ddf
--- /dev/null
+++ b/examples/docs/resources/pc/demo/checkbox/min-max.vue
@@ -0,0 +1,24 @@
+
+
+
+ {{ city }}
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/checkbox/text.vue b/examples/docs/resources/pc/demo/checkbox/text.vue
new file mode 100644
index 000000000..f8a5b4bde
--- /dev/null
+++ b/examples/docs/resources/pc/demo/checkbox/text.vue
@@ -0,0 +1,30 @@
+
+
+
+ 获取文本
+
+
+
+
diff --git a/example/src/demo/pc/checkbox/vertical-checkbox.vue b/examples/docs/resources/pc/demo/checkbox/vertical-checkbox.vue
similarity index 83%
rename from example/src/demo/pc/checkbox/vertical-checkbox.vue
rename to examples/docs/resources/pc/demo/checkbox/vertical-checkbox.vue
index 99e6f7481..9c8630d0f 100644
--- a/example/src/demo/pc/checkbox/vertical-checkbox.vue
+++ b/examples/docs/resources/pc/demo/checkbox/vertical-checkbox.vue
@@ -1,10 +1,10 @@
-
+
{{ city }}
-
diff --git a/examples/docs/resources/pc/demo/col/base.vue b/examples/docs/resources/pc/demo/col/base.vue
new file mode 100644
index 000000000..86cedb844
--- /dev/null
+++ b/examples/docs/resources/pc/demo/col/base.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+ span 12
+
+
+
+
+
+ span 3
+
+
+ span 6
+
+
+ span 3
+
+
+
+
+
+ span 2
+
+
+ span 3
+
+
+ span 2
+
+
+ span 3
+
+
+ span 2
+
+
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/col/col-move.vue b/examples/docs/resources/pc/demo/col/col-move.vue
similarity index 97%
rename from example/src/demo/pc/col/col-move.vue
rename to examples/docs/resources/pc/demo/col/col-move.vue
index 09ada525d..6abc00420 100644
--- a/example/src/demo/pc/col/col-move.vue
+++ b/examples/docs/resources/pc/demo/col/col-move.vue
@@ -17,7 +17,7 @@
-
+
+
diff --git a/example/src/demo/pc/col/tag.vue b/examples/docs/resources/pc/demo/col/tag.vue
similarity index 97%
rename from example/src/demo/pc/col/tag.vue
rename to examples/docs/resources/pc/demo/col/tag.vue
index adeb83bd6..71ea80626 100644
--- a/example/src/demo/pc/col/tag.vue
+++ b/examples/docs/resources/pc/demo/col/tag.vue
@@ -18,7 +18,7 @@
-
diff --git a/examples/docs/resources/pc/demo/collapse/basic-usage.vue b/examples/docs/resources/pc/demo/collapse/basic-usage.vue
new file mode 100644
index 000000000..283d47173
--- /dev/null
+++ b/examples/docs/resources/pc/demo/collapse/basic-usage.vue
@@ -0,0 +1,37 @@
+
+
+
+ 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
+ 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
+
+
+ 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
+ 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
+
+
+ 简化流程:设计简洁直观的操作流程;
+ 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
+ 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
+
+
+ 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
+ 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
+
+
+
+
+
diff --git a/example/src/demo/pc/collapse/block-close.vue b/examples/docs/resources/pc/demo/collapse/block-close.vue
similarity index 98%
rename from example/src/demo/pc/collapse/block-close.vue
rename to examples/docs/resources/pc/demo/collapse/block-close.vue
index 6ca635ae6..8b7cabd04 100644
--- a/example/src/demo/pc/collapse/block-close.vue
+++ b/examples/docs/resources/pc/demo/collapse/block-close.vue
@@ -20,7 +20,7 @@
-
diff --git a/example/src/demo/pc/collapse/nested-form.vue b/examples/docs/resources/pc/demo/collapse/nested-form.vue
similarity index 97%
rename from example/src/demo/pc/collapse/nested-form.vue
rename to examples/docs/resources/pc/demo/collapse/nested-form.vue
index d16f94da1..92eae13d3 100644
--- a/example/src/demo/pc/collapse/nested-form.vue
+++ b/examples/docs/resources/pc/demo/collapse/nested-form.vue
@@ -17,7 +17,7 @@
-
+
@@ -35,7 +35,7 @@
-
diff --git a/examples/docs/resources/pc/demo/company/custom-service.vue b/examples/docs/resources/pc/demo/company/custom-service.vue
new file mode 100644
index 000000000..41f7dbe93
--- /dev/null
+++ b/examples/docs/resources/pc/demo/company/custom-service.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/company/custom-show-num.vue b/examples/docs/resources/pc/demo/company/custom-show-num.vue
similarity index 93%
rename from example/src/demo/pc/company/custom-show-num.vue
rename to examples/docs/resources/pc/demo/company/custom-show-num.vue
index 261a8654e..5214dd72a 100644
--- a/example/src/demo/pc/company/custom-show-num.vue
+++ b/examples/docs/resources/pc/demo/company/custom-show-num.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/components.js b/examples/docs/resources/pc/demo/components.js
new file mode 100644
index 000000000..a4bf08321
--- /dev/null
+++ b/examples/docs/resources/pc/demo/components.js
@@ -0,0 +1,955 @@
+export default {
+ alert: {
+ Attributes: {
+ closable: 'closable',
+ description: 'description',
+ type: 'type',
+ icon: 'icon',
+ size: 'size',
+ title: 'title',
+ center: 'center',
+ 'show-icon': 'show-icon',
+ 'close-text': 'close-text'
+ },
+ Events: {
+ close: 'close'
+ },
+ Slots: {
+ default: 'slot-default',
+ title: 'slot-title'
+ }
+ },
+
+ badge: {
+ Attributes: {
+ value: 'value',
+ max: 'max',
+ 'is-dot': 'is-dot',
+ hidden: 'hidden',
+ href: 'href',
+ target: 'target',
+ type: 'type'
+ },
+ Slots: {
+ default: 'slot-default',
+ content: 'slot-content'
+ }
+ },
+
+ breadcrumb: {
+ Attributes: {
+ separator: 'separator',
+ 'separator-class': 'separator',
+ replace: 'replace',
+ to: 'to'
+ },
+ Slots: {
+ default: 'slot-default'
+ }
+ },
+
+ 'bulletin-board': {
+ Attributes: {
+ data: 'data',
+ 'more-link': 'more-link',
+ 'active-name': 'active-name',
+ icon: 'icon',
+ 'show-more': 'show-more',
+ 'tab-title': 'tab-title',
+ title: 'title'
+ }
+ },
+
+ button: {
+ Attributes: {
+ 'native-type': 'native-type',
+ type: 'type',
+ size: 'size',
+ autofocus: 'autofocus',
+ circle: 'circle',
+ disabled: 'disabled',
+ icon: 'icon',
+ loading: 'loading',
+ plain: 'plain',
+ 'reset-time': 'reset-time',
+ round: 'round'
+ },
+ Events: {
+ click: 'click'
+ },
+ Slots: {
+ default: 'slot-default'
+ }
+ },
+
+ 'button-group': {
+ Attributes: {
+ data: 'data',
+ disabled: 'disabled',
+ plain: 'plain',
+ 'text-field': 'text-field',
+ value: 'value',
+ 'value-field': 'value-field'
+ },
+ Slots: {
+ default: 'slot-default'
+ }
+ },
+
+ input: {
+ Attributes: {
+ 'suffix-icon': 'suffix-icon',
+ maxlength: 'maxlength',
+ 'prefix-icon': 'prefix-icon',
+ readonly: 'readonly',
+ clearable: 'clearable',
+ type: 'type',
+ 'value / v-model': 'value',
+ autocomplete: 'autocomplete',
+ counter: 'counter',
+ autofocus: 'autofocus',
+ autosize: 'autosize',
+ disabled: 'disabled',
+ form: 'form',
+ label: 'label',
+ max: 'max',
+ min: 'min',
+ minlength: 'minlength',
+ name: 'name',
+ placeholder: 'placeholder',
+ resize: 'resize',
+ rows: 'rows',
+ 'show-password': 'show-password',
+ 'show-word-limit': 'show-word-limit',
+ size: 'size',
+ step: 'step',
+ tabindex: 'tabindex',
+ 'validate-event': 'validate-event'
+ },
+ Events: {
+ blur: 'event-blur',
+ change: 'event-change',
+ clear: 'event-clear',
+ focus: 'event-focus',
+ input: 'event-input'
+ },
+ Methods: {
+ addMemory: 'method-addMemory',
+ blur: 'method-blur',
+ focus: 'method-focus',
+ select: 'method-select'
+ },
+ Slots: {
+ append: 'slot-append',
+ prefix: 'slot-prefix',
+ prepend: 'slot-prepend',
+ suffix: 'slot-suffix'
+ }
+ },
+
+ select: {
+ Attributes: {
+ multiple: 'multiple',
+ clearable: 'clearable',
+ 'value / v-model': 'value',
+ autocomplete: 'autocomplete',
+ 'allow-create': 'allow-create',
+ 'automatic-dropdown': 'automatic-dropdown',
+ 'collapse-tags': 'collapse-tags',
+ 'default-first-option': 'default-first-option',
+ disabled: 'disabled',
+ 'filter-method': 'filter-method',
+ filterable: 'filterable',
+ loading: 'loading',
+ 'loading-text': 'loading-text',
+ 'multiple-limit': 'multiple-limit',
+ name: 'name',
+ 'no-data-text': 'no-data-text',
+ 'no-match-text': 'no-match-text',
+ placeholder: 'placeholder',
+ 'popper-append-to-body': 'popper-append-to-body',
+ 'popper-class': 'popper-class',
+ remote: 'remote',
+ 'remote-method': 'remote-method',
+ 'reserve-keyword': 'reserve-keyword',
+ size: 'size',
+ 'value-key': 'value-key'
+ },
+ Methods: {
+ blur: 'method-blur',
+ focus: 'method-focus'
+ },
+ Events: {
+ change: 'event-change',
+ clear: 'event-clear',
+ blur: 'event-blur',
+ focus: 'event-focus',
+ 'remove-tag': 'event-remove-tag',
+ 'visible-change': 'event-visible-change'
+ },
+ Slots: {
+ default: 'slot-default',
+ empty: 'slot-empty',
+ prefix: 'slot-prefix',
+ footer: 'slot-footer'
+ }
+ },
+
+ option: {
+ Attributes: {
+ disabled: 'disabled',
+ label: 'label',
+ value: 'value'
+ }
+ },
+
+ 'option-group': {
+ Attributes: {
+ disabled: 'disabled',
+ label: 'label'
+ }
+ },
+
+ 'scroll-text': {
+ Attributes: {
+ direction: 'direction',
+ 'hover-stop': 'text',
+ text: 'text',
+ time: 'text'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {
+ default: 'slots'
+ }
+ },
+ container: {
+ Attributes: {
+ 'aside-width': 'base',
+ 'footer-height': 'base',
+ 'header-height': 'base',
+ pattern: 'pattern'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ switch: {
+ Attributes: {
+ disabled: 'disabled',
+ mini: 'disabled',
+ 'value / v-model': 'truevlue',
+ trueValue: 'truevlue',
+ falseValue: 'truevlue'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ tag: {
+ Attributes: {
+ border: 'hit',
+ hit: 'hit',
+ color: 'color3',
+ type: 'type',
+ closeable: 'closeable',
+ createable: 'closeable',
+ effect: 'effect',
+ disabled: 'disabled',
+ mode: 'border',
+ readonly: 'disabled',
+ selectable: 'border',
+ size: 'tag-size',
+ value: 'base'
+ },
+ Events: {
+ click: 'tag-event-click',
+ close: 'tag-event-close'
+ },
+ Methods: {},
+ Slots: {
+ new: 'slotNew',
+ text: 'slotText'
+ }
+ },
+ tabs: {
+ Attributes: {
+ activeName: 'basic-usage',
+ tabStyle: 'tab-style-card',
+ withAdd: 'with-add',
+ withClose: 'with-close',
+ position: 'position-bottom',
+ 'before-leave': 'before-leave',
+ stretch: 'stretch-wh',
+ size: 'tabs-size',
+ value: 'basic-value'
+ },
+ Events: {
+ add: 'tabs-events-add',
+ click: 'tabs-events-click',
+ close: 'tabs-events-close',
+ edit: 'tabs-events-edit'
+ },
+ Methods: {},
+ Slots: {
+ title: 'custom-tab-title'
+ }
+ },
+ 'text-popup': {
+ Attributes: {
+ label: 'label',
+ placeholder: 'placeholder',
+ readonly: 'readonly',
+ value: 'value',
+ width: 'width',
+ separtor: 'separtor'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ search: {
+ Attributes: {
+ 'default-value': 'default-value',
+ mini: 'mini-mode',
+ placeholder: 'basic-usage',
+ 'search-types': 'search-types',
+ transparent: 'transparent-mode'
+ },
+ Events: {
+ change: 'search-events',
+ search: 'search-events'
+ },
+ Methods: {},
+ Slots: {
+ poplist: 'custom-search-types',
+ text: 'show-selected-types'
+ }
+ },
+ slider: {
+ Attributes: {
+ value: 'basic-usage',
+ mini: 'disabled',
+ 'value / v-model': 'truevlue',
+ trueValue: 'truevlue',
+ falseValue: 'truevlue'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ split: {
+ Attributes: {
+ 'left-top-min': 'base',
+ mode: 'base',
+ 'right-bottom-min': 'base',
+ value: 'base',
+ transparent: 'base'
+ },
+ Events: {
+ moveend: 'events',
+ movestart: 'events',
+ moving: 'events'
+ },
+ Methods: {},
+ Slots: {
+ bottom: 'slots',
+ left: 'slots',
+ right: 'slots',
+ top: 'slots',
+ trigger: 'slots'
+ }
+ },
+ 'card-template': {
+ Attributes: {
+ 'body-style': 'base',
+ 'header-line': 'base'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {
+ default: 'slots',
+ footer: 'slots',
+ header: 'slots'
+ }
+ },
+ col: {
+ Attributes: {
+ span: 'base',
+ move: 'move',
+ offset: 'move',
+ xs: 'responsive',
+ sm: 'responsive',
+ xl: 'responsive',
+ md: 'responsive',
+ lg: 'responsive',
+ no: 'move',
+ tag: 'tag'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ loading: {
+ Attributes: {
+ text: 'base',
+ background: 'background',
+ body: 'body',
+ customClass: 'custom-class',
+ lock: 'lock',
+ spinner: 'spinner',
+ transparent: 'opacity',
+ fullscreen: 'fullscreen',
+ target: 'target'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ progress: {
+ Attributes: {
+ color: 'custom-color',
+ percentage: 'basic-usage',
+ 'show-text': 'format-text',
+ status: 'progress-status',
+ 'stroke-width': 'progress-width',
+ 'text-inside': 'text-inside-or-no-text',
+ type: 'progress-type'
+ }
+ },
+ numeric: {
+ Attributes: {
+ controls: 'controls',
+ disabled: 'dynamic-disabled',
+ max: 'max-min',
+ min: 'max-min',
+ mouseWheel: 'mouse-wheel',
+ precision: 'precision',
+ step: 'about-step'
+ }
+ },
+ milestone: {
+ Attributes: {
+ data: 'data-source',
+ 'completed-field': 'completed-field',
+ 'flag-before': 'flag-before',
+ 'flag-content-field': 'flag-content-field',
+ 'flag-field': 'flag-field',
+ 'flag-name-field': 'flag-name-field',
+ 'flag-status-field': 'flag-status-field',
+ 'line-style': 'line-style',
+ 'milestones-status': 'base',
+ 'show-number': 'show-number',
+ solid: 'solid',
+ space: 'space',
+ start: 'space',
+ 'status-field': 'status-field',
+ 'time-field': 'time-field'
+ },
+ Events: {
+ click: 'click',
+ flagclick: 'click',
+ 'flag-click': 'click'
+ },
+ Methods: {},
+ Slots: {
+ bottom: 'bottom',
+ flag: 'flag',
+ top: 'top'
+ }
+ },
+ modal: {
+ Attributes: {
+ 'value,v-model': 'value',
+ type: 'type',
+ id: 'id',
+ duration: 'duration',
+ fullscreen: 'fullscreen',
+ width: 'width',
+ height: 'height',
+ mask: 'lock-view',
+ message: 'message',
+ resize: 'resize',
+ showFooter: 'showFooter',
+ showHeader: 'showHeader',
+ status: 'status',
+ title: 'title',
+ top: 'top',
+ zIndex: 'zIndex',
+ 'min-width': 'min-width',
+ 'min-height': 'min-height',
+ 'esc-closable': 'esc-closable',
+ 'lock-view': 'lock-view',
+ 'lock-scroll': 'lock-scroll',
+ 'mask-closable': 'mask-closable'
+ },
+ Events: {
+ confirm: 'confirm-event',
+ cancel: 'cancel-event',
+ close: 'close-event',
+ show: 'show-event',
+ hide: 'hide-event',
+ zoom: 'zoom-event'
+ },
+ Methods: {},
+ Slots: {
+ default: 'value',
+ footer: 'footer-slot'
+ }
+ },
+ espace: {
+ Attributes: {
+ data: 'data'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ steps: {
+ Attributes: {
+ data: 'data-resource',
+ active: 'order-progress',
+ 'count-field': 'custom-field',
+ 'name-field': 'custom-field',
+ space: 'space',
+ 'status-field': 'custom-field'
+ },
+ Events: {
+ click: 'click'
+ },
+ Methods: {},
+ Slots: {
+ item: 'slot'
+ }
+ },
+ 'user-head': {
+ Attributes: {
+ 'background-color': 'color',
+ color: 'color',
+ 'message-total': 'message-total',
+ 'message-type': 'message-type',
+ 'message-upper-limit': 'message-upper-limit',
+ min: 'shape',
+ round: 'shape',
+ type: 'type',
+ value: 'type'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {
+ default: 'slot'
+ }
+ },
+ 'fall-menu': {
+ Attributes: {
+ data: 'a'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {
+ left: 'level',
+ level1: 'level',
+ level2: 'level',
+ level3: 'level',
+ right: 'level'
+ }
+ },
+ rate: {
+ Attributes: {
+ colors: 'score',
+ 'disabled-void-color': 'disabledcolor',
+ 'disabled-void-icon-class': 'disabledcolor',
+ 'show-text': 'readiconclass',
+ 'icon-classes': 'colors',
+ disabled: 'disabledcolor',
+ 'text-color': 'readiconclass',
+ texts: 'readiconclass',
+ 'void-icon-class': 'colors',
+ 'allow-half': 'half',
+ 'score-template': 'textconfig',
+ 'show-score': 'textconfig',
+ 'void-color': 'colors',
+ 'text-on-bottom': 'half',
+ 'value / v-model': 'half',
+ size: 'spacesize',
+ space: 'spacesize',
+ 'high-threshold': 'score',
+ 'low-threshold': 'score',
+ max: 'score',
+ radio: 'radio'
+ },
+ Events: {
+ change: 'events'
+ },
+ Methods: {},
+ Slots: {}
+ },
+ 'ip-address': {
+ Attributes: {
+ delimiter: 'delimiter',
+ disabled: 'disabled',
+ readonly: 'readonly',
+ type: 'type',
+ value: 'type'
+ },
+ Events: {
+ select: 'select',
+ input: 'input',
+ change: 'change',
+ focus: 'focus',
+ blur: 'blur'
+ },
+ Methods: {},
+ Slots: {
+ 默认插槽: 'slots'
+ }
+ },
+ row: {
+ Attributes: {
+ align: 'align',
+ gutter: 'gutter',
+ justify: 'justify',
+ order: 'order',
+ tag: 'tag1'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ 'user-contact': {
+ Attributes: {
+ data: 'basic-usage',
+ espace: 'support-open-espace',
+ 'show-img': 'support-open-espace',
+ 'show-name': 'support-open-espace',
+ 'show-description': 'support-open-espace'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ 'user-link': {
+ Attributes: {
+ value: 'basic-usage',
+ 'value-split': 'value-split',
+ 'text-split': 'text-split',
+ 'value-field': 'value-field',
+ 'text-field': 'text-field',
+ service: 'custom-service'
+ },
+ Events: {},
+ Slots: {},
+ Methods: {}
+ },
+ tree: {
+ Attributes: {
+ accordion: 'accordion-mode',
+ 'allow-drag': 'allow-drag',
+ data: 'data-source',
+ 'allow-drop': 'allow-drop',
+ 'auto-expand-parent': 'auto-expand-parent',
+ 'basic-usage': 'basic-usage',
+ 'check-descendants': 'check-descendants',
+ 'check-on-click-node': 'check-on-click-node',
+ 'check-strictly': 'check-strictly',
+ 'current-node-key': 'current-node-key',
+ 'custom-empty-text': 'custom-empty-text',
+ 'custom-node-icon': 'custom-node-icon',
+ 'default-checked-keys': 'default-checked-keys',
+ 'default-expand-all': 'default-expand-all',
+ 'default-expanded-keys': 'default-expanded-keys',
+ 'disable-node': 'disable-node',
+ 'expand-on-click-node': 'expand-on-click-node',
+ 'filter-node-method': 'filter-node',
+ 'highlight-current': 'highlight-current',
+ indent: 'indent',
+ 'icon-class': 'icon-class',
+ 'node-draggable': 'node-draggable',
+ 'node-key': 'node-key',
+ props: 'node-props-config',
+ 'render-after-expand': 'render-after-expand',
+ 'render-content': 'render-content',
+ 'show-checkbox': 'show-checkbox',
+ 'lazy-load': 'lazy-load-node'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+
+ 'time-select': {
+ Attributes: {
+ 'arrow-control': 'arrow-control',
+ 'clear-icon': 'clear-icon',
+ clearable: 'clearable',
+ 'default-time': 'default-time',
+ 'default-value': 'default-value',
+ disabled: 'disabled',
+ editable: 'editable',
+ 'start-placeholder': 'range-placeholder',
+ 'end-placeholder': 'range-placeholder',
+ placeholder: 'basic-usage',
+ name: '',
+ value: 'basic-usage',
+ 'v-model': 'basic-usage',
+ 'picker-options': 'picker-options',
+ 'popper-class': '',
+ 'prefix-icon': 'prefix-icon',
+ 'range-separator': '',
+ size: 'size-mini'
+ },
+ Events: {
+ add: 'tabs-events-add',
+ click: 'tabs-events-click',
+ close: 'tabs-events-close',
+ edit: 'tabs-events-edit'
+ },
+ Methods: {},
+ Slots: {
+ title: 'custom-tab-title'
+ }
+ },
+ transfer: {
+ Attributes: {
+ 'button-texts': 'custom-button-texts',
+ columns: '',
+ data: '',
+ 'drop-config': 'drop-config',
+ 'filter-method': 'custom-filter-method',
+ 'filter-placeholder': 'filter-placeholder',
+ filterable: 'filterable',
+ format: 'checked-format-text',
+ 'left-default-checked': 'default-checked',
+ 'page-vo': '',
+ props: 'props-of-data-source',
+ 'render-content': 'custom-render-content',
+ 'render-type': '',
+ 'right-default-checked': 'default-checked',
+ 'show-all-btn': '',
+ sortable: '',
+ 'target-order': 'custom-data-items',
+ titles: 'custom-transfer-titles',
+ 'to-left-disable': '',
+ 'to-right-disable': '',
+ 'value/v-model': 'basic-usage'
+ },
+ Events: {
+ change: 'transfer-events',
+ 'left-check-change': 'transfer-events',
+ 'right-check-change': 'transfer-events'
+ },
+ Slots: {
+ default: 'custom-data-items',
+ 'left-footer': 'custom-footer',
+ 'right-footer': 'custom-footer'
+ },
+ Methods: {
+ clearQuery: 'manual-clear-query'
+ }
+ },
+
+ logout: {
+ Attributes: {
+ guestRole: 'basic-usage',
+ service: 'custom-service'
+ }
+ },
+
+ user: {
+ Attributes: {
+ value: 'basic-usage',
+ multiple: 'multiple-users',
+ disabled: 'dynamic-disable',
+ 'value-split': 'value-split',
+ 'value-field': 'value-field',
+ 'text-field': 'text-field',
+ cache: 'cache-users',
+ 'cache-key': 'cache-users',
+ delay: 'delay-load',
+ 'suggest-length': 'load-after-input-the-length',
+ 'cache-fields': 'cache-users',
+ service: 'custom-service',
+ 'collapse-tags': '',
+ placeholder: 'custom-placeholder',
+ 'expand-tags': '',
+ sortable: 'custom-sort',
+ size: 'user-select-size'
+ },
+ Events: {},
+ Slots: {},
+ Methods: {}
+ },
+ carousel: {
+ Attributes: {},
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ checkbox: {
+ Attributes: {},
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ 'dialog-box': {
+ Attributes: {},
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ radio: {
+ Attributes: {
+ disabled: 'dynamic-disable',
+ border: 'with-border',
+ label: 'basic-usage',
+ name: '',
+ size: 'radio-size'
+ },
+ Events: {
+ change: 'radio-events'
+ },
+ Slots: {
+ default: 'basic-usage'
+ },
+ Methods: {}
+ },
+ pager: {
+ Attributes: {
+ 'pager-count': 'pager-count',
+ mode: 'pager-mode',
+ 'value / v-model': 'basic-usage',
+ 'page-sizes': 'page-size',
+ layout: 'custom-layout',
+ 'current-page': 'current-page',
+ 'hide-on-single-page': 'hide-on-single-page',
+ 'next-text': 'custom-next-prev-text',
+ 'page-count': 'page-count',
+ 'page-size': 'page-size',
+ 'prev-text': 'custom-next-prev-text',
+ total: 'pager-in-grid'
+ },
+ Events: {
+ 'size-change': 'pager-events',
+ 'current-change': 'pager-events',
+ 'next-click': 'pager-events',
+ 'prev-click': 'pager-events'
+ },
+ Methods: {},
+ Slots: {
+ default: ''
+ }
+ },
+ collapse: {
+ Attributes: {
+ 'value / v-model': 'basic-usage',
+ accordion: 'accordion'
+ },
+ Events: {
+ change: 'collapse-events'
+ },
+ Methods: {},
+ Slots: {}
+ },
+ 'slide-bar': {
+ Attributes: {
+ value: 'basic-usage',
+ 'init-blocks': 'basic-usage',
+ 'wheel-blocks': 'wheel-blocks',
+ tag: 'custom-tag',
+ 'sub-tag': 'custom-tag'
+ },
+ Events: {
+ click: 'slide-bar-events',
+ 'before-click': 'slide-bar-events'
+ },
+ Methods: {},
+ Slots: {
+ default: 'custom-content'
+ }
+ },
+ 'credit-card-form': {
+ Attributes: {
+ 'form-data': 'basic-usage'
+ },
+ Events: {
+ 'input-card-cvv': 'basic-usage',
+ 'input-card-month': 'basic-usage',
+ 'input-card-name': 'basic-usage',
+ 'input-card-number': 'basic-usage',
+ 'input-card-year': 'basic-usage',
+ submit: 'basic-usage'
+ },
+ Methods: {},
+ Slots: {}
+ },
+ 'time-line': {
+ Attributes: {
+ vertical: 'vertical-step',
+ 'show-number': 'show-number',
+ 'name-field': 'different-data',
+ 'time-field': 'different-data',
+ start: 'set-start-value',
+ data: 'basic-usage',
+ space: 'set-step-width',
+ active: 'basic-usage',
+ reverse: 'vertical-step'
+ },
+ Events: {
+ click: 'basic-usage'
+ },
+ Methods: {},
+ Slots: {
+ top: 'custom-normal-step',
+ bottom: 'custom-normal-step',
+ left: 'custom-vertical-step',
+ right: 'custom-vertical-step'
+ }
+ },
+ 'date-picker': {
+ Attributes: {
+ 'value/v-model': 'basic-usage',
+ align: 'align',
+ 'clear-icon': 'about-clear',
+ clearable: 'about-clear',
+ type: 'date-range',
+ 'picker-options': 'date-range-shortcuts',
+ 'start-placeholder': 'custom-range',
+ 'end-placeholder': 'custom-range',
+ 'range-separator': 'custom-range',
+ 'default-time': 'default-time-of-range',
+ disabled: 'disabled',
+ 'default-value': 'default-value',
+ editable: 'editable',
+ format: 'about-format',
+ 'prefix-icon': 'custom-prefix-icon',
+ size: 'set-size',
+ placeholder: 'custom-placeholder',
+ 'unlink-panels': 'unlink-panels'
+ },
+ Events: {
+ blur: 'date-picker-events',
+ change: 'date-picker-events',
+ focus: 'date-picker-events'
+ },
+ Methods: {},
+ Slots: {}
+ },
+ 'logon-user': {
+ Attributes: {
+ service: 'custom-service'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {}
+ },
+ 'user-account': {
+ Attributes: {
+ service: 'custom-service'
+ },
+ Events: {},
+ Methods: {},
+ Slots: {
+ default: 'custom-operation'
+ }
+ }
+}
diff --git a/examples/docs/resources/pc/demo/container/basic-usage.vue b/examples/docs/resources/pc/demo/container/basic-usage.vue
new file mode 100644
index 000000000..2af79515e
--- /dev/null
+++ b/examples/docs/resources/pc/demo/container/basic-usage.vue
@@ -0,0 +1,58 @@
+
+
+
+
+ Header
+
+
+ Aside
+
+ Main
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/container/classic.vue b/examples/docs/resources/pc/demo/container/classic.vue
similarity index 98%
rename from example/src/demo/pc/container/classic.vue
rename to examples/docs/resources/pc/demo/container/classic.vue
index 71a4ba45e..4ab1c83c4 100644
--- a/example/src/demo/pc/container/classic.vue
+++ b/examples/docs/resources/pc/demo/container/classic.vue
@@ -15,7 +15,7 @@
-
diff --git a/examples/docs/resources/pc/demo/country/custom-service.vue b/examples/docs/resources/pc/demo/country/custom-service.vue
new file mode 100644
index 000000000..c69b59c77
--- /dev/null
+++ b/examples/docs/resources/pc/demo/country/custom-service.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/country/fields.vue b/examples/docs/resources/pc/demo/country/fields.vue
new file mode 100644
index 000000000..caf81feb3
--- /dev/null
+++ b/examples/docs/resources/pc/demo/country/fields.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/credit-card-form/background-image.vue b/examples/docs/resources/pc/demo/credit-card-form/background-image.vue
similarity index 85%
rename from example/src/demo/pc/credit-card-form/background-image.vue
rename to examples/docs/resources/pc/demo/credit-card-form/background-image.vue
index 215af74a0..e3b1cc73d 100644
--- a/example/src/demo/pc/credit-card-form/background-image.vue
+++ b/examples/docs/resources/pc/demo/credit-card-form/background-image.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/credit-card-form/credit-card-form-events.vue b/examples/docs/resources/pc/demo/credit-card-form/credit-card-form-events.vue
similarity index 98%
rename from example/src/demo/pc/credit-card-form/credit-card-form-events.vue
rename to examples/docs/resources/pc/demo/credit-card-form/credit-card-form-events.vue
index 6d2905c2a..ff9e08211 100644
--- a/example/src/demo/pc/credit-card-form/credit-card-form-events.vue
+++ b/examples/docs/resources/pc/demo/credit-card-form/credit-card-form-events.vue
@@ -10,7 +10,7 @@
>
-
diff --git a/examples/docs/resources/pc/demo/crop/auto-crop-area.vue b/examples/docs/resources/pc/demo/crop/auto-crop-area.vue
new file mode 100644
index 000000000..d4014c32c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/crop/auto-crop-area.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/crop/basic-usage.vue b/examples/docs/resources/pc/demo/crop/basic-usage.vue
new file mode 100644
index 000000000..0fd5d5b8f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/crop/basic-usage.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/crop/crop-meth.vue b/examples/docs/resources/pc/demo/crop/crop-meth.vue
new file mode 100644
index 000000000..4d91ac796
--- /dev/null
+++ b/examples/docs/resources/pc/demo/crop/crop-meth.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/crop/drag-mode.vue b/examples/docs/resources/pc/demo/crop/drag-mode.vue
new file mode 100644
index 000000000..c7fcfcd3a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/crop/drag-mode.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/crop/event-about-crop.vue b/examples/docs/resources/pc/demo/crop/event-about-crop.vue
similarity index 95%
rename from example/src/demo/pc/crop/event-about-crop.vue
rename to examples/docs/resources/pc/demo/crop/event-about-crop.vue
index b9cc992f5..bb73c3c69 100644
--- a/example/src/demo/pc/crop/event-about-crop.vue
+++ b/examples/docs/resources/pc/demo/crop/event-about-crop.vue
@@ -6,7 +6,7 @@
:cropvisible="visible"
@update:cropvisible="visible = $event"
ref="crop"
- src="static/images/1.jpg"
+ src="static/images/mountain.png"
@cropstart="cropstart"
@cropmove="cropmove"
@cropend="cropend"
@@ -15,7 +15,7 @@
-
diff --git a/example/src/demo/pc/crop/get-container-data.vue b/examples/docs/resources/pc/demo/crop/get-container-data.vue
similarity index 88%
rename from example/src/demo/pc/crop/get-container-data.vue
rename to examples/docs/resources/pc/demo/crop/get-container-data.vue
index 27ae76a92..d1219db83 100644
--- a/example/src/demo/pc/crop/get-container-data.vue
+++ b/examples/docs/resources/pc/demo/crop/get-container-data.vue
@@ -2,11 +2,11 @@
获取容器数据
-
+
-
diff --git a/example/src/demo/pc/crop/no-guides.vue b/examples/docs/resources/pc/demo/crop/no-guides.vue
similarity index 79%
rename from example/src/demo/pc/crop/no-guides.vue
rename to examples/docs/resources/pc/demo/crop/no-guides.vue
index 3ee6a538f..c4759d676 100644
--- a/example/src/demo/pc/crop/no-guides.vue
+++ b/examples/docs/resources/pc/demo/crop/no-guides.vue
@@ -1,11 +1,11 @@
-
+
-
diff --git a/examples/docs/resources/pc/demo/crop/replace-image.vue b/examples/docs/resources/pc/demo/crop/replace-image.vue
new file mode 100644
index 000000000..340d68a14
--- /dev/null
+++ b/examples/docs/resources/pc/demo/crop/replace-image.vue
@@ -0,0 +1,35 @@
+
+
+ 替换图片
+
+
+
+
+
+
diff --git a/example/src/demo/pc/crop/view-mode.vue b/examples/docs/resources/pc/demo/crop/view-mode.vue
similarity index 80%
rename from example/src/demo/pc/crop/view-mode.vue
rename to examples/docs/resources/pc/demo/crop/view-mode.vue
index fe63af67e..754d1bc28 100644
--- a/example/src/demo/pc/crop/view-mode.vue
+++ b/examples/docs/resources/pc/demo/crop/view-mode.vue
@@ -1,11 +1,11 @@
-
+
-
diff --git a/examples/docs/resources/pc/demo/crop/zoom-on-wheel.vue b/examples/docs/resources/pc/demo/crop/zoom-on-wheel.vue
new file mode 100644
index 000000000..dd883d58b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/crop/zoom-on-wheel.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/currency/basic-usage.vue b/examples/docs/resources/pc/demo/currency/basic-usage.vue
new file mode 100644
index 000000000..7e72e1fa9
--- /dev/null
+++ b/examples/docs/resources/pc/demo/currency/basic-usage.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/currency/custom-service.vue b/examples/docs/resources/pc/demo/currency/custom-service.vue
new file mode 100644
index 000000000..04b692381
--- /dev/null
+++ b/examples/docs/resources/pc/demo/currency/custom-service.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/currency/disable-currency.vue b/examples/docs/resources/pc/demo/currency/disable-currency.vue
similarity index 97%
rename from example/src/demo/pc/currency/disable-currency.vue
rename to examples/docs/resources/pc/demo/currency/disable-currency.vue
index 9ac3b0f2c..04066ae4c 100644
--- a/example/src/demo/pc/currency/disable-currency.vue
+++ b/examples/docs/resources/pc/demo/currency/disable-currency.vue
@@ -6,7 +6,7 @@
-
diff --git a/examples/docs/resources/pc/demo/currency/size.vue b/examples/docs/resources/pc/demo/currency/size.vue
new file mode 100644
index 000000000..e7e33a85b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/currency/size.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/date-picker/about-clear.vue b/examples/docs/resources/pc/demo/date-picker/about-clear.vue
similarity index 97%
rename from example/src/demo/pc/date-picker/about-clear.vue
rename to examples/docs/resources/pc/demo/date-picker/about-clear.vue
index c9acee13f..90d2a65e2 100644
--- a/example/src/demo/pc/date-picker/about-clear.vue
+++ b/examples/docs/resources/pc/demo/date-picker/about-clear.vue
@@ -13,7 +13,7 @@
-
diff --git a/examples/docs/resources/pc/demo/date-picker/basic-usage.vue b/examples/docs/resources/pc/demo/date-picker/basic-usage.vue
new file mode 100644
index 000000000..44d170865
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/basic-usage.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/date-picker/clearable.vue b/examples/docs/resources/pc/demo/date-picker/clearable.vue
new file mode 100644
index 000000000..b50752f3a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/clearable.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/date-picker/custom-range.vue b/examples/docs/resources/pc/demo/date-picker/custom-range.vue
new file mode 100644
index 000000000..996aa6e6d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/custom-range.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/date-picker/custom-suffix-icon.vue b/examples/docs/resources/pc/demo/date-picker/custom-suffix-icon.vue
similarity index 95%
rename from example/src/demo/pc/date-picker/custom-suffix-icon.vue
rename to examples/docs/resources/pc/demo/date-picker/custom-suffix-icon.vue
index 473dc99ec..aaa1536a8 100644
--- a/example/src/demo/pc/date-picker/custom-suffix-icon.vue
+++ b/examples/docs/resources/pc/demo/date-picker/custom-suffix-icon.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/date-picker/disabled.vue b/examples/docs/resources/pc/demo/date-picker/disabled.vue
new file mode 100644
index 000000000..73eaecb5e
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/disabled.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/date-picker/editable.vue b/examples/docs/resources/pc/demo/date-picker/editable.vue
new file mode 100644
index 000000000..2f4f4bba5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/editable.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/date-picker/focus.vue b/examples/docs/resources/pc/demo/date-picker/focus.vue
new file mode 100644
index 000000000..6c207eeee
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/focus.vue
@@ -0,0 +1,32 @@
+
+
+ 获取焦点
+ 启用/禁用
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/date-picker/max-min.vue b/examples/docs/resources/pc/demo/date-picker/max-min.vue
new file mode 100644
index 000000000..eb01ba094
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/max-min.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/date-picker/month-range-shortcuts.vue b/examples/docs/resources/pc/demo/date-picker/month-range-shortcuts.vue
similarity index 98%
rename from example/src/demo/pc/date-picker/month-range-shortcuts.vue
rename to examples/docs/resources/pc/demo/date-picker/month-range-shortcuts.vue
index f715ff8c7..9d7d995f8 100644
--- a/example/src/demo/pc/date-picker/month-range-shortcuts.vue
+++ b/examples/docs/resources/pc/demo/date-picker/month-range-shortcuts.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/date-picker/set-size.vue b/examples/docs/resources/pc/demo/date-picker/set-size.vue
similarity index 97%
rename from example/src/demo/pc/date-picker/set-size.vue
rename to examples/docs/resources/pc/demo/date-picker/set-size.vue
index 898ee28ff..b1a8c11cd 100644
--- a/example/src/demo/pc/date-picker/set-size.vue
+++ b/examples/docs/resources/pc/demo/date-picker/set-size.vue
@@ -17,7 +17,7 @@
-
diff --git a/example/src/demo/pc/date-picker/unlink-panels.vue b/examples/docs/resources/pc/demo/date-picker/unlink-panels.vue
similarity index 93%
rename from example/src/demo/pc/date-picker/unlink-panels.vue
rename to examples/docs/resources/pc/demo/date-picker/unlink-panels.vue
index e8a76e0cc..c067e29b3 100644
--- a/example/src/demo/pc/date-picker/unlink-panels.vue
+++ b/examples/docs/resources/pc/demo/date-picker/unlink-panels.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/date-picker/validate-event.vue b/examples/docs/resources/pc/demo/date-picker/validate-event.vue
new file mode 100644
index 000000000..9341752f5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/date-picker/validate-event.vue
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 立即创建
+ 重置
+
+
+
+
+
diff --git a/example/src/demo/pc/dept/auto-select.vue b/examples/docs/resources/pc/demo/dept/auto-select.vue
similarity index 92%
rename from example/src/demo/pc/dept/auto-select.vue
rename to examples/docs/resources/pc/demo/dept/auto-select.vue
index a8be774d6..82e830c49 100644
--- a/example/src/demo/pc/dept/auto-select.vue
+++ b/examples/docs/resources/pc/demo/dept/auto-select.vue
@@ -2,7 +2,7 @@
-
diff --git a/example/src/demo/pc/dept/before-confirm.vue b/examples/docs/resources/pc/demo/dept/before-confirm.vue
similarity index 97%
rename from example/src/demo/pc/dept/before-confirm.vue
rename to examples/docs/resources/pc/demo/dept/before-confirm.vue
index 5ae62360a..37dea83cc 100644
--- a/example/src/demo/pc/dept/before-confirm.vue
+++ b/examples/docs/resources/pc/demo/dept/before-confirm.vue
@@ -7,7 +7,7 @@
-
diff --git a/example/src/demo/pc/dept/dept-cancel.vue b/examples/docs/resources/pc/demo/dept/dept-cancel.vue
similarity index 96%
rename from example/src/demo/pc/dept/dept-cancel.vue
rename to examples/docs/resources/pc/demo/dept/dept-cancel.vue
index 82d694a55..9b3dceb76 100644
--- a/example/src/demo/pc/dept/dept-cancel.vue
+++ b/examples/docs/resources/pc/demo/dept/dept-cancel.vue
@@ -7,7 +7,7 @@
-
diff --git a/examples/docs/resources/pc/demo/dept/size.vue b/examples/docs/resources/pc/demo/dept/size.vue
new file mode 100644
index 000000000..a605e37f1
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dept/size.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/dept/slot-hrapprover.vue b/examples/docs/resources/pc/demo/dept/slot-hrapprover.vue
similarity index 94%
rename from example/src/demo/pc/dept/slot-hrapprover.vue
rename to examples/docs/resources/pc/demo/dept/slot-hrapprover.vue
index a7c2307ae..01b452233 100644
--- a/example/src/demo/pc/dept/slot-hrapprover.vue
+++ b/examples/docs/resources/pc/demo/dept/slot-hrapprover.vue
@@ -6,7 +6,7 @@
-
diff --git a/examples/docs/resources/pc/demo/detail-page/basic-usage.vue b/examples/docs/resources/pc/demo/detail-page/basic-usage.vue
new file mode 100644
index 000000000..48121e83b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/detail-page/basic-usage.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/detail-page/custom-show-text.vue b/examples/docs/resources/pc/demo/detail-page/custom-show-text.vue
similarity index 97%
rename from example/src/demo/pc/detail-page/custom-show-text.vue
rename to examples/docs/resources/pc/demo/detail-page/custom-show-text.vue
index 5689c17a5..dc6d584d4 100644
--- a/example/src/demo/pc/detail-page/custom-show-text.vue
+++ b/examples/docs/resources/pc/demo/detail-page/custom-show-text.vue
@@ -12,7 +12,7 @@
>
-
diff --git a/examples/docs/resources/pc/demo/dialog-box/center.vue b/examples/docs/resources/pc/demo/dialog-box/center.vue
new file mode 100644
index 000000000..2e9d91ac5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dialog-box/center.vue
@@ -0,0 +1,27 @@
+
+
+ 弹出Dialog{{ boxVisibility }}
+
+ dialog-box内容
+
+ 确 定
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/dialog-box/close-on-click-modal.vue b/examples/docs/resources/pc/demo/dialog-box/close-on-click-modal.vue
new file mode 100644
index 000000000..bf2418649
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dialog-box/close-on-click-modal.vue
@@ -0,0 +1,27 @@
+
+
+ 弹出Dialog{{ boxVisibility }}
+
+ dialog-box内容
+
+ 确 定
+
+
+
+
+
+
diff --git a/example/src/demo/pc/dialog-box/close-on-press-escape.vue b/examples/docs/resources/pc/demo/dialog-box/close-on-press-escape.vue
similarity index 80%
rename from example/src/demo/pc/dialog-box/close-on-press-escape.vue
rename to examples/docs/resources/pc/demo/dialog-box/close-on-press-escape.vue
index 734893b19..e97992943 100644
--- a/example/src/demo/pc/dialog-box/close-on-press-escape.vue
+++ b/examples/docs/resources/pc/demo/dialog-box/close-on-press-escape.vue
@@ -1,6 +1,6 @@
- 弹出Dialog{{ boxVisibility }}
+ 弹出Dialog{{ boxVisibility }}
dialog-box内容
@@ -10,7 +10,7 @@
-
diff --git a/example/src/demo/pc/dialog-box/form-in-dialog.vue b/examples/docs/resources/pc/demo/dialog-box/form-in-dialog.vue
similarity index 83%
rename from example/src/demo/pc/dialog-box/form-in-dialog.vue
rename to examples/docs/resources/pc/demo/dialog-box/form-in-dialog.vue
index 1ad0e9d65..97e62d758 100644
--- a/example/src/demo/pc/dialog-box/form-in-dialog.vue
+++ b/examples/docs/resources/pc/demo/dialog-box/form-in-dialog.vue
@@ -1,18 +1,18 @@
弹出表单
-
-
-
+
+
+
-
+
研发
非研发
-
+
全部
{{
@@ -28,7 +28,7 @@
-
diff --git a/examples/docs/resources/pc/demo/dialog-box/fullscreen.vue b/examples/docs/resources/pc/demo/dialog-box/fullscreen.vue
new file mode 100644
index 000000000..82193d8c2
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dialog-box/fullscreen.vue
@@ -0,0 +1,27 @@
+
+
+ 全屏弹窗
+
+ 弹窗适应整个窗口大小
+
+ 确 定
+
+
+
+
+
+
diff --git a/example/src/demo/pc/dialog-box/hidden-close-buttons.vue b/examples/docs/resources/pc/demo/dialog-box/hidden-close-buttons.vue
similarity index 96%
rename from example/src/demo/pc/dialog-box/hidden-close-buttons.vue
rename to examples/docs/resources/pc/demo/dialog-box/hidden-close-buttons.vue
index 18a9293a1..8b91c1f04 100644
--- a/example/src/demo/pc/dialog-box/hidden-close-buttons.vue
+++ b/examples/docs/resources/pc/demo/dialog-box/hidden-close-buttons.vue
@@ -10,7 +10,7 @@
-
diff --git a/examples/docs/resources/pc/demo/dialog-box/no-modal.vue b/examples/docs/resources/pc/demo/dialog-box/no-modal.vue
new file mode 100644
index 000000000..fee86e036
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dialog-box/no-modal.vue
@@ -0,0 +1,27 @@
+
+
+ 无遮罩
+
+ 不显示灰色遮罩层
+
+ 确 定
+
+
+
+
+
+
diff --git a/example/src/demo/pc/dialog-box/open-close-events.vue b/examples/docs/resources/pc/demo/dialog-box/open-close-events.vue
similarity index 91%
rename from example/src/demo/pc/dialog-box/open-close-events.vue
rename to examples/docs/resources/pc/demo/dialog-box/open-close-events.vue
index 1e3605ec2..dda4861b1 100644
--- a/example/src/demo/pc/dialog-box/open-close-events.vue
+++ b/examples/docs/resources/pc/demo/dialog-box/open-close-events.vue
@@ -1,6 +1,6 @@
- 弹出与关闭事件
+ 弹出与关闭事件
dialog-box内容
@@ -10,7 +10,7 @@
-
diff --git a/example/src/demo/pc/drop-roles/change-role-event.vue b/examples/docs/resources/pc/demo/drop-roles/change-role-event.vue
similarity index 97%
rename from example/src/demo/pc/drop-roles/change-role-event.vue
rename to examples/docs/resources/pc/demo/drop-roles/change-role-event.vue
index 881af868c..c304b9d9c 100644
--- a/example/src/demo/pc/drop-roles/change-role-event.vue
+++ b/examples/docs/resources/pc/demo/drop-roles/change-role-event.vue
@@ -2,7 +2,7 @@
-
diff --git a/examples/docs/resources/pc/demo/drop-roles/size.vue b/examples/docs/resources/pc/demo/drop-roles/size.vue
new file mode 100644
index 000000000..38bff5f73
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drop-roles/size.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drop-times/basic-usage.vue b/examples/docs/resources/pc/demo/drop-times/basic-usage.vue
new file mode 100644
index 000000000..4d7bef51c
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drop-times/basic-usage.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/drop-times/size.vue b/examples/docs/resources/pc/demo/drop-times/size.vue
new file mode 100644
index 000000000..2f43d9109
--- /dev/null
+++ b/examples/docs/resources/pc/demo/drop-times/size.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/drop-times/start-end-step.vue b/examples/docs/resources/pc/demo/drop-times/start-end-step.vue
similarity index 96%
rename from example/src/demo/pc/drop-times/start-end-step.vue
rename to examples/docs/resources/pc/demo/drop-times/start-end-step.vue
index 7b16315f8..0364e3a02 100644
--- a/example/src/demo/pc/drop-times/start-end-step.vue
+++ b/examples/docs/resources/pc/demo/drop-times/start-end-step.vue
@@ -4,7 +4,7 @@
-
diff --git a/example/src/demo/pc/dropdown/disabled.vue b/examples/docs/resources/pc/demo/dropdown/disabled.vue
similarity index 100%
rename from example/src/demo/pc/dropdown/disabled.vue
rename to examples/docs/resources/pc/demo/dropdown/disabled.vue
diff --git a/examples/docs/resources/pc/demo/dropdown/events.vue b/examples/docs/resources/pc/demo/dropdown/events.vue
new file mode 100644
index 000000000..484b59305
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dropdown/events.vue
@@ -0,0 +1,46 @@
+
+
+ 下拉菜单
+
+
+
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+
diff --git a/example/src/demo/pc/dropdown/hide-on-click.vue b/examples/docs/resources/pc/demo/dropdown/hide-on-click.vue
similarity index 100%
rename from example/src/demo/pc/dropdown/hide-on-click.vue
rename to examples/docs/resources/pc/demo/dropdown/hide-on-click.vue
diff --git a/example/src/demo/pc/dropdown/multi-level.vue b/examples/docs/resources/pc/demo/dropdown/multi-level.vue
similarity index 100%
rename from example/src/demo/pc/dropdown/multi-level.vue
rename to examples/docs/resources/pc/demo/dropdown/multi-level.vue
diff --git a/examples/docs/resources/pc/demo/dropdown/options.vue b/examples/docs/resources/pc/demo/dropdown/options.vue
new file mode 100644
index 000000000..0a1e11d96
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dropdown/options.vue
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/dropdown/size.vue b/examples/docs/resources/pc/demo/dropdown/size.vue
new file mode 100644
index 000000000..94980624d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/dropdown/size.vue
@@ -0,0 +1,67 @@
+
+
+
+ 默认尺寸
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+ 中等尺寸
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+ 小型尺寸
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+ 超小尺寸
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/dropdown/slot-default.vue b/examples/docs/resources/pc/demo/dropdown/slot-default.vue
similarity index 100%
rename from example/src/demo/pc/dropdown/slot-default.vue
rename to examples/docs/resources/pc/demo/dropdown/slot-default.vue
diff --git a/example/src/demo/pc/dropdown/split-button.vue b/examples/docs/resources/pc/demo/dropdown/split-button.vue
similarity index 91%
rename from example/src/demo/pc/dropdown/split-button.vue
rename to examples/docs/resources/pc/demo/dropdown/split-button.vue
index f139a999e..1ce508c4d 100644
--- a/example/src/demo/pc/dropdown/split-button.vue
+++ b/examples/docs/resources/pc/demo/dropdown/split-button.vue
@@ -1,5 +1,5 @@
-
+
更多菜单
@@ -13,7 +13,7 @@
-
diff --git a/example/src/demo/pc/fall-menu/custom-menuitem.vue b/examples/docs/resources/pc/demo/fall-menu/custom-menuitem.vue
similarity index 99%
rename from example/src/demo/pc/fall-menu/custom-menuitem.vue
rename to examples/docs/resources/pc/demo/fall-menu/custom-menuitem.vue
index 5116606cf..72504b37a 100644
--- a/example/src/demo/pc/fall-menu/custom-menuitem.vue
+++ b/examples/docs/resources/pc/demo/fall-menu/custom-menuitem.vue
@@ -14,7 +14,7 @@
-
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/abort-quest.vue b/examples/docs/resources/pc/demo/file-upload/abort-quest.vue
new file mode 100644
index 000000000..a7343d168
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/abort-quest.vue
@@ -0,0 +1,30 @@
+
+
+
+ 点击上传
+
+
+ 取消上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/accept-file-image.vue b/examples/docs/resources/pc/demo/file-upload/accept-file-image.vue
new file mode 100644
index 000000000..a0bc0466d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/accept-file-image.vue
@@ -0,0 +1,22 @@
+
+
+ 点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/accept-file.vue b/examples/docs/resources/pc/demo/file-upload/accept-file.vue
new file mode 100644
index 000000000..570e5aeef
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/accept-file.vue
@@ -0,0 +1,23 @@
+
+
+ 点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/basic-usage.vue b/examples/docs/resources/pc/demo/file-upload/basic-usage.vue
new file mode 100644
index 000000000..f505e1717
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/basic-usage.vue
@@ -0,0 +1,26 @@
+
+
+
+ 点击上传
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/clear-files.vue b/examples/docs/resources/pc/demo/file-upload/clear-files.vue
new file mode 100644
index 000000000..b5c39f1ff
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/clear-files.vue
@@ -0,0 +1,40 @@
+
+
+
+ 点击上传
+
+
+ 点击清空上传列表
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/custom-prefix.vue b/examples/docs/resources/pc/demo/file-upload/custom-prefix.vue
new file mode 100644
index 000000000..15cc8fa78
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/custom-prefix.vue
@@ -0,0 +1,52 @@
+
+
+
+ 点击上传
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/custom-trigger.vue b/examples/docs/resources/pc/demo/file-upload/custom-trigger.vue
new file mode 100644
index 000000000..0befbe9c7
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/custom-trigger.vue
@@ -0,0 +1,23 @@
+
+
+
+ 我是触发源
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/custom-upload-request.vue b/examples/docs/resources/pc/demo/file-upload/custom-upload-request.vue
new file mode 100644
index 000000000..b0b1e0a91
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/custom-upload-request.vue
@@ -0,0 +1,40 @@
+
+
+
+ 选取文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/custom-upload-tip.vue b/examples/docs/resources/pc/demo/file-upload/custom-upload-tip.vue
new file mode 100644
index 000000000..3eb3cf3cb
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/custom-upload-tip.vue
@@ -0,0 +1,26 @@
+
+
+
+ 选取文件
+
+
+ 只能上传jpg/png文件,且不超过500kb
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/drag-select-file.vue b/examples/docs/resources/pc/demo/file-upload/drag-select-file.vue
new file mode 100644
index 000000000..97dbb56d9
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/drag-select-file.vue
@@ -0,0 +1,33 @@
+
+
+
+
+ 将文件拖到此处,或点击上传
+
+
+
上传到服务器
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/drag-upload.vue b/examples/docs/resources/pc/demo/file-upload/drag-upload.vue
new file mode 100644
index 000000000..63e67ccd5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/drag-upload.vue
@@ -0,0 +1,29 @@
+
+
+
+ 将文件拖到此处,或点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/dynamic-disable.vue b/examples/docs/resources/pc/demo/file-upload/dynamic-disable.vue
new file mode 100644
index 000000000..dec778d70
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/dynamic-disable.vue
@@ -0,0 +1,29 @@
+
+
+
+ 选取文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/file-picture-card.vue b/examples/docs/resources/pc/demo/file-upload/file-picture-card.vue
new file mode 100644
index 000000000..e625b385d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/file-picture-card.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/http-request.vue b/examples/docs/resources/pc/demo/file-upload/http-request.vue
new file mode 100644
index 000000000..475e8d0d9
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/http-request.vue
@@ -0,0 +1,30 @@
+
+
+
+ 点击上传
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/image-size.vue b/examples/docs/resources/pc/demo/file-upload/image-size.vue
new file mode 100644
index 000000000..afbf3d6a1
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/image-size.vue
@@ -0,0 +1,46 @@
+
+
+
+ 选取文件
+
+
+ 只允许上传 image 类型文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/jalor-request.vue b/examples/docs/resources/pc/demo/file-upload/jalor-request.vue
new file mode 100644
index 000000000..9f3c16e6b
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/jalor-request.vue
@@ -0,0 +1,32 @@
+
+
+
+ 选取文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/manual-upload.vue b/examples/docs/resources/pc/demo/file-upload/manual-upload.vue
new file mode 100644
index 000000000..6828f5b62
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/manual-upload.vue
@@ -0,0 +1,30 @@
+
+
+
+ 选取文件
+
+ 上传到服务器
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/max-file-count.vue b/examples/docs/resources/pc/demo/file-upload/max-file-count.vue
new file mode 100644
index 000000000..260be3534
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/max-file-count.vue
@@ -0,0 +1,28 @@
+
+
+ 点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/mini-mode.vue b/examples/docs/resources/pc/demo/file-upload/mini-mode.vue
new file mode 100644
index 000000000..9b664387f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/mini-mode.vue
@@ -0,0 +1,29 @@
+
+
+
+ 选取文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/multiple-file.vue b/examples/docs/resources/pc/demo/file-upload/multiple-file.vue
new file mode 100644
index 000000000..4f5c616b5
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/multiple-file.vue
@@ -0,0 +1,23 @@
+
+
+
+ 选取文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/picture-card.vue b/examples/docs/resources/pc/demo/file-upload/picture-card.vue
new file mode 100644
index 000000000..c83a32cc6
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/picture-card.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/picture-list.vue b/examples/docs/resources/pc/demo/file-upload/picture-list.vue
new file mode 100644
index 000000000..44f8ef983
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/picture-list.vue
@@ -0,0 +1,32 @@
+
+
+ 点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/prevent-delete-file.vue b/examples/docs/resources/pc/demo/file-upload/prevent-delete-file.vue
new file mode 100644
index 000000000..b250d5cb0
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/prevent-delete-file.vue
@@ -0,0 +1,39 @@
+
+
+
+ 选取文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/prevent-upload-file.vue b/examples/docs/resources/pc/demo/file-upload/prevent-upload-file.vue
new file mode 100644
index 000000000..6e0919946
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/prevent-upload-file.vue
@@ -0,0 +1,39 @@
+
+
+
+ 选取文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/size.vue b/examples/docs/resources/pc/demo/file-upload/size.vue
new file mode 100644
index 000000000..1e5eda74a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/size.vue
@@ -0,0 +1,23 @@
+
+
+
+ 上传
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/upload-events.vue b/examples/docs/resources/pc/demo/file-upload/upload-events.vue
new file mode 100644
index 000000000..201706ba3
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/upload-events.vue
@@ -0,0 +1,69 @@
+
+
+
+ 点击上传
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/upload-file-filters.vue b/examples/docs/resources/pc/demo/file-upload/upload-file-filters.vue
new file mode 100644
index 000000000..f98ebdc1f
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/upload-file-filters.vue
@@ -0,0 +1,43 @@
+
+
+ 点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/upload-file-list-thumb.vue b/examples/docs/resources/pc/demo/file-upload/upload-file-list-thumb.vue
new file mode 100644
index 000000000..c759b4b8a
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/upload-file-list-thumb.vue
@@ -0,0 +1,43 @@
+
+
+ 点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/upload-file-list.vue b/examples/docs/resources/pc/demo/file-upload/upload-file-list.vue
new file mode 100644
index 000000000..2f5aba81d
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/upload-file-list.vue
@@ -0,0 +1,31 @@
+
+
+ 点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/upload-limit.vue b/examples/docs/resources/pc/demo/file-upload/upload-limit.vue
new file mode 100644
index 000000000..5b3a2ba60
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/upload-limit.vue
@@ -0,0 +1,33 @@
+
+
+ 点击上传
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/upload-request.vue b/examples/docs/resources/pc/demo/file-upload/upload-request.vue
new file mode 100644
index 000000000..b72a15ada
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/upload-request.vue
@@ -0,0 +1,41 @@
+
+
+
+ 选取文件
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/file-upload/upload-user-head.vue b/examples/docs/resources/pc/demo/file-upload/upload-user-head.vue
new file mode 100644
index 000000000..134b8e2e3
--- /dev/null
+++ b/examples/docs/resources/pc/demo/file-upload/upload-user-head.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/docs/resources/pc/demo/floatbar/base.vue b/examples/docs/resources/pc/demo/floatbar/base.vue
new file mode 100644
index 000000000..8c3219442
--- /dev/null
+++ b/examples/docs/resources/pc/demo/floatbar/base.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
diff --git a/example/src/demo/pc/floatbar/custom-floatbar-item.vue b/examples/docs/resources/pc/demo/floatbar/custom-floatbar-item.vue
similarity index 94%
rename from example/src/demo/pc/floatbar/custom-floatbar-item.vue
rename to examples/docs/resources/pc/demo/floatbar/custom-floatbar-item.vue
index 1156efe47..5b6ccd34f 100644
--- a/example/src/demo/pc/floatbar/custom-floatbar-item.vue
+++ b/examples/docs/resources/pc/demo/floatbar/custom-floatbar-item.vue
@@ -12,7 +12,7 @@
-
+
+
diff --git a/example/src/demo/pc/form/form-validation.vue b/examples/docs/resources/pc/demo/form/form-validation.vue
similarity index 94%
rename from example/src/demo/pc/form/form-validation.vue
rename to examples/docs/resources/pc/demo/form/form-validation.vue
index 8611760fd..e25306984 100644
--- a/example/src/demo/pc/form/form-validation.vue
+++ b/examples/docs/resources/pc/demo/form/form-validation.vue
@@ -4,10 +4,10 @@
-
+
-
+
@@ -53,7 +53,7 @@ export default {
},
data() {
return {
- validateIcon: iconWarning(),
+ validateIcon: IconWarning(),
options: [
{ label: 'A', text: '很好', events: { click: this.handleClick } },
{ label: 'B', text: '一般' }
diff --git a/example/src/demo/pc/form/frequently-used-form.vue b/examples/docs/resources/pc/demo/form/frequently-used-form.vue
similarity index 99%
rename from example/src/demo/pc/form/frequently-used-form.vue
rename to examples/docs/resources/pc/demo/form/frequently-used-form.vue
index aaf393375..4286ac826 100644
--- a/example/src/demo/pc/form/frequently-used-form.vue
+++ b/examples/docs/resources/pc/demo/form/frequently-used-form.vue
@@ -29,7 +29,7 @@
-
+
+
diff --git a/example/src/demo/pc/form/slot-label.vue b/examples/docs/resources/pc/demo/form/slot-label.vue
similarity index 99%
rename from example/src/demo/pc/form/slot-label.vue
rename to examples/docs/resources/pc/demo/form/slot-label.vue
index 36fc235ed..bb1812683 100644
--- a/example/src/demo/pc/form/slot-label.vue
+++ b/examples/docs/resources/pc/demo/form/slot-label.vue
@@ -24,7 +24,7 @@
-
+
+
diff --git a/examples/docs/resources/pc/demo/fullscreen/example-component.vue b/examples/docs/resources/pc/demo/fullscreen/example-component.vue
new file mode 100644
index 000000000..43288ef52
--- /dev/null
+++ b/examples/docs/resources/pc/demo/fullscreen/example-component.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/src/demo/pc/grid/align/column-align.vue b/examples/docs/resources/pc/demo/grid/align/column-align.vue
similarity index 78%
rename from example/src/demo/pc/grid/align/column-align.vue
rename to examples/docs/resources/pc/demo/grid/align/column-align.vue
index 705934a03..1c7177e9c 100644
--- a/example/src/demo/pc/grid/align/column-align.vue
+++ b/examples/docs/resources/pc/demo/grid/align/column-align.vue
@@ -4,12 +4,12 @@
-
+