JwChat is an IM component developed with reference to AVue and element-ui, which only needs a label to present the communication interface. The communication interface includes common chat functions: sending text, voice, expression, picture, video, file, group, quick reply, etc.

Features

Simplified process : Simple and intuitive operation process
Clear and clear : the language is clear and the meaning is clear, so that users can quickly understand and make decisions
Help users identify : The interface is simple and straightforward, so that users can quickly identify rather than recall, reducing the memory burden of users
User decision : According to the scenario can give the user operation suggestions or security tips, but can not replace the user to make decisions
Results controllable : The user is free to perform actions, including undo, rollback, and termination of the current operation

Installation

Install

Install using yarn:

yarn add jwchat

Install using npm:

npm i jwchat

Students with poor network in China can use cnpm installation:

cnpm i jwchat -S

Use

1. Because this component is based on element-ui development. First we need to introduce element-ui

npm install element-ui

2. Introduce components into main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import JwChat from 'jwchat';

/* Versions before 0.2.041 need to introduce css */
// import 'jwchat/lib/JwChat.css'; 
Vue.use(JwChat)

3. Introduce

into *.vue

<JwChat-index
    :taleList="list"
    @enter="bindEnter"
    v-model="inputMsg"
    :showRightBox='true'
    scrollType="noscroll"
 />

Component

Basic components Chat

A minimalist chat box component based on Vue and ElementUI插图1

chat component interface

A minimalist chat box component based on Vue and ElementUI插图2

Right column – imitation QQ group

A minimalist chat box component based on Vue and ElementUI插图3

Quick reply component

A minimalist chat box component based on Vue and ElementUI插图4

User component

A minimalist chat box component based on Vue and ElementUI插图5

empty component

A minimalist chat box component based on Vue and ElementUI插图6

You can read more on your own.

资源下载此资源为免费资源立即下载

Telegram:@John_Software

collect(0) Like (0)

Disclaimer: This article is published by a third party and represents the views of the author only and has nothing to do with this website. This site does not make any guarantee or commitment to the authenticity, completeness and timeliness of this article and all or part of its content, please readers for reference only, and please verify the relevant content. The publication or republication of articles by this website for the purpose of conveying more information does not mean that it endorses its views or confirms its description, nor does it mean that this website is responsible for its authenticity.

systemhere Free source code A minimalist chat box component based on Vue and ElementUI https://www.systemhere.com/kyym/a-minimalist-chat-box-component-based-on-vue-and-elementui.html

lllll

Share free open-source source code

Previous article： TCM image recognition system (APP + server)

Next article： Antmove (Chinese: ants move) quick small program conversion tool

Q&A

What is the delivery method?

1, automatic: after taking the photo, click the (download) link to download; 2. Manual: After taking the photo, contact the seller to issue it or contact the official to find the developer to ship.

View details

How long is the trading cycle?

1, the default transaction cycle of the source code: manual delivery of goods for 1-3 days, and the user payment amount will enter the platform guarantee until the completion of the transaction or 3-7 days can be issued, in case of disputes indefinitely extend the collection amount until the dispute is resolved or refunded!

View details

Matters needing attention

1. Heptalon will permanently archive the process of trading between the two parties and the snapshots of the traded goods to ensure that the transaction is true, effective and safe! 2, Seven PAWS can not guarantee such as "permanent package update", "permanent technical support" and other similar transactions after the merchant commitment, please identify the buyer; 3, in the source code at the same time there is a website demonstration and picture demonstration, and the site is inconsistent with the diagram, the default according to the diagram as the dispute evaluation basis (except for special statements or agreement); 4, in the absence of "no legitimate basis for refund", the commodity written "once sold, no support for refund" and other similar statements, shall be deemed invalid; 5, before the shooting, the transaction content agreed by the two parties on QQ can also be the basis for dispute judgment (agreement and description of the conflict, the agreement shall prevail); 6, because the chat record can be used as the basis for dispute judgment, so when the two sides contact, only communicate with the other party on the QQ and mobile phone number left on the systemhere, in case the other party does not recognize self-commitment. 7, although the probability of disputes is very small, but be sure to retain such important information as chat records, mobile phone messages, etc., in case of disputes, it is convenient for seven PAWS to intervene in rapid processing.

View details

Systemhere declaration

1. As a third-party intermediary platform, Qichou protects the security of the transaction and the rights and interests of both buyers and sellers according to the transaction contract (commodity description, content agreed before the transaction); 2, non-platform online trading projects, any consequences have nothing to do with mutual site; No matter the seller for any reason to require offline transactions, please contact the management report.

View details