create方法：仅在组件首次被创建时调用一次。 TabsWidget.css 组件的样式文件，在该文件中编写组件的css样式。 TabsWidget.ftl 组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 packageinfo.json 组件的元数据描述文件，定义了如下内容：

查看更多 →

getProperties(); ”用于获取组件的自定义属性配置值。 “var elem = thisObj.getContainer();” 用于获取组件的DOM元素。 “var connectorProperties = thisObj.getConnectorProperties();” 用于获取组件的桥接器属性配置值。

查看更多 →

getProperties(); ：获取组件的自定义属性配置值。 var elem = thisObj.getContainer(); ：获取组件的DOM元素。 var connectorProperties = thisObj.getConnectorProperties(); ：获取组件的桥接器属性配置值。

查看更多 →

I”，开启 开发者工具 。 DOM和 CSS 样式调试 在Elements面板，可以自由的操作DOM和 CS S，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。

查看更多 →

EchartsWidgetTemplate.css 组件的样式文件，在该文件中编写组件的CSS样式。 EchartsWidgetTemplate.ftl 组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 packageinfo.json 组件的元数据描述文件。

查看更多 →

I”，开启开发者工具。 DOM和CSS样式调试 在Elements面板，可以自由的操作DOM和CSS，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。

查看更多 →

create方法：仅在组件首次被创建时调用一次。 TabsWidget.css 组件的样式文件，在该文件中编写组件的css样式。 TabsWidget.ftl 组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 packageinfo.json 组件的元数据描述文件，定义了如下内容：

查看更多 →

效果：设置组件的透明度、轮廓样式及光标样式。 图8 设置显示效果 样式设置完成后，设计器会自动完成以下动作。 如果当前样式在选择器中没有选中任何一个类名或者ID，会自动生成随机类名。 将在样式面板设置完成的样式写入类名规则中。 图9 样式写入到类名样式 将样式选择器自动生成或者选中的类名绑定到当前组件属性中。

查看更多 →

后添加括号，否则为字符串格式。 图4 自定义处理函数 单击“确定”。 在生命周期中绑定JS方法 生命周期介绍 这里的生命周期特指Vue的生命周期，Vue的生命周期可以简单分为四个阶段：创建阶段，挂载阶段，运行阶段，销毁阶段。 图5 生命周期介绍 setup：在组件创建时执行。 o

查看更多 →

样式 管理员可自定义知识在手机端的显示样式。 “推荐+订阅”：移动端可以查看推荐和订阅两大版本内容，优先展示“推荐”内容。 “订阅+推荐”：移动端可以查看推荐和订阅两大版本内容，优先展示“订阅”内容。 “仅推荐”：在移动端仅可查看推荐版块内容，无法查看订阅板块内容。 “仅订阅”：

查看更多 →

后添加括号，否则为字符串格式。 图4 自定义处理函数 单击“确定”。 在生命周期中绑定JS方法 生命周期介绍 这里的生命周期特指Vue的生命周期，Vue的生命周期可以简单分为四个阶段：创建阶段，挂载阶段，运行阶段，销毁阶段。 图5 生命周期介绍 setup：在组件创建时执行。 o

查看更多 →

getProperties 获取该组件配置的属性值，组件接入配置数据时必须使用。 getContainer 获取渲染该组件的容器dom节点。 getWidgetBasePath 获取该组件静态资源的根路径，用来拼接组件内部的其他静态资源。 getMessages 获取该组件国际化配置文件

查看更多 →

样式约定 样式约定 Terraform约定了一些惯用的风格样式，以确保不同团队编写的文件和模块的风格一致性。建议用户遵循这些约定，推荐的样式约定如下： 对于每个嵌套级别，缩进两个空格。 当多个单行的参数在同一嵌套级别连续出现时，建议将等号对齐。 name =

查看更多 →

这种打断点非常方便，但有时候没那么容易找到源码。 Dom修改时加断点。 图3 Dom断点 Ajax请求断点。 图4 Ajax断点 异常时断点。 图5 异常断点 调试代码 调试代码最好保持本地环境和线上环境一致，这样基本保证修改缺陷不会被测试验证不通过。那怎么保持本地环境和线上保持一致呢？ Vue CLI的本地代理功能，在配置文件devServer

查看更多 →

于当前元素。同一个组件如果在“基本属性”和“样式”中，同时对布局属性进行了设置，最终生效是“样式”栏中的设置。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。

查看更多 →

组件的描述信息，按需进行设置。此处配置的信息，将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图5 界面报错

查看更多 →

次。 shiftManagement.css 组件的样式文件，在该文件中编写组件的CSS样式。 shiftManagement.ftl 组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 packageinfo.json 组件的元数据描述文件，定义了如下内容。

查看更多 →

高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。 父主题：

查看更多 →

l_VueI18n”是基于“global_Vue”的，需要写在“global_Vue”之后。 在1中获取的Widget包（widget_demo_mintui.zip）的widget_demo_mintui.ftl中写一个简单的表单DOM。 <div id="widget_demo_mintui">

查看更多 →

“Navigator_Widget.js”文件是Widget逻辑文件，整个Widget的渲染核心JS。“路由导航(示例)”组件是基于Vue Router（ Vue.js官方的路由管理器）开发的，请参考Vue Router的代码开发规范，修改组件包中的文件。 本示例场景中，增加如下加粗代码。 var Navigator_Widget

查看更多 →

高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。 父主题：

查看更多 →