Vue图片与文字混输的实现方法

前言

用多了JQuery，习惯了使用JQuery的API操作DOM，几乎忘记了原生JS对DOM操作，今天在项目中遇到了文字和图片混输的情况，第一个想到的办法是用textarea实现，结果发现实现不了图片输入，然后想着找个富文本编辑器的插件实现，深思熟虑之后，我的需求好像也没那么复杂，不至于引用个插件，看了掘金的发布沸点功能，然后就模仿了其作法，于是就有了这篇文章的分享。先给大家展示下最后实现的效果😋

实现思路

  • 利用div的contenteditable属性,让div可编辑
  • 绑定ref属性，用于操作输入框元素
  • 图片点击时，获取图片地址，使用require转换图片地址
  • 创建img标签，赋值转换好的图片地址
  • 从refs对象中获取到输入框元素，赋值创建好的img标签

实现过程

声明div可编辑，监听回车键事件，关闭拼写检查，绑定ref方便获取当前元素<div class="input-panel" ref="msgInputContainer"

<div class="input-panel" ref="msgInputContainer" @keydown.enter.exact="sendMessage($event)"
   contenteditable="true" spellcheck="false"></div>

表情输入框绑定对应的事件<div class="item-panel" v-for="item in this.emojiList" :key="item.info">

<div class="item-panel" v-for="item in this.emojiList" :key="item.info">
  <img :src="require(`../assets/img/emoji/${item.src}`)" :alt="item.info"
     @mouseover="emojiConversion($event,'over',item.src,item.hover,item.info)"
     @mouseleave="emojiConversion($event,'leave',item.src,item.hover,item.info)"
     @click="emojiConversion($event,'click',item.src,item.hover,item.info)">
</div>

实现表情框图片点击事件

emojiConversion: function (event, status, path, hoverPath, info) {
  if (status === "over") {
    event.target.src = require(`../assets/img/emoji/${hoverPath}`);
  } else if (status === "click") {
    console.log(hoverPath);
    // 表情输入
    const imgSrc = require(`../assets/img/emoji/${hoverPath}`);
    const imgTag = document.createElement("img");
    imgTag.src = imgSrc;
    imgTag.alt = info;
    this.$refs.msgInputContainer.appendChild(imgTag);
  } else {
    event.target.src = require(`../assets/img/emoji/${path}`);
  }
}

踩坑记录

直接使用append()方法

公司项目一直用JQuery，类似的需求直接append，以为是js提供的方法，结果这里直接使用，答案很明显，直接将DOM字符串插入了输入框里🤣

手动实现字符串转dom

自己手动实现，不知道是不是自己写错了，结果也是行不通，如果有发现错误的朋友，欢迎评论区留言。

正确的实现方法

使用document.createElement创建img元素，然后使用js提供的src方法和alt方法直接赋值，使用appendChild赋值创建好的img元素。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • vue.js获得当前元素的文字信息方法

    1.获得当前点击的内容 <li @click="problem1"> 1. <span class="blue">关于公众号使用问题</span> <img src="../img/right.png" alt=""/> </li> 当我点击这个li标签的时候,我想要获得span里面的文字,可以使用这个方法: problem1: function(e){ consol

  • Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

    1 前言 1.1 业务场景 图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域. 由于浏览器的机制,使用 window.location.href 下载图片时,并不会保存到本地,会在浏览器打开. 2 实现原理 2.1 绘制画布 <el-dialog title="查看图片" :visible.sync="dialogJPG" append-to-body> <canvas id="mycanvas"

  • Vue实现点击后文字变色切换方法

    这里用文字举例,图片切换的原理也是一样的 大概思路是:用两个class相同的span分别是切换前后的文字,class相同主要是为了变换前后的文字位置相同.然后用click事件控制它们的显隐. 代码如下: HTML: <span class="response" v-show="!showCommentInput" @click="showCommentInput = !showCommentInput">回复</span>

  • vue组件实现文字居中对齐的方法

    vue组件实现文字居中对齐的方法

    继续学习Vue,这次是一个组件的制作过程 先让我们来看一下组件的预期效果 上图为公司自营的一个微信商城的某一部分截图,可以看到红框内部分的文字多行与单行是居中对齐的,我们现在要做的就是使用Vue把里边的文字模块制作成一个可以复用的组件. 首先我们先把css部分拿下来 css: .word-v-middle{ margin-bottom: 0; font-size: 12px; min-height: 31px; display: flex; align-items: center; justif

  • vue input实现点击按钮文字增删功能示例

    vue input实现点击按钮文字增删功能示例

    本文实例讲述了vue input实现点击按钮文字增删功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

  • Vue图片与文字混输的实现方法

    Vue图片与文字混输的实现方法

    前言 用多了JQuery,习惯了使用JQuery的API操作DOM,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,第一个想到的办法是用textarea实现,结果发现实现不了图片输入,然后想着找个富文本编辑器的插件实现,深思熟虑之后,我的需求好像也没那么复杂,不至于引用个插件,看了掘金的发布沸点功能,然后就模仿了其作法,于是就有了这篇文章的分享.先给大家展示下最后实现的效果

  • Vue实现图片与文字混输效果

    用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘记了原生JS对DOM操作,今天在项目中遇到了文字和图片混输的情况,第一个想到的办法是用 textarea 实现,结果发现实现不了图片输入,然后想着找个富文本编辑器的插件实现,深思熟虑之后,我的需求好像也没那么复杂,不至于引用个插件,看了 掘金 的发布沸点功能,然后就模仿了其作法,于是就有了这篇文章的分享.先给大家展示下最后实现的效果:yum: 实现思路 利用 div 的 contenteditable 属性,让div可编

  • vue中上传视频或图片或图片和文字一起到后端的解决方法

    Vue图片与文字混输的实现方法可以参考这篇文章 https://www.jb51.net/article/175669.htm vue中上传视频或图片或图片和文字一起到后端 1.上传图片或视频: 2.图片和文字一起传: 3预览上传的图片(通过监听change事件,解析上传的图片): 预览本地文件也可以通过HTML5的FileReader 4.文件上传,也可以先上传到第三方(如七牛云),再把七牛云返回的key值传给后端

  • vue图片裁剪插件vue-cropper使用方法详解

    vue图片裁剪插件vue-cropper使用方法详解

    本文实例为大家分享了vue图片裁剪插件vue-cropper的使用方法,供大家参考,具体内容如下 我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了.有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决.先介绍吧.效果是下面这样的, 我这里采用了4:3的固定比例进行裁剪,裁剪后的效果 但是裁剪后的图片路径是base64,超级长的路径,最终还是需要处理地址传给后端的,项目用oss处理图片,最终获得一个类似于aad68a8fd577464dbcdea

  • php给图片添加文字水印方法汇总

    1: 面向过程的编写方法 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image_type_to_extension($info[2],false); //动态的把图片导入内存中 $fun = "imagecreatefrom{$type}"; $image = $fun('001.png'); //指定字体颜色 $col = imagecolorallocateal

  • Django实现图片文字同时提交的方法

    本文实例讲述了Django实现图片文字同时提交的方法.分享给大家供大家参考.具体分析如下: jQuery为我们网站开发解决了很多问题,使我们的网站用户体验大大的提高了.举个简单的例子,我们用AJAX技术来实现对表单的异步提交,使用户在体验上有了很大的改观,用户在提交数据的同时还可以干一些其他的事情. 不过,今天在开发中遇到一个特别头痛的问题,刚开始不知道,以为可以实现,纠结了将近4个小时之久,但结果很是令人失望. 问题是这样的:为了提高用户体验,我决定使用AJAX异步提交,于是我用jQuery的

  • php面向对象与面向过程两种方法给图片添加文字水印

    目前绝大多数PHP程序员使用面向过程的方式,因为解析WEB页面本身就非常"过程化"(从一个标签到另一个标签).在HTML中嵌入过程处理代码是很直接自然的作法,所以PHP程序员通常使用这种方式. 如果你是刚接触PHP,用面向过程的风格来书写代码很可能是你唯一的选择.但是如果你经常上PHP论坛和新闻组的话,你应该会看到有关"对象"的文章.你也可能看到过如何书写面向对象的PHP代码的教程.或者你也可能下载过一些现成的类库,并尝试着去实例化其中的对象和使用类方法--尽管你可

  • java实现新浪微博Oauth接口发送图片和文字的方法

    本文实例讲述了java实现新浪微博Oauth接口发送图片和文字的方法.分享给大家供大家参考.具体如下: 基于网上很多人利用新浪api开发新浪微博客户端的时候遇到无法发图片的问题,很多人卡在了这一布.现将代码呈上,希望能帮到一些朋友. /** * 发表带图片的微博 * @param token * @param tokenSecret * @param aFile * @param status * @param urlPath * @return */ public String uploadS

随机推荐