摘要:組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置,之后對提示信息進行定位。可以用來進行一些復雜帶校驗的彈窗信息展示,也可以只用于簡單信息的展示。可以通過屬性來顯示任意標題,通過屬性來修改顯示區域的寬度。
手把手教你擼個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 installmessage
在項目的根目錄創建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
toolTip到這里的時候可以看下前面的入口文件介紹,你需要通過Vue.component注冊為組件,并把Message.installMessage方法綁定到Vue.prototype.$kiko_message上。
沒有選擇通過固化在頁面中的方式來引入toolTip,因為考慮到可能在頁面中的任何地方引入toolTip,如果固化了,將會大大限制toolTip的使用場景。所以采用了一個綁定到Vue.prototype的this.$kiko_tooltip全局方法來觸發,這樣就可以自定義觸發方式,只需要通過傳入$event就可以自動地定位任何有需要的元素了。
toolTip組件結構
同message組件結構
main.vue
{{content}}
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
confirm通過Element.getBoundingClientRect()方法獲取元素的大小及其相對于視口的位置,之后對提示信息進行fixed定位。
confirm在保留頁面的情況下會彈出一個對話框,適合一些場景更大的情況。可以用來進行一些復雜帶校驗的彈窗信息展示,也可以只用于簡單信息的展示。可以通過title屬性來顯示任意標題,通過width屬性來修改顯示區域的寬度。
confirm組件結構
同message組件
main.vue
{{title}}
index.js
import Vue from "vue" import Confirm from "./src/main.vue" export default Confirm
loading這里通過組件的方式進行引入,可以只是簡單地信息提示,也可以自己進行一些復雜的校驗。對組件的顯示與隱藏這里引用了.sync修飾符,也可以通過v-if指令。運用slot來分發內容。
考慮到可能不需要整屏渲染,只需要局部加載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 Loadingnpm 發包
確保你的項目的根目錄的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) ` 引入你的插件啦
由于本人學識有限,有很多需要提升的地方,望大家多多指教。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84750.html
摘要:組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置,之后對提示信息進行定位??梢杂脕磉M行一些復雜帶校驗的彈窗信息展示,也可以只用于簡單信息的展示??梢酝ㄟ^屬性來顯示任意標題,通過屬性來修改顯示區域的寬度。 手把手教你擼個vue2.0彈窗組件 在開始之前需要了解一下開發vue插件的前置知識,推薦先看一下vue官網的插件介紹 預覽地址 http://haogewudi.me/k...
摘要:畫字首先我在畫布上畫了個點,用這些點來組成我們要顯示的字,用不到的字就隱藏起來。星星閃爍效果這個效果實現很簡單,就是讓星星不停的震動,具體就是讓點的目的地坐標不停的進行小范圍的偏移。 哈哈哈哈?。?!當我說在寫這邊文章的時候,妹子已經追到了,哈哈哈哈哈?。?! 其實東西是一年前寫的,妹子早就追到手了,當時就是用這個東西來表白的咯,二話不說,先看效果(點擊屏幕可顯示下一句) showImg(...
摘要:手把手教你寫組件庫最近在研究的實現,發現網上很少有關于插件具體實現的文章,官方的文檔也只是一筆帶過,對于新手來說并不算友好。 手把手教你寫 Vue UI 組件庫 最近在研究 muse-ui 的實現,發現網上很少有關于 vue 插件具體實現的文章,官方的文檔也只是一筆帶過,對于新手來說并不算友好。 筆者結合官方文檔,與自己的摸索總結,以最簡單的 FlexBox 組件為例子,帶大家入門 v...
閱讀 5201·2021-10-15 09:42
閱讀 1606·2021-09-22 16:05
閱讀 3261·2021-09-22 15:57
閱讀 3396·2019-12-27 12:06
閱讀 967·2019-08-29 15:16
閱讀 2880·2019-08-26 12:24
閱讀 380·2019-08-26 12:02
閱讀 1885·2019-08-23 16:00