vue实现自定义弹窗

在component下面新建一个toast文件夹，创建toast.vue和toast.js文件
toast.vue

<template><div class="toast" :class="type? `toast--${type}`:''"><p>{{content}}</p></div>
</template>
<script>export default {data(){return{content:'',duration:3000,//定时器时间type:''}},mounted(){setTimeout(() => {this.$destroy(true);//3s后进行销毁this.$el.parentNode.removeChild(this.$el);},this.duration);}}
</script>
<style lang="scss" scoped>
.toast {display: flex;align-items: center;justify-content: center;position: fixed;top: 0;bottom: 0;left: 0;right: 0;color: #fff;z-index: 9999;background: transparent;p {padding:0.24rem 0.44rem;font-size: 0.36rem;border-radius: 0.08rem;background: rgba(17, 17, 17, 0.7);}&--error p { background: rgba(255, 0, 0, 0.5); }&--success p { background: rgba(0, 255, 0, 0.5); }
}</style>

toast.js
使用基础 Vue.extend() 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

import Vue from 'vue';
import main from './toast.vue';
const ToastConstructor = Vue.extend(main);
let instance;
const Toast = function (options){instance = new ToastConstructor({data:options}).$mount();//渲染组件document.body.appendChild(instance.$el);//将组件挂载在body下
};
//当需要成功或者失败的回调时，可以选择以下方法
['success','error'].forEach((item)=>{Toast[item]=options=>{options.type=item;return Toast(options);}
})
export default Toast;

在main.js中引入toast.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Toast from '@/components/toast/toast.js';
Vue.config.productionTip = false;
// 将组件注册到 vue 的 原型链里去,
// 这样就可以在所有 vue 的实例里面使用 this.$Toast()
// Vue.prototype.$Toast= Toast
Vue.prototype.$Toast=Toast;
new Vue({router,store,render: h => h(App)
}).$mount('#app')

在需要的页面可以通过this.$ Toast({content:‘老铁666’, duration:2000 });进行调用，需要成功的回调时可以通过this.$Toast.success({参数}),失败的回调跟成功的回调一样，将success替换成error即可

vue实现自定义弹窗相关推荐

Vue中自定义弹窗组件
定义一个popup组件,用于自定义弹窗,其中showpo是用于显示弹窗一下是子组件popup的主体框架 Mask和main_popup的css样式如下在子组件中使用props来接受父组件传递过来的 ...
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层 1.示例展示 2.代码 <template><div class="content"& ...
从零开始徒手撸一个vue的toast弹窗组件
相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...
微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案
前言之前有个项目是运行在移动端Web,和微信H5中,由于默认的弹窗UI不太好看,而且还不统一,所以页面需要自定义弹窗,添加icon.提示信息.操作按扭等样式. 问题描述: 如果在页面内容的高度超过了 ...
flutter -各类自定义弹窗(图片预览，输入框，键盘)以及如何阻止事件冒泡
开局废话:由于公司app后期需要做混合开发,又担心h5的性能问题.于是迫不得已,只能两端齐搞,验证一些性能优化的问题.打开了一年前flutter正式发布时,蹭热度创建的现已布满藤蔓的仓库,微微颤抖的双 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
Vue的自定义滚动，我用el-scrollbar
弄了一个持续更新的github笔记,可以去看看,诚意之作(本来就是写给自己看的--)链接地址:Front-End-Basics 此篇文章的地址:Vue的自定义滚动,我用el-scrollbar 基础笔 ...
flutter自定义弹窗
今天接到这样一个需求,需要自定义弹窗,所以就有了如下的代码: 通过分析,一切皆widget 所以可以这样实现: import 'package:flutter/cupertino.dart'; imp ...
简单了解Vue的自定义组件与生命周期
Vue的自定义组件定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码解析(详细解释在注解 ...

vue实现自定义弹窗

vue实现自定义弹窗相关推荐

最新文章

热门文章