vue2.0+ 從插件開(kāi)發(fā)到npm發(fā)布的示例代碼
更新時(shí)間：2018年04月28日 14:28:54 作者：bling_bling
這篇文章主要介紹了vue2.0+ 從插件開(kāi)發(fā)到npm發(fā)布的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
vue： V2.5.11
此篇盡量詳細(xì)，清楚的講解vue插件的開(kāi)發(fā)到npm的發(fā)布，想想將你自己做的東西展示給廣大“網(wǎng)民”，心里還是有點(diǎn)小激動(dòng)的...…^_^
先上一下插件效果圖------github傳送門(mén)
下面我們就來(lái)說(shuō)說(shuō)詳細(xì)做法：
1. 初始化項(xiàng)目
vue init webpack-simple vue-pay-keyboard
使用vue創(chuàng)建一個(gè)簡(jiǎn)單的項(xiàng)目，刪除src中除了main.js和app.vue外的文件，清空app.vue中無(wú)用內(nèi)容
整理完后項(xiàng)目目錄
2.編寫(xiě)插件
vue-pay-pop (源碼大家可到github中自行獲取)
<template>
<div class="pay-box">
<!-- 輸入框及鍵盤(pán) -->
<div :class="payPopOptions.isShow? 'pay-wrapper pay-wrapper-active' : 'pay-wrapper'">
<div class="pay-container" v-if="status">
<div class="pay-title">
{{title}}
<div class="close-pay" @click="closePay">
<svg t="1501505446265" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1904" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" class="icon"><path data-v-7c990886="" d="M550.659 490.565l324.395-324.386c10.945-10.945 10.945-28.699 0-39.644-10.948-10.95-28.704-10.95-39.648-0.004L511.01 450.916 186.625 126.53c-10.946-10.947-28.703-10.947-39.648 0-10.946 10.95-10.946 28.703 0 39.648l324.385 324.386-324.385 324.401c-10.946 10.944-10.946 28.703 0 39.65 10.945 10.943 28.702 10.943 39.648 0L511.01 530.213l324.396 324.401c10.944 10.944 28.7 10.944 39.648 0 10.945-10.946 10.945-28.705 0-39.649L550.66 490.565z" p-id="1905"></path></svg>
</div>
</div>
<div class="pay-input-wrapper">
<div class="pay-input" v-for="(item, index) in pwdLength" :key="index">
<input type="password" :value="val[index]" disabled>
</div>
</div>
<div class="pay-keyboard-wrapper">
<div class="pay-keyboard">
<div class="pay-key" v-for="item in keyBoards" :key="item" @click="val2input(item)">
{{item}}
</div>
</div>
<div class="pay-keyboard-bottom">
<div class="pay-key-bottom pay-key-blank"></div>
<div class="pay-key-bottom pay-key-middle" @click="val2input('0')">0</div>
<div class="pay-key-bottom pay-key-del" @click="delVal" v-html="del"></div>
</div>
</div>
</div>
<!-- 結(jié)果顯示 -->
<div class="pay-result" v-if="!status">
<div class="loader"></div>
<div>{{loadingTxt}}</div>
</div>
</div>
<!-- 遮罩層 -->
<div class="gray-wrapper" v-show="payPopOptions.isShow"></div>
</div>
</template>
export default {
name: 'vue-pay-pop',
props: ['payPopOptions'],
data () {
return {
//可選參數(shù)，支持改變
//頂部文字
title: this.payPopOptions.title || '請(qǐng)輸入支付密碼',
//密碼長(zhǎng)度
pwdLength: this.payPopOptions.pwdLength || 6,
//底部刪除按鈕
del: this.payPopOptions.del || '<svg t="1524794920212" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1048" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="30"><defs><style type="text/css"></style></defs><path d="M798.675138 191.774745c44.172035 0 80.109526 35.753295 80.109526 79.69918l0 445.373557c0 43.945885-35.93749 79.69918-80.109526 79.69918L382.443295 796.546661c-25.555026 0-49.780777-12.279674-64.804958-32.845059L154.967444 541.013801c-20.472264-28.025287-20.472264-65.680908 0-93.707219L317.638337 224.617757c15.023158-20.566408 39.249933-32.843012 64.804958-32.843012L798.675138 191.774745M798.675138 177.709401 382.443295 177.709401c-30.16502 0-58.508555 14.365172-76.240405 38.641065L143.531997 439.038268c-24.009833 32.865525-24.009833 77.378321 0 110.245893l162.670893 222.685755c17.732873 24.276916 46.075385 38.641065 76.240405 38.641065l416.231843 0c52.051493 0 94.247524-41.977044 94.247524-93.762477l0-445.373557C892.922662 219.688491 850.726631 177.709401 798.675138 177.709401L798.675138 177.709401zM475.470015 356.690772l218.792075 218.791052c10.984169 10.986215 10.984169 28.795836 0 39.780005-10.986215 10.986215-28.795836 10.986215-39.781028 0L435.69001 396.470777c-10.986215-10.984169-10.986215-28.795836 0-39.780005C446.674179 345.704556 464.485847 345.704556 475.470015 356.690772zM437.268972 578.919109l223.685525-224.042659c11.228739-11.247158 29.438473-11.247158 40.669258 0 11.230786 11.249205 11.230786 29.487591 0 40.73475L477.93823 619.654882c-11.228739 11.249205-29.438473 11.249205-40.669258 0C426.039209 608.404654 426.039209 590.167291 437.268972 578.919109z" p-id="1049" fill="#1296db"></path></svg>',
//默認(rèn)等候文字
loadingTxt: this.payPopOptions.loadingTxt || '請(qǐng)稍候...',
//默認(rèn)等候時(shí)間
loadingTime: this.payPopOptions.loadingTime || 1000,
//顯示結(jié)果后，多久重回默認(rèn)
resultTime: this.payPopOptions.resultTime || 1000,
//成功文字
successTxt: this.payPopOptions.successTxt || '支付成功',
//失敗文字
failTxt: this.payPopOptions.failTxt || '支付失敗',
//默認(rèn)參數(shù)，無(wú)法改變
//鍵盤(pán)數(shù)字(1~9)
keyBoards: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
//鍵入的值
val: [],
//默認(rèn)輸入框與等待層是否顯示
status: true
}
},
methods: {
val2input(item) {
this.val.push(item)
if (this.val.length == this.pwdLength) {
//打開(kāi)等待層
this.status = false
//輸入完畢后將值傳遞給父組件
this.$emit('inputDown', this.val.join(''))
//清空數(shù)據(jù)
this.val = []
}
},
delVal () {
if (this.val.length > 0) this.val.pop()
},
closePay () {
this.payPopOptions.isShow = false;
},
$payStatus(flag = false) {
const that = this
//模擬等候feel
setTimeout(() => {
if (flag) {
//成功
this.loadingTxt = this.successTxt
//關(guān)閉輸入層，重置等待語(yǔ)
setTimeout(function() {
that.payPopOptions.isShow = !flag
that.status = true
that.loadingTxt = that.payPopOptions.loadingTxt || '請(qǐng)稍候...'
}, this.resultTime)
} else {
//失敗
this.loadingTxt = this.failTxt
//重新打開(kāi)輸入層，重置等待語(yǔ)
setTimeout(function() {
that.status = true
that.loadingTxt = that.payPopOptions.loadingTxt || '請(qǐng)稍候...'
}, this.resultTime)
}
}, this.loadingTime)
}
}
}
基本源碼都在這里了，實(shí)現(xiàn)方法比較簡(jiǎn)單，這里就不多過(guò)介紹了...
3.嘗試使用
我們先嘗試在本地app.vue中使用
<div id="app"> <div @click="showPayPop">點(diǎn)擊彈出支付框</div> <vue-pay-pop ref="pay" :payPopOptions="payPopOptions" @inputDown="inputDown"></vue-pay-pop> </div>
import vuePayPop from './lib/vue-pay-pop'
export default {
name: 'app',
data () {
return {
payPopOptions: {
isShow: false
},
}
},
components: {
vuePayPop
},
methods: {
inputDown(val) {
//模擬檢查數(shù)據(jù)
setTimeout(() => {
if (val == '111111') {
this.$refs.pay.$payStatus(true)
} else {
this.$refs.pay.$payStatus(false)
}
}, 1000)
},
showPayPop() {
this.payPopOptions.isShow = true;
}
}
}
其中payPopOptions中isShow是必傳項(xiàng)，用來(lái)控制彈出框的顯隱
其他更多參數(shù)為可選參數(shù)
4.更改配置文件
ok，現(xiàn)在我們?nèi)ジ呐渲梦募瑸槲覀兊陌l(fā)布做準(zhǔn)備
index.js
import vuePayPop from './vue-pay-pop.vue'
const PayPop = {
install(Vue, options) {
Vue.component(vuePayPop.name, vuePayPop)
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.PayPop = PayPop
Vue.use(PayPop)
}
export default PayPop
package.json
修改箭頭中所指
1. 你的插件版本號(hào)，以后每次上傳npm都需要更改
2. 不設(shè)為false無(wú)法發(fā)布
3. 填寫(xiě)你自己的github托管地址（如何將代碼上傳github就不說(shuō)了，大家可以參考Git教程---廖雪峰）
webpack.config.js
修改entry和filename
index.html
<div id="app"></div> <script src="/dist/vue-pay-pop.js"></script>
dist文件大家在命令行中輸入npm run build就會(huì)自定生成
5.發(fā)布npm
你需要去npm官網(wǎng)注冊(cè)一個(gè)npm帳號(hào)
注冊(cè)好后
輸入你的用戶(hù)名，密碼，郵箱（密碼是不顯示的）
成功登錄后我們?cè)谳斎?/p>
ok，我們就發(fā)布成功！
6.引用
在你的項(xiàng)目中 npm install vue-pay-pop --save 下載我們的包
main.js
import vuePayPop from "vue-pay-pop" vue.use(vuePayPop)
這樣我們就可以在自己的vue文件中直接引用啦...
ok，那到這里我們的內(nèi)容就結(jié)束了。
另外如果大家覺(jué)得有用的話(huà)，歡迎github上獻(xiàn)上您的star，當(dāng)然也可以在評(píng)論或issues中向我提出您的問(wèn)題與建議，十分感謝。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- VUE2.0中Jsonp的使用方法
- vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)（路由守衛(wèi)）
- vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)）
- vue2.0實(shí)現(xiàn)移動(dòng)端的輸入框?qū)崟r(shí)檢索更新列表功能
- Vue2.0實(shí)現(xiàn)調(diào)用攝像頭進(jìn)行拍照功能 exif.js實(shí)現(xiàn)圖片上傳功能
- 詳解Vue2.0配置mint-ui踩過(guò)的那些坑
- vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例
- vue2.0+vuex+localStorage代辦事項(xiàng)應(yīng)用實(shí)現(xiàn)詳解
相關(guān)文章
這篇文章主要介紹了vue如何自定義配置運(yùn)行run命令，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3+vantUI3時(shí)間組件封裝過(guò)程支持選擇年以及年月日時(shí)分秒
這篇文章主要介紹了Vue3+vantUI3時(shí)間組件封裝過(guò)程支持選擇年以及年月日時(shí)分秒,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
vue實(shí)現(xiàn)折線(xiàn)圖 可按時(shí)間查詢(xún)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)折線(xiàn)圖，可按時(shí)間查詢(xún)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Element實(shí)現(xiàn)動(dòng)態(tài)表格的示例代碼
最近有有個(gè)項(xiàng)目，通過(guò)選擇不同的查詢(xún)指標(biāo)展示不同的表格，所以本文就介紹一下Element實(shí)現(xiàn)動(dòng)態(tài)表格，具體實(shí)現(xiàn)代碼記錄如下，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了vue彈窗組件的實(shí)現(xiàn)示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue.js?rules校驗(yàn)規(guī)則舉例詳解
Vue表單校驗(yàn)規(guī)則（rules）是一種用于驗(yàn)證表單數(shù)據(jù)的對(duì)象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進(jìn)行數(shù)據(jù)驗(yàn)證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗(yàn)規(guī)則的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題
今天小編就為大家分享一篇vue 解決路由只變化參數(shù)頁(yè)面組件不更新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)
這篇文章主要介紹了Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)，全文通過(guò)舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)2021-08-08
vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由（適合初學(xué)）
這篇文章主要介紹了vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由，通過(guò)本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系，本版本非常簡(jiǎn)單，適合初學(xué)者,需要的朋友可以參考下2017-12-12