2024年Web前端最新Vue自定义指令(2)，如何准备字节跳动的面试

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

按钮权限

import Vue from 'vue'
import router from '@/router'
import {btnPermissionCheck} from "@/network/common/common";
Vue.directive('permission', {
    inserted: async function(el, binding){
        el.style.display='none';
        const code = binding.value.code
        let show = binding.value.show//有的按钮需根据state/status判断是否展示，当不传值时默认显示，不这样的话所有按钮都会显示两遍
        if(show=== void 0)show=true

        const currentRight = router.currentRoute.meta;
        if(currentRight) {
            let res=await btnPermissionCheck({code:'99'+code,platformId:11,routeId:currentRight.routerId});
            if(show&&res.code===200&&res.data){
                el.style.display='inline-block';
            }
        }
    }
})

使用方法

<span  class="table_font_Btn" @click="handleRow('EDIT',record)" v-permission="{code:'11080303',show:record.status==0?true:false}">编辑</span>

输入数字

 Vue.directive('integer', {
      bind (el, binding, vnode) {
        var input = el.getElementsByTagName('input')[0]
        input.addEventListener('input', function () {
          var val = input.value
          var regex = /^[1-9]\d*$/
          if (!regex.test(val)) {
            input.value = val.replace(/[^\d]/g, '')
            vnode.context[binding.expression] = parseInt(input.value)
          } else {
            vnode.context[binding.expression] = parseInt(input.value)
          }
        })
      }
    })

省略 自定义指令

    Vue.directive('ellipsis', {
      inserted (el) {
        toolTip(el)
      },
      componentUpdated (el) {
        toolTip(el)
      },
      unbind () {
        const kxmTooltipDom = document.getElementById('kxm-tooltip');
        kxmTooltipDom && document.body.removeChild(kxmTooltipDom);
      }
    })


const toolTip = (el) => {
      const curStyle = window.getComputedStyle(el, '')
      const textSpan = document.createElement('span')
      textSpan.style.fontSize = curStyle.fontSize
      textSpan.style.fontWeight = curStyle.fontWeight
      textSpan.style.fontFamily = curStyle.fontFamily
      document.body.appendChild(textSpan)
      textSpan.innerHTML = el.innerText
      if (textSpan.offsetWidth > el.offsetWidth) {
        el.style.overflow = 'hidden'
        el.style.textOverflow = 'ellipsis'
        el.style.whiteSpace = 'nowrap'
        el.onmouseenter = (e) => {
          const kxmTooltipDom = document.createElement('div')
          kxmTooltipDom.style.cssText = `
          display: inline-block;
          max-width: 400px;
          max-height: 400px;
          position: absolute;
          top: ${e.clientY + 5}px;
          left: ${e.clientX}px;
          padding: 10px;
          overflow: auto;
          font-size: 14px;
          color: #fff;
          background: rgba(0, 0 , 0, .6);


### 结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![前端学习书籍导图-1](https://img-blog.csdnimg.cn/img_convert/b5ec187081e126e2330dc945061a5c6d.webp?x-oss-process=image/format,png)

总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-nnqMzWhF-1715440218572)]