23年6月工作笔记整理（前端）

一、css相关

1.不让选中文字的css设置，一般用于频繁点击的地方
user-select: none
2.css基础-特殊选择器
p:first-of-type是所有特定类型p的第一个子元素；只要是该类型元素的第一个就行，不要求是第一个子元素
span:first-child 匹配的是某父元素的第一个子元素，要求是第一个子元素且是span类型才会生效
附：相关博客学习
3.css中的var()函数
var(–name)，可以再data里写name，给name赋值
4.css变形效果的学习
css变形效果博客
5.在css中英文字符超出div的宽度时默认不会换行，需要设置一下word-wrap : break-word ;

二、vue相关

1.vue自定义指令介绍钩子函数和钩子参数
附：博客学习参考
例子：按钮权限控制指令

import store from '@/store'
/**
 * @description: 按钮权限逻辑
 * @param {*} el
 * @param {*} binding
 * @param {*} vnode
 * @author: Hemingway
 * @example: v-menu-btn:edit="'/system/permission-setting'"
 */
function checkPermission(el, binding, vnode) {
  const { arg, value } = binding
  const currentMenuBtnList = vnode.context.$route.meta.menuBtn
  const addRouteList = store.getters.addRouteList
  const judgeRoute = () => {
    if (
      value &&
      !addRouteList.map(route => route.fullPath).includes(value)
    ) {
      el.parentNode.removeChild(el)
    }
  }

  if (arg === 'redirect') {
    judgeRoute()
  } else {
    if (!currentMenuBtnList.map(btn => btn.code).includes(arg)) {
      el.parentNode.removeChild(el)
      return
    }
    judgeRoute()
  }
}

export default {
  inserted(el, binding, vnode) {
    checkPermission(el, binding, vnode)
  }
}

2.使用v-if的时候，注意父元素要保持不变，同时有v-for的话不能使用index作为key，容易报错；为了方便可直接使用v-show。
3.判断vue中slot里是否有内容：$slots.插槽名，默认是default

三 、js相关

1.类型转换
+能将字符串数字直接转为number类型
!!能将number类型直接转为boolean类型
!!+能将字符串转为boolean类型