欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何實現(xiàn)Toast輕提示

 更新時間:2022年04月09日 16:06:33   作者:如沐春風xsy  
這篇文章主要介紹了vue如何實現(xiàn)Toast輕提示,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue實現(xiàn)Toast輕提示

首先創(chuàng)建一個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) {
? ? //創(chuàng)建vue插件,官方地址https://cn.vuejs.org/v2/guide/plugins.html
? ? let newToast = Vue.extend(Toast); //創(chuàng)建vue構(gòu)造器,官方地址https://cn.vuejs.org/v2/api/#Vue-extend
? ? let toast = new newToast(); //創(chuàng)建實例
? ? 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 ?");
},

效果圖

在這里插入圖片描述

這樣一個簡單的輕提示就好了,覺得樣式丑的話,可以自己調(diào)一下。

使用vant的Toast輕提示報錯

記錄一下今天使用vant中的Toast 輕提示,按照官方文檔中的方法去使用發(fā)現(xiàn)報錯使用不了。

文檔中是這樣寫的

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

main.js中引用vant后直接調(diào)用Toast報錯。

實際使用是這樣寫

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

和調(diào)用路由一樣需要this點出來。

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • vue.js動態(tài)修改background-image問題

    vue.js動態(tài)修改background-image問題

    這篇文章主要介紹了vue.js動態(tài)修改background-image問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue導(dǎo)入excel表,導(dǎo)入失敗的數(shù)據(jù)自動下載

    Vue導(dǎo)入excel表,導(dǎo)入失敗的數(shù)據(jù)自動下載

    本文詳細講解了Vue導(dǎo)入excel表,導(dǎo)入失敗的數(shù)據(jù)自動下載的方法,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-11-11
  • vue計算屬性及函數(shù)的選擇

    vue計算屬性及函數(shù)的選擇

    這篇文章主要介紹了vue計算屬性及函數(shù)的選擇,文章圍繞主題的相關(guān)資料展開詳細介紹,需要的小伙伴可以參考一下
    2022-05-05
  • vue實現(xiàn)公告欄文字上下滾動效果的示例代碼

    vue實現(xiàn)公告欄文字上下滾動效果的示例代碼

    這篇文章主要介紹了vue實現(xiàn)公告欄文字上下滾動效果的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • 關(guān)于vue利用postcss-pxtorem進行移動端適配的問題

    關(guān)于vue利用postcss-pxtorem進行移動端適配的問題

    這篇文章主要介紹了關(guān)于vue利用postcss-pxtorem進行移動端適配的問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • Vue中的循環(huán)遍歷與key值原理解讀

    Vue中的循環(huán)遍歷與key值原理解讀

    這篇文章主要介紹了Vue中的循環(huán)遍歷與key值原理,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vue實現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能

    Vue實現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能

    這篇文章主要介紹了如何在Vue中實現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實現(xiàn)過程中,需要注意文件的格式和轉(zhuǎn)換方式,以及插件和組件的使用方法和注意事項,需要的朋友可以參考下
    2023-05-05
  • vuex的module模塊用法示例

    vuex的module模塊用法示例

    這篇文章主要介紹了vuex的module模塊用法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue?當中組件之間共享數(shù)據(jù)的實現(xiàn)方式

    vue?當中組件之間共享數(shù)據(jù)的實現(xiàn)方式

    這篇文章主要介紹了vue?當中組件之間共享數(shù)據(jù)的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue左右滑動選擇日期組件封裝的方法

    vue左右滑動選擇日期組件封裝的方法

    這篇文章主要為大家詳細介紹了vue左右滑動選擇日期組件封裝的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04

最新評論