mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 01:17:23 +08:00
chore: 撤销更改
This commit is contained in:
fxzer
parent
d685a18b9e
commit
f97eefb898
7
src/components/ReCodePath/index.ts
Normal file
7
src/components/ReCodePath/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { withInstall } from "@pureadmin/utils";
|
||||
import reCodePath from "./src/index.vue";
|
||||
|
||||
/** 代码位置组件 */
|
||||
export const ReCodePath = withInstall(reCodePath);
|
||||
|
||||
export default ReCodePath;
|
||||
39
src/components/ReCodePath/src/index.vue
Normal file
39
src/components/ReCodePath/src/index.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute } from "vue-router";
|
||||
import { defineProps, computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
path?: string; // 自定义路径
|
||||
isDir?: boolean; // 是否目录
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const rotue = useRoute();
|
||||
|
||||
const title = computed(() => {
|
||||
return t(rotue.meta.title);
|
||||
});
|
||||
|
||||
const path = computed(() => {
|
||||
return props.path || (props.isDir ? rotue.path : rotue.path + ".vue");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="font-medium">
|
||||
<slot name="title">
|
||||
{{ title }}
|
||||
</slot>
|
||||
</p>
|
||||
|
||||
<el-link
|
||||
class="mt-2"
|
||||
:href="`https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/${path}`"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views{{ path }}
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/ripple",
|
||||
path: "/able/ripple",
|
||||
name: "Ripple",
|
||||
component: () => import("@/views/able/ripple.vue"),
|
||||
meta: {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
import ReBarcode from "@/components/ReBarcode";
|
||||
|
||||
defineOptions({
|
||||
@ -33,24 +34,21 @@ const barcodes = [
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
条形码（基于
|
||||
<el-link
|
||||
href="https://lindell.me/JsBarcode/"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
JsBarcode
|
||||
</el-link>
|
||||
生成）
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/barcode.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/barcode.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<div>
|
||||
条形码（基于
|
||||
<el-link
|
||||
href="https://lindell.me/JsBarcode/"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
JsBarcode
|
||||
</el-link>
|
||||
生成）
|
||||
</div>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-row :gutter="12">
|
||||
<template v-for="(item, index) in barcodes" :key="index">
|
||||
|
||||
@ -104,25 +104,20 @@ function addDanmu() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
弹幕组件，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vue3-danmaku
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/danmaku
|
||||
</el-link>
|
||||
<ReCodePath is-dir>
|
||||
<template #title>
|
||||
<span>
|
||||
弹幕组件，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vue3-danmaku
|
||||
</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div class="flex gap-5">
|
||||
<vue-danmaku
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { message } from "@/utils/message";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
import { debounce, throttle } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
@ -20,13 +21,8 @@ const throttleClick = throttle(handle);
|
||||
<el-card class="mb-5" shadow="never">
|
||||
<template #header>
|
||||
<p class="font-medium">防抖：debounce</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/debounce.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/debounce.vue
|
||||
</el-link>
|
||||
|
||||
<ReCodePath path="/able/debounce.vue" />
|
||||
</template>
|
||||
<div class="mb-5">
|
||||
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
|
||||
|
||||
@ -55,16 +55,7 @@ function onReset() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">自定义防抖、截流、文本复制、长按指令</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/directives.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/directives.vue
|
||||
</el-link>
|
||||
</div>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<div class="mb-2">
|
||||
防抖指令（连续输入，只会执行第一次点击事件，立即执行）
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
import {
|
||||
downloadByOnlineUrl,
|
||||
downloadByBase64,
|
||||
@ -28,14 +29,7 @@ function down() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<p class="font-medium">文件下载功能</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/download.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/download.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<div class="flex flex-wrap">
|
||||
<el-button
|
||||
|
||||
@ -56,25 +56,22 @@ onMounted(() => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
拖拽组件，采用开源的
|
||||
<el-link
|
||||
href="https://sortablejs.github.io/vue.draggable.next/#/simple"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vuedraggable
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/draggable.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/draggable.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
拖拽组件，采用开源的
|
||||
<el-link
|
||||
href="https://sortablejs.github.io/vue.draggable.next/#/simple"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vuedraggable
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div class="drag-container">
|
||||
<!-- grid列表拖拽 -->
|
||||
|
||||
@ -71,22 +71,20 @@ const exportExcel = () => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/SheetJS/sheetjs"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
导出Excel
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/excel.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/excel.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span class="font-medium">
|
||||
导出Excel，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/SheetJS/sheetjs"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
SheetJS
|
||||
</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-button type="primary" @click="exportExcel">导出Excel</el-button>
|
||||
<div class="h-[25rem] mt-3">
|
||||
|
||||
@ -34,22 +34,19 @@ const load = () => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/yujinpan/el-table-infinite-scroll"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
表格无限滚动
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/infinite-scroll.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/infinite-scroll.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/yujinpan/el-table-infinite-scroll"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
表格无限滚动
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
|
||||
<el-table
|
||||
|
||||
@ -24,18 +24,7 @@ const dataProps = {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">
|
||||
扩展 Elemenet Plus 的树形组件包括虚拟树组件，支持连接线
|
||||
</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/line-tree.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/line-tree.vue
|
||||
</el-link>
|
||||
</div>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
|
||||
<el-row :gutter="24">
|
||||
|
||||
@ -8,6 +8,7 @@ import { extractPathList, deleteChildren } from "@/utils/tree";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
|
||||
import NodeTree from "@iconify-icons/ri/node-tree";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "MenuTree"
|
||||
@ -45,27 +46,22 @@ const filterMethod = (query: string, node: treeNode) => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
菜单树结构（采用 Element Plus 的
|
||||
<el-link
|
||||
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon(NodeTree)"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
Tree V2
|
||||
</el-link>
|
||||
组件并支持国际化）
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/menu-tree.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/menu-tree.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span class="font-medium">
|
||||
菜单树结构（采用 Element Plus 的
|
||||
<el-link
|
||||
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon(NodeTree)"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
Tree V2
|
||||
</el-link>
|
||||
组件并支持国际化）
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="query"
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
// vue 3 + vite use MQTT.js refer to https://github.com/mqttjs/MQTT.js/issues/1269
|
||||
import * as mqtt from "mqtt/dist/mqtt.min";
|
||||
import { reactive, ref, onUnmounted } from "vue";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
||||
const port = protocol === "wss" ? 8084 : 8083;
|
||||
@ -190,34 +191,31 @@ onUnmounted(() => {
|
||||
<template>
|
||||
<el-card shadow="never" :body-style="{ padding: '20px' }">
|
||||
<template #header>
|
||||
<div>
|
||||
基于
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="https://github.com/mqttjs/MQTT.js"
|
||||
target="_blank"
|
||||
>
|
||||
MQTT.js
|
||||
</el-link>
|
||||
和 免费的公共MQTT代理
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="broker.emqx.io"
|
||||
target="_blank"
|
||||
>
|
||||
EMQX
|
||||
</el-link>
|
||||
实现的一套 MQTT 客户端
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/mqtt-client.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/mqtt-client.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<div>
|
||||
基于
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="https://github.com/mqttjs/MQTT.js"
|
||||
target="_blank"
|
||||
>
|
||||
MQTT.js
|
||||
</el-link>
|
||||
和 免费的公共MQTT代理
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
href="broker.emqx.io"
|
||||
target="_blank"
|
||||
>
|
||||
EMQX
|
||||
</el-link>
|
||||
实现的一套 MQTT 客户端
|
||||
</div>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<el-card shadow="never">
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import VuePdfEmbed from "vue-pdf-embed";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Pdf"
|
||||
@ -37,22 +38,18 @@ const onPrint = () => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/hrynko/vue-pdf-embed"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
PDF预览
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pdf.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/pdf.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
PDF预览 基于
|
||||
<el-link
|
||||
href="https://github.com/hrynko/vue-pdf-embed"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
vue-pdf-embed
|
||||
</el-link>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div
|
||||
v-loading="loading"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { html } from "pinyin-pro";
|
||||
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
defineOptions({
|
||||
name: "Pinyin"
|
||||
});
|
||||
@ -9,16 +9,7 @@ defineOptions({
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">汉语拼音</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pinyin.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/pinyin.vue
|
||||
</el-link>
|
||||
</div>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<p v-html="html('带 音 调')" />
|
||||
<p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />
|
||||
|
||||
@ -98,13 +98,7 @@ const tableData: User[] = [
|
||||
打印
|
||||
</el-button>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/print"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/print
|
||||
</el-link>
|
||||
<ReCodePath is-dir />
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { ref, unref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import ReQrcode from "@/components/ReQrcode";
|
||||
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
defineOptions({
|
||||
name: "QrCode"
|
||||
});
|
||||
@ -25,24 +25,21 @@ const disabledClick = () => {
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
二维码（基于
|
||||
<el-link
|
||||
href="https://github.com/soldair/node-qrcode"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
qrcode
|
||||
</el-link>
|
||||
生成）
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/qrcode.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/qrcode.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<div class="font-medium">
|
||||
二维码（基于
|
||||
<el-link
|
||||
href="https://github.com/soldair/node-qrcode"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
qrcode
|
||||
</el-link>
|
||||
生成）
|
||||
</div>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-row :gutter="20" justify="space-between">
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
defineOptions({
|
||||
name: "Ripple"
|
||||
});
|
||||
@ -7,14 +8,7 @@ defineOptions({
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<p class="font-medium">波纹(Ripple)</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/ripple.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/ripple.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<div class="mb-5">组件中的波纹</div>
|
||||
<el-alert
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Mint from "mint-filter";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Sensitive"
|
||||
@ -20,16 +21,7 @@ function onInput() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">敏感词过滤</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/sensitive.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/sensitive.vue
|
||||
</el-link>
|
||||
</div>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<div class="flex flex-wrap gap-2 my-2">
|
||||
<span>自定义敏感词</span>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { TypeIt, type TypeItOptions } from "@/components/ReTypeit";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Typeit"
|
||||
@ -13,16 +14,7 @@ const options: TypeItOptions = {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">打字机组件</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/typeit.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/typeit.vue
|
||||
</el-link>
|
||||
</div>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<TypeIt :options="options" />
|
||||
</el-card>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Vcode from "vue3-puzzle-vcode";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
const isShow = ref(true);
|
||||
|
||||
@ -16,22 +17,19 @@ function onFail() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
拼图人机验证、右滑拼图验证
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/verify.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/verify.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<div class="font-medium">
|
||||
拼图人机验证、右滑拼图验证 基于
|
||||
<el-link
|
||||
href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>vue3-puzzle-vcode
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
|
||||
<Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
|
||||
|
||||
@ -134,13 +134,7 @@ onBeforeUnmount(() => {
|
||||
工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
|
||||
</p>
|
||||
</span>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video-frame"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/video-frame
|
||||
</el-link>
|
||||
<ReCodePath is-dir />
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap">
|
||||
|
||||
@ -3,6 +3,7 @@ import { onMounted } from "vue";
|
||||
import { deviceDetection } from "@pureadmin/utils";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import VideoPlay from "@iconify-icons/ep/video-play";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
import Player from "xgplayer";
|
||||
import "xgplayer/dist/index.min.css";
|
||||
@ -35,26 +36,21 @@ onMounted(() => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
视频组件，采用开源的
|
||||
<el-link
|
||||
href="https://v3.h5player.bytedance.com/"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon(VideoPlay)"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
西瓜播放器
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/video.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span class="font-medium">
|
||||
视频组件，采用开源的
|
||||
<el-link
|
||||
href="https://v3.h5player.bytedance.com/"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon(VideoPlay)"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
西瓜播放器
|
||||
</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div id="mse" />
|
||||
</el-card>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
|
||||
import { useWatermark } from "@pureadmin/utils";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "WaterMark"
|
||||
@ -34,8 +35,8 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-link
|
||||
href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
|
||||
target="_blank"
|
||||
@ -43,15 +44,8 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
页面水印
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/watermark.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/watermark.vue
|
||||
</el-link>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-space wrap class="!mb-2">
|
||||
<span> 请输入要创建水印的值：</span>
|
||||
|
||||
@ -78,28 +78,23 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
音频可视化，采用开源的
|
||||
<el-link
|
||||
href="https://wavesurfer-js.org/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
wavesurfer.js
|
||||
</el-link>
|
||||
<span class="text-[red]">
|
||||
（温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您）
|
||||
<ReCodePath is-dir>
|
||||
<template #title>
|
||||
<span>
|
||||
音频可视化，采用开源的
|
||||
<el-link
|
||||
href="https://wavesurfer-js.org/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
wavesurfer.js
|
||||
</el-link>
|
||||
<span class="text-[red]">
|
||||
（温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您）
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/wavesurfer"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/wavesurfer
|
||||
</el-link>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div
|
||||
v-loading="loading"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import ReAnimateSelector from "@/components/ReAnimateSelector";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "AnimateCss"
|
||||
@ -16,25 +17,20 @@ watch(animate, () => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
<el-link
|
||||
href="https://animate.style/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
animate.css
|
||||
</el-link>
|
||||
选择器
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/animatecss.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/animatecss.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span>
|
||||
<el-link
|
||||
href="https://animate.style/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
animate.css
|
||||
</el-link>
|
||||
选择器
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<ReAnimateSelector v-model="animate" class="!w-[200px]" />
|
||||
</el-card>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
defineOptions({
|
||||
name: "ButtonPage"
|
||||
});
|
||||
@ -13,16 +13,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">通过 iframe 引入按钮页面</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/button.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/button.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
|
||||
</el-card>
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
CodeToText
|
||||
} from "@/utils/chinaArea";
|
||||
import { ref } from "vue";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Cascader"
|
||||
@ -26,14 +27,7 @@ const handleChange = value => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<p class="font-medium">区域级联选择器</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cascader.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/cascader.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { ref, watch } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { getKeyList } from "@pureadmin/utils";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "CheckButton"
|
||||
@ -90,24 +91,19 @@ watch(size, val =>
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-button.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/check-button.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<p class="mb-2">单选（紧凑风格的按钮样式）</p>
|
||||
<el-radio-group
|
||||
|
||||
@ -3,6 +3,7 @@ import { ref, watch } from "vue";
|
||||
// https://plus-pro-components.com/components/check-card-group.html
|
||||
import "plus-pro-components/es/components/check-card-group/style/css";
|
||||
import { PlusCheckCardGroup } from "plus-pro-components";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "CheckCard"
|
||||
@ -40,33 +41,28 @@ watch(size, val =>
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://plus-pro-components.com/components/check-card-group.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
多选卡片组
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-card.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/check-card.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://plus-pro-components.com/components/check-card-group.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
多选卡片组
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-2 mt-4">单选</p>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
defineOptions({
|
||||
name: "Collapse"
|
||||
});
|
||||
@ -27,27 +27,22 @@ const handleChange = (val: string[]) => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/collapse.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
折叠面板
|
||||
</el-link>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/collapse.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/collapse.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/collapse.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
折叠面板
|
||||
</el-link>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础用法</p>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
defineOptions({
|
||||
name: "ColorPicker"
|
||||
});
|
||||
@ -44,33 +44,28 @@ function onClick() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/color-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
颜色选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/color-picker.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/color-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
颜色选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>
|
||||
|
||||
@ -3,6 +3,7 @@ import basic from "./basic.vue";
|
||||
import menuGroup from "./menuGroup.vue";
|
||||
import menuDynamic from "./menuDynamic.vue";
|
||||
import "v-contextmenu/dist/themes/default.css";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "ContextMenu"
|
||||
@ -12,16 +13,7 @@ defineOptions({
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">右键菜单</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/contextmenu"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/contextmenu
|
||||
</el-link>
|
||||
</div>
|
||||
<ReCodePath is-dir />
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "CountTo"
|
||||
@ -9,16 +10,7 @@ defineOptions({
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">数字动画</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/count-to.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/count-to.vue
|
||||
</el-link>
|
||||
</div>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<ReNormalCountTo
|
||||
prefix="$"
|
||||
|
||||
@ -3,6 +3,7 @@ import avatar from "./avatar.png";
|
||||
import { ref, onBeforeUnmount } from "vue";
|
||||
import ReCropper from "@/components/ReCropper";
|
||||
import { formatBytes } from "@pureadmin/utils";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Cropping"
|
||||
@ -28,26 +29,21 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
图片裁剪，基于开源的
|
||||
<el-link
|
||||
href="https://fengyuanchen.github.io/cropperjs/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
cropperjs
|
||||
</el-link>
|
||||
进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cropping"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/cropping
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span class="font-medium">
|
||||
图片裁剪，基于开源的
|
||||
<el-link
|
||||
href="https://fengyuanchen.github.io/cropperjs/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
cropperjs
|
||||
</el-link>
|
||||
进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div v-loading="!showPopover" element-loading-background="transparent">
|
||||
<el-popover
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "DatePicker"
|
||||
@ -131,33 +132,28 @@ watch(size, val =>
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/date-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
日期选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/date-picker.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/date-picker.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/date-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
日期选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">选择某一天</p>
|
||||
|
||||
@ -177,13 +177,7 @@ watch(size, val =>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/datetime-picker.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/datetime-picker.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
|
||||
<p class="mb-2">日期和时间点</p>
|
||||
|
||||
@ -4,6 +4,7 @@ import { h, createVNode, ref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import formPrimitive from "./formPrimitive.vue";
|
||||
import forms, { type FormProps } from "./form.vue";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
import { cloneDeep, debounce } from "@pureadmin/utils";
|
||||
import {
|
||||
addDialog,
|
||||
@ -445,32 +446,30 @@ function onBeforeSureClick() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
二次封装 Element Plus 的
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/dialog.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
Dialog
|
||||
</el-link>
|
||||
，采用函数式调用弹框组件（更多操作实例请参考
|
||||
<span
|
||||
class="cursor-pointer text-primary"
|
||||
@click="router.push({ name: 'SystemDept' })"
|
||||
>
|
||||
系统管理页面
|
||||
</span>
|
||||
）
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/dialog"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/dialog
|
||||
</el-link>
|
||||
<ReCodePath is-dir>
|
||||
<template #title>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
二次封装 Element Plus 的
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/dialog.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
Dialog
|
||||
</el-link>
|
||||
，采用函数式调用弹框组件（更多操作实例请参考
|
||||
<span
|
||||
class="cursor-pointer text-primary"
|
||||
@click="router.push({ name: 'SystemDept' })"
|
||||
>
|
||||
系统管理页面
|
||||
</span>
|
||||
）
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button @click="onBaseClick"> 基础用法 </el-button>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { ref, watch } from "vue";
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PureButton"
|
||||
@ -55,33 +56,28 @@ watch(size, val =>
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/button.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Button 按钮
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/el-button.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/el-button.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/button.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Button 按钮
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础按钮</p>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { IconSelect } from "@/components/ReIcon";
|
||||
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
defineOptions({
|
||||
name: "IconSelect"
|
||||
});
|
||||
@ -12,16 +12,7 @@ const icon = ref("ep:add-location");
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">图标选择器</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/icon-select.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/icon-select.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<IconSelect v-model="icon" class="w-[200px]" />
|
||||
</el-card>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { reactive, watch } from "vue";
|
||||
import "vue-json-pretty/lib/styles.css";
|
||||
import VueJsonPretty from "vue-json-pretty";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "JsonEditor"
|
||||
@ -74,36 +75,31 @@ watch(
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
JSON编辑器，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/leezng/vue-json-pretty"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vue-json-pretty
|
||||
</el-link>
|
||||
（支持大数据量）。
|
||||
</span>
|
||||
<span class="font-medium">
|
||||
当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
|
||||
<el-link
|
||||
href="https://github.com/surmon-china/vue-codemirror"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
codemirror6
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/json-editor.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/json-editor.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span>
|
||||
JSON编辑器，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/leezng/vue-json-pretty"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vue-json-pretty
|
||||
</el-link>
|
||||
（支持大数据量）。
|
||||
</span>
|
||||
<span class="font-medium">
|
||||
当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
|
||||
<el-link
|
||||
href="https://github.com/surmon-china/vue-codemirror"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
codemirror6
|
||||
</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<vue-json-pretty
|
||||
v-model:data="state.data"
|
||||
|
||||
@ -4,6 +4,7 @@ import hot from "@/assets/svg/hot.svg?component";
|
||||
import { message, closeAllMessage } from "@/utils/message";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Message"
|
||||
@ -13,16 +14,7 @@ defineOptions({
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 消息提示 </span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/message.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/message.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
|
||||
<h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PureProgress"
|
||||
@ -11,25 +12,20 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/progress.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
进度条
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/progress.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/progress.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/progress.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
进度条
|
||||
</el-link>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-4">直线进度条动画</p>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, unref } from "vue";
|
||||
import SeamlessScroll from "@/components/ReSeamlessScroll";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "SeamlessScroll"
|
||||
@ -52,66 +53,65 @@ function changeDirection(val) {
|
||||
<el-space wrap>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">无缝滚动</span>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('top')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'top' ? 'red' : '' }"
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span class="font-medium">无缝滚动</span>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('top')"
|
||||
>
|
||||
向上滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('bottom')"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
color: classOption.direction === 'bottom' ? 'red' : ''
|
||||
}"
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'top' ? 'red' : '' }"
|
||||
>
|
||||
向上滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('bottom')"
|
||||
>
|
||||
向下滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('left')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'left' ? 'red' : '' }"
|
||||
<span
|
||||
:style="{
|
||||
color: classOption.direction === 'bottom' ? 'red' : ''
|
||||
}"
|
||||
>
|
||||
向下滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('left')"
|
||||
>
|
||||
向左滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('right')"
|
||||
>
|
||||
<span
|
||||
:style="{ color: classOption.direction === 'right' ? 'red' : '' }"
|
||||
<span
|
||||
:style="{
|
||||
color: classOption.direction === 'left' ? 'red' : ''
|
||||
}"
|
||||
>
|
||||
向左滚动
|
||||
</span>
|
||||
</el-button>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
type="primary"
|
||||
@click="changeDirection('right')"
|
||||
>
|
||||
向右滚动
|
||||
</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/seamless-scroll.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/seamless-scroll.vue
|
||||
</el-link>
|
||||
<span
|
||||
:style="{
|
||||
color: classOption.direction === 'right' ? 'red' : ''
|
||||
}"
|
||||
>
|
||||
向右滚动
|
||||
</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<SeamlessScroll
|
||||
ref="scroll"
|
||||
|
||||
@ -4,6 +4,7 @@ import { message } from "@/utils/message";
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Segmented, { type OptionsType } from "@/components/ReSegmented";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Segmented"
|
||||
@ -201,23 +202,18 @@ watch(size, val => (dynamicSize.value = size.value));
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/segmented.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/segmented.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-scrollbar>
|
||||
<p class="mb-2">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Selector from "@/components/ReSelector";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Selector"
|
||||
@ -34,14 +35,7 @@ const selectedVal = ({ left, right }): void => {
|
||||
shadow="never"
|
||||
>
|
||||
<template #header>
|
||||
<p class="font-medium">{{ item.title }}</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/selector.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/selector.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<Selector
|
||||
:HsKey="key"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import splitpane, { ContextProps } from "@/components/ReSplitPane";
|
||||
import { reactive } from "vue";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "SplitPane"
|
||||
@ -23,14 +24,7 @@ const settingTB: ContextProps = reactive({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">切割面板</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/split-pane.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/split-pane.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</div>
|
||||
</template>
|
||||
<div class="split-pane">
|
||||
|
||||
@ -3,6 +3,7 @@ import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { useTransition } from "@vueuse/core";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Statistic"
|
||||
@ -27,25 +28,20 @@ function reset() {
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/statistic.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
统计组件
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/statistic.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/statistic.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/statistic.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
统计组件
|
||||
</el-link>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="24">
|
||||
|
||||
@ -5,6 +5,7 @@ import "swiper/css/pagination";
|
||||
import SwiperCore from "swiper";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Swiper"
|
||||
@ -87,22 +88,17 @@ const swiperExample: any[] = [
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/nolimits4web/swiper"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
Swiper插件
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/swiper.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/swiper.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-link
|
||||
href="https://github.com/nolimits4web/swiper"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
Swiper插件
|
||||
</el-link>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-row :gutter="10">
|
||||
<el-col v-for="item in swiperExample" :key="item.id" :span="12">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from "vue";
|
||||
import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTag"
|
||||
@ -66,32 +67,27 @@ const handleInputConfirm = () => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/tag.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Tag 标签
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/tag.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/tag.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/tag.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Tag 标签
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础按钮</p>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import dayjs from "dayjs";
|
||||
import { ref } from "vue";
|
||||
import { ReText } from "@/components/ReText";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PureText"
|
||||
@ -18,34 +19,29 @@ const changeTooltipContent = () => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
文本省略，基于
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/text.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
el-text
|
||||
</el-link>
|
||||
和
|
||||
<el-link
|
||||
href="https://vue-tippy.netlify.app/basic-usage"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
VueTippy
|
||||
</el-link>
|
||||
自动省略后显示 Tooltip 提示， 支持多行省略
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/text.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/text.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span>
|
||||
文本省略，基于
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/text.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
el-text
|
||||
</el-link>
|
||||
和
|
||||
<el-link
|
||||
href="https://vue-tippy.netlify.app/basic-usage"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
VueTippy
|
||||
</el-link>
|
||||
自动省略后显示 Tooltip 提示， 支持多行省略
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础用法</p>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "TimePicker"
|
||||
@ -56,33 +57,28 @@ const endTime = ref("");
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/time-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
时间选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/time-picker.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/time-picker.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/time-picker.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
时间选择器
|
||||
</el-link>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio value="large">大尺寸</el-radio>
|
||||
<el-radio value="default">默认尺寸</el-radio>
|
||||
<el-radio value="small">小尺寸</el-radio>
|
||||
<el-radio value="disabled">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">日期和时间点</p>
|
||||
|
||||
@ -4,6 +4,7 @@ import { randomGradient } from "@pureadmin/utils";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "TimeLine"
|
||||
@ -55,16 +56,7 @@ const activities = [
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<p class="font-medium">时间线</p>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/timeline.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/timeline.vue
|
||||
</el-link>
|
||||
</div>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<div class="flex">
|
||||
<el-timeline>
|
||||
|
||||
@ -7,6 +7,7 @@ import { useRouter } from "vue-router";
|
||||
import { message } from "@/utils/message";
|
||||
import type { UploadFile } from "element-plus";
|
||||
import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
import Add from "@iconify-icons/ep/plus";
|
||||
import Eye from "@iconify-icons/ri/eye-line";
|
||||
@ -103,25 +104,20 @@ const onDownload = () => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/upload.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
文件上传
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/upload
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/upload.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
文件上传
|
||||
</el-link>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<el-button class="mb-4" text bg @click="onDownload">
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import verticalList from "./vertical.vue";
|
||||
import horizontalList from "./horizontal.vue";
|
||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "VirtualList"
|
||||
@ -11,22 +12,17 @@ defineOptions({
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
<el-link
|
||||
href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
虚拟列表
|
||||
</el-link>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/virtual-list"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/components/virtual-list
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<el-link
|
||||
href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
虚拟列表
|
||||
</el-link>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div class="w-full flex justify-around flex-wrap">
|
||||
<vertical-list class="h-[500px] w-[500px]" />
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { Base, Multi, PicUpload } from "./components";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Editor"
|
||||
@ -12,25 +13,20 @@ const activeNames = ref("1");
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
编辑器组件，采用开源的
|
||||
<el-link
|
||||
href="https://www.wangeditor.com"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
Wangeditor
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/editor"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/editor
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span>
|
||||
编辑器组件，采用开源的
|
||||
<el-link
|
||||
href="https://www.wangeditor.com"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
Wangeditor
|
||||
</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-collapse v-model="activeNames" accordion>
|
||||
<el-collapse-item title="基础用法" name="1">
|
||||
|
||||
@ -9,6 +9,7 @@ import { BpmnNode } from "@/components/ReFlowChart/src/config";
|
||||
import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
|
||||
import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
|
||||
import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "FlowChart"
|
||||
@ -64,25 +65,20 @@ onMounted(() => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
流程图组件，采用开源的
|
||||
<el-link
|
||||
href="https://site.logic-flow.cn/docs/#/zh/guide/start"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
LogicFlow
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/flow-chart"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/flow-chart
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span>
|
||||
流程图组件，采用开源的
|
||||
<el-link
|
||||
href="https://site.logic-flow.cn/docs/#/zh/guide/start"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
LogicFlow
|
||||
</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<div class="logic-flow-view">
|
||||
<!-- 辅助工具栏 -->
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { ref } from "vue";
|
||||
import intro from "intro.js";
|
||||
import "intro.js/minified/introjs.min.css";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
type GuideStep = {
|
||||
element: string | HTMLElement;
|
||||
@ -81,18 +82,9 @@ const onTour = () => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
引导页常用于引导式介绍项目的基本功能或亮点
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/guide/index.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/guide/index.vue
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title> 引导页常用于引导式介绍项目的基本功能或亮点 </template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
<el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
|
||||
<el-button @click="onTour"> 打开引导页 (el-tour) </el-button>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { hasAuth, getAuths } from "@/router/utils";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionButton"
|
||||
@ -12,14 +13,7 @@ defineOptions({
|
||||
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">组件方式判断权限</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/index.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/permission/button/index.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<Auth value="permission:btn:add">
|
||||
|
||||
@ -4,6 +4,7 @@ import { storageLocal } from "@pureadmin/utils";
|
||||
import { type CSSProperties, ref, computed } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionPage"
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Fail"
|
||||
});
|
||||
@ -10,16 +12,7 @@ const { columns } = useColumns();
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">失败页</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/result/fail.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/result/fail.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<el-result
|
||||
icon="error"
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Success"
|
||||
});
|
||||
@ -24,16 +26,7 @@ const columns = [
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">成功页</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/result/success.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/result/success.vue
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<el-result
|
||||
icon="success"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./list";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "SchemaForm"
|
||||
@ -16,26 +17,21 @@ function tabClick({ index }) {
|
||||
<template>
|
||||
<el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
JSON 格式配置表单，采用优秀开源的
|
||||
<el-link
|
||||
href="https://plus-pro-components.com/components/form.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
PlusProComponents
|
||||
</el-link>
|
||||
，维护整体表单只需操作 columns 配置即可
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/schema-form"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/schema-form
|
||||
</el-link>
|
||||
<ReCodePath path="/schema-form" is-dir>
|
||||
<template #title>
|
||||
<span>
|
||||
JSON 格式配置表单，采用优秀开源的
|
||||
<el-link
|
||||
href="https://plus-pro-components.com/components/form.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
PlusProComponents
|
||||
</el-link>
|
||||
，维护整体表单只需操作 columns 配置即可
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<el-tabs @tab-click="tabClick">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./edit/list";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTableEdit"
|
||||
@ -16,26 +17,21 @@ function tabClick({ index }) {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
可编辑用法全部采用 TSX 语法，充分发挥
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table
|
||||
</el-link>
|
||||
的灵活性，维护整体表格只需操作 columns 配置即可
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/edit"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/table/edit
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span>
|
||||
可编辑用法全部采用 TSX 语法，充分发挥
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table
|
||||
</el-link>
|
||||
的灵活性，维护整体表格只需操作 columns 配置即可
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./high/list";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTableHigh"
|
||||
@ -16,26 +17,21 @@ function tabClick({ index }) {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
高级用法全部采用 TSX 语法，充分发挥
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table
|
||||
</el-link>
|
||||
的灵活性，维护整体表格只需操作 columns 配置即可
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/high"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/table/high
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span class="font-medium">
|
||||
高级用法全部采用 TSX 语法，充分发挥
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table
|
||||
</el-link>
|
||||
的灵活性，维护整体表格只需操作 columns 配置即可
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./base/list";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTable"
|
||||
@ -16,34 +17,29 @@ function tabClick({ index }) {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
二次封装 Element Plus 的
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/table.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
el-table
|
||||
</el-link>
|
||||
完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在
|
||||
template 里了
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table 源码
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/base"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/table/base
|
||||
</el-link>
|
||||
<ReCodePath is-dir>
|
||||
<template #title>
|
||||
<span class="font-medium">
|
||||
二次封装 Element Plus 的
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/table.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
el-table
|
||||
</el-link>
|
||||
完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在
|
||||
template 里了
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table 源码
|
||||
</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./virtual/list";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "VxeTable"
|
||||
@ -16,25 +17,20 @@ function tabClick({ index }) {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
虚拟滚动采用
|
||||
<el-link
|
||||
href="https://vxetable.cn/#/table/scroll/scroll"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vxe-table
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/virtual"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/table/virtual
|
||||
</el-link>
|
||||
<ReCodePath>
|
||||
<template #title>
|
||||
<span>
|
||||
虚拟滚动采用
|
||||
<el-link
|
||||
href="https://vxetable.cn/#/table/scroll/scroll"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
vxe-table
|
||||
</el-link>
|
||||
</span>
|
||||
</template>
|
||||
</ReCodePath>
|
||||
</template>
|
||||
|
||||
<el-tabs @tab-click="tabClick">
|
||||
|
||||
@ -10,6 +10,7 @@ import { clone } from "@pureadmin/utils";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import ReCodePath from "@/components/ReCodePath";
|
||||
|
||||
defineOptions({
|
||||
name: "Tabs"
|
||||
@ -48,14 +49,7 @@ function onCloseTags() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">标签页复用，超出限制自动关闭</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/tabs"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/tabs
|
||||
</el-link>
|
||||
<ReCodePath />
|
||||
</template>
|
||||
<div class="flex flex-wrap items-center">
|
||||
<p>query传参模式：</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user