fei
5 天以前 12c6f51d841e80bab7089725e63a034dbe6a294f
src/main.js
@@ -62,7 +62,43 @@
Vue.use(directive)
Vue.use(plugins)
DictData.install()
// 创建一个自定义指令
Vue.directive('auto-height', {
  bind(el, binding) {
    const minRows = binding.value?.minRows || 1;
    const maxRows = binding.value?.maxRows || 10;
    const resize = () => {
      // 重置高度
      el.style.height = 'auto';
      // 获取内容高度
      const scrollHeight = el.scrollHeight;
      const lineHeight = parseInt(getComputedStyle(el).lineHeight);
      // 计算需要的行数
      let rows = Math.floor(scrollHeight / lineHeight);
      rows = Math.max(minRows, Math.min(rows, maxRows));
      // 设置行数
      el.setAttribute('rows', rows);
      el.style.height = `${rows * lineHeight}px`;
    };
    // 监听输入事件
    el.addEventListener('input', resize);
    // 初始化时调整一次
    resize();
    // 保存resize函数以便卸载
    el._autoHeightResize = resize;
  },
  unbind(el) {
    el.removeEventListener('input', el._autoHeightResize);
    delete el._autoHeightResize;
  }
});
/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api