Ben Lin
2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25
src/views/demo/feat/ws/index.vue
@@ -9,9 +9,7 @@
        <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>
@@ -22,7 +20,7 @@
        <InputTextArea
          placeholder="需要发送到服务器的内容"
          :disabled="!getIsOpen"
          v-model:value="sendValue"
          v-model:value="state.sendValue"
          allowClear
        />
@@ -52,21 +50,15 @@
    </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: '',
@@ -112,16 +104,4 @@
          open();
        }
      }
      return {
        status,
        formatToDateTime,
        ...toRefs(state),
        handlerSend,
        getList,
        toggle,
        getIsOpen,
        getTagColor,
      };
    },
  });
</script>