开发常用

335 阅读1分钟

1 单行文本溢出隐藏

div {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

2 多行文本溢出隐藏

div {
    width: 150px;
    display: -webkit-box;//必须设置为弹性模型
    -webkit-box-orient: vertical;//显示排列方式
    -webkit-line-clamp: 3;//用来限制显示的行数
    overflow: hidden;
}

3 new Map()

const Echo = new Map()
Echo.set('key','value') //设置键值对
Echo.get('key') //"value"
Echo.has('key') //查找是否存在 返回true false
Echo.clear() //清空Map
Echo.size() //长度
Echo.delete('key') //删除

4 Object.keys()

let obj = {name : 'yaa'}
Object.keys(obj) // 返回一个属性可枚举的数组
Object.keys(obj).map(key => {
    obj[key]//用于做一些处理
})

4 Object.hasOwnProperty()

// 用于判断对象是否存在某个属性且是否是对象下
const keyToObj = (obj,key) => {
    return Object.hasOwnProperty.call(obj,key)
}

5 vue实现编辑页多开

// 通过不同的tipId实现编辑页多开
{
    path: '/deviceEdit/:tipId',
    name: 'deviceEdit',
    hidden: true,
    component: lazyLoading('device/device/edit'),
    meta: { title: '设备编辑', icon: 'dashboard' }
}
this.$router.push({
        name: 'deviceEdit',
        query: {
          title: `${row.deviceName}-设备编辑`,
          deviceId: row.deviceId
        },
        params: {
          tipId: row.deviceId
        }
    })

6 vue修饰符sync

//适用场景:一些组件的显隐
<comp :show.sync="bar"></comp>
//会被扩展为
<comp :foo="bar" @update:foo="val => bar = val"></comp>
//子组件中通过emit修改父组件的值
this.$emit('update:show', val)

7 post流形式下载文件

//axios为例,设置请求返回文件类型为blob,否则出现乱码
config.responseType = filterIsBlob(config.url) ? 'blob' : config.responseType
//post形式一般是需要导出一些自定义属性的word文档,需向后端传需要导出的字段集合
//以流形式传输,需动态创建a标签模仿点击下载
 var a = document.createElement('a');
         a.download = 'data.xlsx';
         a.href = e.target.result;
         $("body").append(a); 
         a.click();
         $(a).remove()