<repo_name>lk452584833/resume<file_sep>/src/common/js/utils.js
/**
* 解析url所有参数以对象形式解析
* @example ?id=123&a=1
* @return Object {id:123,a:1}
*/
function urlParam() {
	let url = window.location.search
	let obj = {}
	let reg = /[?&][^?&]+=[^?&]+/g
	let arr = url.match(reg)
	if (arr) {
		arr.forEach((item) => {
			let tempArr = item.substring(1).split('=')
			let key = decodeURIComponent(tempArr[0])
			let val = decodeURIComponent(tempArr[1])
			obj[key] = val
		})
	}
	return obj
}
/* 獲取URL查詢參數指定name */
function getSearch(param) {
	var search = location.search.substr(1)
	var locate = search.search(param)
	var paramString = ''
	if (locate !== -1) {
		var searchRest = search.substr(locate)
		var len = searchRest.length
		var and = searchRest.search('&')
		if (and === -1) {
			paramString = searchRest.substr(param, len)
		} else {
			paramString = searchRest.substr(param, and)
		}
		var paramArray = paramString.split('=')
		return paramArray[1]
	} else {
		return false
	}
}

/* 返回错误信息弹出，需配合reset.css */
function showBackMsg(data) {
	var $body = document.body
	var $div = document.createElement('div')
	$div.innerText = data
	$div.className = 'errorMsg'
	$body.appendChild($div)
	var $errorMsg = document.getElementsByClassName('errorMsg')
	if ($errorMsg) {
		setTimeout(function() {
			$errorMsg[0].parentNode.removeChild($errorMsg[0])
		}, 1500)
	}
}

/* 獲取并展示上傳圖片 */
/* 说明：fileInput為input:file文檔元素,img為img文檔元素 */
function showImg(fileInput, img) {
	var file = fileInput.files[0]
	if (window.FileReader) {
		var reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onloadend = function(e) { // 監聽文件讀取后
			img.setAttribute('src', e.target.result)// e.target.result就是最後的路徑地址
		}
   }
}

/* 將圖片轉化成dataUrl模式 */
function getImgBase64(path, callback) {
	console.log(path)
	var img = new Image()
	img.src = path
	img.onload = function() { // 圖片加載完後觸發
		var canvas = document.createElement('canvas')
		var ctx = canvas.getContext('2d') // 獲取繪畫上下文
		var imgWidth = img.width // 獲取圖片寬度
		var imgHeight = img.height // 獲取圖片高度
		canvas.width = imgWidth // 設置幕布高度
		canvas.height = imgHeight // 設置幕布寬度
		ctx.drawImage(img, 0, 0, imgWidth, imgHeight) // 繪製圖片
		var dataUrl = canvas.toDataURL('image/jpeg') // 繪製圖片
		callback ? callback(dataUrl) : ''
	}
}

/* 複製對象 */
function cloneObject(obj) {
	var newObj = {}
	for (var item in obj) { newObj[item] = obj[item] }
	return newObj
}

/* 複製HTML元素 */
/* **** 導出到Vue **** */
/* main.js中引入
* import utils from './common/js/utils.js'
* Vue.use(utils)
*/
export default {
	install(Vue, options) {
		Vue.prototype.$_urlParam = urlParam
		Vue.prototype.$_showImg = showImg
		Vue.prototype.$_showBackMsg = showBackMsg
		Vue.prototype.$_getSearch = getSearch
		Vue.prototype.$_getImgBase64 = getImgBase64
		Vue.prototype.$_cloneObject = cloneObject
	}
}
<file_sep>/test/unit/specs/IconSupports.spec.js
import Vue from 'vue'
import IconSupports from '../../../src/components/IconSupports'

describe('IconSupports.vue', () => {
  it('测试开始', () => {
    const Constructor = Vue.extend(IconSupports)
    const vm = new Constructor().$mount()
     expect(vm.$el.querySelector('.supports-icon').textContent)
      .toEqual('测试组件')
  })
})
<file_sep>/src/common/js/store.js
/**
 * 存储localStorage
 * id, key, val @example 1,favorite,true ,3,favorite,true ,
 * @example  => {"1":{"favorite":true},"2":{"favorite":true}}
 * */
export function saveToLocal(id, key, val) {
	let seller = window.localStorage._info_
	if (!seller) {
		seller = {}
		seller[id] = {}
	} else {
		seller = JSON.parse(seller)
		if (!seller[id]) {
			seller[id] = {}
		}
	}
	seller[id][key] = val
	window.localStorage._info_ = JSON.stringify(seller)
}
/**
 * 获取localStroage
 *  @example loadFromLocal(1,'favorite', false)  => true
 * */
export function loadFromLocal(id, key, def) {
	let seller = window.localStorage._info_
	if (!seller) {
		return def
	}
	seller = JSON.parse(seller)[id]
	if (!seller) {
		return def
	} else {
		return seller[key] || def
	}
}
<file_sep>/src/components/MessageSure/index.js
import MessageSure from './MessageSure.vue'

const MSG = {
	animateTime: 500, // 弹窗出现，隐藏的动画时间
	defaultTitle: '操作提示:', // 默认提示
	isRegister: false, // 是否正在使用模板
	install(Vue, options) {
		if (typeof window !== 'undefined' && window.Vue) {
			Vue = window.Vue
		}
		Vue.component('messagesure', MessageSure) // 全局注册模板
		function BackMsg(text, callBack) {
			if (MSG.isRegister) { // 操作未确认或者取消前，不会继续调用模板
				return
			}
			MSG.isRegister = !MSG.isRegister
			let words, titlemsg // 弹窗信息，弹出头部
			if (typeof text === 'string') {
				words = text
				titlemsg = MSG.defaultTitle // string,使用默认titlText
			} else if (text instanceof Object) { // 参数是个对象
				words = text.text || ''
				// 参数是个对象的情况下，不存在titleText属性时，使用默认
				// 存在titleText 属性时，(空的话，表示子组件,title隐藏)
				titlemsg = (typeof text.titleText) === 'undefined' ? MSG.defaultTitle : (text.titleText || '')
			}
			let VueMsg = Vue.extend({
				render(h) {
					return h('messagesure', {
						props: {
							text: words,
							titleText: titlemsg,
							show: this.show
						},
						on: {
							msgcancel: function() {
								vm.show = false
								let t1 = setTimeout(() => {
									clearTimeout(t1)
									document.body.removeChild(el)
									vm = null
									VueOneMsg.$destroy()
									MSG.isRegister = !MSG.isRegister
								}, MSG.animateTime)
							},
							msgsure: function() { // 动画效果过后，清除元素，调用回调
								vm.show = false
								let t2 = setTimeout(() => {
									clearTimeout(t2)
									document.body.removeChild(el)
									vm = null
									VueOneMsg.$destroy()
									MSG.isRegister = !MSG.isRegister
									callBack && (typeof callBack === 'function') && callBack()
								}, MSG.animateTime)
							}
						}
					})
				},
				data() {
					return {
						show: false
					}
				}
			})
			let VueOneMsg = new VueMsg()
			let vm = VueOneMsg.$mount()
			let el = vm.$el
			document.body.append(el)
			vm.show = true
			// 显示之后操作，根据组件方法，取消，确认
		}
		Vue.prototype.$_messagesure = BackMsg
	}
}

export default MSG
<file_sep>/src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' // 加载路由 vue.$route vue.$router
import store from './store' // 加载vuex  $store
import PicPreview from 'vue-picture-preview-extend' // 加载preview 图片查看器
import utils from './common/js/utils.js' // 加载自定义公用类js库
import vMessage from './components/Message/index.js' // 加载自定义弹出信息，以插件形式安装。此方法单独以组件方法形式，是因为多了模板样式
import vMessageSure from './components/MessageSure/index.js' // 加载自定义弹出信息2
// import axios from 'axios'
// import VueAxios from 'vue-axios'
import myaxios from './common/axios/api' // 自定义封装的axios api层。

import './mock' // 加载模拟数据mock
import '../static/css/reset.css' // 加载rest.css 和 icon.css
import './common/css/icon.css'
import FastClick from 'fastclick' // 解决移动端300毫秒点击延迟
FastClick.attach(document.body)

Vue.use(PicPreview)
Vue.use(utils)
Vue.use(vMessage) // 使用案例header,info.vue
Vue.use(vMessageSure) // 使用案例info.vue
Vue.config.productionTip = false
Vue.use(myaxios) // 全局使用this.$_axios.getWork().then()
// Vue.use(VueAxios, axios)
// Vue.prototype.$axios = axios // 挂载到原型上

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router,
	store: store,
	data: {
		eventHub: new Vue()
	},
  components: { App },
  template: '<App/>',
  created() {
	this.$router.push({path: '/projects'})
  }
})
