使用elementplus实现文本框的粘贴复制

需求:

文本框仅用于显示展示数据并且用户可以进行复制,并不会进行修改和编辑,

注意点:

1.首先且文本为多行。所以不能使用普通的el-input,这种一行超出就会隐藏了,如果多行超出行数也会隐藏(或者显示...,或者需要设置滚动条),应该加一个 type='textarea'即可
<el-input type='textarea' />

2.文本框仅作展示数据,普通情况下是可以输入的,不可以用disabled关键字禁止输入,这样一上去会有个标号,只需要用 readonly关键字就好<el-input type='textarea' readonly/>

3.对于复制的图标,应该放在文本内部的右上方。我试过后缀:<el-input type='textarea' readonly suffix-icon="el-icon-search"/>,但是似乎只对文本框起作用,对于textarea类型的没有作用位置。接着我尝试嵌入,也就是

js 复制代码
import { DocumentCopy } from '@element-plus/icons-vue'
<template>
	<div>
		<el-input type='textarea'  readonly>
			<el-icon> <DocumentCopy /></el-icon>
		</el-input>
	</div>
<template>

但是仍然不起作用

4.最后还是通过同级的方式

js 复制代码
import { DocumentCopy } from '@element-plus/icons-vue'
<template>
	<div>
		<el-input type='textarea'  readonly></el-input>
		<el-icon> <DocumentCopy /></el-icon>
	</div>
</template>

5.这样能看到图标了,只不过在文本框的左下角

6.然后现在要做的就是移动到el-input里面的右上角,先移动到右边:float:right。

因为是兄弟元素,相当于在空间上是同一层, 解决方案是设置z-index:999;,是的el-icon在上层(后面经过测试可以不要,因为不存在动画覆盖问题)

7.为了移动到内部的上面,使用定位,如果使用fixed是固定定位,是相对于整个窗口的,倘若窗口进行缩放可能设置的margin-right就会跟着变,所以应该使用相对定位,相对于父元素div

js 复制代码
import { DocumentCopy } from '@element-plus/icons-vue'
<template>
	<div style="position:relative">
		<el-input type='textarea'  readonly></el-input>
		<el-icon style="float: right; position: absolute; right:10px; top: 10px"> <DocumentCopy /></el-icon>
	</div>
</template>

8.这样UI部分就完成了,效果如下:

绑定事件

我在搜索的过程中发现有些推荐了一个库vue-clipboard3,作为事件的复制,可以参考下面:

https://blog.csdn.net/LeoForBest/article/details/121581831

在npm官网查看包的使用:https://www.npmjs.com/package/vue-clipboard3

逻辑代码就是这样:

js 复制代码
<template>
	<div style="position:relative">
		<el-input type='textarea' v-model="sourceAnswer" :autosize="{ minRows: 12, maxRows: 16 }" placeholder="the answer will be there"  readonly></el-input>
		<el-icon @click="copyAnswer(sourceAnswer)" style="float: right; position: absolute; right:10px; top: 10px"> <DocumentCopy /></el-icon>
	</div>
</template>

<script setup>
import { DocumentCopy } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()
const sourceAnswer = ref('这是测试的文本')

const copyAnswer = async(copyData) => {
  console.log('copyData',copyData)
  if (copyData === '') {
    ElMessage.warning('请输入文本再复制');
    return
  }
  try {
    await toClipboard(copyData)
    ElMessage.success(`复制: ${copyData} 成功!`);
  } catch (error) {
    ElMessage.warning(`复制失败: ${error} !`);
    console.error(error)
  }
}
<script setup>

测试结果如下:

ctrl+c也可以粘贴在控制台上

样式就自己写和改啦~

相关推荐
翻滚吧键盘27 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架