浏览代码

perfect_控件配置

ananzhusen 1 年之前
父节点
当前提交
e1f164b775
共有 2 个文件被更改,包括 166 次插入100 次删除
  1. 2 2
      index.html
  2. 164 98
      src/services/defaults.ts

+ 2 - 2
index.html

@@ -24,10 +24,10 @@
       }
     </style>
     <link
-      href="//at.alicdn.com/t/c/font_4042197_yrikqthz1j.css"
+      href="//at.alicdn.com/t/c/font_4042197_esjv5wscsw6.css"
       rel="stylesheet"
     />
-    <script src="//at.alicdn.com/t/c/font_4042197_yrikqthz1j.js"></script>
+    <script src="//at.alicdn.com/t/c/font_4042197_esjv5wscsw6.js"></script>
   </head>
   <body>
     <div id="app"></div>

+ 164 - 98
src/services/defaults.ts

@@ -926,7 +926,7 @@ export const formComponents = [
     list: [
       {
         name: '文本',
-        icon: 'l-text',
+        icon: 'l-wenben',
         data: {
           width: 160,
           height: 30,
@@ -936,7 +936,7 @@ export const formComponents = [
       },
       {
         name: '数字',
-        icon: 'l-text',
+        icon: 'l-shuzi',
         data: {
           width: 160,
           height: 30,
@@ -974,7 +974,7 @@ export const formComponents = [
       },
       {
         name: '图片',
-        icon: 'l-image',
+        icon: 'l-tupian',
         data: {
           width: 100,
           height: 100,
@@ -984,7 +984,7 @@ export const formComponents = [
       },
       {
         name: 'GIF',
-        icon: 'l-image',
+        icon: 'l-GIF',
         data: {
           width: 100,
           height: 100,
@@ -994,7 +994,7 @@ export const formComponents = [
       },
       {
         name: '视频',
-        icon: 'l-pc',
+        icon: 'l-shipin',
         data: {
           width: 200,
           height: 200,
@@ -1020,7 +1020,7 @@ export const formComponents = [
       },
       {
         name: '音频',
-        icon: 'l-pc',
+        icon: 'l-yinpin',
         data: {
           width: 200,
           height: 200,
@@ -1031,7 +1031,7 @@ export const formComponents = [
       },
       {
         name: '头像',
-        icon: 'l-pc',
+        icon: 'l-touxiang',
         data: {
           width: 30,
           height: 30,
@@ -1047,7 +1047,7 @@ export const formComponents = [
       },
       {
         name: '徽标',
-        icon: 'l-pc',
+        icon: 'l-huibiao',
         data: {
           width: 35,
           height: 20,
@@ -1061,7 +1061,7 @@ export const formComponents = [
       },
       {
         name: '标签',
-        icon: 'l-pc',
+        icon: 'l-biaoqian',
         data: {
           text: 'success',
           width: 80,
@@ -1090,7 +1090,7 @@ export const formComponents = [
     list: [
       {
         name: '时间',
-        icon: 'l-shijianxuanzekuang',
+        icon: 'l-clock',
         data: {
           name: 'leTime',
           width: 300,
@@ -1102,7 +1102,7 @@ export const formComponents = [
       },
       {
         name: '倒计时',
-        icon: 'l-shijianxuanzekuang',
+        icon: 'l-daojishi',
         data: {
           name: 'countdown',
           width: 300,
@@ -1115,7 +1115,7 @@ export const formComponents = [
       },
       {
         name: '水平时间轴',
-        icon: 'l-shijianzhou',
+        icon: 'l-shuipingshijianzhou',
         data: {
           name: 'leTimeline',
           width: 500,
@@ -1152,7 +1152,7 @@ export const formComponents = [
       },
       {
         name: '垂直时间轴',
-        icon: 'l-shijianzhou',
+        icon: 'l-chuizhishijianzhou',
         data: {
           name: 'leTimeline',
           width: 40,
@@ -1189,7 +1189,7 @@ export const formComponents = [
       },
       {
         name: '日历',
-        icon: 'l-pc',
+        icon: 'l-rili',
         data: {
           width: 200,
           height: 200,
@@ -1204,7 +1204,7 @@ export const formComponents = [
     list: [
       {
         name: '列表',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-liebiao
         data: {
           width: 200,
           height: 200,
@@ -1304,7 +1304,7 @@ export const formComponents = [
       },
       {
         name: '树',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-shu
         data: {
           width: 200,
           height: 200,
@@ -1312,7 +1312,7 @@ export const formComponents = [
       },
       {
         name: '网页',
-        icon: 'l-02',
+        icon: 'l-pc',
         data: {
           name: 'iframe',
           width: 500,
@@ -1329,7 +1329,7 @@ export const formComponents = [
     list: [
       {
         name: '业务指标',
-        icon: 'l-pc',
+        icon: 'l-yewuzhibiao',
         data: {
           width: 115,
           height: 25,
@@ -1361,7 +1361,7 @@ export const formComponents = [
       },
       {
         name: '全局消息',
-        icon: 'l-pc',
+        icon: 'l-quanjuxiaoxi',
         data: {
           width: 200,
           height: 46,
@@ -1388,20 +1388,20 @@ export const formComponents = [
       },
       {
         name: '通知',
-        icon: 'l-pc',
-        data: {
-          width: 200,
-          height: 200,
-        },
-      },
-      {
-        name: '对话框',
-        icon: 'l-pc',
+        icon: 'l-tongzhi',
         data: {
           width: 200,
           height: 200,
         },
       },
+      // {
+      //   name: '对话框',
+      //   icon: 'l-pc',
+      //   data: {
+      //     width: 200,
+      //     height: 200,
+      //   },
+      // },
     ],
   },
   {
@@ -1410,7 +1410,7 @@ export const formComponents = [
     list: [
       {
         name: '水平轮播',
-        icon: 'l-shijianzhou',
+        icon: 'l-pc',
         data: {
           name: 'leSwiperline',
           width: 200,
@@ -1421,7 +1421,7 @@ export const formComponents = [
       },
       {
         name: '垂直轮播',
-        icon: 'l-shijianzhou',
+        icon: 'l-pc',
         data: {
           name: 'leSwiperline',
           width: 200,
@@ -1434,7 +1434,7 @@ export const formComponents = [
       },
       {
         name: '轮播图',
-        icon: 'l-pc',
+        icon: 'l-lunbotu',
         data: {
           name: 'leSwiper',
           width: 400,
@@ -1495,7 +1495,7 @@ export const formComponents = [
     list: [
       {
         name: '链接',
-        icon: 'l-pc',
+        icon: 'l-lianjie',
         data: {
           text: '乐吾乐2D编辑器',
           width: 100,
@@ -1518,15 +1518,26 @@ export const formComponents = [
       },
       {
         name: '返回',
-        icon: 'l-pc',
+        icon: 'l-fanhui',
         data: {
-          width: 200,
-          height: 200,
+          width: 40,
+          height: 40,
+          name: 'image',
+          icon: '\ue697',
+          iconFamily: 'l-icon',
+          events: [
+            {
+              action: 5,
+              name: 'click',
+              value: 'window.history.go(-1);',
+              where: { type: null },
+            },
+          ],
         },
       },
       {
         name: '锚点',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-anchor
         data: {
           width: 200,
           height: 200,
@@ -1534,7 +1545,7 @@ export const formComponents = [
       },
       {
         name: '回到顶部',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-huidaodingbu
         data: {
           width: 200,
           height: 200,
@@ -1542,7 +1553,7 @@ export const formComponents = [
       },
       {
         name: '面包屑',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-mianbaoxie
         data: {
           width: 200,
           height: 200,
@@ -1550,7 +1561,7 @@ export const formComponents = [
       },
       {
         name: '下拉菜单',
-        icon: 'l-daohangcaidan',
+        icon: 'l-xialacaidan',
         data: {
           name: 'leHeadMenu',
           width: 650,
@@ -1601,7 +1612,7 @@ export const formComponents = [
       },
       {
         name: '导航菜单',
-        icon: 'l-zhediemianban',
+        icon: 'l-daohangcaidan',
         data: {
           name: 'leMenu',
           width: 200,
@@ -1664,7 +1675,7 @@ export const formComponents = [
       },
       {
         name: '分页',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-fenye
         data: {
           width: 200,
           height: 200,
@@ -1672,47 +1683,76 @@ export const formComponents = [
       },
       {
         name: '步骤条',
-        icon: 'l-pc',
+        icon: 'l-pc', //l-buzhoutiao
         data: {
-          width: 200,
-          height: 200,
+          name: 'steps',
+          width: 500,
+          height: 40,
+          hiddenText: true,
+          direction: 'horizontal',
+          labelAlign: '', //left/right/alternate/top/bottom
+          mode: 'alternate', //alternate
+          data: [
+            {
+              label: '2022-01-01',
+              content: '事件一',
+              // path: 'M71.3,61.9v2.21L56.66,66V63.82l3.27-.43.25-1-2.39.31V60.84l2.84-.37.21-.87-3.4.44V57.85l13.08-1.73v2.2l-6.85.9-.21.88,6-.79-.15,2.85ZM58.11,66.56,69.86,65v5.63L58.11,72.19Zm2.59,3.09,6.44-.84V67.52l-6.44.85ZM62.78,63l3.87-.51.07-.95L63,62.05Z',
+            },
+            {
+              label: '2022-01-01',
+              content: '事件一',
+            },
+            {
+              label: '2022-02-01',
+              content: '事件二',
+            },
+            {
+              label: '2022-03-01',
+              content: '事件三',
+            },
+            {
+              label: '2022-04-01',
+              content: '事件四',
+            },
+          ],
+          text: '时间轴',
         },
       },
       {
         name: '选项卡',
-        icon: 'l-pc',
+        icon: 'l-xuanxiangka',
         data: {
           name: 'leTab',
           width: 500,
           height: 50,
-          direction:'vertical',
-          selectKey:'1',
-          selectedKeys:[],
-          them:'',
-          data:[
-            {text:'场景一',key:'0',isForbidden:true},
-            {text:'场景二',key:'1'},
-            {text:'场景三',key:'2'},
-            {text:'场景四',key:'3'}
-          ]
+          direction: 'vertical',
+          selectKey: '1',
+          selectedKeys: [],
+          them: '',
+          data: [
+            { text: '场景一', key: '0', isForbidden: true },
+            { text: '场景二', key: '1' },
+            { text: '场景三', key: '2' },
+            { text: '场景四', key: '3' },
+          ],
         },
       },
       {
         name: '多选选项卡',
         icon: 'l-pc',
         data: {
-          name:'leTab',
+          name: 'leTab',
           width: 500,
           height: 50,
-          direction:'horizontal',
-          selectedKeys:['0'],
-          them:'multiple',
-          data:[
-            {text:'场景一',key:'0'},
-            {text:'场景二',key:'1',isForbidden:true},
-            {text:'场景三',key:'2'},
-            {text:'场景四',key:'3'}
-          ]
+          direction: 'horizontal',
+          selectedKeys: ['0'],
+          them: 'multiple',
+          data: [
+            { text: '场景一', key: '0' },
+            { text: '场景二', key: '1', isForbidden: true },
+            { text: '场景三', key: '2' },
+            { text: '场景四', key: '3' },
+          ],
         },
       },
     ],
@@ -1746,7 +1786,7 @@ export const formComponents = [
       },
       {
         name: '文本输入框',
-        icon: 'l-shurukuang',
+        icon: 'l-wenbenshurukuang',
         data: {
           x: 100,
           y: 100,
@@ -1757,59 +1797,85 @@ export const formComponents = [
           borderRadius: 0.05,
           input: true,
           ellipsis: true,
-          text: '输入数据',
+          text: '输入文本',
           textAlign: 'left',
-          color: '#D9D9D9FF',
-          textColor: '#000000FF',
-          hoverTextColor: '#000000FF',
-          activeTextColor: '#000000FF',
+          // color: '#D9D9D9FF',
+          // textColor: '#000000FF',
+          // hoverTextColor: '#000000FF',
+          // activeTextColor: '#000000FF',
           textLeft: 10,
         },
       },
       {
         name: '数字输入框',
-        icon: 'l-shurukuang',
-        data: {},
+        icon: 'l-shuzishurukuang',
+        data: {
+          x: 100,
+          y: 100,
+          height: 40,
+          width: 200,
+          disableAnchor: true,
+          name: 'rectangle',
+          borderRadius: 0.05,
+          input: true,
+          ellipsis: true,
+          text: '输入数字',
+          textAlign: 'left',
+          // color: '#D9D9D9FF',
+          // textColor: '#000000FF',
+          // hoverTextColor: '#000000FF',
+          // activeTextColor: '#000000FF',
+          textLeft: 10,
+          events: [
+            {
+              action: 5,
+              name: 'inactive',
+              value:
+                'context.meta2d.setValue({ id: pen.id, text: parseFloat(pen.text) }, { doEvent: false });',
+              where: { type: null },
+            },
+          ],
+        },
       },
       {
         name: '单选框',
-        icon: 'l-danxuankuang',
+        icon: 'l-danxuanxiang',
         data: {
           name: 'leRadio',
           width: 150,
           height: 30,
           disableAnchor: true,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          them:'button',
-          itemPosition:[],
+          them: 'button',
+          itemPosition: [],
           data: [
-            {key:'1', text: '选项一', isForbidden: true },
-            {key:'2', text: '选项示例二' },
-            {key:'3', text: '选项三' },
+            { key: '1', text: '选项一', isForbidden: true },
+            { key: '2', text: '选项示例二' },
+            { key: '3', text: '选项三' },
           ],
           selectKey: '2',
         },
       },
       {
         name: '多选框',
-        icon: 'l-xuanzeqi',
+        icon: 'l-duoxuanxiang',
         data: {
           name: 'leCheckBox',
           width: 300,
           height: 30,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          them:'button',
+          them: 'button',
           data: [
-            {key:'1', text: '选项一', isForbidden: true },
-            {key:'2', text: '选项示例二' },
-            {key:'3', text: '选项三' },
+            { key: '1', text: '选项一', isForbidden: true },
+            { key: '2', text: '选项示例二' },
+            { key: '3', text: '选项三' },
           ],
-          selectedKeys:['2','3']
+          selectedKeys: ['2', '3'],
         },
       },
       {
         name: '下拉选择器',
-        icon: 'l-xuanzeqi',
+        icon: 'l-xialaxuanzekuang',
         data: {
           x: 100,
           y: 100,
@@ -1842,7 +1908,7 @@ export const formComponents = [
       },
       {
         name: '时间选择器',
-        icon: 'l-riqixuanzekuang',
+        icon: 'l-shijianxuanzekuang',
         data: {
           name: 'leInput',
           width: 200,
@@ -1870,7 +1936,7 @@ export const formComponents = [
       },
       {
         name: '颜色选择器',
-        icon: 'l-maodian',
+        icon: 'l-yansexuanzekuang',
         data: {
           name: 'leInput',
           width: 200,
@@ -1900,7 +1966,7 @@ export const formComponents = [
       },
       {
         name: '滑块',
-        icon: 'l-kaiguan',
+        icon: 'l-huakuai',
         data: {
           anchors: [],
           disableAnchor: true,
@@ -1926,7 +1992,7 @@ export const formComponents = [
     list: [
       {
         name: '圆柱水位',
-        icon: 'l-db',
+        icon: 'l-yuanzhushuiwei',
         data: {
           name: 'waterTank',
           width: 100,
@@ -1939,7 +2005,7 @@ export const formComponents = [
       },
       {
         name: '球形水位',
-        icon: 'l-shuiliujianceqi',
+        icon: 'l-qiuxingshuiwei',
         data: {
           name: 'watermeter',
           width: 100,
@@ -1958,7 +2024,7 @@ export const formComponents = [
       },
       {
         name: '指示灯',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-zhishideng',
         data: {
           name: 'indicatorLight',
           width: 100,
@@ -1990,17 +2056,17 @@ export const formComponents = [
       },
       {
         name: '圆形按钮',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-yuanxinganniu
         data: {},
       },
       {
         name: '船型开关',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-chuanxingkaiguan
         data: {},
       },
       {
         name: '转换开关',
-        icon: 'l-tuxingzhishideng1',
+        icon: 'l-pc', //l-zhuanhuankaiguan
         data: {},
       },
       {
@@ -2044,7 +2110,7 @@ export const formComponents = [
       },
       {
         name: '空气开关',
-        icon: 'l-bodongkaiguan',
+        icon: 'l-kongqikaiguan',
         data: {
           name: 'airSwitch',
           width: 180,
@@ -2056,7 +2122,7 @@ export const formComponents = [
       },
       {
         name: '水柱温度计',
-        icon: 'l-wenduji',
+        icon: 'l-shuizhuwendu',
         data: {
           name: 'thermometer',
           width: 100,
@@ -2070,7 +2136,7 @@ export const formComponents = [
       },
       {
         name: '扁平温度计',
-        icon: 'l-wenduji',
+        icon: 'l-bianpingwendu',
         data: {
           name: 'thermometer1',
           width: 200,