vue如何實現(xiàn)Toast輕提示
更新時間：2022年04月09日 16:06:33 作者：如沐春風(fēng)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在使用中的一些注意知識點，文中介紹的非常詳細，對大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-04-04
本篇文章主要介紹了Vue單文件組件基礎(chǔ)模板小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了利用vue的監(jiān)聽事件實現(xiàn)一個簡單購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要為大家詳細介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了解決vue3打包過后空白頁面的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了Element?table?上下移需求的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了關(guān)于element中表格和表單的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
下面小編就為大家分享一篇vue 頁面加載進度條組件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
ElementUI是一套基于VUE2.0的桌面端組件庫,ElementUI提供了豐富的組件幫助開發(fā)人員快速構(gòu)建功能強大、風(fēng)格統(tǒng)一的頁面,本文給大家分享elementui簡易介紹,感興趣的朋友一起看看吧2024-01-01
基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能
這篇文章主要介紹了基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能,需要的朋友可以參考下2017-05-05