| | |
| | | <hr class="my-4" /> |
| | | |
| | | <div class="flex"> |
| | | <a-input v-model:value="server" disabled> |
| | | <template #addonBefore> 服务地址 </template> |
| | | </a-input> |
| | | <a-input v-model:value="state.server" addon-before="服务地址" disabled /> |
| | | <a-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle"> |
| | | {{ getIsOpen ? '关闭连接' : '开启连接' }} |
| | | </a-button> |
| | |
| | | <InputTextArea |
| | | placeholder="需要发送到服务器的内容" |
| | | :disabled="!getIsOpen" |
| | | v-model:value="sendValue" |
| | | v-model:value="state.sendValue" |
| | | allowClear |
| | | /> |
| | | |
| | |
| | | </div> |
| | | </PageWrapper> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, reactive, watchEffect, computed, toRefs } from 'vue'; |
| | | <script lang="ts" setup> |
| | | import { reactive, watchEffect, computed } from 'vue'; |
| | | import { Tag, Input } from 'ant-design-vue'; |
| | | import { PageWrapper } from '/@/components/Page'; |
| | | import { PageWrapper } from '@/components/Page'; |
| | | import { useWebSocket } from '@vueuse/core'; |
| | | import { formatToDateTime } from '/@/utils/dateUtil'; |
| | | import { formatToDateTime } from '@/utils/dateUtil'; |
| | | |
| | | export default defineComponent({ |
| | | components: { |
| | | PageWrapper, |
| | | [Input.name]: Input, |
| | | InputTextArea: Input.TextArea, |
| | | Tag, |
| | | }, |
| | | setup() { |
| | | const InputTextArea = Input.TextArea; |
| | | |
| | | const state = reactive({ |
| | | server: 'ws://localhost:3300/test', |
| | | sendValue: '', |
| | |
| | | open(); |
| | | } |
| | | } |
| | | return { |
| | | status, |
| | | formatToDateTime, |
| | | ...toRefs(state), |
| | | handlerSend, |
| | | getList, |
| | | toggle, |
| | | getIsOpen, |
| | | getTagColor, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |