有网站模板怎么做网站,北京建机网站,男女做网站,百度相册登录入口需求#xff1a;
文本框仅用于显示展示数据并且用户可以进行复制#xff0c;并不会进行修改和编辑#xff0c;
注意点#xff1a;
1.首先且文本为多行。所以不能使用普通的el-input#xff0c;这种一行超出就会隐藏了#xff0c;如果多行超出行数也会隐藏#xff08;…需求
文本框仅用于显示展示数据并且用户可以进行复制并不会进行修改和编辑
注意点
1.首先且文本为多行。所以不能使用普通的el-input这种一行超出就会隐藏了如果多行超出行数也会隐藏或者显示…或者需要设置滚动条应该加一个 typetextarea’即可 el-input typetextarea / 2.文本框仅作展示数据普通情况下是可以输入的不可以用disabled关键字禁止输入这样一上去会有个标号只需要用 readonly关键字就好el-input typetextarea readonly/ 3.对于复制的图标应该放在文本内部的右上方。我试过后缀el-input typetextarea readonly suffix-iconel-icon-search/但是似乎只对文本框起作用对于textarea类型的没有作用位置。接着我尝试嵌入也就是
import { DocumentCopy } from element-plus/icons-vue
templatedivel-input typetextarea readonlyel-icon DocumentCopy //el-icon/el-input/div
template但是仍然不起作用 4.最后还是通过同级的方式
import { DocumentCopy } from element-plus/icons-vue
templatedivel-input typetextarea readonly/el-inputel-icon DocumentCopy //el-icon/div
/template
5.这样能看到图标了只不过在文本框的左下角
6.然后现在要做的就是移动到el-input里面的右上角先移动到右边float:right。
因为是兄弟元素相当于在空间上是同一层 解决方案是设置z-index:999;是的el-icon在上层后面经过测试可以不要因为不存在动画覆盖问题
7.为了移动到内部的上面使用定位如果使用fixed是固定定位是相对于整个窗口的倘若窗口进行缩放可能设置的margin-right就会跟着变所以应该使用相对定位相对于父元素div
import { DocumentCopy } from element-plus/icons-vue
templatediv styleposition:relativeel-input typetextarea readonly/el-inputel-icon stylefloat: right; position: absolute; right:10px; top: 10px DocumentCopy //el-icon/div
/template8.这样UI部分就完成了效果如下 绑定事件
我在搜索的过程中发现有些推荐了一个库vue-clipboard3,作为事件的复制可以参考下面
https://blog.csdn.net/LeoForBest/article/details/121581831
在npm官网查看包的使用https://www.npmjs.com/package/vue-clipboard3
逻辑代码就是这样 templatediv styleposition:relativeel-input typetextarea v-modelsourceAnswer :autosize{ minRows: 12, maxRows: 16 } placeholderthe answer will be there readonly/el-inputel-icon clickcopyAnswer(sourceAnswer) stylefloat: right; position: absolute; right:10px; top: 10px DocumentCopy //el-icon/div
/templatescript 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测试结果如下
ctrlc也可以粘贴在控制台上
样式就自己写和改啦~
