关于element-plus的使用问题（持续更新）1.el-input的循环绑定ref dom 元素，以及自动获取焦点的问题

74 阅读 0 评论 49 点赞

我是靠谱客的博主认真乌龟，这篇文章主要介绍关于element-plus的使用问题（持续更新）1.el-input的循环绑定ref dom 元素，以及自动获取焦点的问题，现在分享给大家，希望可以做个参考。

关于element-plus的使用问题

1.el-input的循环绑定ref dom 元素，以及自动获取焦点的问题
2.message提示从屏幕中间出现，或者增加then回调
3.element-plus表格的简单封装

关于element-plus等UI框架简直是我css恐惧者的福音，在日常使用中较多，今天再用它写一个功能的时候，配合vue3的使用，出现一些不能及时得出思路的情况，特此记录一下，为了之后更快的开发效率。

1.el-input的循环绑定ref dom 元素，以及自动获取焦点的问题

使用场景是这样的，非富文本和非textarea的情况下，用户在输入玩之后回车可以切换到新的input框中继续输入。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
	<ul>
		<li
		   v-for="(g, i) in textList"
		   :key="i"
		   style="text-align: start"
		 >
		   <el-input
		     :ref="(el:HTMLElemnet) => { if(el) refList.push(el)}"
		     type="text"
		     v-model="g.text"
		     placeholder="请输入内容，按下回车键新增下一条内容"
		     @keyup.enter="switchNext(i)"
		   />
		 </li>
	</ul>
</template>
<script setup lang="ts" name="myTest">
	import {nextTick, ref} from "vue";
	// 储存内容，不建议直接使用Array<string>
	const textList = ref([
	 {text: ""}
	]);
	// 储存ref
	const refList= ref<Array<HTMLElement|null>>([]);
	const switchNext = (index: number) => {
	  // 先清空现有的，因为触发重新排列渲染的时候会再一次注入
	  refList.value = [];
	  textList.value.splice(++index, 0, {text: ""});
	  // 注入慢于当前代码执行，所以要进入下一个render后调用获取焦点的方法
	  nextTick(() => {
	  	// 参数含义是自动轮动到获取焦点的input的锚点
	    refList.value[index]?.focus({preventScroll: true});
      });
};
</script>

2.message提示从屏幕中间出现，或者增加then回调

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import {ElMessage } from 'element-plus';
enum MessageType{
  success = 'success',
  warning = 'warning',
  info = 'info',
  error = 'error',
}
const myMessage = (message: string, type: keyof typeof MessageType, duration?: number) => {
	const height = window.innerHeight;
	duration = duration || 2000;
	ElMessage({
		showClose: false,
		message: message,
		type: MessageType[type],
		duration: duration,
		center: true,
		offset: height/2-50
	});
};

const myMessageAfter =  (message: string, type: keyof typeof MessageType, duration?: number) => {
	return new Promise(resolve => {
		return myMessage(message, type, duration);
	});
};
export {myMessage, myMessageAfter};