1.1.0 • Published 4 years ago
vue-box-input v1.1.0
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 --saveYarn
$ yarn add vue-box-inputComponent 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