工作笔记

记录项目中遇到的一些难点和问题

1. 服务端返回带换行的文本，如何设置css属性，使其正常显示（默认的空格会被忽略）

white-space:pre-wrap // 保留空白符但是正常进行换行
white-space:pre-line  // 合并空白符，保留换行符

2.设置Vue项目全局属性

/*
* 新建common.js，为Vue对象添加原型属性，每个Vue组件都是一个Vue对象的实例，所以可以通过this.xxx来访问
*/
import Vue from 'vue';
// 动态设置html字体跟大小
(Vue.prototype.$fontSize = () => {
  var docEl = document.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    if (docEl.clientWidth > 640) {
      docEl.style.fontSize = 640 / 750 * 100 + 'px'
    } else {
      docEl.style.fontSize = docEl.clientWidth / 750 * 100 + 'px'
    }
  }
  window.addEventListener(resizeEvt, recalc, false)
  document.addEventListener('DOMContentLoaded', recalc, false)
})()

// 设置全局返回，使用方法(this.$back())
Vue.prototype.$back = () => {
  history.back(-1)
}

3.export 和 export default的区别

1.export在引用时名字需要和声明的时候一致，声明时为sayHi，引用时也是sayHi
2.使用export导出，在导入时要加{}，export default则不需要
3.在一个文件或模块中，export 和 import 可以有多个，export default只能有一个

export的写法

// auth.js
const sayHi = () => alert('hi')
export {
  sayHi
}
// 或
export const sayHi = () => alert('hi')

// Home.vue
import { sayHi } from '@/util/auth.js'
export defaults{
  mounted () {
  	sayHi() // hi
  }
}

export default的写法

// auth.js
const sayHi = () => alert('hi')
export default sayHi

// Home.vue
import func from '@/util/auth.js'
export default{
	mounted () {
		func() // hi
	}
}

项目中较常这样来使用

// auth.js
const logOne = () => console.log(1)
const logTwo = () => console.log(2)
const logThree = () => console.log(3)
export default {
	logOne,
	logTwo,
	logThree
}

// Home.vue
import func from '@/util/auth.js'
export default {
	mounted () {
		func.logOne()
		func.logTwo()
		func.logThree()
	}
}

4.Vue全局filter

// filter.js
import Vue from 'vue'

let addZero = val => {
  if (val < 10) {
    return '0' + val
  } else {
    return val
  }
}
Vue.filter('formatTime', (val, type) => {
  if (val === null) {
    return '暂无时间'
  }
  val = (val + '').length === 13 ? val : parseInt(val) * 1000 // 10 位则转化
  let dataTime
  type = type || 'YMDHM'
  let date = new Date(val)
  let Y, M, D, h, m, s
  Y = addZero(date.getFullYear())
  M = addZero(date.getMonth() + 1)
  D = addZero(date.getDate())
  h = addZero(date.getHours())
  m = addZero(date.getMinutes())
  s = addZero(date.getSeconds())
  if (type === 'YMD') {
    dataTime = Y + '-' + M + '-' + D
  } else if (type === 'YMDHMS') {
    dataTime = Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
  } else if (type === 'YMDHM') {
    dataTime = Y + '-' + M + '-' + D + ' ' + h + ':' + m
  } else if (type === 'DHM') {
    dataTime = D + '天' + h + '时' + m + '分'
  } else if (type === 'HM') {
    dataTime = h + ':' + m
  } else if (type === 'HMS') {
    dataTime = h + ':' + m + ':' + s
  } else if (type === 'HMSC') {
    dataTime = h + '天' + m + '时' + s
  } else if (type === 'GG') {
    var now = new Date().getTime()
    var time = new Date(date).getTime()
    var e = Math.round((now - time) / 1000)
    if (time > now) {
      return '刚刚'
    } else {
      if (e < 60) dataTime = '刚刚'
      else if (e < 1800) dataTime = Math.round(e / 60) + '分钟前'
      else if (e < 3600) dataTime = '半小时前'
      else if (e < 86400) dataTime = Math.round(e / 3600) + '小时前'
      else if (e < 86400 * 7) dataTime = Math.round(e / 86400) + '天前'
      else dataTime = Y + '-' + M + '-' + D
    }
  } else if (type === 'QD') {
    dataTime = h + '小时' + m + '分'
  } else if (type === 'MD') {
    dataTime = M + '.' + D
  }
  return dataTime
})
Vue.filter('countDown', (val, type) => {
  let dataTime
  type = type || 'HMS'
  if (type === 'H') {
    dataTime = val.slice(0, 2)
  } else if (type === 'M') {
    dataTime = val.slice(3, 5)
  } else if (type === 'S') {
    dataTime = val.slice(6, 8)
  } else if (type === 'HMS') {
    dataTime = val
  }
  return dataTime
})
/**
 * 金钱格式处理
 * @param {string} val - 要处理的金钱数值
 * @param {int} integer - 保留到小数点后几位,默认为2
 */
Vue.filter('formatMoney', (val, integer = 2) => {
  let money = Number(val)
  return money.toFixed(integer)
})

使用时

// Home.vue
<template>
  <div id='app'>
    <!-- 显示 2019-07-15  -->
    <p> {{ time | formatTime('YMD') }} </p>
  </div>
</template>

<script>
  export default {
  	data () {
  	  return {
		time: 1563157266 // 后台返回的时间戳
	  }
  	}
  }
</script>

5.使用router的query和params来传值

// Home.vue
methods: {
  toNextPage () {
	this.$router.push({
	  name: 'nextPage',
	  query:{
	    idx: 1
	  }
	})
  }
}
// 或
  toNextPage () {
	this.$router.push({
	  path: `/home/nextPage`, // nextPage注册路由时写的路径
	  query:{
	    idx: 1
	  }
	})
  }

// nextPage.vue
created () {
  console.log(this.$route.query) // { idx: 1 }
}

使用params传值方法是一样的，区别是params传值时，传递的参数不会显示在url中，当params传值的页面刷新时，会获取不到数据

如果要传递一个对象，如

  // Home.vue
  item: {
  	name: 'mickey',
  	age: 23,
  	hobby: 'music'
  }
  先
  let expressObj = JSON.stringify(item)
  export default {
  methods: {
    toNextPage () {
	  this.$router.push({
	    name: 'nextPage',
	    query:{
	      item: item
	    }
	  })
    }
  }
}

// nextPage.vue
created () {
  let item = JSON.parse(this.$route.query.item)
  console.log(item) // { name: 'mickey', age: 23, hobby: 'music'  }
}

对象数组去重

let person = [
{id: 0, name: “小明”},
{id: 1, name: “小张”},
{id: 2, name: “小李”},
{id: 3, name: “小孙”},
{id: 1, name: “小周”},
{id: 2, name: “小陈”},
];
let obj = {};
person = person.reduce((cur,next) => {
console.log(obj[next.id], next.name);
if (obj[next.id]) { // 如果是true，就不执行操作，否则push进数组
} else {
obj[next.id] = true
cur.push(next)
}
// obj[next.id] ? “” : obj[next.id] = true && cur.push(next);
return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
console.log(person);

微信账号绑定用户账号，微信支付接口，支付宝支付接口