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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值