Compatible with Quasar UI v2 and Vue 3.
Short description of the component
First of all,please install v-viewer
npm i v-viewer
Install the App Extension.
OR:
Create and register a boot file:
import Vue from 'vue'
import Plugin from 'quasar-ui-fight-group'
import 'quasar-ui-fight-group/dist/index.css'
Vue.use(Plugin)OR:
<style src="quasar-ui-fight-group/dist/index.css"></style>
<script>
import { FightGroup } from 'quasar-ui-fight-group'
export default {
components: {
FightGroup
}
}
</script>import Vue from 'vue'
import Plugin from 'quasar-ui-fight-group'
import 'quasar-ui-fight-group/dist/index.css'
Vue.use(Plugin)OR:
<style src="quasar-ui-fight-group/dist/index.css"></style>
<script>
import { FightGroup } from 'quasar-ui-fight-group'
export default {
components: {
FightGroup
}
}
</script>Exports window.Quasar.
Add the following tag(s) after the Quasar ones:
<head>
<!-- AFTER the Quasar stylesheet tags: -->
<link href="https://cdn.jsdelivr.net/npm/quasar-ui-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-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-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 | 工具栏按钮 | [] |
| timeFormat | String | 时间格式 | 'MM-DD hh:mm' |
| timeStamp | Boolean | 聊天对话是否显示时间 | false |
| chatBgColor | String | 聊天对话背景颜色 | 'grey-2' |
| chatTextColor | String | 聊天对话文字颜色 | 'blcak' |
| avatarColor | String | 头像背景颜色 | 'secondary' |
| linkColor | String | 点位链接颜色 | 'blue' |
| toolBoxBgColor | String | 工具栏背景颜色 | '' |
| inputPlaceholder | String | 输入框占位符 | '' |
| toolIconColor | String | 工具栏旁边加号按钮颜色 | 'white' |
需要在全局样式中定义，否则会使用默认值
:root {
--color-avatar-text: white;//头像字体颜色
--color-text: white;//聊天对话框标题字体颜色
--toolBox-bg-color: #e9e9e9;//工具栏背景颜色
--toolBox-btn-color: #495060; //工具栏按钮字体颜色
--padding: 1rem;//内边距
--border-radius: 0.5rem;//外边框圆角
--font-size: 16px;//字体大小
}
消息中的头像默认截取为机构名称前四位，若没有机构名称但名称为系统默认头像会显示为系统，若都不存在则为"我"。
另外，我在消息头像中放置了插槽，可自定义消息头像样式，并且存在该插槽时，会默认覆盖掉原有的消息头像样式。插槽使用方式如下：
<template v-slot:avater>
//自定义的头像内容
<q-avatar color="primary" size="2rem" text-color="white" style="margin:0 0.5rem;">
<span class="name">我</span>
</q-avatar>
</template>
在不同消息类型中，已经对案件信息变更、处置要点、安全提示、警情快报、文字、图片、视频、点位8种类型进行了处理，其中消息类型为点位还抛出了一个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'必须存在，此时你还需要在组件上配置@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: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'
]
...
}