mirror of
https://github.com/thousmile/molly-multi-tenant.git
synced 2025-12-30 04:32:26 +00:00
1.删除 hook-demo 目录
This commit is contained in:
WangChenChen
@@ -1,20 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useFetchSelect } from "@/hooks/useFetchSelect"
|
||||
import { getSelectDataApi } from "@/api/hook-demo/use-fetch-select"
|
||||
|
||||
const { loading, options, value } = useFetchSelect({
|
||||
api: getSelectDataApi
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>该示例是演示：通过 hook 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件</h4>
|
||||
<h5>Select 示例</h5>
|
||||
<el-select :loading="loading" v-model="value" filterable>
|
||||
<el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
|
||||
</el-select>
|
||||
<h5>Select V2 示例（如果数据量过多，可以选择该组件）</h5>
|
||||
<el-select-v2 :loading="loading" v-model="value" :options="options" filterable placeholder="请选择" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useFullscreenLoading } from "@/hooks/useFullscreenLoading"
|
||||
import { getSuccessApi, getErrorApi } from "@/api/hook-demo/use-fullscreen-loading"
|
||||
import { ElMessage } from "element-plus"
|
||||
|
||||
const svg = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
||||
`
|
||||
|
||||
const options = {
|
||||
text: "即将发生错误...",
|
||||
background: "#F56C6C20",
|
||||
svg,
|
||||
svgViewBox: "-10, -10, 50, 50"
|
||||
}
|
||||
|
||||
const querySuccess = async () => {
|
||||
// 注意：
|
||||
// 1. getSuccessApi 是一个函数而非函数调用
|
||||
// 2. 如需给 getSuccessApi 函数传递参数，请在后面的括号中进行（真正的 getSuccessApi 调用）
|
||||
const res = await useFullscreenLoading(getSuccessApi)([2, 3, 3])
|
||||
ElMessage.success(`${res.message}，传参为 ${res.data.list.toString()}`)
|
||||
}
|
||||
|
||||
const queryError = async () => {
|
||||
try {
|
||||
await useFullscreenLoading(getErrorApi, options)()
|
||||
} catch (err: any) {
|
||||
ElMessage.error(err.message)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>该示例是演示：通过将要执行的函数传递给 hook，让 hook 自动开启全屏 loading，函数执行结束后自动关闭 loading</h4>
|
||||
<el-button type="primary" @click="querySuccess">查询成功</el-button>
|
||||
<el-button type="danger" @click="queryError">查询失败</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
import { useWatermark } from "@/hooks/useWatermark"
|
||||
|
||||
const localRef = ref<HTMLElement | null>(null)
|
||||
const { setWatermark, clearWatermark } = useWatermark(localRef)
|
||||
const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark } = useWatermark()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>
|
||||
该示例是演示：通过调用 hook，开启或关闭水印，
|
||||
支持局部、全局、自定义样式（颜色、透明度、字体大小、字体、倾斜角度等），并自带防御（防删、防隐藏）和自适应功能
|
||||
</h4>
|
||||
<div ref="localRef" class="local" />
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="setWatermark('局部水印', { color: '#409eff' })">创建局部水印</el-button>
|
||||
<el-button type="warning" @click="setWatermark('没有防御功能的局部水印', { color: '#e6a23c', defense: false })">
|
||||
关闭防御功能
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearWatermark">清除局部水印</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">创建全局水印</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })"
|
||||
>
|
||||
关闭防御功能
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearGlobalWatermark">清除全局水印</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.local {
|
||||
height: 30vh;
|
||||
border: 2px dashed var(--el-color-primary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-button-group {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useFetchSelect } from "@/hooks/useFetchSelect"
|
||||
import { getSelectDataApi } from "@/api/hook-demo/use-fetch-select"
|
||||
|
||||
const { loading, options, value } = useFetchSelect({
|
||||
api: getSelectDataApi
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>该示例是演示：通过 hook 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件</h4>
|
||||
<h5>Select 示例</h5>
|
||||
<el-select :loading="loading" v-model="value" filterable>
|
||||
<el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
|
||||
</el-select>
|
||||
<h5>Select V2 示例（如果数据量过多，可以选择该组件）</h5>
|
||||
<el-select-v2 :loading="loading" v-model="value" :options="options" filterable placeholder="请选择" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useFullscreenLoading } from "@/hooks/useFullscreenLoading"
|
||||
import { getSuccessApi, getErrorApi } from "@/api/hook-demo/use-fullscreen-loading"
|
||||
import { ElMessage } from "element-plus"
|
||||
|
||||
const svg = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
||||
`
|
||||
|
||||
const options = {
|
||||
text: "即将发生错误...",
|
||||
background: "#F56C6C20",
|
||||
svg,
|
||||
svgViewBox: "-10, -10, 50, 50"
|
||||
}
|
||||
|
||||
const querySuccess = async () => {
|
||||
// 注意：
|
||||
// 1. getSuccessApi 是一个函数而非函数调用
|
||||
// 2. 如需给 getSuccessApi 函数传递参数，请在后面的括号中进行（真正的 getSuccessApi 调用）
|
||||
const res = await useFullscreenLoading(getSuccessApi)([2, 3, 3])
|
||||
ElMessage.success(`${res.message}，传参为 ${res.data.list.toString()}`)
|
||||
}
|
||||
|
||||
const queryError = async () => {
|
||||
try {
|
||||
await useFullscreenLoading(getErrorApi, options)()
|
||||
} catch (err: any) {
|
||||
ElMessage.error(err.message)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>该示例是演示：通过将要执行的函数传递给 hook，让 hook 自动开启全屏 loading，函数执行结束后自动关闭 loading</h4>
|
||||
<el-button type="primary" @click="querySuccess">查询成功</el-button>
|
||||
<el-button type="danger" @click="queryError">查询失败</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
import { useWatermark } from "@/hooks/useWatermark"
|
||||
|
||||
const localRef = ref<HTMLElement | null>(null)
|
||||
const { setWatermark, clearWatermark } = useWatermark(localRef)
|
||||
const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark } = useWatermark()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h4>
|
||||
该示例是演示：通过调用 hook，开启或关闭水印，
|
||||
支持局部、全局、自定义样式（颜色、透明度、字体大小、字体、倾斜角度等），并自带防御（防删、防隐藏）和自适应功能
|
||||
</h4>
|
||||
<div ref="localRef" class="local" />
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="setWatermark('局部水印', { color: '#409eff' })">创建局部水印</el-button>
|
||||
<el-button type="warning" @click="setWatermark('没有防御功能的局部水印', { color: '#e6a23c', defense: false })">
|
||||
关闭防御功能
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearWatermark">清除局部水印</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">创建全局水印</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })"
|
||||
>
|
||||
关闭防御功能
|
||||
</el-button>
|
||||
<el-button type="danger" @click="clearGlobalWatermark">清除全局水印</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.local {
|
||||
height: 30vh;
|
||||
border: 2px dashed var(--el-color-primary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-button-group {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user