index.js
/**
* @description 在光标处插入一个表格
* @param {Number} rows 行数
* @param {Number} cols 列数
*/
vm.insertTable = function (rows, cols) {
const table = {
name: 'table',
attrs: {
style: 'display:table;width:100%;margin:10px 0;text-align:center;border-spacing:0;border-collapse:collapse;border:1px solid gray'
},
children: []
}
for (let i = 0; i < rows; i++) {
const tr = {
name: 'tr',
attrs: {},
children: []
}
for (let j = 0; j < cols; j++) {
tr.children.push({
name: 'td',
attrs: {
style: 'padding:2px;border:1px solid gray'
},
children: [{
type: 'text',
text: ''
}]
})
}
table.children.push(tr)
}
insert(table)
}
index.vue
<i class="iconfont icon-biaoge" data-method="insertTable" />
请问index.vu该怎么调用js文件中的那个方法,?
这样写也不行,会报错
<i class="iconfont icon-biaoge" data-method="insertTable(4,5)" />
报错
chunk-vendors.js:15977 [system] TypeError: this.$refs.article[e.currentTarget.dataset.method] is not a function
at VueComponent.edit (index1.vue:318:1)
at click (pages-index-index1.js:286:28)
at invokeWithErrorHandling (chunk-vendors.js:3871:26)
at HTMLElement.invoker (chunk-vendors.js:4196:14)
at original._wrapper (chunk-vendors.js:9080:25)
(匿名) @ chunk-vendors.js:15977
Array.isArray.n.onError.length.n.onError @ chunk-vendors.js:15977
invokeWithErrorHandling @ chunk-vendors.js:3871
push.4UNb.Vue.__call_hook @ chunk-vendors.js:10619
e.config.errorHandler @ chunk-vendors.js:15977
globalHandleError @ chunk-vendors.js:3887
handleError @ chunk-vendors.js:3856
invokeWithErrorHandling @ chunk-vendors.js:3879
invoker @ chunk-vendors.js:4196
original._wrapper @ chunk-vendors.js:9080
chun
如何在index.vue中rows和cols传递到js那个方法里中
插件官网
https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin
仅供参考:
在index.vue中调用js文件中的insertTable方法,可以在该元素上添加@click事件,然后在事件处理程序中调用该方法。代码如下:
<template>
<div>
<i class="iconfont icon-biaoge" @click="insertTable(4, 5)"></i>
</div>
</template>
<script>
import { insertTable } from 'path/to/index.js';
export default {
methods: {
insertTable(rows, cols) {
insertTable(rows, cols);
},
},
};
</script>
这里假设index.js中的insertTable方法被导出了,可以使用ES6的import语句引入。在Vue组件中,可以通过methods选项定义一个名为insertTable的方法,并在该方法中调用import进来的insertTable函数。在模板中,可以将该方法绑定到元素的@click事件上,这样当点击该元素时,该方法就会被调用。注意,这里的@click事件是绑定到元素上的,而不是data-method属性。