前端疑难bug和集

记录项目过程遇到的一些疑难问题


前端项目知识汇总

[TOC]

1. element ui 表格中使用input 无法输入删除内容

> <template slot="header" slot-scope="scope">会报scope定义了但是没有使用的错误,这时候如果把slot-scope="scope"删 掉,确实就没有eslint报错问题了,但是就会出现里面的输入框输入不了值的问题,想输入值在template里面必须加slot-scope=“scope”

2. el-form对el-tree 进行校验

> 选中数据获取

async checkChange() {
      const arr1 = this.$refs.tree.getCheckedKeys() || [];
      const arr2 = this.$refs.tree.getHalfCheckedKeys() || [];
      this.roleForm.powerList = [...arr1, ...arr2];
    },

 powerList: [
          { required: true, validator: validatePower, trigger: 'change' },
   ],
 const validatePower = (rule, value, callback) =&gt; {
      const arr1 = this.$refs.tree.getCheckedKeys() || [];
      const arr2 = this.$refs.tree.getHalfCheckedKeys() || [];
      value = [...arr1, ...arr2];
      if (!value || !value.length) {
        callback(new Error(this.$t('comment_vary.select_label')));
      } else {
        callback();
      }
    };

3. input 自动补全背景色去掉

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ededed !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  background-color: transparent;
  background-image: none;
  transition: background-color 50000s ease-in-out 0s;
}```

### 4. ui svg图片改成 svg字体图标
  &gt; 1、svg 图标都是形状填充图标
  2、svg 标签的 fill='currentColor'
  3、去掉path 的fill 属性

<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">; <path d="M10.7076 9.99921H12.4996C12.6275 9.99921 12.7554 9.95041 12.853 9.85282C12.9506 9.75523 12.9993 9.62735 12.9993 9.49947C12.9993 9.37159 12.9506 9.24371 12.853 9.14611C12.7554 9.04852 12.6275 8.99972 12.4996 8.99972H9.99921C9.44731 8.99972 8.99972 9.44731 8.99972 9.99921V12.4996C8.99972 12.6275 9.04852 12.7554 9.14611 12.853C9.24371 12.9506 9.37159 12.9993 9.49947 12.9993C9.62735 12.9993 9.75523 12.9506 9.85282 12.853C9.95041 12.7554 9.99921 12.6275 9.99921 12.4996V10.7076L14.1452 14.8536C14.3404 15.0488 14.6567 15.0488 14.8519 14.8536C15.0471 14.6584 15.0471 14.3421 14.8519 14.1469L10.7076 9.99921Z" /> <path d="M5.29158 9.99913H3.49921C3.37131 9.99913 3.2434 9.95034 3.14579 9.85275C3.04818 9.75517 2.99937 9.6273 2.99937 9.49943C2.99937 9.37156 3.04818 9.24369 3.14579 9.1461C3.2434 9.04852 3.37131 8.99972 3.49921 8.99972H6.00011C6.55212 8.99972 6.99979 9.44727 6.99979 9.99913V12.4993C6.99979 12.6272 6.95099 12.7551 6.85338 12.8526C6.75576 12.9502 6.62786 12.999 6.49995 12.999C6.37205 12.999 6.24414 12.9502 6.14653 12.8526C6.04891 12.7551 6.00011 12.6272 6.00011 12.4993V10.7075L1.85327 14.8531C1.65804 15.0483 1.34164 15.0483 1.14642 14.8531C0.951194 14.658 0.951194 14.3417 1.14642 14.1465L5.29158 9.99913Z" /> <path d="M9.99921 5.29094V3.49894C9.99921 3.37106 9.95041 3.24318 9.85282 3.14558C9.75523 3.04799 9.62735 2.99919 9.49947 2.99919C9.37159 2.99919 9.24371 3.04799 9.14611 3.14558C9.04852 3.24318 8.99972 3.37106 8.99972 3.49894V5.99933C8.99972 6.55124 9.44731 6.99882 9.99921 6.99882H12.4996C12.6275 6.99882 12.7554 6.95002 12.853 6.85243C12.9506 6.75484 12.9993 6.62696 12.9993 6.49907C12.9993 6.37119 12.9506 6.24331 12.853 6.14572C12.7554 6.04813 12.6275 5.99933 12.4996 5.99933H10.7076L14.8536 1.85332C15.0488 1.65813 15.0488 1.3418 14.8536 1.14661C14.6584 0.951428 14.3421 0.951428 14.1469 1.14661L9.99921 5.29094Z" /> <path d="M6.00039 5.29158V3.49921C6.00039 3.37131 6.04918 3.2434 6.14677 3.14579C6.24435 3.04818 6.37222 2.99937 6.50009 2.99937C6.62796 2.99937 6.75583 3.04818 6.85342 3.14579C6.951 3.2434 6.99979 3.37131 6.99979 3.49921V6.00011C6.99979 6.55212 6.55225 6.99979 6.00039 6.99979H3.50019C3.37232 6.99979 3.24445 6.95099 3.14687 6.85337C3.04928 6.75576 3.00049 6.62786 3.00049 6.49995C3.00049 6.37205 3.04928 6.24414 3.14687 6.14653C3.24445 6.04891 3.37232 6.00011 3.50019 6.00011H5.29206L1.14638 1.85327C0.951208 1.65804 0.951208 1.34164 1.14638 1.14642C1.34155 0.951194 1.65786 0.951194 1.85303 1.14642L6.00039 5.29158Z" /> </svg>

 ### 5. 引入其他字体
 &gt; 
 1、在公共文件夹创建一个font文件夹,把字体文件放进去,然后创建一个font.css 文件,并在css中以如下方式引入字体

@font-face {   font-family: 'Source Han Sans CN-Medium';   src: url('SOURCEHANSANSCN-MEDIUM.OTF');   font-weight: normal;   font-style: normal; }

 &gt; 2、在main.js引入font.css

import '@/assets/font/font.css'; //font

 &gt; 3、使用字体

body {   padding-bottom:0px;   -moz-osx-font-smoothing: grayscale;   -webkit-font-smoothing: antialiased;   text-rendering: optimizeLegibility;   font-family: Source Han Sans CN-Medium,Source Han Sans CN,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif; }

页面列表

ITEM_HTML