设计页 文件名 js\enduser\designer\vs-component-widget-square.js 搜索 $vcPlugin_widget_w1050 如图：  ``` vsPluginComponentModule.factory("$vcPlugin_widget_w1050", ["$vsPluginRegister", "$vsDatasource", "$vsUtils", "toaster", function (a, e, d, c) { var b = { showBorderCategory: true, showBasicCategory: true, showFixedCategory: true, showEventCategory: true, buildDataDescription: function (h, k, j, g, i, f) {}, buildChartDescription: function (m, k, h, j, f,) { m.element = k; m.component = h; if (h.config.has == null) { h.config.has = true; h.config.backgroundColor = "#ED7A39"; h.config.mainTitle = vsLang.sample_sales_analytics; h.config.mainTitleColor = "#FFFFFF"; h.config.mainTitleSize = 16; h.config.mainTitleAlign = "center"; h.config.mainTitleMarginLeft = 0; h.config.mainTitleMarginTop = 0; h.config.mainTitleMarginLeft = 0; h.config.topIcon = "fa"; h.config.topIconColor = "#FFFFFF"; h.config.topIconSize = 16; h.config.bottomIcon = "fa"; h.config.bottomIconColor = "#FFFFFF"; h.config.bottomIconSize = 16; h.config.rightIcon = "fa"; h.config.rightIconColor = "#FFFFFF"; h.config.rightIconSize = 16; h.config.leftIcon = "fa fa-shopping-bag"; h.config.leftIconColor = "#FFFFFF"; h.config.leftIconSize = 16; h.config.toptext = ''; h.config.lefttext = ''; } var i = []; i.push("<div style='width:100%;height:100%;overflow:hidden;cursor:pointer;'>"); i.push("<table style='font-size:14px;height:100%;width:100%;'>"); i.push(" <tr>"); i.push(" <td valign='middle' style='vertical-align:middle;'>"); i.push(" <div ng-show=\"component.config.topIcon !== 'fa'\" ng-style=\"{'text-align':component.config.mainTitleAlign}\">"); i.push(" <i uib-tooltip='{{component.config.toptext}}' tooltip-class='icontooltip' ng-style=\"{'color': component.config.topIconColor, 'font-size': component.config.topIconSize}\" ng-class='component.config.topIcon'></i>"); i.push(" </div>"); i.push(" <div ng-style=\"{'text-align':component.config.mainTitleAlign, 'margin-top': component.config.mainTitleMarginTop}\">"); i.push(" <i uib-tooltip='{{component.config.lefttext}}' tooltip-class='icontooltip' ng-show=\"component.config.leftIcon !== 'fa'\" ng-style=\"{'color': component.config.leftIconColor, 'font-size': component.config.leftIconSize}\" ng-class='component.config.leftIcon'></i>"); i.push(" <span ng-style=\"{'color': component.config.mainTitleColor, 'font-size': component.config.mainTitleSize, 'margin-left': component.config.mainTitleMarginLeft, 'font-weight':component.config.fontStyle.bold?'bold':'normal', 'font-style':component.config.fontStyle.italic?'italic':'normal', 'text-decoration':component.config.fontStyle.underline?'underline':'normal'}\">{{compileVariableString(component.config.mainTitle)}}</span>"); i.push(" </div>"); i.push("</td>"); i.push(" </tr>"); i.push("</table>"); i.push("</div>"); var l = j(i.join(""))(m); k.html(l); var g = { name: "text", title: vsLang.settings, groups: [] }; g.groups.push({ name: "text", title: { text: vsLang.title }, elements: [{ title: vsLang.text, type: "text-input-sl", bind: "mainTitle" }, { title: vsLang.style, type: "font-style", bind: "fontStyle" }, { title: vsLang.size, type: "configSlide", bind: "mainTitleSize", config: { slideEnd: 100 } }, { title: vsLang.color, type: "colorpicker", bind: "mainTitleColor" }, { title: vsLang.vertical_spacing_short, type: "configSlide", bind: "mainTitleMarginTop", config: { slideEnd: 100 } }, { title: vsLang.horizontal_spacing_short, type: "configSlide", bind: "mainTitleMarginLeft", config: { slideEnd: 100 } }] }); g.groups.push({ name: "text", title: { text: vsLang.icon_left }, elements: [{ title:'提示说明', type: "text-input-sl", bind: "lefttext" },{ title: vsLang.icon, type: "iconpicker", bind: "leftIcon" }, { title: vsLang.size, type: "configSlide", bind: "leftIconSize", config: { slideEnd: 100 } }, { title: vsLang.color, type: "colorpicker", bind: "leftIconColor" }] }); g.groups.push({ name: "text", title: { text: vsLang.icon_top }, elements: [{ title: '提示说明', type: "text-input-sl", bind: "toptext" },{ title: vsLang.icon, type: "iconpicker", bind: "topIcon" }, { title: vsLang.size, type: "configSlide", bind: "topIconSize", config: { slideEnd: 100 } }, { title: vsLang.color, type: "colorpicker", bind: "topIconColor" }] }); h.description.categories.push(g) } }; a.register("widget", "w1050", b) }]); ``` 分享页 搜索case"w1050": 替换下面的代码 如图：  ``` var html = []; html.push("<div style='width:100%;height:100%;overflow:hidden;'>"); html.push("<table style='font-size:14px;height:100%;width:100%;cursor:pointer;'>"); html.push(" <tr>"); html.push(" <td valign='middle' style='vertical-align:middle;'>"); html.push(" <div ng-show=\"component.config.topIcon !== 'fa'\" ng-style=\"{'text-align':component.config.mainTitleAlign}\">"); html.push(" <i uib-tooltip='{{component.config.toptext}}' ng-style=\"{'color': component.config.topIconColor, 'font-size': component.config.topIconSize}\" ng-class='component.config.topIcon'></i>"); html.push(" </div>"); html.push(" <div ng-style=\"{'text-align':component.config.mainTitleAlign, 'margin-top': component.config.mainTitleMarginTop}\">"); html.push(" <i uib-tooltip='{{component.config.lefttext}}' ng-show=\"component.config.leftIcon !== 'fa'\" ng-style=\"{'color': component.config.leftIconColor, 'font-size': component.config.leftIconSize}\" ng-class='component.config.leftIcon'></i>"); html.push(" <span ng-style=\"{'color': component.config.mainTitleColor, 'font-size': component.config.mainTitleSize, 'margin-left': component.config.mainTitleMarginLeft, 'font-weight':component.config.fontStyle.bold?'bold':'normal', 'font-style':component.config.fontStyle.italic?'italic':'normal', 'text-decoration':component.config.fontStyle.underline?'underline':'normal'}\">{{compileVariableString(component.config.mainTitle)}}</span>"); html.push(" </div>"); html.push(" </td>"); html.push(" </tr>"); html.push("</table>"); html.push("</div>"); var el = $compile(html.join(""))(scope); element.append(el); ``` 用法 报表页样式 可能需要用到 ``` .tooltip-inner{ /* 提示框背景颜色 */ background: #fafafa !important; /* 文字左右居中对齐 */ text-align: left !important; /* 提示框字体颜色 */ color:#363636 !important; border:1px solid #dedede; /* 最大宽度 提示框 */ max-width: 400px !important; white-space:normal; word-break:break-all; word-wrap:break-word; } .tooltip-arrow{ /* 三角的颜色 */ border-top-color: #ffffff !important; opacity: 1; } .tooltip{ opacity: 1 !important; } ```