vue实现按钮弹框【弹出图片、视频、表格、表单等】
剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难
🔎 了解博主
- 📢 个人简介: 哈喽!小伙伴们,我是水香木鱼,水瓶座一枚 😜 来自于黑龙江 庆安
- 🏡 本站首页: 水香木鱼
- 🚀 博客主页: 陈春波 👉 开源博客模板【纯前端开发-
Vue3
+TS
+Ant Design of Vue
】,来 Star⭐Gitee吧 ! 拥有属于我们自己的 Blog。 - 🎨 系列专栏:后台管理系统
- 📖 人生格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。
- 🌏 小目标: 成为前端布道师
期待已久的 vue 弹框
(el-button+el-dialog组合)
,今天 它来啦!炸雷、炸雷、炸雷,崩塌卡茨…
📑 文章内容
内容特点:少量代码 又不难,是你喜欢的类型。
1、按钮
<el-button @click="playVideo"> 案例视频 </el-button>
2、对话框
- visible:(是否显示 Dialog,支持 .sync 修饰符)
- close:(Dialog 关闭的回调)
- width:(弹出框的宽度大小)
- title:(显示的标题)
<el-dialog :visible.sync="videoVisible" width="80%" title="案例视频" @close="closeDialog"> <div style="height:500px;text-align:center"> <video width="100%" height="100%" :src="minioBaseUrl + '/demo-video/system.mp4'" controls="controls" ref="video" ></video> </div></el-dialog>
3、定义状态
data() { return { //默认false 弹框隐藏状态 videoVisible: false, }},methods: { //点击按钮时,触发弹出效果 playVideo() { //触发点击时,让其显示 this.videoVisible = true }, //事件操作 (表格、表单 同理 需要执行的事件 在此处) closeDialog() { //点击播放视频 this.$refs.video.pause() },}
博主致谢
非常感谢小伙伴们阅读到结尾,本期的文章就分享到这里,总结了
(vue实现按钮弹框[视频、图片、表单、表格等])
,希望可以帮到大家,谢谢。
👉 如果你觉得本篇文章有帮助到您,鼓励一下木鱼吧! 点击
【关注+点赞+收藏+评论+转发
】支持一下哟
😛 您的支持就是我更新的最大动力。👇
往期精彩
前端开发:颜色代码速查表【英文颜色、HEX格式、RGB格式】
OCR文字识别【前端渲染,后端进行逻辑处理】
前端添加水印效果攻略【vue和原生js添加方式】
前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
一文图解前端WebSocket 实时通信