vue-box-input
1.1.0 • Public • Published vue-box-input
A Vue.js component of chat input box
Features
- Supports Vue2
- Press 'shift + enter' to Change line
- Press 'enter' to send message
- Support 'paste event', we can get the image file and the text that is pasting in box.
- Support the cursor positioning when we insert Text or emoji
Installation
NPM
$ npm install vue-box-input --save
Yarn
$ yarn add vue-box-input
Component Attributes:
参数 |
说明 |
类型 |
默认值 |
必写 |
emoji |
可插入的表情包(emoji)字符串 |
String |
- |
false |
Component Methods:
参数 |
说明 |
类型 |
默认值 |
必写 |
input |
input事件 |
Function(val) |
- |
false |
image-paste |
剪贴板图片粘贴事件 |
Function(file) |
- |
false |
message-send |
消息发送事件 |
Function(text) |
- |
true |
clearMessage |
清空输入框中的信息 |
Function |
- |
false |
How To Use
Import:
import Vue from 'vue'
import VueBoxInput from 'vue-box-input'
Vue.use(VueBoxInput)
Component Use:
<vue-box-input
:emoji="emojiValue"
ref="chatBox"
@input="handleWordsInput"
@image-paste="handleImageFileGet"
@message-send="handleMessageSend"
>
</vue-box-input>
this.$refs.chatBox.clearMessage();
Update Log
- version 1.1.0 => add clearMessage function
- version 1.0.0 => add basic function of a chat input box
License
MIT
/vue-box-input/
//
Package Sidebar
Install
Weekly Downloads