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問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08Vue導(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關(guān)于vue利用postcss-pxtorem進行移動端適配的問題
這篇文章主要介紹了關(guān)于vue利用postcss-pxtorem進行移動端適配的問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Vue實現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實現(xiàn)過程中,需要注意文件的格式和轉(zhuǎn)換方式,以及插件和組件的使用方法和注意事項,需要的朋友可以參考下2023-05-05vue?當中組件之間共享數(shù)據(jù)的實現(xiàn)方式
這篇文章主要介紹了vue?當中組件之間共享數(shù)據(jù)的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10