vue接收websocket消息通过element组件生成按钮弹窗

你可以通过如下代码实现：

首先，引入 element-ui 和 vue-native-websocket：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueNativeSock from 'vue-native-websocket';

然后，在 Vue 实例中添加如下代码：

Vue.use(ElementUI);

Vue.use(VueNativeSock, 'ws://your-websocket-server-address', {
reconnection: true,
format: 'json',
store: store,
});

在 data 中定义消息列表和弹窗状态：

data() {
return {
messages: [],
dialogVisible: false,
};
},

在 methods 中定义 websocket 监听函数，接收消息并将其添加到消息列表中，同时显示弹窗：

methods: {
onMessage(evt) {
const message = JSON.parse(evt.data);
this.$set(this.messages, this.messages.length, message);
this.dialogVisible = true;
},
},

最后，在 template 中显示消息列表和弹窗：

<template>
<div>
<el-button @click="dialogVisible = true">显示弹窗</el-button>
<el-dialog v-model="dialogVisible">
<el-table :data="messages">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="content" label="内容"></el-table-column>
</el-table>
</el-dialog>
</div>
</template>