增加 vue hooks plus 插件示例

Author: hooray

package.json

@@ -56,6 +56,7 @@
     "vue": "^3.4.21",
     "vue-currency-input": "^3.1.0",
     "vue-esign": "^1.1.4",
+    "vue-hooks-plus": "^1.8.9",
     "vue-m-message": "^4.0.2",
     "vue-router": "^4.3.0",
     "vue3-count-to": "^1.1.2",

pnpm-lock.yaml

@@ -14,6 +14,15 @@ const routes: RouteRecordRaw = {
     icon: 'i-clarity:plugin-outline-alerted',
   },
   children: [
+    {
+      path: 'hooksplus',
+      name: 'pluginExampleHooksPlus',
+      component: () => import('@/views/plugin_example/hooks.plus.vue'),
+      meta: {
+        title: 'VueHooks Plus',
+        icon: 'https://inhiblabcore.github.io/docs/hooks/logo.svg',
+      },
+    },
     {
       path: 'qrcode',
       name: 'pluginExampleQrcode',

src/router/modules/plugin.example.ts

@@ -0,0 +1,78 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script lang="ts" setup>
+import { useRequest } from 'vue-hooks-plus'
+import Alert from './components/alert.vue'
+
+function getUsername(): Promise<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(String(Date.now()))
+    }, 1000)
+  })
+}
+
+const time = ref(900)
+
+const computedTime = computed(() => time.value + 100)
+
+const { data, run, loading, cancel } = useRequest(() => getUsername(), {
+  manual: true,
+  pollingInterval: computedTime,
+  pollingWhenHidden: false,
+})
+
+function start() {
+  run()
+}
+
+function update() {
+  time.value += 100
+}
+
+function open(url: string) {
+  window.open(url, '_blank')
+}
+</script>
+
+<template>
+  <div>
+    <Alert />
+    <PageHeader title="VueHooks Plus">
+      <template #content>
+        <p>提供基础和高级的 hook ，高性能逻辑的抽象封装，满足大量场景，更多 API 和例子请查看 VueHooks Plus 官网。</p>
+        <p style="margin-bottom: 0;">
+          安装命令：<ElTag>pnpm add vue-hooks-plus</ElTag>
+        </p>
+      </template>
+      <ElButton @click="open('https://github.com/InhiblabCore/vue-hooks-plus')">
+        <template #icon>
+          <SvgIcon name="i-ep:link" />
+        </template>
+        访问 VueHooks Plus
+      </ElButton>
+    </PageHeader>
+    <PageMain title="轮询">
+      <div class="mb-4">
+        Data：<span>{{ loading ? 'loading' : data }}</span>
+      </div>
+      <div class="mb-4">
+        PollingInterval：{{ computedTime }}ms
+      </div>
+      <div>
+        <el-button @click="start()">
+          Start
+        </el-button>
+        <el-button @click="update()">
+          time + 100ms
+        </el-button>
+        <el-button @click="cancel()">
+          Stop
+        </el-button>
+      </div>
+    </PageMain>
+  </div>
+</template>