23年6月工作笔记整理(前端)

目录

  • 一、css相关
  • 二、vue相关
  • 三 、js相关

一、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类型

你可能感兴趣的:(工作需求复盘,笔记,前端)