插件代碼

<template><div class="subscribe-time" v-show="setting.display"><div class="subscribe-content"><div class="subscribe-date" v-if="setting.dateBlock == true"><div class="subscribe-date-scroll"><div class="subscribe-date-list" @tap="selectDate(index,'dateList')" :class="item.is_active == true ? 'subscribe-date-list-active' : ''" v-for="(item,index) in dateList">{{item.date}}</div></div></div><div class="subscribe-scroll" :class="setting.dateBlock == false ? 'subscribe-time-list-width' : ''"><div class="subscribe-time"><div class="subscribe-time-list" @tap="selectDate(index,'timeList')" :class="item.is_active == true ? 'subscribe-time-list-active' : ''" v-for="(item,index) in timeList">{{item.date}}</div></div></div><div class="subscribe-cancel" @click="elementDisplay">取消</div></div><div class="mast" @click="elementDisplay"></div></div> </template><script> import BScroll from 'better-scroll' export default {name: 'SubscribeTime',data () {return {timeList:[],dateList:[],reduce:"-",colon:":",space:" ",selectTime:{}}},props:{setting:{}, },methods: {elementDisplay: function () {this.setting['display'] = false;},getTimeList: function () {// let nowYMD = this.getYearMonthDate();// let nowTime = this.timestampToTime();// let YMD = this.timestampToTime(this.getTimestamp());// 算出選擇了那個日期for(let i = 0; i < this.dateList.length; i++){if(this.dateList[i]['is_active']){var activeIndex = i;}}if(this.timeList.length > 0){this.timeList = [];}// 日期let startTime = this.getYearMonthDate() + this.space + this.setting.startTime;let endTime= this.getYearMonthDate() + this.space + this.setting.endTime;let nowTime = this.getYearMonthDate() + this.space + this.timestampToTime();// 日期時間戳let startTimestamp = Math.round(new Date((this.getYearMonthDate() + this.space + this.setting.startTime).replace(/-/g,"/")) / 1000);let endTimestamp= Math.round(new Date((this.getYearMonthDate() + this.space + this.setting.endTime).replace(/-/g,"/")) / 1000);let nowTimestamp = this.getTimestamp();// 判斷結束時間是否小于開始時間，那樣就是第二天了if(endTimestamp < startTimestamp){endTimestamp = Math.round(new Date((this.getYearMonthDate(1) + this.space + this.setting.endTime).replace(/-/g,"/")) / 1000);}// 判斷當前日期是否大于開始時間if(nowTimestamp > startTimestamp){// 獲取到加完20分鐘后的時間戳，判斷是否大于當前結束時間var lastNumber = this.timestampToTime().substring(4);// 需要添加的分鐘var moreTime = 10 - parseInt(lastNumber);// 添加后的時間戳var addTime = this.getTimestamp() + 60 * moreTime;}else{// 獲取到加完20分鐘后的時間戳，判斷是否大于當前結束時間var lastNumber = startTime.substring(4);// 需要添加的分鐘var moreTime = 10 - parseInt(lastNumber);// 添加后的時間戳var addTime = startTimestamp + 60 * moreTime;}let argument = {startTime: startTime,endTime: endTime,nowTime: nowTime,startTimestamp: startTimestamp,endTimestamp: endTimestamp,nowTimestamp: nowTimestamp,addTime: addTime,moreTime: moreTime,activeIndex: activeIndex}if(this.dateList[0]['is_active']){this.timeAlgorithm(argument);}else{this.timeAlgorithm(argument);}this.$nextTick(() => {let timeScroll = new BScroll('.subscribe-scroll',{scrollY: true,tap:"selectDate,elementDisplay"});})},timeAlgorithm: function (params) {let restrainTime1 = params['addTime'] + 60 * this.setting.interval;let restrainTime2 = params['endTimestamp'] - 60 * this.setting.interval;// 判斷是不是大于最后的可以接單的時間if(restrainTime1 < restrainTime2){params['addTime'] = params['addTime'] + 60 * this.setting.interval;// 算出選擇了那個日期的時間戳和日期params['setAddTime'] = params['addTime'] + (60 * this.setting.interval) + (24 * 60 * 60 * params['activeIndex']) - 60 * this.setting.interval;// 一開始第一個高亮let is_active = (this.setting.defaultTime && this.timeList.length == 0) ? true : false;// 把獲取到的時間push進去this.timeList.push({is_active:is_active,date:this.timestampToTime(params['addTime'],true),picker:this.timestampToTime(params['setAddTime']),timestamp:params['setAddTime']});// console.log(this.timestampToTime(params['addTime']));this.timeAlgorithm(params);}},getTimestamp: function (){// 獲取當前時間戳let date = new Date();let year = date.getFullYear() + this.reduce + this.addZero(date.getMonth() + 1) + this.reduce + this.addZero(date.getDate());let currentdate = this.addZero(date.getHours()) + this.colon + this.addZero(date.getMinutes());let timestamp = Math.round(new Date((year + this.space +currentdate).replace(/-/g,"/")) / 1000);return timestamp;},timestampToTime: function (timestamp,bool) {// 獲取當前時分或日期 格式: 15:30 或 2018-06-08 15:30let date = '';if(timestamp){date = new Date(timestamp * 1000);}else{date = new Date();}let year = date.getFullYear() + this.reduce + this.addZero(date.getMonth() + 1) + this.reduce + this.addZero(date.getDate());let currentdate = this.addZero(date.getHours()) + this.colon + this.addZero(date.getMinutes());// 返回時分或返回年月日if(timestamp && !bool){return year + this.space + currentdate;}else{return currentdate;} },getYearMonthDate: function (number) {// 獲取年月日let date = new Date();if(number){// 設置多少天的日期date.setTime(date.getTime() + (24 * 60 * 60 * 1000) * number);} let year = date.getFullYear() + this.reduce + this.addZero(date.getMonth() + 1) + this.reduce + this.addZero(date.getDate());return year;},getDateList: function (len) {if(this.dateList.length > 0){this.dateList = [];}for(let i = 0; i < len; i++){let date = new Date();date.setTime(date.getTime() + (24 * 60 * 60 * 1000) * i);let currentdate = this.addZero(date.getMonth() + 1) + this.reduce + this.addZero(date.getDate());this.dateList.push({is_active: i == 0 ? true : false,date:currentdate});}this.$nextTick(() => {if(this.setting.dateBlock){let dateScroll = new BScroll('.subscribe-date',{scrollY: true,tap:"selectDate,elementDisplay"});} })},addZero: function (time) {if (time <= 9) {time = "0" + time;}return time;},selectDate: function (index,name) {for(let i = 0; i < this[name].length; i++){this.$set(this[name][i], 'is_active', false);}this.$set(this[name][index], 'is_active', true);if(name == 'dateList'){this.getTimeList();console.dir(this.timeList);}else if(name == 'timeList'){// this.$emit('confirmEvent',this[name][index]);this.selectTime = this[name][index];this.$emit("update:selectTime", this.selectTime);this.elementDisplay();}console.dir(this.dateList);},defaultTime: function () {if(this.setting.defaultTime){// 防止返回的時候，默認選擇第一個，下單完成清除掉if(sessionStorage.date){this.selectTime = {date:sessionStorage.date,picker:sessionStorage.picker};this.$emit("update:selectTime", this.selectTime);}else{console.dir(this.selectTime);this.selectTime = this.timeList[0];this.$emit("update:selectTime", this.selectTime);} }} },mounted: function () {this.getDateList(this.setting.dateLength);this.getTimeList();this.defaultTime();},computed: {},watch: {setting: { handler(newValue, oldValue) {if(newValue.display){this.getDateList(this.setting.dateLength);this.getTimeList();// 默認選中if(this.selectTime.date != ''){for(let i = 0; i < this.timeList.length; i++){if(this.selectTime.date == this.timeList[i]['date']){this.$set(this['timeList'][i], 'is_active', true);}else{this.$set(this['timeList'][i], 'is_active', false);}}}console.dir(this.selectTime);} }, deep: true } },components: {} } </script> <style scoped> /*.table-scroll{overflow: hidden;height: 100%; } .table-scroll .table-list{width: 100%;padding-bottom: 10px; }*/.subscribe-content{height: 250px;width: 100%;background: #fff;position: absolute;left: 0;bottom: 0;z-index: 1003; } .subscribe-content .subscribe-date{width: 35%;height: 210px;background: #e7e7e7;overflow: hidden;/*overflow: scroll;*/ } .subscribe-content .subscribe-scroll{width: 65%;height: 210px; } .subscribe-date{/*float: left;*/overflow: scroll;position: absolute;top: 0;left: 0; } .subscribe-scroll{position: absolute;top: 0;left: 35%;overflow: hidden; } /*.subscribe-content:after{content: "";width: 0;height: 0;display: block;visibility: hidden;clear: both; }*/ /*日期*/ .subscribe-date-list{height: 42px;line-height: 42px;border-bottom: 1px solid #fff;font-size: 14px;text-align: center;color: #333; } .subscribe-date-list:last-child{border-bottom: none; } .subscribe-date-list-active{background: #fff;color: #ff6600; } /*時間*/ .subscribe-time{} .subscribe-time-list{width: 100%;height: 35px;line-height: 35px;padding-left: 20px;font-size: 14px;color: #666; } .subscribe-time-list-active{color: #ff6600; } /*取消按鈕*/ .subscribe-content .subscribe-cancel{width: 100%;height: 39px;line-height: 40px;border-top: 1px solid #ccc;text-align: center;font-size: 14px;position: absolute;left: 0;bottom: 0;z-index: 1003; } /*遮罩層*/ .mast{position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;opacity: 0.3;/*background: rgba(0, 0, 0.3);*/background: #000;z-index:1002; } .subscribe-content .subscribe-time-list-width{width: 100%!important;left:0;padding: 0;text-align: center; } .subscribe-time-list-width .subscribe-time{width: 100%; } .subscribe-time-list-width .subscribe-time-list{padding-left: 0px; } </style>

父組件引用

<template><SubscribeTime @confirmEvent="confirmEvent" :setting="setting" :selectTime.sync="selectTime" ></SubscribeTime> </template><script> import SubscribeTime from '../SubscribeTime/SubscribeTime' export default {name: 'Subscribe',data () {return {//配置的對象setting:{dateLength:7,//顯示多少天startTime:'08:00',//開始時間endTime:'23:30',//結束時間interval: 20,//步長，預約的時間間隔display:true,//設置這個組件是顯示還是隱藏defaultTime:true,//是否設置默認時間dateBlock:true//右側日期是否顯示},//選擇日期后，子組件返回的對象selectTime:{is_active:'',//不用管date:'',//18:00 時分picker:'',//2018-16-17 12:00 日期timestamp:''//156224456時間戳} }},methods: {}，components: {SubscribeTime} } </script>

項目結構

index.js代碼

import vueSubscribe from './vue-subscribe.vue' const subscribe = { install (Vue, options) { Vue.component(vueSubscribe.name, vueSubscribe);} } export default subscribeif (typeof window !== 'undefined' && window.Vue) { window.Vue.use(subscribe); }

vue-subscribe的代碼就是一開始插件的代碼

webpack.config.js進行一下修改

module.exports = {entry:'./src/lib/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',// filename: 'build.js' // 打包后輸出的文件名 filename: 'vue-subscribe.js', // 我們可不想打包后叫build.js 多low啊 起一個與項目相對應的 library: 'VueSubscribe', // library指定的就是你使用require時的模塊名，這里便是require("PayKeyboard") libraryTarget: 'umd', //libraryTarget會生成不同umd的代碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標簽引入的。 umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define。//此處省略無關代碼n行…. }

修改package.json文件

"private": false,//默認是true的改為false "license": "MIT", "main": "dist/vue-subscribe.js", "repository": {"type": "git","url": "https://github.com/Sun-Traget/vue-subscribe" }

到此所有準備工作完成

npm run build //打包 //在dist中生成vue-subscribe.js、vue-subscribe.js.map文件

發布到npm 中

先注冊一個npm賬號，需要認證郵箱，否則不能發布npm包，注冊成功后，打開命令行執行以下命令：

npm login //會讓你輸入你的npm賬號、密碼、郵箱 //然后進入到項目里面去 npm publish //發布npm 包,這個時候就已經發布到npm上了

github代碼地址

https://github.com/Sun-Traget/vue-subscribe

參考地址：http://www.imooc.com/article/19691
順便推薦一篇vscode插件:https://blog.csdn.net/crper/article/details/80960269

總結

以上是生活随笔為你收集整理的Vue封装预约日期插件和发布到npm上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。