建立vue文件 pre_message.vue,直接源码,注释很详细
<template>
<div class="my_dialog">
<!--外层的遮罩 点击事件用来关闭弹窗,isShow控制弹窗显示 隐藏的props-->
<div
class="dialog-cover"
v-if="pre_show"
@click="closeMyself"
></div>
<!-- transition 这里可以加一些简单的动画效果 -->
<transition name="drop">
<!--style 通过props 控制内容的样式 -->
<div
class="dialog-content"
v-if="pre_show"
>
<div :class="pre_showtype">
<!--弹窗头部 title-->
<slot name="header">{
{pre_title}}</slot>
</div>
<div class="dialog_main">
<!--弹窗的内容-->
<slot name="main">{
{pre_note}}</slot>
</div>
<!--弹窗关闭按钮-->
<div
class="foot_close"
@click="closeMyself"
>
<div class="close_img back"></div>
</div>
</div>
</transition>
</div>
</template>
<script>
/*
名称:弹窗组件
日期:2019-03-14
作者:hj
步骤:
先搭建组件的html和css样式,遮罩层和内容层。
调用:
*/
export default {
/*组件名称不能和系统关键字重复*/
name: "pre_message",
data() {
return {
pre_show:false,
pre_showtype:'dialog_head dialog_head_none',
pre_title:'提示',
pre_note:'说明信息没有获取到',
}
},
props: {
// 展示类型
showtype:{
type:String,
default:''
},
// 展示内容
note:{
type:String,
default:''
},
message_data: {
type: Object,
default: function () {
return { showtype: 'dialog_head dialog_head_none',note:'对象模式' }
}
}
},
watch:{
note(val){
this.my_note=val;
console.log('展示'+this.note+' my_note='+this.my_note);
this.refresh_data();
},
message_data(obj){
this.check_obj();
}
},
methods: {
closeMyself() {
console.log('关闭');
// this.$emit("on-close");
this.pre_show=false;
},
refresh_data:function(){
console.log('子组件数据刷新...');
this.pre_show=true;
this.pre_title='提示';
this.pre_note=this.note;
},
check_obj:function(){
// console.log('传入');
// console.log(this.message_data);
switch(this.message_data.showtype){
case 'ok':
this.pre_showtype='dialog_head dialog_head_ok';
this.pre_title='通过';
break;
case 'no':
this.pre_showtype='dialog_head dialog_head_no';
this.pre_title='拒绝';
break;
case 'err':
this.pre_showtype='dialog_head dialog_head_err';
this.pre_title='错误';
break;
case 'warning':
this.pre_showtype='dialog_head dialog_head_warning';
this.pre_title='警告';
break;
default:
this.pre_showtype='dialog_head dialog_head_none';
break;
}
this.pre_note=this.message_data.note;
this.pre_show=true;
}
}
};
</script>
<style lang="scss" scoped>
/*
scss 依赖安装
npm install -s sass-loader
npm install -s node-sass
*/
/** 弹窗动画*/
.drop-enter-active {
// 动画进入过程:0.5s
transition: all 0.5s ease;
}
.drop-leave-active {
// 动画离开过程:0.5s
transition: all 0.3s ease;
}
.drop-enter {
//动画之前的位置
transform: translateY(-500px);
}
.drop-leave-active {
//动画之后的位置
transform: translateY(-500px);
}
// 最外层 设置position定位
.my_dialog {
position: relative;
color: #2e2c2d;
font-size: 16px;
}
// 遮罩 设置背景层,z-index值要足够大确保能覆盖,高度 宽度设置满 做到全屏遮罩
.dialog-cover {
background: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// 内容层 z-index要比遮罩大,否则会被遮盖,
.dialog-content {
position: fixed;
width: 40%;
top: 35%;
left: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 300;
.dialog_head {
// 头部title的背景 居中圆角等属性。
// width: 86.5%;
width: 100%;
height: 43px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
padding: 5px 50px 10px 50px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.dialog_head_ok {
background-color: #45f79f;
}
.dialog_head_no {
background-color: #72837a;
}
.dialog_head_warning {
background-color: #f4fb8e;
}
.dialog_head_err {
background-color: #f31b2a;
}
.dialog_head_none {
background-color: #ffffff;
}
.dialog_main {
// 主体内容样式设置
background: #ffffff;
display: flex;
justify-content: center;
align-content: center;
// width: 86.5%;
width: 100%;
padding: 22px 50px 47px 50px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.foot_close {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fcca03;
display: flex;
justify-content: center;
align-content: center;
position: absolute;
right: -60px;
top: -6px;
.close_img {
background-image: url("../../assets/image/shan1.png");
width: 20px;
height: 20px;
}
}
}
</style>
父组件使用
<template>
<div class="mydiv">
<button @click="tt">测试</button>
<button @click="tt_ok">通过</button>
<button @click="tt_no">拒绝</button>
<button @click="tt_err">错误</button>
<button @click="tt_warning">警告</button>
<!-- 放置自定义组件 -->
<per-message
ref="child1"
v-bind:note="setnote"
:message_data="msg_obj"
@on-close="closeDialog"
/>
</div>
</template>
<script>
// import testmessage2 from "./personmode/pre_message.vue";
export default {
components: {
// 'per-message':testmessage2,
'per-message':()=>import("./personmode/pre_message.vue"),
},
data() {
return {
setnote:'',
msg_obj:{}
};
},
mounted: function() {
this.$nextTick(function(ischeck) {
});
// 这里只是操作dom
// console.log('验证结果='+res);
// console.log(this.ischeck.isok);
// this.$set(this.ischeck, 'isok', '1')
},
watch: {
// 这里写方法会影响性能
},
methods: {
closeDialog(){
this.show_msg=false;
//把绑定的弹窗数组 设为false即可关闭弹窗
},
tt:function(){
console.log('弹窗');
// 方式1弹出
// this.setnote='新内容'+(Math.random() * 35);
// /*
// 直接
// this.$refs.child1.refresh_data();
// 会导致参数没有传过去,界面已经弹出
// */
// var that=this;
// this.$nextTick(function(ischeck) {
// that.$refs.child1.refresh_data();
// });
// 方式2监听弹出
this.setnote='监听弹出'+(Math.random() * 35);
},
tt_ok:function(){
this.msg_obj={'showtype':'ok','note':'通过检查'};
},
tt_no:function(){
this.msg_obj={'showtype':'no','note':'检查失败'};
},
tt_err:function(){
this.msg_obj={'showtype':'err','note':'发现错误'};
},
tt_warning:function(){
this.msg_obj={'showtype':'warning','note':'警告。。。。。。。。。'};
}
}
};
</script>
<style scoped>
</style>
转载于:https://my.oschina.net/qingqingdego/blog/3022522
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101049.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...