<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- vue --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- element引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- element引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <!--Axios--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="App"> <!-- 是否禁用 :disabled="true" --> <input v-if="flag === '有'" :disabled="true" class="but" type="file" /> <input v-else-if="flag === '无'" class="but" type="file" /> <input v-else :disabled="true" class="but" type="file" /> <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> <el-button slot="reference">hover 激活</el-button> </el-popover> <el-button type="primary" @click.prevent.stop="but1"> button </el-button> </div> </body> <script> var vm = new Vue({ el: "#App", data: { flag: '有', visible: false }, created() { this.initWebSocket() }, methods: { but1() { console.log('控制台输出') axios.get('https://ip.ws.126.net/ipquery') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); this.$notify({ title: '提示', message: 'message', type: 'warning', duration: 2000 }) }, initWebSocket() { const _this = this if (typeof (WebSocket) === 'undefined') { } else { const socketUrl = 'ws://127.0.0.1:9527/' this.socket = new WebSocket(socketUrl) this.searchDisabled = false // 监听socket打开 this.socket.onopen = function () { console.log('浏览器WebSocket已打开') _this.$notify({ title: '提示', message: '浏览器WebSocket已打开', type: 'warning', duration: 2000 }) } // 监听socket消息接收 this.socket.onmessage = function (evt) { console.log('onmessage:' + evt.data) } // 监听socket错误 this.socket.onerror = function () { console.log('监听socket错误') _this.searchDisabled = true } // 监听socket关闭 this.socket.onclose = function () { console.log('WebSocket已关闭') } } } } }) </script> </html>