vue+element组件封装

欢迎来到萌小问题分享环节

大家好! 这是我第一次使用博客向大家分享我在项目中遇到的问题及最终解决方案,希望能对大家有所帮助.

问题开始

弹框问题:
1.由于管理平台里含有很多的弹框,每个界面几乎都有新增和编辑弹框,若是新增和编辑一直重复写会增加代码量,而且需要增加字段时,需要修改两处代码,这样就会增加任务量,对于这个问题,于是就想到了vue里的组件封装及使用,将弹框封装成组件,通过判断去使用,这样修改的时候只需要修改组件就可以了,接下来就说说封装的步骤吧.

组件创建

1.首先在你的项目里建一个.vue文件,如下图
在这里插入图片描述
在这个文件里构建你的弹框内容,如下图
在这里插入图片描述
使用的是element中的弹框,显示是用true/false,于是在脚本内定义它,默认不显示
在这里插入图片描述
这样一个组件都创建好了,接下来我们去使用它吧!

组件使用

1.在需要的界面去引用刚刚创建的组件
在这里插入图片描述
引入之后就开始使用吧!
在这里插入图片描述
由于它是一个弹框就需要定操作它的状态啦,默认让弹框不显示
在这里插入图片描述
业务需求

点新增出现弹框,先给新增绑定一个事件,去调用弹框,代码如下图
在这里插入图片描述
在这里插入图片描述
当点击新增让弹框的显示,所以是 this.DialogVisible = true,这样第一步的弹框组件封装及使用就可以了

结束

到这里就结束了,没明白的朋友们欢迎评论,有不对的地方大家也可以在评论区提出哦!第一次写,希望对大家有所帮助哦!接下来会更新组件之间的传值及组件之间的事件调取更新,敬请期待吧~

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
VueElement可以一起使用来封装一个选人弹窗。首先,我们需要使用Vue框架来构建弹窗组件,然后使用Element UI库来实现弹窗的样式和组件。 在Vue中,我们可以使用组件的方式来封装选人弹窗。首先,我们需要创建一个组件文件,命名为"selectUserModal.vue"。然后,在该组件中,我们可以使用Element UI的Modal组件作为弹窗容器,使用Form组件和Table组件等来展示选择人员的界面。 在"selectUserModal.vue"中,我们可以定义一个data属性来存储选择的人员信息,以及一个visible属性来控制弹窗的显示和隐藏。我们还可以定义一些方法来处理用户的选择操作,如确定选择和取消选择等。 在弹窗的界面中,我们可以使用Form组件来展示与人员选择相关的输入框,如搜索框和筛选条件等。然后,在表格中展示人员列表,可以使用Table组件,并绑定数据源和列定义。 为了实现人员选择操作,我们可以提供一个确认按钮,当用户点击确认按钮时,我们可以触发一个自定义事件,并将选择的人员信息作为参数进行传递。其他的操作,如点击表格行即选中人员,我们也可以在相应的方法中进行处理。 当组件完成后,我们可以在其他Vue页面中引用该组件,并传递参数来控制弹窗的显示。通过监听自定义事件,我们可以在父组件中获取到选择的人员信息,并进行相应的操作。 总结起来,通过VueElement的配合,我们可以封装一个选人弹窗组件,使其能在Vue项目中方便地使用,并具有良好的交互和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值