vue页共用一个组件(对话框/提示框)

需求是写一个组件(对话框/提示框)
    这个组件的提示内容自定义,其他页面如果使用这个组件的话
    可以引用个组件 自定义对于的内容就可以

    优点是 不用当每个页面需要这个组件时,重写一遍这个方法
    直接可以写一个 多个页面进行使用

这里是自己写的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>

直接写方法 然后引入这个方法(推荐)

• utils的plugins.js

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
    })
  }