自定义指令

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

相关推荐
Evand J8 分钟前
【MATLAB例程】AOA与TDOA混合定位例程,适用于三维环境、4个锚点的情况,附下载链接
开发语言·matlab
机器视觉知识推荐、就业指导8 分钟前
Qt 与Halcon联合开发八: 结合Qt与Halcon实现海康相机采图显示(附源码)
开发语言·数码相机·qt
10年前端老司机9 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星9 分钟前
vue实现微信聊天emoji表情
前端·javascript
極光未晚12 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
Rrvive14 分钟前
原型与原型链到底是什么?
javascript
Heartoxx36 分钟前
c语言-指针与一维数组
c语言·开发语言·算法
hqxstudying38 分钟前
Java创建型模式---原型模式
java·开发语言·设计模式·代码规范
charlie1145141911 小时前
如何使用Qt创建一个浮在MainWindow上的滑动小Panel
开发语言·c++·qt·界面设计
極光未晚1 小时前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码