VUE弹窗动画建议不要参考官网封装好的的transition，本来很简单的一个需要，越看越晕。
先上源码，看不懂再往下看：
开发流程：
1.先写好一个不带动画的弹窗组件，share_cover为遮罩DIV，share_content为内容DIV
2.（核心）
弹窗动画，我们要给内容DIV的CSS加个animation属性。这里我们给animation设置了三个值：动画CSS名，时间，动画播放次数
3.动画CSS名，按照组件功能命名就行，动画效果在@keyframes里面配置
keyframes后面跟动画名，0%表示动画开始的DIV样式，会覆盖掉animation所在DIV的属性。
可以把0%当作vi-if=false时来理解，动画刚开始时候DIV的样式。
比如我们这里0%的时候bottom设置为-5.5rem,那么share_content里面的bottom会开始会被替换成-5.5rem.
5.同理，如果我们想把动画由从上到下换成从中间一个点展开，也是改keyframes
更多动画效果可以参考 这个 ，直接预览看里面的样式文件，拉倒keyframes那一块即可
百度知道vue的确认弹框加格式
亦有五星光耀辰
1。自定义确认框和提示框
根据传入的type来判断是确认框或提示框
<template>
<transition name="confirm-fade">
<div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')">
<div class="confirm-content-wrap" @click.stop>
<h3 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h3>
<p class="my-confirm-content">{{ content }}</p>
<div class="my-operation">
<div v-if="type==='confirm'" class="my-cancel-btn" @click="clickFun('clickCancel')">
<p class="my-btn-text my-border-right">{{ cancelText }}</p>
</div>
<div class="confirm-btn" @click="clickFun('clickConfirm')">
<p class="my-btn-text">{{ confirmText }}</p>
</div>
</div>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {
isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
titleText: '操作提示', // 提示框标题
content: 'Say Something ...', // 提示框的内容
cancelText: '取消', // 取消按钮的文字
confirmText: '确认', // 确认按钮的文字
type: 'confirm', // 表明弹框的类型：confirm - 确认弹窗（有取消按钮）；alert - 通知弹框（没有取消按钮）
outerData: null // 用于记录外部传进来的数据，也可以给外部监听userBehavior，事件的函数提供判断到底是哪个事件触发的
}
},
methods: {
show (content, config) {
this.content = content || 'Say Something ...'
if (Object.prototype.toString.call(config) === '[object Object]') {
// 确保用户传递的是一个对象
this.titleText = config.titleText || ''
this.cancelText = config.cancelText || '取消'
this.confirmText = config.confirmText || '确认'
this.type = config.type || 'confirm'
this.outerData = config.data || null
}
this.isShowConfirm = true
},
hidden () {
this.isShowConfirm = false
this.titleText = '操作提示'
this.cancelText = '取消'
this.confirmText = '确认'
this.type = 'confirm'
this.outerData = null
},
clickFun (type) {
this.$emit('userBehavior', type, this.outerData)
this.hidden()
}
}
}
</script>
<style scoped>
.my-confirm {
position: fixed
top: 0
left: 0
right: 0
bottom: 0
background-color: rgba(0, 0, 0, 0.5)
z-index: 998
/* 这里防止当用户长按屏幕，出现的黑色背景色块，以及 iPhone 横平时字体的缩放问题 */
-webkit-text-size-adjust: 100%
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
/* 进入和出去的动画 */
.confirm-fade-enter-active {
animation: opacity 0.3s
}
.confirm-fade-enter-active .confirm-content-wrap {
animation: scale 0.3s
}
.confirm-fade-leave-active {
animation: outOpacity 0.2s
}
/* 包裹层容器样式 */
.confirm-content-wrap {
position: absolute
top: 28%
left: 0
right: 0
width: 280px
margin: 0 auto
background-color: #fff
border-radius: 5px
z-index: 999
user-select: none
}
/* 顶部标题部分 */
.my-confirm-title {
padding-top: 20px
text-align: center
font-size: 20px
font-weight: 500
color: #333
}
/* 中间内容部分 */
.my-confirm-content {
padding: 0 15px
padding-top: 20px
margin-bottom: 32px
text-align: center
font-size: 16px
color: #666
line-height: 1.5
}
/* 底部按钮样式 */
.my-operation {
display: flex
border-top: 1px solid #eee
}
.my-operation .my-cancel-btn, .confirm-btn {
flex: 1
}
.my-operation .confirm-btn {
color: #ffb000
}
.my-operation .my-btn-text {
text-align: center
font-size: 16px
margin: 8px 0
padding: 6px 0
}
/* 其他修饰样式 */
.my-border-right {
border-right: 1px solid #eee
}
/* 进来的动画 */
@keyframes opacity {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes scale {
0% {
transform: scale(0)
}
60% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
/* 出去的动画 */
@keyframes outOpacity {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
</style>
调用：
（1）提示框的使用：
<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>
……
//提示框
this.$refs.myDialog.show(content, {
type: 'alert',
confirmText: 'OK',
cancelText: '取消',
titleText: '',
data: null
})
效果：
（2）确认框：
this.$refs.myDialog.show('要兑换这个商品么？', {
type: 'confirm',
confirmText: '立即兑换',
cancelText: '不用了',
titleText: '',
data: {shop: shop, operate: 'exchange'}
})
效果：
当为确认框时的按键处理：changeData
<DialogView ref="myDialog" @userBehavior="changeData"></DialogView>
……
changeData (type, data) {
console.log('changeData',data)
if (type === 'clickConfirm') {
if (data.operate === 'exchange') {
// this.reduceEnergy(data.shop)
this.exchangeCoupon(data.shop)
} else if (data.operate === 'downLoad') {
window.location = data.url
} else if (data.operate === 'login') {
this.uplusApi.upVdnModule.goToPage({url: 'mpaas://usercenter'})
this.isLogin = false
}
}
},
补充：
点击空白页，关闭弹窗：
在最外层的div上，加上
@click.stop="clickFun('clickCancel')"
在它的内层div上加上
@click.stop
clickFun函数：
clickFun () {
// this.$emit('userBehavior', type, this.outerData)
this.hidden()
},
代码：
<template>
<transition name="confirm-fade">
<div v-if="isShowConfirm" class="my-confirm-notice1" @touchmove.prevent @click.stop="clickFun('clickCancel')">
<div class="confirm-content-wrap1" :style="{'width': osType=='ios'?'78%':'297px'}" @click.stop>
………………
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
export default {
name: "NoticeDialog",
data () {
return {
isShowConfirm: false, // 用于控制整个窗口的显示/隐藏
titleText: '天天收能量，福利享不停', // 提示框标题
content: 'Say Something ...', // 提示框的内容
outerData: null, // 用于记录外部传进来的数据，也可以给外部监听userBehavior
}
},
methods: {
……
hidden () {
this.isShowConfirm = false
this.titleText = '操作提示'
this.outerData = null
},
clickFun () {
this.hidden()
},
……
}
}
</script>
文章知识点与官方知识档案匹配
Vue入门技能树Node.js和npmNode安装与配置
22313 人正在系统学习中
打开CSDN，阅读体验更佳
Vue 自定义模态对话框弹窗_mossbaoo的博客_vue弹出模态...
Vue 自定义模态对话框弹窗 模态对话框弹窗效果: 父组件(应用页面)主要代码: <template><viewclass="app-container"><modal-dialogshowText="确定要取消收藏吗?":isShowDialog="isDialog"@cancel="isDialog = false"@confirm="confir...
Vue3.0实现自定义Message提示框_林卤蛋的博客_vue3提示框
学习vue3.0的时候想到了,能不能自己写一个自定义的类似于element ui的this.$message的消息提示框,网上有很多是基于vue2.0的自定义提示框,那么我就来搞一个3.0版本的吧。 实现步骤 1. 创建MessageMain.vue <template><Transition name=...
vue-dialog:vue自定义弹窗组件（含回调）
具体参考博客：
使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装： 实现动态传入内容，实现取消，确认等回调函数。 首先写一个基本的弹窗样式，如上图所示。 在需要用到弹窗的地方中引入组件： import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, 点击一个按钮显示弹窗，并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值：v-model="sendVal"，sendVal初始值为false。 在打开弹窗的方法中赋值： openMask(){
ant-vue通知提醒框（ Notification ）实现自定义样式
需求：运用ant中通知提醒实现自定义的样式效果； 效果如下：点我之后点击上传按钮去看效果 组件自定义内容支持vueNode |function(h)，我自己是用function(h)来实现的，想用vueNode的 可以去vue 官网去查看 相应的编码规范，function（h）的其中核心有点像广度遍历似的，大家可以先将要实现的代码先写出来之后再用function(h) 来实现 更高效： 我不知道怎么绑定指令，问我的狗子 他也不知道，真希望有高人指点一番！！！ h( '页面标签
继续访问
vue封装带确定、取消按钮的弹窗和提示组件，可用promise回调
vue封装带确定和取消的全局弹窗组件，支持promise回调，任意组件之间调用方法
继续访问
vue2 确认框 MessageBox 弹框 删除确认取消
项目需要删除时弹出确认框 需求是项目完成80%时提出的 再添加弹出框的话 耗时耗力 所于是就有了封装好的弹窗函数挂载到Vue的原型上 在项目里面可以直接 this. 调用 显著提升摸鱼时间 话不多说 看代码 第一步 在 utils 创建一个名叫 MessageBox.js 的文件 把代发复制进去 ↓↓↓ 代码 ↓↓↓ /** * ********************** * @MessageBox { true } : 引入element的弹出框 * @confirmButtonTex
继续访问
Vue实现以按钮弹框动态控制Table列展示
点击设置弹出列数，并根据选择列进行展示： 点击勾选之后改变列表展示列 Html: <div id="app"><template><el-popover placement="right" width="800" trigger="click" style="margin-left:80%"><el-checkbox-group v-model="colOptions"><el-checkbox v-for
继续访问
vue项目自定义提示框
<!-- 弹框 --><template><div :visible="visible" ref="tipsBox" @update:visible="updateDialog" class="tipsBox"><div ref="showPopover" class="tipsClass animated"><...
继续访问
Vue中的确认提示框
弹出确认框 this.$confirm("是否确认标记为作废?", "提示", { iconClass: "el-icon-question", //自定义图标样式 confirmButtonText: "确认", //确认按钮文字更换 cancelButtonText: "取消", //取消按钮文字更换 showClose: true, //是否显示右上角关闭按钮 type: "warning", //提示类型 succes
继续访问
vue自定义弹窗
vue自定义弹窗
继续访问
vue自定义组件+Dialog 对话框组件定制弹出框教程（转载）
1、新建一个.vue页面，写一个Dialog组件、把弹出框上想要展示的内容放进去。 <template><el-dialog title="新增标签" :visible.sync="centerDialogVisible" width="80%" center><div><!-- 这个div放置内容 --></div></el-dialog></templat
继续访问
Vue 自定义一个全局弹框组件
前文：其实element ui有提供this.$mesage和this.$notify弹框组件可供使用，但是我们的ui设计的样式以及布局还是不完全一样的，为了达到100%的呈现效果，所以自己写了一个全局组件，然后在页面上直接this.$popupMessage()调用 首先，需要创建一个vue文件来写我们的弹框样式，新建PopupMessage.vue <template><div class="popup-message warning"><div cl...
继续访问
vue实现按钮弹框【弹出图片、视频、表格、表单等】
vue实现弹框【弹视频、图片、表单、表格等】总之，你想弹啥就弹啥。一
