Vue表情包输入组件

地址

http://npm.taobao.org/package/emoji-mart-vue;

安装

npm install --save emoji-mart-vue

组件

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

<template><div class="container"><!-- search: 'Search Results',recent: 'Frequently Used',people: 'Smileys & People',nature: 'Animals & Nature',foods: 'Food & Drink',activity: 'Activity',places: 'Travel & Places',objects: 'Objects',symbols: 'Symbols',flags: 'Flags',custom: 'Custom',--><textarea name="emoji" v-model="content" cols="30" rows="10"></textarea><picker:include="['people']"  //添加自己需要的表情类型:showSearch="false"    //搜索框显示:showPreview="false" :showCategories="false"@select="addEmoji"/></div>
</template>
<script>
import { Picker } from "emoji-mart-vue";
export default {data() {return {content: ""};},methods: {addEmoji(e) {this.content += e.native;}},created() {},mounted() {},components: {Picker}
};
</script>
<style scoped>
.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;
}
.text {display: block;margin: 0 auto;margin-bottom: 10px;width: 400px;resize: none;box-sizing: border-box;padding: 5px 10px;border-radius: 8px;
}
.text-place {height: 80px;box-sizing: border-box;padding: 5px 10px;border-radius: 8px;background: #ddd5d5;
}
.text-place p {display: flex;align-items: center;margin: 0;
}
</style>

以上就可以实现表情包功能拉

喜欢上方小程序,需要源码的,添加博主微信私信小编.

Vue表情包输入组件相关推荐

Vue 表情包输入组件
Emotion 一个用于vue的表情输入组件 https://gitee.com/jiangliyue/vue_expression_input_module.git index是使用示例,emoti ...
vue表情包公共组件（适用于聊天室）
组件内容 <template><div class="emoji-Bigbox"><el-scrollbar ref="emojiScrol ...
Vue 表情输入组件，微信face表情组件
VUE表情包输入组件,先来张成品图看看. 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧. 注意: 1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址 ...
浅谈Vue内置component组件的应用场景
官方的说明渲染一个"元组件"为动态组件.依 is 的值,来决定哪个组件被渲染.  & ...
如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
如何使用Vue集成其它UI组件前言一.Vant是什么? 二.基础环境准备 1.1 了解是根本 1.2 安装 1.3 引入组件 3.1 步骤一 3.2 步骤二 3.3 步骤三二.事件绑定 2.1 ...
Vue之单文件组件和脚手架
简介主要介绍单文件组件的定义和编写方法和脚手架相关知识介绍. 单文件组件的定义是一个文件只有一个组件,使用xxx.vue文件,这个文件是vue团队定义的一种文件类型. xxx.vue文件里面可以使用 ...
从零开始徒手撸一个vue的toast弹窗组件
相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...
SpringBoot + Vue 用户登入token 之租房管理系统后台模板
SpringBoot 项目构建:SpringBoot + MySQL8 + MyBatis-Plus + Redis +定时任务框架(elastic-job) + Spring Security + ...
vue基础二（组件）
组件组件组件的复用组件的注册组件名放置限制通过 Prop 向子组件传递数据单向数据流 poro的验证属性继承自定义事件插槽slot 普通插槽具名插槽默认插槽作用域插槽解构插 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...

Vue表情包输入组件

地址

安装

组件

Vue表情包输入组件相关推荐

最新文章

热门文章