碎业务笔记

1.修改UI组件样式
    // loader的解析方式不同深度选择器的使用不同
    /deep/ .van-cell__value {}
    :deep(.van-button) {}
    或者
    //最终控制的类名是 .pagination_329v8c153a .ant-pagination-prev
    //pagination会经过webpack编译成pagination_329v8c153a，global包裹的类名不会被特殊编译，这样就可以控制到样式了
    .pagination{
        :global {
            .ant-pagination-prev{

            }
        }
    }
    

2.内嵌页面
    <template>
        <div class="jumpToFinance">
            // jumpToFinanceUrl为页面地址
            <iframe class="finance" :src="jumpToFinanceUrl" width="100%" height="100%" frameborder="0" scrolling="auto" />
        </div>
    </template>
        
3.视口的宽度、高度
    100vw 和 100vh

4.导出excel表格（也可以通过后端返回一个url地址，通过a标签下载）
    1）响应拦截器
        service.interceptors.response.use(
            response => {
                /** 某些接口要获取response，可以获取响应头·信息 */
                for (let i = 0; i < responseUrl.length; i++) {
                    if (response.config.url.indexOf(responseUrl[i]) !== -1) {
                        return response
                    }
                }
                return res
            }
        ）
    2）接口
        function opptyVisitorExport(data) {
            console.log('data--elk', data)
            const params = `pageSize=${data.pageSize}&pageNum=${data.pageNum}&queryDateType=${data.queryDateType}&startDate=${data.startDate}&endDate=${data.endDate}&status=${data.status}&dataSource=${data.dataSource}&keyword=${data.keyword}`
            return new Promise((resolve) => {
                request.get(`/market/tender/sys/oppty/opptyVisitorExport?${params}`, { responseType: 'blob', timeout: 50 * 1000 }).then(res => {
                resolve(res)
                })
            })
        }
    3）请求
        opptyVisitorExport(params).then(res => {
            var disposition = res.headers['content-disposition']
            let filename = '商机拜访导出字段.xlsx'
            if (disposition) {
                // decodeFilename为åæºæ访导åº.xlsx
                const decodeFilename = disposition.split('=')[1]
                if (decodeFilename) {
                    filename = decodeURI(escape(decodeFilename))
                }
            }
            var a = document.createElement('a')
            var blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' })
            var url = window.URL.createObjectURL(blob)
            console.log('qwe', url)
            a.setAttribute('download', filename)
            a.href = url
            a.click()
        })
5.高德地图
    https://lbs.gaode.com/demo-center/amap-ui
    https://lbs.amap.com/api/jsapi-v2/summary

6.后台编辑器
    1）main.js文件
        import VueQuillEditor from 'vue-quill-editor'
        Vue.use(Element, {
            size: Cookies.get('size') || 'medium' // set element-ui default size
        }).use(VueQuillEditor)
    2）组件中
        <el-form-item label="内容详情" label-width="145px" prop="content">
            <quill-editor :content="formValidate.content" @on-editor-change="onEditorChange" />
        </el-form-item>
        // 编辑编辑器
        onEditorChange(content) {
            this.formValidate.content = content
        },

7.下载
    // 下载函数
    dowload(url) {
      const a = document.createElement('a')
      a.href = url
      a.download = '下载文件'
      a.target = '_blank' // 针对 ie模式 的浏览器
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },

8.多行显示省略号
      // 超过三行显示省略号
      display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        word-break: break-all;
        overflow: hidden;
      }
9.格式化时间
    getcreatedDate(date) {
      if (!date) return
      const time = new Date(date)
      const Y = time.getFullYear() + '-'
      const M = (time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1) + '-'
      const D = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
      // const h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours() + ':'
      const h = (time.getHours() < 10 ? '0' + time.getHours() : time.getHours()) + ':'
      const m = (time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()) + ':'
      const s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
      return (Y + M + D + '  ' + h + m + s)
    }
10.解决定位元素影响覆盖元素事件（实践当中并不是作用到父级上，而是作用到覆盖元素上，reactnative项目中用到）
    pointerEvents 是字符串类型的属性, 可以取值 none,box-none,box-only,auto.
        none 发生在本组件与本组件的子组件上的触摸事件都会交给本组件的父组件处理.
        box-none 发生在本组件显示范围内,但不是子组件显示范围内的事件交给本组件,在子组件显示范围内交给子组件处理
        box-only 发生在本组件显示范围内的触摸事件将全部由本组件处理,即使触摸事件发生在本组件的子组件显示范围内
        auto 视组件的不同而不同,并不是所有的子组件都支持box-none和box-only两个值,使用时最好测试下
    //reactnative设置
    <div pointerEvents='box-none'></div>
    //h5设置,这样设置底层和内层元素都可以触发鼠标事件
    <div style={{'pointerEvents': 'none'}}>
        <div style={{'pointerEvents': 'auto'}}></div>
    </div>

11.视频满屏显示
        video {
            object-fit: fill;
            bject-position: center center;
        }
12.忽略ts和eslint检查
    // 编译是报错使用两条
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    //@ts-ignore
    formatter: (params) => {}
    //编译是没有报错使用一条
    export interface Props {
        // eslint-disable-next-line
        columns?: any;
    }
13.react如何将\n识别为换行
    给标签加上css属性：white-space: pre-wrap;
14.取消单选框选择
    document.body.onclick = function (event) {
      event = event || window.event;
      var target = event.target || event.srcElement;
      // eslint-disable-next-line
      //@ts-ignore
      if (target?.type === 'radio'&&target?.value===selectDesigner) {
        setSelectDesigner('')
      }
  }

15.锚点和hash路由冲突
    <!-- html代码 -->
    <a @click.prevent="anchor(anchorName)">锚点跳转</a>
    // js代码
    anchor(anchorName){
        let anchorElement = document.getElementById(anchorName);
        /*如果对应id的锚点存在，就跳转到锚点*/
        if(anchorElement) {
            anchorElement.scrollIntoView();
        }
    }
16.操作真实元素
    (document.getElementsByClassName(
        'ka-estate-a-map-card',
    )[0] as any).style.top = mapsOption.originEvent.pageY + 'px';
    (document.getElementsByClassName(
        'ka-estate-a-map-card',
    )[0] as any).style.left = mapsOption.originEvent.pageX + 'px';

17.更新node版本
# 清除node.js的cache：
$ sudo npm cache clean -f
# 安装 n 工具，专门用来管理node.js版本的工具
$ sudo npm install -g n
# 安装最新版本的node.js
$ sudo n stable
安装指定版本：
sudo n v6.11.5
# 安装最新版本的npm
$ sudo npm install npm@latest -g
安装指定版本：
npm install -g npm@5.6.0
# 安装成功查看当前版本
$ node -v
$ npm -v

18.根据id去树里面找对象
export const geFirstHasAuthRoomOrById = (list, id?: string) => {
  let result = null
  if (!list) return // return; 中断执行
  for (const i in list) {
        if (result !== null) break
        const item = list[i]
        if (item?.roomId === id) {
            result = item
            break
        } else if (item?.rooms?.length) {
            result = geFirstHasAuthRoomOrById(item.rooms, id)
        }
    }
  return result
}

19.查找元素的某个孩子
const getElement = (list, className?: string) => {
    let result = null
    if (!list) return // return; 中断执行
    for (const i in list) {
        if (result !== null) break
        const item = list[i]
        if (item?.classList?.contains(className)) {
            result = item
            break
        } else if (item?.children?.length) {
            result = getElement(item.children, className)
        }
    }
    return result
}

20.pc页面兼容不同屏幕并且元素不变形
    1.页面宽高按照设计稿去等比缩放（根据宽动态计算高）
    2.元素按照百分比去写

21.滚动到树的某个高亮节点
    setTimeout(() => {
        //dom树的外层
        const dom = document.getElementsByClassName('dialog-menu')[0];
        const dom1 = document.getElementsByClassName('el-tree-node is-current is-focusable')[0];
        // 这里的104是一个大概位置
        dom.scrollTop = dom1.offsetTop - 104;
      }, 500);

22.解决出现滚动条内容被挤压问题
    设置padding，怪异和标准盒模型切换，滚动条是width的一部分

23.设置资源加载优先级
  <img src="img/carousel-1.jpg" importance="high">
      importance 属性可以指定三个值：
    high：你认为该资源具有高优先级，并希望浏览器对其进行优先级排序。
    low：你认为该资源的优先级较低，并希望浏览器降低其优先级。
    auto：采用浏览器的默认优先级。

24.鼠标移入滚动条中滚动条变粗
    &::-webkit-scrollbar{
        width: 30px; // 重点
    }
    &::-webkit-scrollbar-thumb {
        background: #0F3B66;
        border: 9px solid transparent; // 重点
        border-radius: 15px;
        background-clip: padding-box; // 重点
    }

    &::-webkit-scrollbar-thumb:hover {
        border: 0px solid transparent; // 重点
    }