vue 动态执行方法
如果你要在脚本里动态的调用方法,而且可能的入口条件还会依据用户的输入值影响到。如何解决呢。1、事件发起<el-button icon="el-icon-video-play" type="text" @click="run">运行</el-button><el-button icon="el-icon-view" type="text" @click="showJso
·
如果你要在脚本里动态的调用方法,而且可能的入口条件还会依据用户的输入值影响到。如何解决呢。
1、事件发起
<el-button icon="el-icon-video-play" type="text" @click="run">
运行
</el-button>
<el-button icon="el-icon-view" type="text" @click="showJson">
查看json
</el-button>
<el-button icon="el-icon-download" type="text" @click="download">
导出文件
</el-button>
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
复制
</el-button>
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
清空
</el-button>
2、对应的方法
showJson() {
this.AssembleFormData()
this.jsonDrawerVisible = true
},
download() {
this.dialogVisible = true
this.showFileName = true
this.operationType = 'download'
},
run() {
this.dialogVisible = true
this.showFileName = false
this.operationType = 'run'
},
copy() {
this.dialogVisible = true
this.showFileName = false
this.operationType = 'copy'
},
3、公共执行方法
generate(data) {
//设置要执行的方法execRun(data)
const func = this[`exec${titleCase(this.operationType)}`]
this.generateConf = data
//运行方法
func && func(data)
},
4、各自的方法
execRun(data) {
this.AssembleFormData()
this.drawerVisible = true
},
execDownload(data) {
const codeStr = this.generateCode()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
saveAs(blob, data.fileName)
},
execCopy(data) {
document.getElementById('copyNode').click()
},
empty() {
this.$confirm('确定要清空所有组件吗?', '提示', { type: 'warning' }).then(
() => {
this.drawingList = []
this.idGlobal = 100
}
)
},
更多推荐
已为社区贡献2条内容
所有评论(0)