零碎知识5

搞个锤子哟
89 阅读3分钟
  • user-select: none; //禁止鼠标选中
  • pointer-events: none; //常用于fix顶级遮罩层，使其不会阻碍下面元素的点击事件
  • 127.0.0.1等价于localhost 本地开的服务
  • background-image: url(~@/assets/pic1.jpg);//css里图片路径需要这样
  • el-input textarea时，外层盒子不能设置height 只能靠padding撑起。它自身也不能搞margin-bottom 否则行数多时 字会糊掉//也可尝试 父盒子padding-bottom 或自己的margin-bottom xxpx 增加切换奇偶 感觉像是某个尺寸导致无法合理分配

！交互与传参的设计模式

  • vue写的页面 某个功能块用到的数据都挂载到一个对象下面
  • 该对象里面 可能会含一些后端传参不需要的数据，只要数据量不大，无所谓，也不需要下面这种抽离，直接传就行
  • 若功能块数据对象里有数组之类的大数据量不需要给后端传的部分 再从上面那个对象里摘出来要传的值
  • 实践发现 下面这种抽离方法最省事
      clientPopData: {
       count: 0,
       nameArr: [],
       //--传给后端的部分
       id: null,
       pageIndex: 1,
       limit: 10,
     },
     
      const { id, pageIndex, limit } = this.clientPopData
     let param = { id, pageIndex, limit }

输入框搜索忽略大小写

computed里 初次过滤过的值再this.filterList里 通过关键字 再次过滤
    showList() {
     if (this.searchText) {
       return this.filterList.filter((el) => {
         let reg = new RegExp(this.searchText, 'i', 'g')
         // 通过备注 搜索对应的客户
         return reg.test(el.remark)
       })
     } else {
       return this.filterList
     }
   },
   
template:
<span class="name" v-html="light(item[mode[1]])"></span>

methods:
   light(val) {
     if (!this.searchText) {
       return val
     }
     let reg = new RegExp(this.searchText, 'i')
     let matchList = val.match(reg)
     var keyWord = `<span style="color:red;">${matchList[0]}</span>`
     return val.replace(reg, keyWord)
   },

想只限制输入框前面不能为空 后面可以有空格时

          <el-input v-else
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    resize="none"
                    :value="transTip"
                    @input="transTipInput"
                    maxlength="200"
                    show-word-limit
                    class="input"
                    ref="tipTextarea">
          </el-input>
          
     transTipInput(val) {
      console.log(val, 'keyup')
      if (/^(\s+)/.test(val) == true) {
        val = val.trim()
      }
      this.transTip = val
    },

常用的webpack配置

module.exports = {
  publicPath: 'bling',
  outputDir: "bling",
  productionSourceMap: false,
  /* 代码保存时进行eslint检测 */
  lintOnSave: false,
  // 后台配置cores时 不用管
  devServer: {
    disableHostCheck: true,
    // 需要内网 其他人访问时 看看自己vpn分配的ip 写到host里，再指定个port  开启服务
    host: '10.25.114.250',
    port: 2596,
    proxy: {
      '/test': {
        target: 'http://testapi.ggsq.com',
        changeOrigin: true, // 如果是跨域 需要添加 
        pathRewrite: {
          '/test': ''
        },
        // secure: false,
        // 控制台查看代理后的请求地址
        // logLevel: 'debug'
      }
    },
  }
}

关于打包时publicPath和outputDir

  • publicPath决定了打包时 静态资源引用路径的基础 一般写成绝对路径 publicPath:/viewer/
  • publicPath的设置得看后端要把包部署到哪儿，如果部署到服务器的某个路径下
  • outputDir看后端想要啥名，他部署暴露静态资源时路径里得写，和publicPath没啥关系
以node为例
//把source2文件夹下的静态文件暴露到 /source下  
//这种情况 就得设置  publicPath: "/source/", outputDir: "source2",
//----对应publicPath--------------对应outputDir
app.use('/source', express.static('./source2'))
//http://127.0.0.1:8088/source/todolist 访问该服务器暴露的静态文件夹下todolist里的index.html

input里光标所在处插入

//注意this.$refs.tipTextarea得到组件实例 实例.$el得到的是组件dom
      const $textArea = this.$refs.tipTextarea.$el.firstChild
      //有光标时
      if ($textArea.selectionStart || $textArea.selectionStart === 0) {
        var startPos = $textArea.selectionStart //选区开始位置
        var endPos = $textArea.selectionEnd //选区结束位置
        this.transTip =
          this.transTip.slice(0, startPos) +
          myValue +
          this.transTip.slice(endPos, $textArea.value.length)
        this.$nextTick(() => {
          $textArea.focus()
          // 增加文本后 光标移到新加的文本后面
          $textArea.setSelectionRange(
            endPos + myValue.length,
            endPos + myValue.length
          )
        })
      } else {
        // 无光标时，直接缀最后面
        this.transTip += myValue
      }

nrm管理npm的镜像源，nvm管理node的版本

使用npm或者pnpm不要用cnpm(注册的镜像源可能会变 也不直观)

  • npm i nrm -g
  • nrm ls //查看可用镜像源
  • nrm use taobao
  • nrm test taobao //看看镜像源的速度 78ms
  • npm config ls //查看当前npm的镜像源

通过nrm来控制npm的镜像，之后装包用npm指令就行

npm装包的指令

  • npm i xx //等同于 npm install xx -S 会存进package.json的dependencies里
  • npm i xx@1.1.1 //指定安装的版本//虽然package.json里是^2.5.3这种 实际以package-lock.json为准
  • npm i xx -D //devDependencies
  • npm uninstall xx //由于一个包还有它的很多依赖 在node_modules里平铺，只是删了package.json里的 并不干净。不要手动改package.json里的东西

import * as xx from '....'

// index.js
export function fn1(data){
  console.log(1)
}
export function fn2(data){
  console.log(2)
}

//使用--相当于把export的合并进一个对象
import * as Fn from './index.js'
Fn.fn1() 
Fn.fn2()

string.replace(Reg,str/fuc)

//把 "Doe, John" 转换为 "John Doe" 的形式：
name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

//把html转义替换 <html>"哈哈"&"heihei", => &lt;html&gt;&quot;哈哈&quot;&amp;&quot;heihei&quot;,
str.replace(/<|>|"|&/g, (match) => {
    const mapObj = {
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      '&': '&amp;',
    }
    return mapObj[match] ? mapObj[match] : ''
  })

el-table常见问题

  1. 如此可以使表格随页面高度动态计算 且表头固定
        <el-table :data="tableData"
                  style="width: 100%"
                  height="calc(100vh - 280px)">

2、使表格宽度随页面动态调整/控制表格颜色/hover时单元格颜色

      :deep(.el-table) {
        width: 100%;
        .el-table__header-wrapper table,
        .el-table__body-wrapper table {
          width: 100% !important;
        }
        .el-table__body,
        .el-table__footer,
        .el-table__header {
          table-layout: auto;
        }

        .el-table__header-wrapper {
          border-top: 1px solid #f2f2f2;
        }
        th.el-table__cell.is-leaf {
          border-bottom: 1px solid #f2f2f2;
        }

        .el-table__row:hover > td.el-table__cell {
          background-color: #e9f4fe;
        }
      }
avatar
文章
阅读
粉丝