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