<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<el-button @click='handleOpenDialog'>打开Dialog弹框</el-button>
<el-dialog title='外部表格弹窗' center :visible.sync='outVisible' :before-close='outClose'>
<el-table :data='gridData'>
<el-table-column prop='date' label='日期'></el-table-column>
<el-table-column prop='name' label='姓名'></el-table-column>
<el-table-column label='操作'>
<template slot-scope='scope'>
<el-button type='warning' size='mini' @click='handleEdit(scope.row)'>修改</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title='内部表单弹窗' center :visible.sync='innerVisible' :before-close='outClose' append-to-body>
<el-form :model='formData' label-width='80px'>
<el-form-item label='日期'>
<el-input v-model='formData.date'></el-input>
</el-form-item>
<el-form-item label='姓名'>
<el-input v-model='formData.name'></el-input>
</el-form-item>
</el-form>
<span slot='footer'>
<el-button @click='innerVisible=false'>返回</el-button>
</span>
</el-dialog>
<span slot='footer'>
<el-button @click='outVisible=false'>返回</el-button>
</span>
</el-dialog>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data() {
return {
outVisible: false,
innerVisible: false,
formData: { date: '', name: ''},
gridData: [{
date: '2022-05-02',
name: '王大虎'
}, {
date: '2016-05-08',
name: '王老虎'
}],
}
},
methods: {
handleOpenDialog() {
this.outVisible = true
},
handleEdit(row) {
this.formData = row
this.innerVisible = true
}
}
})
</script>
分享到:
相关推荐
本文实例为大家分享了vue实现抽屉弹窗效果的具体代码,供大家参考,具体内容如下 以下代码比较简单。主要就是实现 侧边弹窗而且不会影响页面操作的方式,求点赞!!!不多说直接贴代码。 ,leftT:!leftShow,left...
一个基于Vue2.0的弹窗组件(PC)
vue.js Dialog插件,支持页面挂载对象和按钮配置,博客有js代码和示例,可以按需求自行修改,链接地址:https://blog.csdn.net/weixin_40885323/article/details/104675450
模拟layer体验做的vue弹窗组件。 一款好用的vue弹窗组件
一个基于vue2.0的弹窗组件(PC) 不存在外部字体以及图片等文件,动画使用css3实现,空间很小
全局直接使用js调用 this.$confirmation() 调用通用提示弹窗可二次封装 点击确认取消后 会有相应的回调 利用的Promise封装的
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并...
vue弹窗关闭时清空内容
单选、多选、弹窗功能为组件每个页面都可以调用。适合初级初级的vue学习者,共勉。(里面的test文件夹里面的就是组件)
原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='...
使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识,感兴趣的朋友一起看看吧
相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 –一个组件小于 1Kib (实际打包完...
一个slide.js,一个slide.html,HTML内动态传参,控制所展示的弹窗位置。可以从上弹出,从左,从下等。写的非常精美,包括可以动态显示title,字体图标等等。
vue 弹窗,可拖动,可拖动改变大小,可重新定义样式!前端网络VueVue.jsVue-js对话警报模态的vue-js-模态Vue模态前端网络VueVue.jsVue-js对话警报模态的vue-js-模态Vue模态前端网络VueVue.jsVue-js对话警报模态的vue...
主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现, slot 插槽的使用方式,props 、 $emit 传参,具体组件代码也传上去了。需要的朋友可以参考下
可拖动、最小化、最大化的弹出窗口! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
主要介绍了Vue自定义全局弹窗组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
使用vue实现开屏广告,使用cookie记录,每天弹出一次广告
前几天想了解vue如何写弹窗组件 有以下两种可取的写法: 1.状态管理 如果弹窗组件放在根组件,使用vuex来管理组件的show和hide。放在组件内,通过增加v-show或v-if来控制,可结合slot,定义不同需求的弹窗 2.事件...