vue实现动态按钮？

作者站长头像
站长
· 阅读数 7

vue实现动态按钮借助iview的Button，由于这些按钮是配置出来的，目前没有代码，还不清楚怎么写，所以麻烦大佬们了

如图vue实现动态按钮？

期望能在各个vue组件使用的，然后通过不同的点击来触发事件，希望大佬们，给个思路

回复
1个回答
avatar
test
2024-06-30

你先不考虑动态的，只写静态的 templete 部分

<Button type="default">批量导出</Button>
<Button type="primary">录入检测结果</Button>
<Button type="success">提交流转</Button>

这样按钮就出来的，然后就是提取变量转换为 json

buttons = [
    {type:'default',text:'批量导出'},
    {type:'primary',text:'录入检测结果'},
    {type:'success',text:'提交流转'},
]

接下来就是 templete 和 json 的组合

<Button v-for="button in buttons" :type="button.type">{{button.text}}</Button>

然后就是事件了，可以绑定 event，然后无非就是url、入参什么的配置。

当然也可以抛给 eventBus

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容