https://github.com/jypblue/vue-box-input
A Vue.js component of chat input box
https://github.com/jypblue/vue-box-input
chatbox input vue
Last synced: 3 months ago
JSON representation
A Vue.js component of chat input box
- Host: GitHub
- URL: https://github.com/jypblue/vue-box-input
- Owner: jypblue
- Created: 2018-07-29T08:11:45.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T08:33:18.000Z (over 3 years ago)
- Last Synced: 2025-08-03T12:38:45.217Z (11 months ago)
- Topics: chatbox, input, vue
- Language: Vue
- Homepage:
- Size: 2.49 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-box-input
[](https://www.npmjs.com/package/vue-box-input) [](https://www.npmjs.com/package/vue-box-input) [](https://www.npmjs.com/package/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:
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](http://opensource.org/licenses/MIT)