记录项目中遇到的一些难点和问题
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);