vue引入emoji 表情包

vue引入emoji 表情包

npm下载

npm install --save emoji-mart-vue

template 应用

import { Picker } from "emoji-mart-vue"; //引入组件

	 

	components: { //注册组件,不能全局挂载

	    Picker

	  }

直接丢在输入框上边就行

<picker :include="['people','Smileys']" :showSearch="false" :showPreview="false" :showCategories="false" @select="addEmoji" />

输入框的变量 + 表情包文字

addEmoji(e){

	      this.content += e.native;

	    },

最后是 css 消除文字

.emoji-mart[data-v-7bc71df8] {

	  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

	  display: -ms-flexbox;

	  display: flex;

	  -ms-flex-direction: column;

	  flex-direction: column;

	  height: 420px;

	  color: #ffffff !important;

	  border: 1px solid #d9d9d9;

	  border-radius: 5px;

	  background: #fff;

	}

效果图

vue引入emoji 表情包

转载作品,原作者:,文章来源:https://www.cnblogs.com/majiayin/p/15797456.html

(0)
打赏 微信赞赏 微信赞赏 支付宝赞赏 支付宝赞赏
上一篇 2024-09-02 11:17
下一篇 2024-11-15 10:23

相关推荐

  • el-table打印PDF预览,表头错位的解决方案

    背景与需求 本例以vue2项目为例,vue3与react等同理。 有个项目需要打印的功能,网页使用vue2写的,主体内容为表格el-table,添加某个按钮,点击按钮时弹出PDF打…

    2024-12-23 前端开发
    1260
  • 鸿蒙开发的几种形式

    鸿蒙开发有多种开发模式,一种是使用ArkTS声明式,如果这种感觉还需要花时间学习的话,那么另一种就是前端HTML+CSS+JS的方式,类似vue+小程序的混合语法,此外还有一种则是低代码可视化形式,拖拖拽拽低代码的形式创建页面或应用,下面一个个来看。

    2024-01-11 鸿蒙开发
    1810
  • vue实现增加、修改、删除、查询、标记

    <template> <div> <div> <input type=”text” v-model=”prop.addname” ref=…

    Vue 2021-12-18
    2520

发表回复

登录后才能评论
扫码了解
扫码了解
分享本页
返回顶部