v-removeAriaHidden

解决控制台报错

报错：Blocked aria-hidden on a ＜input＞ element because the element that just...

这个bug是最近才出现的，之前自己也这样写也没有问题，网上说是chrome浏览器升级出现的问题

报错信息：Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at w3c.github.io/aria/#aria-.... <input type="radio" aria-hidden="true" tabindex="-1" autocomplete="off" class="el-radio\_\_original" value="true">

html 复制代码

<el-radio-group v-model="ruleForm.isLimit" v-removeAriaHidden>
  <el-radio :value="2" :label="false" size="large">否</el-radio>
  <el-radio :value="1" :label="true" size="large">是</el-radio>
</el-radio-group>

源码主要内容

index.js

javascript 复制代码

export default {
  // 指令生命周期钩子函数
  bind(el, binding, vnode) {
    const ariaEls = el.querySelectorAll(".el-radio__original");
    ariaEls.forEach((item) => {
      item.removeAttribute("aria-hidden");
    });
  },
  inserted(el, binding, vnode) {
    // 元素插入到DOM中的操作逻辑
  },
  update(el, binding, vnode, oldVnode) {
    // 组件更新时的操作逻辑
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 组件更新完成后的操作逻辑
  },
  unbind(el, binding, vnode) {
    // 解绑时的清理逻辑
  },
};

v-specialCharacter

统一规则限制输入框输入的内容

这个可以做的更灵活点，利用传值，传入指定的正则规则限制输入框的内容

input 输入框限制输入特殊字符

html 复制代码

<el-input v-specialCharacter></el-input>

源码主要内容

index.js

javascript 复制代码

export default {
  // 指令生命周期钩子函数
  bind(el, binding, vnode) {
    console.log(el, binding, vnode);
    el.children[0].addEventListener("keyup", (e) => {
      const value = e.target.value.replace(
        /[^A-Za-z0-9\u4e00-\u9fa5,.，。]+/g,
        "",
      );

      el.children[0].value = value;
    });
  },
  inserted(el, binding, vnode) {
    // 元素插入到DOM中的操作逻辑
  },
  update(el, binding, vnode, oldVnode) {
    // 组件更新时的操作逻辑
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 组件更新完成后的操作逻辑
  },
  unbind(el, binding, vnode) {
    // 解绑时的清理逻辑
    // el.$inp.removeEventListener("keyup", el.$inp.handle);
  },
};

v-textareaAutoSize

解决 ElInput type 为 textarea 的时候打开 showWordLimt 的时候，数字会盖住输入的内容，不是很舒服

html 复制代码

<el-input v-textareaAutoSize  type="textarea"  show-word-limit></el-input>

源码主要内容

index.js

javascript 复制代码

import calcTextareaHeight from "./calcTextareaHeight.js";
export default {
  // 指令生命周期钩子函数
  bind(el, binding, vnode) {},
  inserted(el, binding, vnode) {
    // 元素插入到DOM中的操作逻辑
  },
  update(el, binding, vnode, oldVnode) {
    // 组件更新时的操作逻辑
    const result = calcTextareaHeight(el.__vue__.$refs["textarea"]);
    el.__vue__.$refs["textarea"].style.height = `${
      parseInt(result.height.replace("px", "")) + 32
    }px`;
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 组件更新完成后的操作逻辑
  },
  unbind(el, binding, vnode) {
    // 解绑时的清理逻辑
    // el.$inp.removeEventListener("keyup", el.$inp.handle);
  },
};

利用 element ui 自带的计算方法

calcTextareaHeight.js

javascript 复制代码

let hiddenTextarea;

const HIDDEN_STYLE = `
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important
`;

const CONTEXT_STYLE = [
  "letter-spacing",
  "line-height",
  "padding-top",
  "padding-bottom",
  "font-family",
  "font-weight",
  "font-size",
  "text-rendering",
  "text-transform",
  "width",
  "text-indent",
  "padding-left",
  "padding-right",
  "border-width",
  "box-sizing",
];

function calculateNodeStyling(targetElement) {
  const style = window.getComputedStyle(targetElement);

  const boxSizing = style.getPropertyValue("box-sizing");

  const paddingSize =
    parseFloat(style.getPropertyValue("padding-bottom")) +
    parseFloat(style.getPropertyValue("padding-top"));

  const borderSize =
    parseFloat(style.getPropertyValue("border-bottom-width")) +
    parseFloat(style.getPropertyValue("border-top-width"));

  const contextStyle = CONTEXT_STYLE.map(
    (name) => `${name}:${style.getPropertyValue(name)}`,
  ).join(";");

  return { contextStyle, paddingSize, borderSize, boxSizing };
}

export default function calcTextareaHeight(
  targetElement,
  minRows = 1,
  maxRows = null,
) {
  if (!hiddenTextarea) {
    hiddenTextarea = document.createElement("textarea");
    document.body.appendChild(hiddenTextarea);
  }

  let { paddingSize, borderSize, boxSizing, contextStyle } =
    calculateNodeStyling(targetElement);

  hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";

  let height = hiddenTextarea.scrollHeight;
  const result = {};

  if (boxSizing === "border-box") {
    height = height + borderSize;
  } else if (boxSizing === "content-box") {
    height = height - paddingSize;
  }

  hiddenTextarea.value = "";
  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;

  if (minRows !== null) {
    let minHeight = singleRowHeight * minRows;
    if (boxSizing === "border-box") {
      minHeight = minHeight + paddingSize + borderSize;
    }
    height = Math.max(minHeight, height);
    result.minHeight = `${minHeight}px`;
  }
  if (maxRows !== null) {
    let maxHeight = singleRowHeight * maxRows;
    if (boxSizing === "border-box") {
      maxHeight = maxHeight + paddingSize + borderSize;
    }
    height = Math.min(maxHeight, height);
  }
  result.height = `${height}px`;
  hiddenTextarea.parentNode &&
    hiddenTextarea.parentNode.removeChild(hiddenTextarea);
  hiddenTextarea = null;
  return result;
}

结合之前发布的自定义指令使用，简洁明了

自定义指令https://blog.csdn.net/paopao_pop/article/details/130748994?spm=1001.2014.3001.5501