手把手教你用vue2.0写个弹窗组件

在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍(https://cn.vuejs.org/v2/guide/plugins.html)

预览地址:http://haogewudi.me/kiko/index.html

源码地址:https://github.com/rascalHao/kiko

搭建项目

1.vue-cli将你的vue项目初始化建好 vue init webpack my-project

2.平常我们引入插件的流程是:

所以可以在node_modules下面新建一个你的开发目录,我这里命名为kiko,所以现在大概引入我们的开发插件的步骤为(项目最终构建完会采取发布npm包的形式)

3.在你的项目目录下通过npm init指令来初始化一个package.json文件,默认指定你的入口文件index.js,并在你的项目根目录下新建一个index.js入口文件

4.这里会构建4中类型的弹窗组件(message、toolTip、confirm、loading),基本的结构如图所示:

入口文件(可以先略过)

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象;通过全局方法 Vue.use() 使用插件;可以再次看下vue官网的插件介绍

message

在项目的根目录创建message组件,通过

来添加实例方法全局以调用this.$kiko_message()的方式来调用message

message组件结构

main.vue

index.js

到这里的时候可以看下前面的入口文件介绍,你需要通过Vue.component注册为组件,并把Message.installMessage方法绑定到Vue.prototype.$kiko_message上。

toolTip

没有选择通过固化在页面中的方式来引入toolTip,因为考虑到可能在页面中的任何地方引入toolTip,如果固化了,将会大大限制toolTip的使用场景。所以采用了一个绑定到Vue.prototype的this.$kiko_tooltip全局方法来触发,这样就可以自定义触发方式,只需要通过传入$event就可以自动地定位任何有需要的元素了。

toolTip组件结构

同message组件结构

main.vue

index.js

通过Element.getBoundingClientRect()方法获取元素的大小及其相对于视口的位置,之后对提示信息进行fixed定位。

confirm

confirm在保留页面的情况下会弹出一个对话框,适合一些场景更大的情况。可以用来进行一些复杂带校验的弹窗信息展示,也可以只用于简单信息的展示。可以通过title属性来显示任意标题,通过width属性来修改显示区域的宽度。

confirm组件结构

同message组件

main.vue

index.js

这里通过组件的方式进行引入,可以只是简单地信息提示,也可以自己进行一些复杂的校验。对组件的显示与隐藏这里引用了.sync修饰符,也可以通过v-if指令。运用slot来分发内容。

loading

考虑到可能不需要整屏渲染,只需要局部加载loading,在指定的位置可以按需通过自定义指令来实现,通过Element.getBoundingClientRect()方法根据需要的元素位置、区域大小自动定位;若想整屏渲染,则需要加个.fullscreen修饰符。

loading组件结构

同message组件

main.vue

index.js

npm 发包

确保你的项目的根目录的package.json文件已经建好

登录npm官网注册

在你的项目目录下登录npm login(之后按提示填写信息)

发包npm publish

如果执行npm publish出现错误,可能是你的包名已经被注册过,在npm 官网上搜索一下是否已被注册了。若发包成功,你就可以在npm官网上搜索到自己的包。

发包成功后,就可以通过

引入你的插件啦。

由于本人学识有限,有很多需要提升的地方,望大家多多指教。

本文来自企鹅号 - 程序媛媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏主机笔记

windows7英文版一键修改系统语言为中文

上一篇文章中我用solusvm加载镜像安装了英文版windows7系统,但是商家提供的系统镜像都是英文的,一些软件和网页会出现乱码的问题,必须安装中文语言包才能...

6167
来自专栏每日一篇技术文章

带你入坑02-weex-路由的使用

创建一个父组件和两个子组件 父组件foo.vue 的文件和子组件home.vue和me.vue

3871
来自专栏北京马哥教育

Vim 新手节省时间的 10 多个小技巧

Vim 是很多开发者的首选编辑器,通过设置正确的命令和快捷方式,它可以帮你更快的完成工作。这篇文章我们为 Vim 新手提供一些快捷键等方面的小技巧,帮你提升工作...

3867
来自专栏dotnet & java

win8 notepad++ 设置无法保存

前些天买了新笔记本。装的是win8 ,后来装了notepad++ ,最新版的,改了字体,下次从新打开之后,发现字体改动无效。后来试了一下“管理员身份运行”,再次...

1243
来自专栏小狼的世界

Mac下安装Android模拟器

像iPhone的iOS或者其他的手机操作系统一样,Android的开发者非常需要一个模拟器,以在设备上实地测试前对自己开发的应用进行测试。这需要借住SDK来实现...

3842
来自专栏流星博客

自定义你的U盘图标

在生活中,你的U盘盘符图像是默认的,你会不会看起来感觉不爽呢?接下来就告诉你如何自定义你的盘符!

33710
来自专栏草根专栏

使用VS Code开发asp.net core (上)

本文是基于Windows10的. 下载地址: https://code.visualstudio.com/ insider 版下载地址: https://cod...

3545
来自专栏向治洪

android studio添加project libs库步骤

在Eclipse中选择要导出的项目,然后依次选择菜单 file->export->Android->Generate Gradle build files...

1935
来自专栏奇梦博客

发帖UMEditor编辑器增加表情,附加表情包下载 PHP 配置 XiunoBBS

1665
来自专栏云计算

在Ubuntu 16.04上安装WordPress

在本指南中,您将学习如何在运行Ubuntu 16.04的Linode上安装WordPress。WordPress是一个流行的动态内容管理系统,专注于博客。Wor...

5892

扫码关注云+社区

领取腾讯云代金券