前端工作问题归纳

[toc]

1.跳转新窗口并写入HTML代码

    let myWindow=window.open('','','width=640,height=860'); 
    或 let myWindow=window.open();
    myWindow.document.write('<p>新页面</p>';
    myWindow.focus();

2.elementUI中el-dialog点击遮罩层不关闭

1.:close-on-click-modal="false" //局部

2.在mian.js里面：//全局
import ElementUI from 'element-ui';
// 修改 el-dialog 默认点击遮照为不关闭
ElementUI.Dialog.props.closeOnClickModal.default = false

3.开源插图

4.elementU中el-table 实现自适应超出一定高度给滚动条

<el-table  border :max-height="autoHeight"></el-table>
created() { 
    //js动态计算出表格剩余可接受的最大高度
    this.autoHeight = document.body.offsetHeight - 260 
 },

5.elementUI中禁止table表格选中或样式禁止按钮点击

//:selectable设置为true可选中，为false不可选中
<el-table-column  min-width="35px" type="selection" :selectable="true"
</el-table-column>
//样式禁止按钮点击
.disabledBtn{
    pointer-events:none;
    color: #999;
}                                

6.forEach 怎么跳出循环

const arr = [1, 2, 3, 4, 5, 6]
let k = null
arr.forEach((v) => {
  try {
    if (v === 2) {
      k = v
      throw Error()
    }
  } catch (error) {
    //console.log('error')
  }
})
console.log(k)

7.数组去重

this.tableData = [
    {id:1,name:"xx"},
    {id:2,name:"rr"},
    {id:1,name:"yy"}
]
//方法 一
let obj = {};
this.tableData = this.tableData.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) 
//方法 二  使用Set
this.tableData = [...new Set(this.tableData)]

8.vue直接滚动到页面底部或顶部

this.$nextTick(()=>{
    //滚动到页面底部
    this.$refs.container.scrollIntoView(false)
})
// 滚动到顶部 
this.$refs.container.scrollIntoView(true); // vue的语法

9.按数组中某个字符进行排序

let limits = [
    'DB-SERVICE-DATABASE-EXAMINE-MENU',
    'DB-SERVICE-RESOURCE-DELIVERY-MENU',
    'DB-SERVICE-WHITE-SCREEN-MENU',
    'DB-SERVICE-OTHER-SERVICES-MENU'
],
//按第12个字符进行排序
limits.sort(function(a,b){
    return a.substring(12).localeCompare(b.substring(12));
})
    

10 provide和inject使用

1.在祖先节点上通过provide
import SchemaItems from './SchemaItems'//组件
const context = {
  SchemaItems,//组件
  name:'张三'
}
provide('vjsf', context)

2.在孙子节点上通过inject获取
const context = inject('vjsf')
console.log(context, '=====')

11.限制用户短时间内多次点击按钮

// controlClickState.js 文件 
export default { install(Vue) { // 禁止短时间内重复点击 
    Vue.directive('preventClick', { inserted(button, bind) { 
    button.addEventListener('click', () => { 
        if (!button.disabled) { 
            button.disabled = true; 
            setTimeout(() => {
                but.disabled = false 
               }, 6000) } 
    }) } }) } }

12.复制文本

copySqlContent: function () {
    if ($.trim(this.msg) == "") {
        this.$message.error("未找到SQL文本!")
         return
    }
    const cText = this.msg.replace(/<br>/g, "").replace(/<br\/>/g, "")
    const aux = document.createElement("input")
    aux.setAttribute("value", cText)
    document.body.appendChild(aux)
    aux.select()
    document.execCommand("copy")
    document.body.removeChild(aux)
    this.$message.success("复制成功")
}
                  

13.去掉空格

//1.去掉str的空格
var str = " Runoob "; 
str.trim();

//2.输入框中不能输入空格
<el-input v-model.trim="code" placeholder="唯一的指标编码"></el-input>

14.定义转义的HTML方法，让浏览器不去识别html元素

function htmlEscape(htmlStr) {
  return htmlStr.replace(/<|>|"|&/g, (match) => {
    switch (match) {
      case "<":
        return "&lt;";
      case ">":
        return "&gt;";
      case '"':
        return "&quot;";
      case "&":
        return "&amp;";
    }
  });
}

15.网页全部置灰

//在最外层的html加
html.gray-mode{
    filter: grayscale(.95);
    -webkit-filter: grayscale(.95);
}

16.pnpm 补丁的方式修改第三方插件 papm patch