资讯专栏INFORMATION COLUMN

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

mrli2016 / 1235人阅读

摘要:组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置,之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示,也可以只用于简单信息的展示。可以通过属性来显示任意标题,通过属性来修改显示区域的宽度。

手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍

预览地址 http://haogewudi.me/kiko/inde...

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

搭建项目

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

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

npm i  -S

import Vue from "vue"
import xxx from "xxx"
Vue.use(xxx)

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

  import Vue from "vue"
  import Kiko from "../node_modules/kiko/index.js"
  Vue.use(Kiko)

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

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

入口文件(可以先略过)

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

    import KikoMessage from "./packages/message/index.js"
    import KikoToolTip from "./packages/tips/index.js"
    import KikoConfirm from "./packages/confirm/index.js"
    import KikoLoading from "./packages/loading/index.js"

    const install = function(Vue) {
      Vue.component(KikoMessage.name, KikoMessage)
      Vue.component(KikoToolTip.name, KikoToolTip)
      Vue.component(KikoConfirm.name, KikoConfirm)
      Vue.component(KikoLoading.name, KikoLoading)

      Vue.prototype.$kiko_tooltip = KikoToolTip.installToolTip
      Vue.prototype.$kiko_message = KikoMessage.installMessage
    }
    export default install
message

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

Vue.prototype.$kiko_message = function (methodOptions) {

// 逻辑...

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

message组件结构

main.vue

    

    

index.js

    import Vue from "vue"
    import Message from "./src/main.vue"

    Message.installMessage = function(options) {
      if (options === undefined || options === null) {
        options = {
          message: ""
        }
      } else if (typeof options === "string" || typeof options === "number") {
        options = {
          message: options
        }
      }
      var message = Vue.extend(Message)

      var component = new message({
        data: options
      }).$mount()
      document.querySelector("body").appendChild(component.$el)
    }

    export default Message

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

toolTip

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

toolTip组件结构

同message组件结构

main.vue

  

  

  

index.js

  import Vue from "vue"
  import ToolTip from "./src/main.vue"

  ToolTip.installToolTip = function(event, opt) {

    var options = opt

    var rect = {};
    ["top", "left"].forEach(function(property) {
      var scroll = property === "top" ? "scrollTop" : "scrollLeft"
      rect[property] = event.target.getBoundingClientRect()[property] +
        document.body[scroll] +
        document.documentElement[scroll]
    });
    ["height", "width"].forEach(function(property) {
      rect[property] = event.target.getBoundingClientRect()[property]
    });
    options.rect = rect
    var toolTip = Vue.extend(ToolTip)

    var component = new toolTip({
      data: options
    }).$mount()
    event.target.appendChild(component.$el)
  }

  export default ToolTip

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

confirm

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

confirm组件结构

同message组件

main.vue

  

  

index.js

  import Vue from "vue"
  import Confirm from "./src/main.vue"

  export default Confirm

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

loading

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

loading组件结构
同message组件

main.vue

  

  

index.js

  import Vue from "vue"
  import Loading from "./src/main.vue"

  const loadingConstructor = Vue.extend(Loading)

  Vue.directive("kiko-loading", {
    update: function(el, binding) {
      if (binding.oldValue != binding.value) {
        const options = {}
        options.fullScreen = binding.modifiers.fullscreen ? true : false;
        if (options.fullScreen) {
          options.top = 0
          options.left = 0
          options.width = "100%"
          options.height = "100%"
        } else {
          ["top", "left"].forEach(function(property) {
            var scroll = property === "top" ? "scrollTop" : "scrollLeft"
            options[property] = el.getBoundingClientRect()[property] +
              document.body[scroll] +
              document.documentElement[scroll] +
              "px"
          });
          ["height", "width"].forEach(function(property) {
            options[property] = el.getBoundingClientRect()[property] + "px"
          });
        }
        var component = new loadingConstructor({
          data: options
        }).$mount()
        var node = document.querySelector(".kiko-loading")
        if (node && node.parentNode) {
          node.parentNode.removeChild(node)
        }
        if (binding.value === true) {
          document.querySelector("body").appendChild(component.$el)
        } else {
          var node = document.querySelector(".kiko-loading")
          if (node && node.parentNode) {
            node.parentNode.removeChild(node)
          }
        }
      }
    }
  })

  export default Loading
npm 发包

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

登录npm官网注册

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

发包npm publish

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

发包成功后,就可以通过

`
import Vue from "vue"
// 我的npm包是kiko-rascalhao
import Kiko from "kiko-rascalhao"
Vue.use(Kiko)
`
引入你的插件啦 

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84750.html

相关文章

  • 把手教你撸个vue2.0弹窗组件

    摘要:组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置,之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示,也可以只用于简单信息的展示。可以通过属性来显示任意标题,通过属性来修改显示区域的宽度。 手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/k...

    taoszu 评论0 收藏0
  • 把手你撸一个泡妞神奇

    摘要:画字首先我在画布上画了个点,用这些点来组成我们要显示的字,用不到的字就隐藏起来。星星闪烁效果这个效果实现很简单,就是让星星不停的震动,具体就是让点的目的地坐标不停的进行小范围的偏移。 哈哈哈哈!!!当我说在写这边文章的时候,妹子已经追到了,哈哈哈哈哈!!! 其实东西是一年前写的,妹子早就追到手了,当时就是用这个东西来表白的咯,二话不说,先看效果(点击屏幕可显示下一句) showImg(...

    funnyZhang 评论0 收藏0
  • 把手教你写 Vue UI 组件库@vue2.0

    摘要:手把手教你写组件库最近在研究的实现,发现网上很少有关于插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好。 手把手教你写 Vue UI 组件库 最近在研究 muse-ui 的实现,发现网上很少有关于 vue 插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好。 笔者结合官方文档,与自己的摸索总结,以最简单的 FlexBox 组件为例子,带大家入门 v...

    Keagan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<