调整配置弹窗 UI

This commit is contained in:
RockYang 2023-03-20 10:13:11 +08:00
parent aa3a38348f
commit 0ca104bac8
4 changed files with 35 additions and 32 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
web/public/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -1,22 +1,20 @@
<template> <template>
<div> <el-dialog
<el-dialog v-model="$props.show"
v-show="show" title="聊天配置"
title="聊天配置" width="30%"
width="30%" :before-close="beforeClose"
:before-close="beforeClose" >
> <span>正在努力开发中...</span>
<span>正在努力开发中...</span> <template #footer>
<template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="show = false">取消</el-button> <el-button @click="this.$emit('update:show', false)">取消</el-button>
<el-button type="primary" @click="show = false"> <el-button type="primary" @click="save">
保存 保存
</el-button> </el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</div>
</template> </template>
<script> <script>
@ -24,14 +22,20 @@ import {defineComponent} from "vue"
export default defineComponent({ export default defineComponent({
name: 'ConfigDialog', name: 'ConfigDialog',
data() { props: {
return { show: {
show: true type: Boolean,
default: true
} }
}, },
data() {
return {}
},
methods: { methods: {
beforeClose: function () { beforeClose: function () {
},
save: function () {
this.$emit('update:show', false);
} }
} }
}) })

View File

@ -17,20 +17,22 @@
<div class="input-box"> <div class="input-box">
<div class="input-container"> <div class="input-container">
<el-input <el-form ref="form">
v-model="inputValue" <el-input
:autosize="{ minRows: 1, maxRows: 10 }" v-model="inputValue"
v-on:keydown="inputKeyDown" :autosize="{ minRows: 1, maxRows: 10 }"
v-on:focus="focus" v-on:keydown="inputKeyDown"
type="textarea" v-on:focus="focus"
placeholder="Input any thing here..." type="textarea"
/> placeholder="Input any thing here..."
/>
</el-form>
</div> </div>
<div class="btn-container"> <div class="btn-container">
<el-row> <el-row>
<el-button type="success" class="send" :disabled="sending" v-on:click="sendMessage">发送</el-button> <el-button type="success" class="send" :disabled="sending" v-on:click="sendMessage">发送</el-button>
<el-button type="danger" class="config" circle @click="showDialog = true"> <el-button type="info" class="config" circle @click="showDialog = true">
<el-icon> <el-icon>
<Tools/> <Tools/>
</el-icon> </el-icon>
@ -41,7 +43,7 @@
</div><!-- end input box --> </div><!-- end input box -->
</div><!-- end container --> </div><!-- end container -->
<config-dialog v-model="showDialog"></config-dialog> <config-dialog v-model:show="showDialog"></config-dialog>
</div> </div>
</template> </template>
@ -114,12 +116,9 @@ export default defineComponent({
} }
}); });
socket.addEventListener('close', () => { socket.addEventListener('error', () => {
ElMessage.error('会话发生异常,请刷新页面后重试'); ElMessage.error('会话发生异常,请刷新页面后重试');
}); });
socket.addEventListener('error', event => {
ElMessage.error('WebSocket 连接发生错误: ' + event.message);
});
this.socket = socket; this.socket = socket;