vue简单插件
已经很久没有学习新的相关知识,对于今后的学习方向可能会集中在vue的源码,render,jsx语法,服务端渲染来学习,巩固好vue的基础和高级的知识,现阶段vue的api和基本用法已经全部掌握,但是还是要深入学习,不能只知道api而已!
最近的项目中使用了vant的toast提示框,后来ui出图需要使用自己定义的样式,故看了下插件的写法,写了一次toast插件,鉴于需求比较少可能比较简单
首先需要写好页面的模板,布局
<template>
<transition name="fadeIn">
<div class="contain" v-if="show">
<div class="wrap" :class="{active:type == 'success' || type == 'fail'}">
<img src="../../assets/images/successToast.png" v-if="type == 'success'">
<img src="../../assets/images/failToast.png" v-else-if="type == 'fail'">
<div class="text">{{message}}</div>
</div>
</div>
</transition>
</template> <script>
export default {
data(){
return {
type:'',
message:'',
show:false,
}
}
}
</script> <style lang="scss" scoped>
.contain{
width: 100%;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
z-index: 9999;
}
.wrap{
display: inline-block;
max-width: 600px;
background: rgba(0,0,0,.8);
padding: 50px;
border-radius: 10px;
box-sizing: border-box;
color:#fff;
text-align: center;
&.active{
width: 380px;
}
img{
width: 86px;
}
.text{
text-align: center;
font-size: 28px;
word-break: break-all;
}
}
.fadeIn-enter-active, .fadeIn-leave-active{
transition: opacity .3s;
}
.fadeIn-enter, .fadeIn-leave-active{
opacity: 0;
}
</style>
紧接着需要使用vue的install来注册插件,全局插入提示组件,控制显示
import toastComponent from './toast.vue'
const Toast = {};
Toast.install = function (Vue) {
// 生成一个Vue的子类
const ToastConstructor = Vue.extend(toastComponent)
// 生成一个该子类的实例
const instance = new ToastConstructor(); // 将这个实例挂载在我创建的div上
// 并将此div加入全局挂载点内部
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
// 通过Vue的原型注册一个方法
// 让所有实例共享这个方法 // 其中的duration是持续时间
Vue.prototype.$toast = (data,duration = 2000) => {
if(Object.prototype.toString.call(data) == "[object Object]"){
instance.message = data.message;
instance.type = data.type;
instance.show = true;
} else if(typeof(data) == 'string'){
instance.message = data;
instance.show = true;
}
setTimeout(() => {
instance.show = false;
}, data.duration ? data.duration :duration);
}
}
export default Toast
现在基本的功能已经实现,在main.js里面进行注册接全局调用$toast方法来使用tost组件
import toastRegistry from './common/toast/index'
Vue.use(toastRegistry)
实现的页面效果分别如下:
vue简单插件的更多相关文章
- VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...
- 从零开始实现Vue简单的Toast插件
在前端项目中,有时会需要通知.提示一些信息给用户,尤其是在后台系统中,操作的正确与否,都需要给与用户一些信息. 1. 实例 在Vue组件的methods内,调用如下代码 `this``.$toast( ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- vue各种插件汇总
https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...
- vue常用插件汇总
UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue 常用插件,保存
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
随机推荐
- @清晰掉 Sizeof与字符串
Sizeof与字符串 1.以字符串形式出现的,编译器都会为该字符串自动添加一个0作为结束符 如在代码中写 "abc",那么编译器帮你存储的是"abc/0" 2 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- 测开之路一百五十四:ajax+json前后台数据交互
在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...
- RequestContextHolder
JShop简介:jshop是一套使用Java语言开发的B2C网店系统,致力于为个人和中小企业提供免费.好用的网店系统. 项目主页:http://git.oschina.net/dinguangx/js ...
- date picker with jquery
<html> <input id="from_time" name="from_time"type="text" valu ...
- 初学node.js-nodejs中实现删除用户路由
一.users_model.js 功能:定义用户对象模型 var mongoose=require('mongoose'), Schema=mongoose.Schema; var UserSche ...
- Lesson 4 The double life of Alfred Bloggs
There are two type of people in the society. People who do manual works can higher payment than peop ...
- 各种开源许可 license 区别
copy from http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html
- Java基础/时间日期格式
Java时间日期格式转换 一.Date转String和String转Date 参考博客:https://www.cnblogs.com/sharpest/p/7879377.html public s ...
- Eclipse使用jdbc连接MySql数据库报:java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)
在使用eclipse连接mysql数据库时报异常: java.sql.SQLException: Access denied for user 'root'@'localhost' (using pa ...