vue怎么實現Toast輕提示

這篇文章主要介紹“vue怎么實現Toast輕提示”，在日常操作中，相信很多人在vue怎么實現Toast輕提示問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么實現Toast輕提示”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

vue實現Toast輕提示

首先創建一個toast組件

<template>
  <div class="context" v-show="isshow">
    <span class="tip">{{ text }}</span>
  </div>
</template>

<script>
export default {
  name: "Toast",
  props: {
    isshow: {
      type: Boolean,
    },
    text: {
      type: String,
    },
  },
  watch: {
    isshow(val) {
      if (val === true) {
        setTimeout(() => {
          this.isshow = false;
        }, 3000);
      }
    },
  },
};

</script>
<style lang="less" scoped>
.context {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  .tip {
    background-color: rgba(40, 40, 40, 0.8);
    color: aliceblue;
    font-size: 0.6rem;
    padding: 0.2rem;
    border-radius: 0.1rem;
  }
}
</style>

在js文件中引入組件

import Toast from "./Toast.vue";
let NewToast = {
  install: function (Vue) {
    //創建vue插件，官方地址https://cn.vuejs.org/v2/guide/plugins.html
    let newToast = Vue.extend(Toast); //創建vue構造器,官方地址https://cn.vuejs.org/v2/api/#Vue-extend
    let toast = new newToast(); //創建實例
    document.body.appendChild(toast.$mount().$el); //掛載
    Vue.prototype.$Toast = function (text) {
      toast.isshow = true; // 傳入props
      toast.text = text; // 傳入props
    };
  },
};
export { NewToast };

在入口文件中引入上面這個js文件

import { NewToast } from "@/components/index.js";
Vue.use(NewToast);

下面就可以在view里全局使用了

but() {
    this.$Toast("Are you ok ?");
},

效果圖

這樣一個簡單的輕提示就好了，覺得樣式丑的話，可以自己調一下。

使用vant的Toast輕提示報錯

記錄一下今天使用vant中的Toast 輕提示，按照官方文檔中的方法去使用發現報錯使用不了。

文檔中是這樣寫的

Toast.success('成功文案');
Toast.fail('失敗文案');

main.js中引用vant后直接調用Toast報錯。

實際使用是這樣寫

this.$toast.success("成功文案");
this.$toast.fail("失敗文案");

和調用路由一樣需要this點出來。

到此，關于“vue怎么實現Toast輕提示”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！