Compatible with Quasar UI v2 and Vue 3.
Short description of the component
Install the App Extension.
OR:
Create and register a boot file:
import Vue from 'vue'
import Plugin from 'quasar-ui-quasar-fight-group'
import 'quasar-ui-quasar-fight-group/dist/index.css'
Vue.use(Plugin)OR:
<style src="quasar-ui-quasar-fight-group/dist/index.css"></style>
<script>
import { Component as FightGroup } from 'quasar-ui-quasar-fight-group'
export default {
components: {
FightGroup
}
}
</script>import Vue from 'vue'
import Plugin from 'quasar-ui-quasar-fight-group'
import 'quasar-ui-quasar-fight-group/dist/index.css'
Vue.use(Plugin)OR:
<style src="quasar-ui-quasar-fight-group/dist/index.css"></style>
<script>
import { Component as FightGroup } from 'quasar-ui-quasar-fight-group'
export default {
components: {
FightGroup
}
}
</script>Exports window.fightGroup.
Add the following tag(s) after the Quasar ones:
<head>
<!-- AFTER the Quasar stylesheet tags: -->
<link href="https://cdn.jsdelivr.net/npm/quasar-ui-quasar-fight-group/dist/index.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- at end of body, AFTER Quasar script(s): -->
<script src="https://cdn.jsdelivr.net/npm/quasar-ui-quasar-fight-group/dist/index.umd.min.js"></script>
</body>If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
<link href="https://cdn.jsdelivr.net/npm/quasar-ui-quasar-fight-group/dist/index.rtl.min.css" rel="stylesheet" type="text/css">$ yarn# start dev in SPA mode
$ yarn dev
# start dev in UMD mode
$ yarn dev:umd
# start dev in SSR mode
$ yarn dev:ssr
# start dev in Cordova iOS mode
$ yarn dev:ios
# start dev in Cordova Android mode
$ yarn dev:android
# start dev in Electron mode
$ yarn dev:electron$ yarn buildin the ui/dev/src/pages you can add Vue files to test your component/directive. When using yarn dev to build the UI, any pages in that location will automatically be picked up by dynamic routing and added to the test page.
If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the ui/build/script.javascript.js file, you will find a couple of commented out commands that call addAssets. Uncomment what you need and add your assets to have them be built and put into the ui/dist folder.
If you appreciate the work that went into this, please consider donating to Quasar.
MIT (c) Destini stdeng1224@163.com
| Name（属性名称） | Type（属性类型） | Description（属性描述） | Default（默认值） |
|---|---|---|---|
| messages | Array | 消息列表 | [] |
| userId | String | 传入的 userId,用于判断是否是发送人 | '' |
| isShowJC | Boolean | 名称是否显示机构 | false |
| buttons | Array | 工具栏按钮 | [] |
| isShowTime | Boolean | 是否显示时间 | false |
| timeFormat | String | 时间格式 | 'MM-DD hh:mm' |
| noMoreMessages | Boolean | 是否存在更多消息标识 | false |
| messageTextColor | String | 消息文本颜色 | 'black' |
| rightMsgBgColor | String | 发送者消息背景颜色 | 'green-4' |
| leftMsgBgColor | String | 接收者消息背景颜色 | 'blue-2' |
| inputBorderColor | String | 输入框背景颜色 | 'black' |
| addIconColor | String | 工具栏旁边加号按钮颜色 | 'black' |
| fileBaseUrl | String | 文件地址 | '' |
注意事项
当noMoreMessages为false时，必须配置loadChatList事件进行请求更多消息的处理，同时这个函数接收了一个参数done，执行相关操作后必须执行**done()**才能结束，否则会出现一直加载中且无法继续加载的问题。
当noMoreMessages为true时，不会出现加载效果或请求更多消息，注意此时请求返回的messages数组一定要足够大，可以在请求时设置pageSize为100及以上。
消息中的头像默认截取为机构名称前四位，若没有机构名称但名称为系统默认头像会显示为系统，若都不存在则为"我"。
另外，我在消息头像中放置了插槽，可自定义消息头像样式，并且存在该插槽时，会默认覆盖掉原有的消息头像样式。插槽使用方式如下：
<template v-slot:customAvatar>
//自定义的头像内容
<q-avatar color="primary" size="2rem" text-color="white" style="margin:0 0.5rem;">
<span class="name">我</span>
</q-avatar>
</template>
在不同消息类型中，已经对多种类型进行了处理，其中消息类型为点位还抛出了一个onNav事件需要使用者自行定义处理。
另外，我在消息类型的处理中放置了插槽，以便存在更多的消息类型去进行自定义样式，并且存在该插槽时，会覆盖掉原有的消息类型样式。
举个例子：如果此时有两个消息类型名分别为要点、提示，那么可以自定义消息类型代码如下
<template v-slot:要点="{ message }">
<div class="case-update" style="max-width: 16rem;">
<span>要点</span>
<div class="info" v-html="message" />
</div>
</template>
<template v-slot:提示="{ message }">
<div class="case-update" style="max-width: 16rem;">
<span>提示</span>
<div class="info" v-html="message" />
</div>
</template>
1.在工具栏中，我们默认配置了图片、视频、文件两种按钮，但需要你在使用组件时定义buttons属性时自行添加如下两个按钮对象，注意**type: 'image'或type: 'video'或type: 'file'必须存在，此时你还需要在组件上配置@getFile="你定义的函数"**去对已选择的图片或者视频文件进行处理。
<FightGroup :messages="messages" :buttons="buttons" @getFile="getFile" @onNav="onNav" @sendText="sendText" />
const buttons = [{
type: 'image', //类型
name: '图片', //显示在图标下方的名称
icon: 'bi-camera-fill', //图标
textColor: 'blue-9' //图标颜色
},
{
type: 'video',
name: '视频',
icon: 'bi-camera-reels-fill',
textColor: 'green-7',
}]
function getFile(e){
console.log('getFile', e.target.files[0]);
//e.target.files[0]为已选择的文件内容
}
2.在工具栏中，如果你需要自定义按钮，请模仿下面代码：
const buttons = [{
// type: 'location', //自定义按钮的类型可写可不写
name: '定位', //显示在图标下方的名称
icon: 'bi-geo-alt-fill', //图标
textColor: 'orange-8', //图标颜色
caseClick:
//按钮的自定义点击事件
() => {
console.log('点击了定位');
}
}]
3.在工具栏输入框中，抛出了一个sendText事件需要使用者自行定义处理
4.在工具栏中，对于输入框前面，我放置了插槽，以便存在更多自定义按钮进行处理。插槽使用方式如下：
<template v-slot:toolInputBefore>
//自定义按钮
<q-icon size="md" class="t-icon-[fluent--speaker-16-filled] cursor-pointer" color="white" />
</template>
5.在工具栏中，对于输入框非空时，右边的图标按钮我放置了插槽，以便存在更多自定义按钮进行处理，并且存在该插槽时，会覆盖掉原有的发送样式。插槽使用方式如下：
<template v-slot:toolBtn>
//自定义发送样式
<q-btn unelevated color="primary" icon="message"/>
<q-btn unelevated color="primary" icon="bi-soundwave" style="margin-left: 0.5rem;"/>
</template>
需要在quasar.config.js里面至少引入如下三种图标，否则可能会出现图标无法显示的清空
module.exports = function (ctx) {
return {
...
extras: [
'mdi-v5',
'material-icons',
'bootstrap-icons'
]
...
}