vue 封裝提示語

toast.vue：

<template>
  <div>
    <div class="toastTip">
      <img src="../../assets/ic-tig.png" alt="">
      <p>{{toastTxt }}</p>
    </div>
  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex';
  export default {
    name: 'toastTip',
    data () {
      return {
        toastTxt: '',
      }
    },
    methods: {
      ...mapActions([

      ]),

     
    },
    watch: {
      
    },
    mounted () {
       
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

  .toastTip {
    opacity: 0.76;
    background: #000000;
    border-radius: 10px;
    width: 8.62rem;
    height: 4.28rem;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 500;
    img {
      width: 1.03rem;
      display: block;
      margin: 1.1rem auto .66rem;
    }
    p {
      color: #fff;
      font-size: .56rem;
    }
  }

</style>

toast.js:

/**
 * Created by Administrator on 2019/11/5 0005.
 */
import Vue from 'vue'
import toastMsg from './toast.vue'

const PopupBox = Vue.extend(toastMsg);

toastMsg.install = function (data) {
  let instance = new PopupBox({
    data
  }).$mount();

  document.body.appendChild(instance.$el);

  Vue.nextTick(() => {
    instance.show = true
    // show 和彈窗組件裏的show對應，用於控制顯隱
  })
}

export default toastMsg

main.js引入：

import toastMsg from './components/home/toast'
Vue.prototype.$toastMsg = toastMsg.install;

Vue.prototype.$toastMsg({
      toastTip: true,
      toastTxt: '提示內容',
  });

其他vue文件使用：

this.$toastMsg({
 toastTip: true,
  toastTxt: '提示內容',
});