vue 计算屏幕的高度_Vue 开发经验小记

1.国际化

国际化插件：vue-i18n

2.让多行内容显示一行，多余的用...表示

white-space : nowrapoverflow: hiddentext-overflow : ellipsis复制代码

3.显示宽高相等的图片，宽度为屏幕宽度，高度与宽度相等

.image-header position: relative width:100% height: 0 padding-top : 100% img position: absolute left: 0 top: 0 width: 100% height: 100%复制代码

重点是父元素的height设为0，padding-top设为100%

4.转换时间的工具类

/** * Created by solo on 2018/6/6. */export function formatDatetime(date, fmt) { if(/(y+)/.test(fmt)){ fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4-RegExp.$1.length)) } let obj = { "M+": date.getMonth() + 1, "d+": date.getDay(), "h+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds() } for(let key in obj){ if(new RegExp(`(${key})`).test(fmt)){ let str = obj[key] + '' fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)) } } return fmt}function padLeftZero(str) { return ("00" + str).substr(str.length)}复制代码

使用

let date = new Date(timestamp)let fmtDate = formatDatetime(date, 'yyyy-MM-dd hh:mm')复制代码

5.给组件绑定原生事件

复制代码

只需要在@click后面加上.native就可以直接处理原生点击事件了

6. vue中组件间传值

6.1 父子组件间传值

• 父组件给子组件传值，直接通过props传值

复制代码

• 子组件给父组件传值，通过 emit发送事件

this.$emit('chooseType', type)复制代码

父组件接收事件：

复制代码

6.2 非父子组件传值

主要通过事件总线传值

在根节点给 Vue 挂载一个空的 Vue 对象

Vue.prototype.bus = new Vue();复制代码

需要发送事件的组件里

this.bus.$emit("change