|
|
@@ -0,0 +1,1036 @@
|
|
|
+<template>
|
|
|
+ <t-dialog
|
|
|
+ v-model:visible="props.visible"
|
|
|
+ header="更多属性"
|
|
|
+ :width="470"
|
|
|
+ @close="close"
|
|
|
+ @confirm="confirm"
|
|
|
+ >
|
|
|
+ <div class="input-search">
|
|
|
+ <div class="btn">
|
|
|
+ <search-icon class="hover" />
|
|
|
+ </div>
|
|
|
+ <t-input
|
|
|
+ v-model="search"
|
|
|
+ @change="onSearch"
|
|
|
+ @enter="onSearch"
|
|
|
+ placeholder="搜索我的数据列表"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="props mt-8">
|
|
|
+ <t-tree
|
|
|
+ :data="penProps"
|
|
|
+ activable
|
|
|
+ expand-all
|
|
|
+ v-model:actived="activedProp"
|
|
|
+ hover
|
|
|
+ :filter="propsFilter"
|
|
|
+ @click="onClick"
|
|
|
+ >
|
|
|
+ <template #label="{ node }">
|
|
|
+ <t-tooltip
|
|
|
+ :content="node.data.description"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ {{node.label}}
|
|
|
+ </t-tooltip>
|
|
|
+ </template>
|
|
|
+ </t-tree>
|
|
|
+ </div>
|
|
|
+ </t-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { SearchIcon } from 'tdesign-icons-vue-next';
|
|
|
+import { ref } from 'vue';
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ visible: boolean;
|
|
|
+}>();
|
|
|
+const emit = defineEmits(["update:visible", "change"]);
|
|
|
+
|
|
|
+function close() {
|
|
|
+ emit("update:visible", false);
|
|
|
+}
|
|
|
+
|
|
|
+const propsFilter = ref(null);
|
|
|
+const search = ref('');
|
|
|
+const onSearch = () => {
|
|
|
+ propsFilter.value = search.value ? (node) => { return node.value?.indexOf(search.value) >= 0 }: null;
|
|
|
+};
|
|
|
+
|
|
|
+const onClick = (context) => {
|
|
|
+ const { node } = context;
|
|
|
+ activeObj = JSON.parse(JSON.stringify(node.data));
|
|
|
+};
|
|
|
+
|
|
|
+let activeObj:any = {};
|
|
|
+
|
|
|
+const activedProp = ref([]);
|
|
|
+
|
|
|
+const confirm = ()=>{
|
|
|
+ emit("change", activeObj);
|
|
|
+}
|
|
|
+function getList(){
|
|
|
+// let arr = [];
|
|
|
+// Array.from(document.getElementsByTagName('ne-h3')).forEach((item)=>{
|
|
|
+// let nextElement = item.nextElementSibling;
|
|
|
+// let nnextElement = nextElement.nextElementSibling;
|
|
|
+// let typeStr = nnextElement.innerText.trim();
|
|
|
+// let type = 'object'
|
|
|
+// if(typeStr.includes('LockState')||typeStr.includes('enum')||typeStr.includes('Gradient')){
|
|
|
+// type = 'integer'
|
|
|
+// }else if(typeStr.includes('[]')||typeStr.includes('array')){
|
|
|
+// type = 'array'
|
|
|
+// }else if(typeStr.includes('|')||typeStr.includes('string')){
|
|
|
+// type = 'string'
|
|
|
+// }else if(typeStr.includes('boolean')){
|
|
|
+// type = 'bool'
|
|
|
+// }else if(typeStr.includes('number')){
|
|
|
+// type = 'float'
|
|
|
+// }
|
|
|
+// console.log(typeStr,' -> ',type);
|
|
|
+// arr.push({
|
|
|
+// label:item.innerText.trim(),
|
|
|
+// value:item.innerText.trim(),
|
|
|
+// description:nextElement.innerText.trim(),
|
|
|
+// type
|
|
|
+// })
|
|
|
+// })
|
|
|
+ //boolean ->bool string | ->string []->array number->float LockState、enum、Gradient->integer
|
|
|
+}
|
|
|
+
|
|
|
+const penProps =[
|
|
|
+ {
|
|
|
+ "label": "id",
|
|
|
+ "value": "id",
|
|
|
+ "description": "唯一标识。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "tags",
|
|
|
+ "value": "tags",
|
|
|
+ "description": "tag 标签。可用于唯一标记、群组标记等。",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "parentId",
|
|
|
+ "value": "parentId",
|
|
|
+ "description": "父元素 id。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "type",
|
|
|
+ "value": "type",
|
|
|
+ "description": "pen 类型。0 - node；1 - line",
|
|
|
+ "type": "integer"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "name",
|
|
|
+ "value": "name",
|
|
|
+ "description": "图元名称。例如：rectangle、circle、line...【注意】连线 name 必须为 line。不同类型连线用 lineName 属性描述。例如： lineName:'curve'",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineName",
|
|
|
+ "value": "lineName",
|
|
|
+ "description": "连线类型名称。默认有：curve、polyline、line、mind【注意】仅当 type=1（name='line'）为连线时有效。仅用于绘画连线过程中，判断如何自动计算锚点；不影响已经显示绘画好的连线。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "close",
|
|
|
+ "value": "close",
|
|
|
+ "description": "仅 name='line'时有效，type 不限，表示是否连线首尾相连组成封闭形状",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "anchors",
|
|
|
+ "value": "anchors",
|
|
|
+ "description": "锚点数组。锚点坐标为相对 pen 世界区域（绝对区域）（pen.calculative.worldRect）的百分比小数（小于 1 的小数表示百分比）。当为连线（type == 1）时，锚点起点和终点分别为数组首尾两个元素。",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // "label": "x,y,width,height",
|
|
|
+ // "value": "x,y,width,height",
|
|
|
+ // "description": "pen 在画布中的位置。【注意】 此位置仅为画布绘画的参考位置，缩放平移时，可能会变化，如果需要获取缩放平移时坐标不变的逻辑位置，用 meta2d.getPenRect(pen)获取。",
|
|
|
+ // "type": "float"
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ "label": "ratio",
|
|
|
+ "value": "ratio",
|
|
|
+ "description": "是否等比缩放图元。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "rotate",
|
|
|
+ "value": "rotate",
|
|
|
+ "description": "pen 的旋转角度，单位度 °。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textRotate",
|
|
|
+ "value": "textRotate",
|
|
|
+ "description": "文字是否旋转",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "visible",
|
|
|
+ "value": "visible",
|
|
|
+ "description": "是否可见。仅当 visible===false 时，隐藏。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "locked",
|
|
|
+ "value": "locked",
|
|
|
+ "description": "锁定状态。",
|
|
|
+ "type": "integer"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "length",
|
|
|
+ "value": "length",
|
|
|
+ "description": "连线长度。仅当 name='line'时，有效。自动计算得出",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "title",
|
|
|
+ "value": "title",
|
|
|
+ "description": "tooltip 提示框，支持 markdown 格式\n支持 markdown 格式需要引入 marked.min.js，可使用如下路径的包：\nhttps://github.com/le5le-com/meta2d.js/blob/main/examples/diagram-editor-vue3/public/js/marked.min.js",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "titleFnJs",
|
|
|
+ "value": "titleFnJs",
|
|
|
+ "description": "tooltip 提示框，支持 markdown 格式，优先级高于title。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineWidth",
|
|
|
+ "value": "lineWidth",
|
|
|
+ "description": "线宽",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "globalAlpha",
|
|
|
+ "value": "globalAlpha",
|
|
|
+ "description": "透明度。百分比小数（0-1 之间的小数）",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineDash",
|
|
|
+ "value": "lineDash",
|
|
|
+ "description": "虚线设置，具体参考 canvas 的 lineDash 用法",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineDashOffset",
|
|
|
+ "value": "lineDashOffset",
|
|
|
+ "description": "虚线偏移量，具体参考 canvas 的 lineDashOffset 用法",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "color",
|
|
|
+ "value": "color",
|
|
|
+ "description": "画笔颜色，如果没特别设置，颜色包括：文字和边框",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "background",
|
|
|
+ "value": "background",
|
|
|
+ "description": "画笔背景颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "activeColor",
|
|
|
+ "value": "activeColor",
|
|
|
+ "description": "画笔选中颜色，如果没特别设置，颜色包括：文字和边框",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "activeBackground",
|
|
|
+ "value": "activeBackground",
|
|
|
+ "description": "画笔选中背景颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "hoverColor",
|
|
|
+ "value": "hoverColor",
|
|
|
+ "description": "画笔鼠标经过颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "hoverBackground",
|
|
|
+ "value": "hoverBackground",
|
|
|
+ "description": "画笔鼠标经过背景颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "anchorColor",
|
|
|
+ "value": "anchorColor",
|
|
|
+ "description": "画笔锚点颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "disabled",
|
|
|
+ "value": "disabled",
|
|
|
+ "description": "画笔禁用",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "disabledColor",
|
|
|
+ "value": "disabledColor",
|
|
|
+ "description": "画笔禁用颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "disabledBackground",
|
|
|
+ "value": "disabledBackground",
|
|
|
+ "description": "画笔禁用背景颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "disabledTextColor",
|
|
|
+ "value": "disabledTextColor",
|
|
|
+ "description": "画笔禁用文字颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "text",
|
|
|
+ "value": "text",
|
|
|
+ "description": "画笔文本内容",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textAutoAdjust",
|
|
|
+ "value": "textAutoAdjust",
|
|
|
+ "description": "文本画笔，在文本输入完成后，宽高随文字多少自动调整（version>=1.0.24）",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // "label": "textColor",
|
|
|
+ // "value": "textColor",
|
|
|
+ // "description": "画笔文本颜色。如果不指定，使用 color 属性",
|
|
|
+ // "type": "string"
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ "label": "progress",
|
|
|
+ "value": "progress",
|
|
|
+ "description": "进度值。百分比小数（0-1 之间的小数）",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "progressColor",
|
|
|
+ "value": "progressColor",
|
|
|
+ "description": "进度颜色。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "verticalProgress",
|
|
|
+ "value": "verticalProgress",
|
|
|
+ "description": "是否垂直进度。默认水平",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "reverseProgress",
|
|
|
+ "value": "reverseProgress",
|
|
|
+ "description": "进度反向。默认从左到右/从下到上",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "bkType",
|
|
|
+ "value": "bkType",
|
|
|
+ "description": "背景类型",
|
|
|
+ "type": "integer"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "gradientFromColor",
|
|
|
+ "value": "gradientFromColor",
|
|
|
+ "description": "背景渐变起始颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "gradientToColor",
|
|
|
+ "value": "gradientToColor",
|
|
|
+ "description": "背景渐变结束颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "gradientAngle",
|
|
|
+ "value": "gradientAngle",
|
|
|
+ "description": "背景线性渐变角度",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "gradientRadius",
|
|
|
+ "value": "gradientRadius",
|
|
|
+ "description": "背景发散渐变半径",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "strokeType",
|
|
|
+ "value": "strokeType",
|
|
|
+ "description": "线的填充背景类型",
|
|
|
+ "type": "integer"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineGradientFromColor",
|
|
|
+ "value": "lineGradientFromColor",
|
|
|
+ "description": "线的填充渐变背景起始颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineGradientToColor",
|
|
|
+ "value": "lineGradientToColor",
|
|
|
+ "description": "线的填充渐变背景结束颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineGradientAngle",
|
|
|
+ "value": "lineGradientAngle",
|
|
|
+ "description": "线的填充渐变背景线性渐变角度",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "gradientColors",
|
|
|
+ "value": "gradientColors",
|
|
|
+ "description": "背景渐变色,替代gradientFromColor、gradientToColor、gradientAngle。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineGradientColors",
|
|
|
+ "value": "lineGradientColors",
|
|
|
+ "description": "线渐变色，替代lineGradientFromColor、lineGradientToColor、lineGradientAngle。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineCap",
|
|
|
+ "value": "lineCap",
|
|
|
+ "description": "线两端的形状：round - 圆形；butt - 平直；square - 正方形。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineJoin",
|
|
|
+ "value": "lineJoin",
|
|
|
+ "description": "锚点间线段交汇时的形状：round - 圆形；bevel - 斜角；miter - 尖角。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "shadowColor",
|
|
|
+ "value": "shadowColor",
|
|
|
+ "description": "阴影颜色。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "shadowBlur",
|
|
|
+ "value": "shadowBlur",
|
|
|
+ "description": "阴影模糊度。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "shadowOffsetX",
|
|
|
+ "value": "shadowOffsetX",
|
|
|
+ "description": "阴影X偏移量。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "shadowOffsetY",
|
|
|
+ "value": "shadowOffsetY",
|
|
|
+ "description": "阴影Y偏移量。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textHasShadow",
|
|
|
+ "value": "textHasShadow",
|
|
|
+ "description": "设置 shadow 阴影后，文字是否具备阴影，默认无。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textWidth",
|
|
|
+ "value": "textWidth",
|
|
|
+ "description": "文本宽度，超出换行。默认 pen.width\n影响 worldTextRect 的宽度，可设置 < 1 的值，认为是宽度的百分比",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textHeight",
|
|
|
+ "value": "textHeight",
|
|
|
+ "description": "文本高度，超出显示省略号。默认 pen.height\n影响 worldTextRect 的高度，可设置 < 1 的值，认为是高度的百分比",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textLeft",
|
|
|
+ "value": "textLeft",
|
|
|
+ "description": "文本左偏移。\n影响 worldTextRect 的位置，可设置 < 1 的值，认为是百分比。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textTop",
|
|
|
+ "value": "textTop",
|
|
|
+ "description": "文本上偏移。\n影响 worldTextRect 的位置，可设置 < 1 的值，认为是百分比。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textColor",
|
|
|
+ "value": "textColor",
|
|
|
+ "description": "文本颜色。缺省为 pen.color",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textType",
|
|
|
+ "value": "textType",
|
|
|
+ "description": "文本颜色类型。",
|
|
|
+ "type": "integer"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textGradientColors",
|
|
|
+ "value": "textGradientColors",
|
|
|
+ "description": "文本渐变颜色。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "hoverTextColor",
|
|
|
+ "value": "hoverTextColor",
|
|
|
+ "description": "文本鼠标经过活动颜色。缺省为 pen.hoverColor",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "activeTextColor",
|
|
|
+ "value": "activeTextColor",
|
|
|
+ "description": "选中 pen 文本的颜色。缺省为 pen.activeColor",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "fontFamily",
|
|
|
+ "value": "fontFamily",
|
|
|
+ "description": "文本字体",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "fontSize",
|
|
|
+ "value": "fontSize",
|
|
|
+ "description": "文本大小",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineHeight",
|
|
|
+ "value": "lineHeight",
|
|
|
+ "description": "文本行高",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "fontStyle",
|
|
|
+ "value": "fontStyle",
|
|
|
+ "description": "文本风格。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "fontWeight",
|
|
|
+ "value": "fontWeight",
|
|
|
+ "description": "文本加粗。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textAlign",
|
|
|
+ "value": "textAlign",
|
|
|
+ "description": "左右对齐方式。\n决定 worldTextRect 在 worldRect 中的位置，（左中右）\n决定 文字 在 worldTextRect 中的位置。（左中右）",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textBaseline",
|
|
|
+ "value": "textBaseline",
|
|
|
+ "description": "上下对齐方式。\n决定 worldTextRect 在 worldRect 中的位置，（上中下）\n决定 文字 在 worldTextRect 中的位置。（上中下）",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textBackground",
|
|
|
+ "value": "textBackground",
|
|
|
+ "description": "文本背景颜色。填充 textDrawRect",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "whiteSpace",
|
|
|
+ "value": "whiteSpace",
|
|
|
+ "description": "文本换行方式。默认单词换行；nowrap - 不换行；pre-line - 换行符换行； break-all - 永远换行",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "ellipsis",
|
|
|
+ "value": "ellipsis",
|
|
|
+ "description": "文本是否显示省略号。默认显示省略号，仅当 == false 时，不显示省略号。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "image",
|
|
|
+ "value": "image",
|
|
|
+ "description": "图片 url。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "crossOrigin",
|
|
|
+ "value": "crossOrigin",
|
|
|
+ "description": "图片元素如何处理跨源请求,具体参考：crossorigin",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "imageRatio",
|
|
|
+ "value": "imageRatio",
|
|
|
+ "description": "图片是否保持原始长宽比。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "imageRadius",
|
|
|
+ "value": "imageRadius",
|
|
|
+ "description": "图片圆角",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "icon",
|
|
|
+ "value": "icon",
|
|
|
+ "description": "图标 Unicode 编码。可参考： “字体图形库”教程",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconRotate",
|
|
|
+ "value": "iconRotate",
|
|
|
+ "description": "图标旋转角度",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconWidth",
|
|
|
+ "value": "iconWidth",
|
|
|
+ "description": "图片最大宽度。默认为 pen.width",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconHeight",
|
|
|
+ "value": "iconHeight",
|
|
|
+ "description": "图片最大高度。默认为pen.height",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconSize",
|
|
|
+ "value": "iconSize",
|
|
|
+ "description": "图标大小。默认自适应 pen.width, pen.height 中的小值",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconTop",
|
|
|
+ "value": "iconTop",
|
|
|
+ "description": "图标偏移量。默认居中",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconLeft",
|
|
|
+ "value": "iconLeft",
|
|
|
+ "description": "图标偏移量。默认居中",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconFamily",
|
|
|
+ "value": "iconFamily",
|
|
|
+ "description": "图标字体名称",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconColor",
|
|
|
+ "value": "iconColor",
|
|
|
+ "description": "图标颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconAlign",
|
|
|
+ "value": "iconAlign",
|
|
|
+ "description": "图标对齐方式",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iconWeight",
|
|
|
+ "value": "iconWeight",
|
|
|
+ "description": "图标字体加粗。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "disableInput",
|
|
|
+ "value": "disableInput",
|
|
|
+ "description": "双击禁止出现文本输入框",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "disableRotate",
|
|
|
+ "value": "disableRotate",
|
|
|
+ "description": "禁止旋转手柄",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "disableSize",
|
|
|
+ "value": "disableSize",
|
|
|
+ "description": "禁止出现大小编辑控制点",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "disableAnchor",
|
|
|
+ "value": "disableAnchor",
|
|
|
+ "description": "禁止出现锚点",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "paddingTop",
|
|
|
+ "value": "paddingTop",
|
|
|
+ "description": "还有 paddingBottom、paddingLeft、paddingRight，表示 padding 距离",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "backgroundImage",
|
|
|
+ "value": "backgroundImage",
|
|
|
+ "description": "填充背景图片 url。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "strokeImage",
|
|
|
+ "value": "strokeImage",
|
|
|
+ "description": "线条填充图片 url。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "children",
|
|
|
+ "value": "children",
|
|
|
+ "description": "子画笔 id 数组。",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "anchorRadius",
|
|
|
+ "value": "anchorRadius",
|
|
|
+ "description": "锚点大小。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "anchorBackground",
|
|
|
+ "value": "anchorBackground",
|
|
|
+ "description": "锚点背景颜色。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "path",
|
|
|
+ "value": "path",
|
|
|
+ "description": "svg path 字符串。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "fromArrow",
|
|
|
+ "value": "fromArrow",
|
|
|
+ "description": "连线起始箭头。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "toArrow",
|
|
|
+ "value": "toArrow",
|
|
|
+ "description": "连线终点箭头。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "fromArrowSize",
|
|
|
+ "value": "fromArrowSize",
|
|
|
+ "description": "起始箭头大小。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "toArrowSize",
|
|
|
+ "value": "toArrowSize",
|
|
|
+ "description": "终点箭头大小。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "fromArrowColor",
|
|
|
+ "value": "fromArrowColor",
|
|
|
+ "description": "起始箭头颜色。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "toArrowColor",
|
|
|
+ "value": "toArrowColor",
|
|
|
+ "description": "终点箭头颜色。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "connectedLines",
|
|
|
+ "value": "connectedLines",
|
|
|
+ "description": "关联的连线。数组",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "animateCycle",
|
|
|
+ "value": "animateCycle",
|
|
|
+ "description": "动画播放次数。默认无限循环",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "nextAnimate",
|
|
|
+ "value": "nextAnimate",
|
|
|
+ "description": "动画播放结束后，要播放的下一个动画的 pen.id 或 pen.tag",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "autoPlay",
|
|
|
+ "value": "autoPlay",
|
|
|
+ "description": "meta2d.open 时，是否自动播放",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "playLoop",
|
|
|
+ "value": "playLoop",
|
|
|
+ "description": "pen 为音视频时，是否自动循环播放",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "duration",
|
|
|
+ "value": "duration",
|
|
|
+ "description": "动画时长。通常自动计算",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "linear",
|
|
|
+ "value": "linear",
|
|
|
+ "description": "动画播放时，数字属性是否匀速渐变。默认是。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "scale",
|
|
|
+ "value": "scale",
|
|
|
+ "description": "动画帧中的缩放比例。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "animateSpan",
|
|
|
+ "value": "animateSpan",
|
|
|
+ "description": "连线动画速度。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "animateColor",
|
|
|
+ "value": "animateColor",
|
|
|
+ "description": "连线动画颜色。",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "animateLineDash",
|
|
|
+ "value": "animateLineDash",
|
|
|
+ "description": "连线动画虚线样式。",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "animateDotSize",
|
|
|
+ "value": "animateDotSize",
|
|
|
+ "description": "连线动画圆点大小",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "animateReverse",
|
|
|
+ "value": "animateReverse",
|
|
|
+ "description": "连线动画是否反向播放。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "keepAnimateState",
|
|
|
+ "value": "keepAnimateState",
|
|
|
+ "description": "动画播放（次数）结束，是否回到初始状态，默认是。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lineAnimateType",
|
|
|
+ "value": "lineAnimateType",
|
|
|
+ "description": "连线动画类型",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "frames",
|
|
|
+ "value": "frames",
|
|
|
+ "description": "节点动画帧",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "input",
|
|
|
+ "value": "input",
|
|
|
+ "description": "是否单击，就显示文本输入框",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "dropdownList",
|
|
|
+ "value": "dropdownList",
|
|
|
+ "description": "单击，是否显示下拉选项框",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "events",
|
|
|
+ "value": "events",
|
|
|
+ "description": "交互事件数组。",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "iframe",
|
|
|
+ "value": "iframe",
|
|
|
+ "description": "pen.name='iframe'时，嵌入网页的 url",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "externElement",
|
|
|
+ "value": "externElement",
|
|
|
+ "description": "是否为dom图元，凡是通过原生开发的dom图元，都需要配置该属性。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "video",
|
|
|
+ "value": "video",
|
|
|
+ "description": "pen.name='video'时，视频 url",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "audio",
|
|
|
+ "value": "audio",
|
|
|
+ "description": "pen.name='video'时，音频 url",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "autoPolyline",
|
|
|
+ "value": "autoPolyline",
|
|
|
+ "description": "当连线为 polyline（pen.lineName === 'polyline'）时，连接的画笔移动了，是否自动重计算连线的锚点。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // "label": "progress",
|
|
|
+ // "value": "progress",
|
|
|
+ // "description": "当前进度值。 0 - 1 之间的数",
|
|
|
+ // "type": "float"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "label": "progressColor",
|
|
|
+ // "value": "progressColor",
|
|
|
+ // "description": "进度背景颜色",
|
|
|
+ // "type": "string"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "label": "verticalProgress",
|
|
|
+ // "value": "verticalProgress",
|
|
|
+ // "description": "进度条水平方向还是垂直方向，默认水平",
|
|
|
+ // "type": "bool"
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ "label": "autoFrom",
|
|
|
+ "value": "autoFrom",
|
|
|
+ "description": "仅连线有效。表示连线起点是否为自动计算关联的最近的锚点。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "autoTo",
|
|
|
+ "value": "autoTo",
|
|
|
+ "description": "仅连线有效。表示连线终点是否为自动计算关联的最近的锚点。",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "flipX",
|
|
|
+ "value": "flipX",
|
|
|
+ "description": "是否水平翻转",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "flipY",
|
|
|
+ "value": "flipY",
|
|
|
+ "description": "是否垂直翻转",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "textFlip",
|
|
|
+ "value": "textFlip",
|
|
|
+ "description": "文字是否镜像",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "layer",
|
|
|
+ "value": "layer",
|
|
|
+ "description": "自定义层",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "borderWidth",
|
|
|
+ "value": "borderWidth",
|
|
|
+ "description": "连线边框宽度",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "borderColor",
|
|
|
+ "value": "borderColor",
|
|
|
+ "description": "连线边框颜色",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "borderRadius",
|
|
|
+ "value": "borderRadius",
|
|
|
+ "description": "圆角",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "pathId",
|
|
|
+ "value": "pathId",
|
|
|
+ "description": "svg path图元id",
|
|
|
+ "type": "string"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "hiddenText",
|
|
|
+ "value": "hiddenText",
|
|
|
+ "description": "是否隐藏文本（text）",
|
|
|
+ "type": "bool"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "keepDecimal",
|
|
|
+ "value": "keepDecimal",
|
|
|
+ "description": "显示格式，undefined 显示原内容；0 显示整数；1 显示一位小数，依次类推。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "lastFrame",
|
|
|
+ "value": "lastFrame",
|
|
|
+ "description": "最后一个动画帧状态数据",
|
|
|
+ "type": "object"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "zIndex",
|
|
|
+ "value": "zIndex",
|
|
|
+ "description": "dom元素节点层级。",
|
|
|
+ "type": "float"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "followers",
|
|
|
+ "value": "followers",
|
|
|
+ "description": "跟随图元id数组，存储跟随该图元一起移动的图元id数组。",
|
|
|
+ "type": "array"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "pivot",
|
|
|
+ "value": "pivot",
|
|
|
+ "description": "自定义旋转中心",
|
|
|
+ "type": "object"
|
|
|
+ }
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="postcss" scoped>
|
|
|
+.props{
|
|
|
+ height:300px;
|
|
|
+ overflow-y:auto;
|
|
|
+}
|
|
|
+
|
|
|
+.input-search{
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 0px;
|
|
|
+ padding:4px 0px;
|
|
|
+
|
|
|
+ .btn{
|
|
|
+ left:14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.t-tree){
|
|
|
+ .t-tree__icon{
|
|
|
+ width: 0px;
|
|
|
+ }
|
|
|
+ .t-tree__label:not(.t-is-active):not(.t-is-checked):hover{
|
|
|
+ background-color: #262D3A;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
ananzhusen