需求是写一个组件(对话框/提示框)
这个组件的提示内容自定义,其他页面如果使用这个组件的话
可以引用个组件 自定义对于的内容就可以
优点是 不用当每个页面需要这个组件时,重写一遍这个方法
直接可以写一个 多个页面进行使用
这里是自己写的dom
对话框
在components里面写入dialog.vue
<template>
<div class="dialog">
<div class="dialog_cover" v-show="dialog"></div>
<transition name="fade">
<div class="dialog_content" v-show="dialog">
<div class="dialog_head">提示</div>
<div class="dialog_main">{ { message }}</div>
<div class="dialog_foot">
<div @click="hide"><span>取消</span></div>
<div @click="hide"><span>确认</span></div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
props: {
dialog: {
type: Boolean,
default: false,
},
message: {
type: String,
default: "",
},
},
methods: {
cancel() {
this.$emit("hide", null);
},
},
};
</script>
<style lang="scss" scoped>
.dialog {
font-size: 0.8rem;
width: 100%;
height: 100%;
.dialog_cover {
background: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
//放大再还原的回弹动画
@keyframes move {
0% {
transform: scale(0);/*初始0看不到*/
}
50% {
transform: scale(1.1);/*放大*/
}
100% {
transform: scale(1);/*还原*/
}
}
.fade-enter-active {
//进入
animation: move 0.5s;
}
.fade-leave-active {
//离开
animation: move 0.5s reverse; //反向播放
}
.dialog_content {
width: 80%;
height: 6rem;
z-index: 300;
background: #fff;
border-radius: 10px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -40%;
margin-top: -3rem;
opacity: 0.9;
text-align: center;
}
.dialog_head {
padding: 0.2rem;
color: black;
font-size: 0.9rem;
font-weight: bold;
}
.dialog_main {
padding-top: 0.5rem;
}
.dialog_foot {
width: 100%;
position: absolute;
bottom: 0;
border-top: 1px solid #ccc;
display: flex;
flex-direction: row;
justify-content: space-around;
text-align: center;
div {
flex: 1;
padding: 0.3rem;
}
div:first-child {
border-right: 1px solid #ccc;
span {
color: blue;
}
}
div:last-child {
span {
color: red;
}
}
}
}
</style>
提示框
在components里面写入toast.vue
<template>
<transition name='toast'>
<div class='toast' v-if='toast'>
<div class='toast_main' >{ { message}}</div>
</div>
</transition>
</template>
<script>
export default {
props:{
message:{
type:String,
required: true
},
toast:{
type:Boolean,
default:false
}
}
}
</script>
<style lang="scss">
// 效果一
// .toast-enter-active,.toast-leave-active{
// transition: all 1s;
// }
// .toast-enter, .toast-leave-to{
// opacity: 0;
// transform: translateY(30px)
// }
// 效果二
// .toast-enter-active{
// animation: fade 1s ;
// }
// .toast-leave-active{
// animation: fade 1s reverse;
// }
// @keyframes fade{
// 0%{
// transform:scale(0);
// }
// 50%{
// transform:scale(1.1);
// }
// 100%{
// transform:scale(1);
// }
// }
//效果三
.toast-enter-active{
animation: fade 0.5s ;
}
@keyframes fade{
0%{
transform: translateY(-8px)
}
25%{
transform: translateY(8px)
}
50%{
transform: translateY(-6px)
}
75%{
transform: translateY(6px)
}
100%{
transform: translateY(0px)
}
}
.toast{
position: absolute;
top: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
.toast_main{
width: auto;
padding: 0.6rem;
padding-top:0.8rem;
padding-bottom: 0.8rem;
background-color: rgba(37,38,45,.9);
color: #fff;
opacity: 0.9;
}
}
</style>
页面引用
!<template>
<div class="main">
<!-- <Dialog :dialog="dialog" :message="message" @cancel="cancel" @confirm="confirm"></Dialog> -->
<Toast :toast="toast" :message="message"></Toast>
</div>
</template>
<script>
import Dialog from "../../components/dialog.vue";
import Toast from "../../components/toast.vue";
export default {
data() {
return {
dialog: false,//默认显示隐藏type
toast: false,//默认显示隐藏type
message: "",//自定义提示内容
};
},
created(){ },
methods:{
cancel(){ //取消
this.dialog = false;
},
confirm(){ //确定
this.dialog = false;
}
},
components: { Dialog, Toast },
};
</script>
<style>
</style>
使用vant为列
对话框
在components建立一个文件写入Dialog
!<template>
<div class="main"></div>
</template>
<script>
import { Dialog } from "vant";
export default {
data() {
return { };
},
created() { },
props: {
//父子props
title: String,
message: String,
},
mounted() {
Dialog.confirm({
title: this.title,
message: this.message,
})
.then((res) => {
this.$emit("res"); //子父$emit
})
.catch((err) => {
this.$emit("err");
});
},
};
</script>
<style>
</style>
在需要的页面引入这个文件
<template>
<div class="home">
<dislog
:title="title"
:message="message"
@res="btnsucc"
@err="btnerr"
></dislog>
</div>
</template>
<script>
import dislog from "../components/vant/Dialog.vue";
export default {
name: "Home",
data() {
return {
title: "1212",
message: "21212",
};
},
components: {
dislog,
},
methods: {
btnsucc() {
console.log(111111, "121212");
},
btnerr() {
console.log(222, "2121212");
},
},
};
</script>
直接写方法 然后引入这个方法(推荐)
import { Dialog } from "vant";
// 直接写方法 然后引入这个方法
export function openDialogAlert(title, content, text,) {
//提示弹框
return Dialog.alert({
title: title || '标题',
message: content,
confirmButtonText: text || '确认',
}).then(() => {
}).catch(() => {
})
}
export function openDialogAlert1(title, content, text, text1,) {
//确认弹框
return new Promise(resovle => Dialog.confirm({
title: title || '标题',
message: content,
confirmButtonText: text || '确认',
cancelButtonText: text1 || '取消'
}).then(resovle).catch(resovle))
}
import { openDialogAlert1 } from "../utils/plugins";
openDialogAlert1("1212", "queding", "").then(res=>{
if(res=='confirm'){
console.log(111111111111,'err')
}
}).catch(err=>{
// cancel
})
}
