Эх сурвалжийг харах

feat: 新增点击事件案例

奔跑的面条 3 жил өмнө
parent
commit
cb3fbf7ef1

+ 12 - 0
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts

@@ -17,6 +17,14 @@ const nodeModulesTemplateString = `
 console.log(node_modules)
 `
 
+// 添加点击事件
+const addClickTemplateString = `
+// 在渲染之后才能获取 dom 实例
+e.el.addEventListener('click', () => {
+  alert('我触发拉~');
+}, false)
+`
+
 // 异步引入
 const importTemplateString = `
 await import('https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.js')
@@ -162,6 +170,10 @@ export const templateList = [
     description: '获取远程 CDN 库',
     code: importTemplateString
   },
+  {
+    description: '设置文字组件点击事件',
+    code: addClickTemplateString
+  },
   {
     description: '修改图表 tooltip',
     code: tooltipTemplateString

+ 3 - 1
src/views/chart/ContentConfigurations/components/ChartEvent/index.vue

@@ -7,7 +7,9 @@
     </n-text>
     <n-collapse-item title="基础事件配置" name="1">
       <div class="go-event">
-        <n-text depth="3"> 【单击、双击、移入、移出】尽情期待! </n-text>
+        <n-text depth="3">【单击、双击、移入、移出】在开发中,即将上线!</n-text>
+        <br/>
+        <n-text depth="3">(备注:高级事件模块可自行实现上述功能)</n-text>
       </div>
     </n-collapse-item>
     <chart-event-monaco-editor></chart-event-monaco-editor>