1.删除 hook-demo 目录

This commit is contained in:
WangChenChen
2023-11-16 21:10:49 +08:00
parent e2b1e420f9
commit 6548d1017e
6 changed files with 0 additions and 228 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>