From 2069d53e9be24adec3c8d6717fd7317555bd9a52 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 02 七月 2024 23:02:51 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/feat/ws/index.vue | 122 +++++++++++++++++-----------------------
1 files changed, 51 insertions(+), 71 deletions(-)
diff --git a/src/views/demo/feat/ws/index.vue b/src/views/demo/feat/ws/index.vue
index 31deafd..8a407de 100644
--- a/src/views/demo/feat/ws/index.vue
+++ b/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,76 +50,58 @@
</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 state = reactive({
- server: 'ws://localhost:3300/test',
- sendValue: '',
- recordList: [] as { id: number; time: number; res: string }[],
- });
+ const InputTextArea = Input.TextArea;
- const { status, data, send, close, open } = useWebSocket(state.server, {
- autoReconnect: false,
- heartbeat: true,
- });
-
- watchEffect(() => {
- if (data.value) {
- try {
- const res = JSON.parse(data.value);
- state.recordList.push(res);
- } catch (error) {
- state.recordList.push({
- res: data.value,
- id: Math.ceil(Math.random() * 1000),
- time: new Date().getTime(),
- });
- }
- }
- });
-
- const getIsOpen = computed(() => status.value === 'OPEN');
- const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'));
-
- const getList = computed(() => {
- return [...state.recordList].reverse();
- });
-
- function handlerSend() {
- send(state.sendValue);
- state.sendValue = '';
- }
-
- function toggle() {
- if (getIsOpen.value) {
- close();
- } else {
- open();
- }
- }
- return {
- status,
- formatToDateTime,
- ...toRefs(state),
- handlerSend,
- getList,
- toggle,
- getIsOpen,
- getTagColor,
- };
- },
+ const state = reactive({
+ server: 'ws://localhost:3300/test',
+ sendValue: '',
+ recordList: [] as { id: number; time: number; res: string }[],
});
+
+ const { status, data, send, close, open } = useWebSocket(state.server, {
+ autoReconnect: false,
+ heartbeat: true,
+ });
+
+ watchEffect(() => {
+ if (data.value) {
+ try {
+ const res = JSON.parse(data.value);
+ state.recordList.push(res);
+ } catch (error) {
+ state.recordList.push({
+ res: data.value,
+ id: Math.ceil(Math.random() * 1000),
+ time: new Date().getTime(),
+ });
+ }
+ }
+ });
+
+ const getIsOpen = computed(() => status.value === 'OPEN');
+ const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red'));
+
+ const getList = computed(() => {
+ return [...state.recordList].reverse();
+ });
+
+ function handlerSend() {
+ send(state.sendValue);
+ state.sendValue = '';
+ }
+
+ function toggle() {
+ if (getIsOpen.value) {
+ close();
+ } else {
+ open();
+ }
+ }
</script>
--
Gitblit v1.9.3