feat:新增pure-admin前端
This commit is contained in:
chenchun
70
Yi.Pure.Vue3/src/views/able/barcode.vue
Normal file
70
Yi.Pure.Vue3/src/views/able/barcode.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import ReBarcode from "@/components/ReBarcode";
|
||||
|
||||
defineOptions({
|
||||
name: "BarCode"
|
||||
});
|
||||
|
||||
const barcodes = [
|
||||
{
|
||||
text: "CODE128",
|
||||
type: "CODE128",
|
||||
options: {}
|
||||
},
|
||||
{
|
||||
text: "CODE39",
|
||||
type: "CODE39",
|
||||
options: {
|
||||
lineColor: "#990000"
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "123456",
|
||||
type: "pharmacode",
|
||||
options: {
|
||||
background: "#eee",
|
||||
width: 5
|
||||
}
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
<el-row :gutter="12">
|
||||
<template v-for="(item, index) in barcodes" :key="index">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
||||
<el-card shadow="hover" class="flex justify-center">
|
||||
<ReBarcode
|
||||
:text="item.text"
|
||||
:type="item.type"
|
||||
:options="item.options"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
35
Yi.Pure.Vue3/src/views/able/danmaku/danmu.ts
Normal file
35
Yi.Pure.Vue3/src/views/able/danmaku/danmu.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
const customDanmus = [
|
||||
{
|
||||
avatar:
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAFBAYBAgMAB//aAAgBAQAAAAD7HU4ObhMC3AnlYvY8ISwA+6WDOd4/RA96FVeF66BOVWB3TsAOgZC27wv/xAAYAQEBAQEBAAAAAAAAAAAAAAACAwQAAf/aAAgBAhAAAAC3sw8uyRDQPV//xAAYAQADAQEAAAAAAAAAAAAAAAAAAgMBBP/aAAgBAxAAAACQ7LfmoUTNvFf/xAA0EAACAQMBBAcHAwUAAAAAAAABAgMABBESBRMxQRAhIjJRYbEUIzRCUnOBM3KSU2KRoeH/2gAIAQEAAT8AmmSCJpHOAoq6vZp8lmITkgonSQCMZxikkdGDxsVbxFbK2l7TGUkwHQfy6Ln4if7jetbcdglvH9TFv40hD71CGzlQpAyACRkt4VcxojxOdIj06GzwA5VKkilGUdjUcNxD9XlwI5g1Bfm0u4nC5UHDeYNWu0LS4B3D6mHHIwaufiJ/uN61tm6Et6GPCIbv8mtqi4gtrFkzjeuxIGRq+TP4orI1jpK+8MHAfVprYcM8kVysmoIGiwG8UfVgVcwh1ecDGiYcvlNWk7W9zDKucqwyPEVOczzfvb1q/wBkXWqR4Sja8nDHGCajAEagHIAx/jourmK0haaV9KrWyrFZLRZJ07MqNhc8Q3M/irfZFlaOGQF2HzOc1cACeYD+o3r0XptYEJKAyMx06TgsxOaupr+MhkIQk6TlfPlkVNCIxBc3A9onLjRG/WtWV1BPFlRp09TpzBHLoufiJ/uN69G05JLxt8C2ksQpTiAMHIq0mQz6HnMnZwurBwBRhKTLLK5Y6Oz/AGf9qwla3u4TykBRh/sdFx8RN9xvWpri43Unv5O6fmNSSSCHGtsb0DGfKrFm3zdZ7o9RUskhMnbbu+NLJJrh7bfqJz869onxjfSY/callk3knvG7x51//8QAIxEAAgEEAQMFAAAAAAAAAAAAAQIRAAMSMRAEIXETMjNBUf/aAAgBAgEBPwBMUTNv3tSdQrgZDYpwMmx0N8PdFv0iBMAyKS4QroF99JcxDhhMntwxgUCoJIER90jZCeG2PBpvjNWtHzx//8QAIBEAAgICAgIDAAAAAAAAAAAAAQIAERASAyEyM0GBkf/aAAgBAwEBPwBtmbURuErdRb1W/nCIW3vqMgJVr8YyWVIyvYG/5CKwJze36jY//9k=",
|
||||
name: "美绪",
|
||||
text: "马什么梅？"
|
||||
},
|
||||
{
|
||||
avatar:
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAABQIDBAEGB//aAAgBAQAAAAD65hzG3WLcATfCbHYQ9IY0uiEfRkU1IOr+RoUG1ornWj7Y6//EABgBAQADAQAAAAAAAAAAAAAAAAQAAgUD/9oACAECEAAAACEf3IJba51tGDNq/wD/xAAYAQEAAwEAAAAAAAAAAAAAAAAEAQMFAv/aAAgBAxAAAABSg0MWQdj+c6VozP/EAC0QAAIBAwMBBgUFAAAAAAAAAAECEQADBBASMUEiUVJhcZEFExQhgSAyQoKx/9oACAEBAAE/AKu5oEi2A3meKOXf8cfgV9Xe2kEgyOeCKsZSXAqs0XP91z7+wC3MSCzeg/RbuG06uO8T6a5kNkOOu0CpUXWQMdo4kQRPQihPd9tH+4jXIw0yDukq0RNHFu2/iOVku0pfx7foHt91MttbMyN7njqQDo3BPkdWEqRJEjkV8QOV2LVq2xBBlkoq+y181CrgHn1nXHffZQ+UH8aEwCaEoJP9qzbe+ySOUO7XCuxca2f5CR6jS477H7bftPWt7+NvekdzbWXYyo60rvtXtHgda3v4j71Yd/qLPaPJ6+Vb38be9f/EACYRAAECBAQHAQAAAAAAAAAAAAECAwAEEBIREzFSITNBQlFhgXL/2gAIAQIBAT8AffKDYjXqYznd5hhwuI46ijjOOaSfaYUm232Ik9F/KKQFRMN2LHgiJVdrmG6s32fYa5iP0Kf/xAAmEQABAgQFBAMAAAAAAAAAAAABAgMAEBESBBNCUoEhMTNhUXFy/9oACAEDAQE/AGGAoXK4EZLWwQ+2G19Oxk28RlhI9GEqur9xi9HMm3C2qtAfRhhy9J+axiUXIrtnhdfEOeNf5Mv/2Q==",
|
||||
name: "博士",
|
||||
text: "马东什么？"
|
||||
},
|
||||
{
|
||||
avatar:
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAxAAACAgMBAAAAAAAAAAAAAAAABgQFAQIHAwEBAAMBAAAAAAAAAAAAAAAAAwABAgT/2gAMAwEAAhADEAAAAI7CsPnN1VeZ0okpTbSWASKzwmMPRy3PuuWhpv4KvQ7pcJYTUb+hdLQYWJoaVU+RU3jcXiaoegAhWOAPeeaBd1wGtf/EAC4QAAIBAwIEBAUFAQAAAAAAAAECAwAEEQUhBhASMRMiQWEUI3KBoSAzQlFSkv/aAAgBAQABPwDTxidHHbdTyZGjdkcYYelBGKM4HlUgH7/osXInRfQsK0q18abxGHkj/JrV0KXrEfzUGtLiE0F1G48r4GfcVJDJFI0TbMp52W91D9VXt42mWQCu0QUqHZQC7SyDIRA22QO5NXkFyLeFpnWRggYsMZw/+ioAPsRVlOtrpsshx+6d2OFGw3J/oVK897YR6nbfORCTkp0OVQ7lRk5Aq5gMZSVR8qVepfbPpy0jDSRyEZxIg/6JrjKJytlEEJ63uJD7ttXB6Tn41bhW8Mwxxjqzt3OBWrx+Bw9fQsRvIgBzjYutcP3F8upWVmZZltvjFPQW22BqeAJpHh+kWyeyhsL+KXS9RcB1WLpYZGSc4NcKwxTrcRy+qrj2IJIqe3S5AEsSOAcgMobB+9Lb9KhVAAHYCntRIjI6hkYYZWGQRUGm2ltMssVsiSKCAVGMZqWFZ4fDY4XYn7ULaEgF182N/Me9cIuI3kY9gFodLAEHINFgKDKdqwK1LVotOMSsnWz5JAPYUeJZyTiKMVwv2n+la08npcZOBjke3LVWZtRuizE4kI5f/8QAIBEBAAIBAgcAAAAAAAAAAAAAAQARAwIQEiAhMTJBcf/aAAgBAgEBPwDL5HzkadfX0RDjmTSUJtks1MqWpVypk7uxt//EACARAQABAwMFAAAAAAAAAAAAAAEAAhEhAxATEiIxYXH/2gAIAQMBAT8A0m1L9l+2++Sg9sF45p1N7M6iUJYwM5GYW4ZmZT4Njb//2Q==",
|
||||
name: "柚子",
|
||||
text: "什么冬梅？"
|
||||
}
|
||||
];
|
||||
|
||||
const danmus = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
|
||||
|
||||
const getDanmuData = () => {
|
||||
return danmus.map((text, index) => {
|
||||
const _index = index % 3;
|
||||
return {
|
||||
avatar: customDanmus[_index].avatar,
|
||||
name: customDanmus[_index].name,
|
||||
text
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export { customDanmus, danmus, getDanmuData };
|
||||
222
Yi.Pure.Vue3/src/views/able/danmaku/index.vue
Normal file
222
Yi.Pure.Vue3/src/views/able/danmaku/index.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<script setup lang="ts">
|
||||
import { danmus as danmusData, getDanmuData } from "./danmu.js";
|
||||
import { onMounted, onUnmounted, reactive, ref } from "vue";
|
||||
import VueDanmaku from "vue3-danmaku";
|
||||
|
||||
defineOptions({
|
||||
name: "Danmaku"
|
||||
});
|
||||
|
||||
const danmaku = ref();
|
||||
const danmus = ref<any[]>(getDanmuData());
|
||||
const danmuMsg = ref<string>("");
|
||||
let timer = 0;
|
||||
const config = reactive({
|
||||
channels: 5, // 轨道数量，为0则弹幕轨道数会撑满容器
|
||||
useSlot: true, // 是否开启slot
|
||||
loop: true, // 是否开启弹幕循环
|
||||
speeds: 200, // 弹幕速度，实际为弹幕滚动完一整屏的秒数，值越小速度越快
|
||||
fontSize: 20, // 文本模式下的字号
|
||||
top: 10, // 弹幕轨道间的垂直间距
|
||||
right: 0, // 同一轨道弹幕的水平间距
|
||||
debounce: 100, // 弹幕刷新频率（多少毫秒插入一条弹幕，建议不小于50）
|
||||
randomChannel: true // 随机弹幕轨道
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.onresize = () => resizeHandler();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.onresize = null;
|
||||
});
|
||||
|
||||
function play(type: string) {
|
||||
switch (type) {
|
||||
case "play":
|
||||
danmaku.value.play();
|
||||
break;
|
||||
case "pause":
|
||||
danmaku.value.pause();
|
||||
break;
|
||||
case "stop":
|
||||
danmaku.value.stop();
|
||||
break;
|
||||
case "show":
|
||||
danmaku.value.show();
|
||||
break;
|
||||
case "hide":
|
||||
danmaku.value.hide();
|
||||
break;
|
||||
case "reset":
|
||||
danmaku.value.reset();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function switchSlot(slot: boolean) {
|
||||
config.useSlot = slot;
|
||||
danmus.value = slot ? getDanmuData() : danmusData;
|
||||
|
||||
setTimeout(() => {
|
||||
danmaku.value.stop();
|
||||
danmaku.value.play();
|
||||
});
|
||||
}
|
||||
function speedsChange(val: number) {
|
||||
if (config.speeds <= 10 && val === -10) {
|
||||
return;
|
||||
}
|
||||
config.speeds += val;
|
||||
danmaku.value.reset();
|
||||
}
|
||||
function fontChange(val: number) {
|
||||
config.fontSize += val;
|
||||
danmaku.value.reset();
|
||||
}
|
||||
function channelChange(val: number) {
|
||||
if (!config.channels && val === -1) {
|
||||
return;
|
||||
}
|
||||
config.channels += val;
|
||||
}
|
||||
function resizeHandler() {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = window.setTimeout(() => {
|
||||
danmaku.value.resize();
|
||||
}, 500);
|
||||
}
|
||||
function addDanmu() {
|
||||
if (!danmuMsg.value) return;
|
||||
const _danmuMsg = config.useSlot
|
||||
? {
|
||||
avatar: "https://i.loli.net/2021/01/17/xpwbm3jKytfaNOD.jpg",
|
||||
name: "你",
|
||||
text: danmuMsg.value
|
||||
}
|
||||
: danmuMsg.value;
|
||||
danmaku.value.add(_danmuMsg);
|
||||
danmuMsg.value = "";
|
||||
}
|
||||
</script>
|
||||
<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>
|
||||
</template>
|
||||
<div class="flex gap-5">
|
||||
<vue-danmaku
|
||||
ref="danmaku"
|
||||
v-model:danmus="danmus"
|
||||
class="demo"
|
||||
isSuspend
|
||||
v-bind="config"
|
||||
>
|
||||
<!-- 弹幕slot -->
|
||||
<template v-slot:dm="{ danmu, index }">
|
||||
<div class="danmu-item">
|
||||
<img class="img" :src="danmu.avatar" />
|
||||
<span>{{ index }}{{ danmu.name }}：</span>
|
||||
<span>{{ danmu.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</vue-danmaku>
|
||||
<div class="main">
|
||||
<p>
|
||||
播放：
|
||||
<el-button @click="play('play')">播放</el-button>
|
||||
<el-button @click="play('pause')">暂停</el-button>
|
||||
<el-button @click="play('stop')">停止</el-button>
|
||||
</p>
|
||||
<p>
|
||||
模式：
|
||||
<el-button @click="switchSlot(true)">弹幕 slot</el-button>
|
||||
<el-button @click="switchSlot(false)">普通文本</el-button>
|
||||
</p>
|
||||
<p>
|
||||
显示：
|
||||
<el-button @click="play('show')">显示</el-button>
|
||||
<el-button @click="play('hide')">隐藏</el-button>
|
||||
</p>
|
||||
<p>
|
||||
速度：
|
||||
<el-button @click="speedsChange(-10)">减速</el-button>
|
||||
<el-button @click="speedsChange(10)">增速</el-button>
|
||||
<span class="ml-5">当前速度：{{ config.speeds }}像素/s</span>
|
||||
</p>
|
||||
<p>
|
||||
字号：
|
||||
<el-button :disabled="config.useSlot" @click="fontChange(-1)">
|
||||
缩小
|
||||
</el-button>
|
||||
<el-button :disabled="config.useSlot" @click="fontChange(1)">
|
||||
放大
|
||||
</el-button>
|
||||
<span class="ml-5">当前字号：{{ config.fontSize }}px</span>
|
||||
</p>
|
||||
<p>
|
||||
轨道：
|
||||
<el-button @click="channelChange(-1)">-1</el-button>
|
||||
<el-button @click="channelChange(1)">+1</el-button>
|
||||
<el-button @click="channelChange(-config.channels)"> 填满 </el-button>
|
||||
<span class="ml-5">当前轨道：{{ config.channels }}</span>
|
||||
</p>
|
||||
<p class="flex">
|
||||
<el-input
|
||||
v-model="danmuMsg"
|
||||
type="text"
|
||||
placeholder="输入评论后，回车发送弹幕"
|
||||
@keyup.enter="addDanmu"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.demo {
|
||||
flex: 1;
|
||||
height: 600px;
|
||||
background: linear-gradient(45deg, #5ac381, #20568b);
|
||||
|
||||
.danmu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
Yi.Pure.Vue3/src/views/able/debounce.vue
Normal file
55
Yi.Pure.Vue3/src/views/able/debounce.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { message } from "@/utils/message";
|
||||
import { debounce, throttle } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "Debounce"
|
||||
});
|
||||
|
||||
const handle = () => message("恭喜你，这是一条成功消息", { type: "success" });
|
||||
|
||||
const immediateDebounce = debounce(handle, 1000, true);
|
||||
|
||||
const debounceClick = debounce(handle, 1000);
|
||||
|
||||
const throttleClick = throttle(handle);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
</template>
|
||||
<div class="mb-5">
|
||||
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
|
||||
秒内又触发了事件，则会重新计算函数执行时间。
|
||||
</div>
|
||||
<el-button @click="immediateDebounce">
|
||||
连续点击我，只会执行第一次点击事件，立即执行
|
||||
</el-button>
|
||||
<el-button @click="debounceClick">
|
||||
连续点击我，只会执行最后一次点击事件，延后执行
|
||||
</el-button>
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">节流：throttle</div>
|
||||
</template>
|
||||
<div class="mb-5">
|
||||
所谓节流，就是指连续触发事件但是在 n
|
||||
秒中只执行一次函数。节流会稀释函数的执行频率。
|
||||
</div>
|
||||
<el-button @click="throttleClick">
|
||||
连续点击我，每一秒只会执行一次点击事件
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
163
Yi.Pure.Vue3/src/views/able/directives.vue
Normal file
163
Yi.Pure.Vue3/src/views/able/directives.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
|
||||
defineOptions({
|
||||
name: "Directives"
|
||||
});
|
||||
|
||||
const search = ref("");
|
||||
const searchTwo = ref("");
|
||||
const searchThree = ref("");
|
||||
const searchFour = ref("");
|
||||
const searchFive = ref("");
|
||||
const searchSix = ref("copy");
|
||||
const text = ref("可复制的文本");
|
||||
const long = ref(false);
|
||||
const cbText = ref("");
|
||||
const idx = ref(0);
|
||||
|
||||
function onInput() {
|
||||
message(search.value);
|
||||
}
|
||||
function onInputTwo() {
|
||||
message(searchTwo.value);
|
||||
}
|
||||
function onInputThree({ name, sex }) {
|
||||
message(`${name}${sex}${searchThree.value}`);
|
||||
}
|
||||
|
||||
function onInputFour() {
|
||||
message(searchFour.value);
|
||||
}
|
||||
function onInputFive({ name, sex }) {
|
||||
message(`${name}${sex}${searchFive.value}`);
|
||||
}
|
||||
|
||||
function onLongpress() {
|
||||
long.value = true;
|
||||
}
|
||||
function onCustomLongpress() {
|
||||
long.value = true;
|
||||
}
|
||||
function onCbLongpress() {
|
||||
idx.value += 1;
|
||||
long.value = true;
|
||||
cbText.value = `持续回调${idx.value}次`;
|
||||
}
|
||||
function onReset() {
|
||||
long.value = false;
|
||||
cbText.value = "";
|
||||
idx.value = 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<div class="mb-2">
|
||||
防抖指令（连续输入，只会执行第一次点击事件，立即执行）
|
||||
<el-input
|
||||
v-model="search"
|
||||
v-optimize="{
|
||||
event: 'input',
|
||||
fn: onInput,
|
||||
immediate: true,
|
||||
timeout: 1000
|
||||
}"
|
||||
class="!w-[200px]"
|
||||
clearable
|
||||
@clear="onInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
防抖指令（连续输入，只会执行最后一次事件，延后执行）
|
||||
<el-input
|
||||
v-model="searchTwo"
|
||||
v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
|
||||
class="!w-[200px]"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
防抖指令（连续输入，只会执行最后一次事件，延后执行，传参用法）
|
||||
<el-input
|
||||
v-model="searchThree"
|
||||
v-optimize="{
|
||||
event: 'input',
|
||||
fn: onInputThree,
|
||||
timeout: 400,
|
||||
params: { name: '小明', sex: '男' }
|
||||
}"
|
||||
class="!w-[200px]"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="mb-2">
|
||||
节流指令（连续输入，每一秒只会执行一次事件）
|
||||
<el-input
|
||||
v-model="searchFour"
|
||||
v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
|
||||
class="!w-[200px]"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
节流指令（连续输入，每一秒只会执行一次事件，传参用法）
|
||||
<el-input
|
||||
v-model="searchFive"
|
||||
v-optimize:throttle="{
|
||||
event: 'input',
|
||||
fn: onInputFive,
|
||||
params: { name: '小明', sex: '男' }
|
||||
}"
|
||||
class="!w-[200px]"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="mb-2">
|
||||
文本复制指令（双击输入框内容即可复制）
|
||||
<el-input v-model="searchSix" v-copy="searchSix" class="!w-[200px]" />
|
||||
</div>
|
||||
<div>
|
||||
文本复制指令（自定义触发事件，单击复制）
|
||||
<span v-copy:click="text" class="text-sky-500">{{ text }}</span>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
<el-space wrap>
|
||||
长按指令
|
||||
<el-button v-longpress="onLongpress">长按（默认500ms）</el-button>
|
||||
<el-button v-longpress:1000="onCustomLongpress">
|
||||
自定义长按时长（1000ms）
|
||||
</el-button>
|
||||
<el-button v-longpress:2000:200="onCbLongpress">
|
||||
2秒后每200ms持续回调
|
||||
</el-button>
|
||||
<el-button @click="onReset"> 重置状态 </el-button>
|
||||
<el-tag :type="long ? 'success' : 'info'" class="ml-2" size="large">
|
||||
{{ long ? "当前为长按状态" : "当前非长按状态" }}
|
||||
</el-tag>
|
||||
<el-tag v-if="cbText" type="danger" class="ml-2" size="large">
|
||||
{{ cbText }}
|
||||
</el-tag>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</template>
|
||||
70
Yi.Pure.Vue3/src/views/able/download.vue
Normal file
70
Yi.Pure.Vue3/src/views/able/download.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
downloadByOnlineUrl,
|
||||
downloadByBase64,
|
||||
downloadByData,
|
||||
downloadByUrl
|
||||
} from "@pureadmin/utils";
|
||||
import axios from "axios";
|
||||
|
||||
defineOptions({
|
||||
name: "Download"
|
||||
});
|
||||
|
||||
const base64 =
|
||||
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALEAAAAwCAYAAABexZu4AAAAAXNSR0IArs4c6QAAC5pJREFUeF7tnQ9wFNUdx7+/vQQsiOb2orHyp0JuQ/1TpFVbS+2I7RS1aqdlKu2oU2WqQvbQFmtrO7QFpp22U0ZhgNuQInXa6rTFKo5oi3XGPzNqiwIWBDTZS2Boi8aQDQxYId7tr/M2CZNc7u69vdtLLrI7k2GG/b3fe+/3Pvu737597/cIRVw1ydaZEWAmE13MwEwCojj5R+PA/B4IxwA6RuD3uPff3UzYRhneU/X++7s7vn/xe0VUHRYJLTDEAqRqk5qV+2q0senbANwKYKZquVxyBHQy0eNw+XEnYfy9FF0jWbZmjT1bVv/hu4wXZDK57st0V42pbjm04Ly3i9FdzjKnr7bPqiJcWKiOYm2ST6cSxHqyZRkocivA5wVvAH7NMRs+raR34+4xNR1jZ1VrJ7Z1Ji46plSmTEJRy36eACnEbgZX+R00Vd2OaSiNX5lMkFOtbtksq4+BF7pN4yqZnOr9gkbQ19uT8AEeAHCjqkLfckRvOI3xGYXKCa+kRehegL8A4CN9sq8A2qOOWb/Kd50BFFAFLYR4qLGHDWLdap0P0G8DGO+CKgi0rsuMN+YTija1XU/sbs6rhPmPTqLhpnK3M1t/CHFui1eMJ44lW29jooeGAwwm3NLdaDySq67aDZ0T3BOH3wJwbqG2cET7fPeC+peGo739dYQQVzDEsWTbZUzuq8MFhEvpqYcbz9+fqz49aX8bhAcV2rLBMY3bFeQCEwkhrlCI61bsHN8zftyLBFwS2GgXVrTHMY2L8onoVmszQHcqtKWwnnX2BewiKdNDGhLOQmOvTE7cDyGuUIhjVurHDP6ZyiAGJFPQg+pW6jGA58rrYscxG2L55HpfDPG8TI+fl7AQ4gqEONrcdialM6+DaKpssIfcJ7wFF7tAfICAA3DpgKtpaWL3HCLUMXMdiOoYqBs0LcW43UkYG/LVF2tKLWLmNdL2SF7uQoilFgxMYERf7HTL/i6Alb56w+5ykLbFMY1/+innQaW5s92eMasOL556OF/ZM9fan9I0vELA2IL6JQ9DCLGf0SlNduQg3sgR/VDbDoALztcO6p6GC1Xjx1LMEk3avyTCDwvoeMYxjWsK1RFCXMoI+Cs7YhDH1rXNZdd9TLW5THRFd2P8ZVX5UuV6vxhqS7P1EOORyJjI9969Y1pHCHGpVg6m/IhBHG1K/ZyYl6h0g4AlXabxCxXZIGX0ZOoaBl8JwuXE2A7CVsc0HlWpI/TEKlYKRmbEINYt+xkAc2TdYGB7t2lcKpOrtPshxMM3IiMD8VLW9LqUWEzTvyYhb48ZtKDbjP9m+EwSTE0hxMHYUUVLMRDrydQsIDOHNS1GzLUgisHlQwy0E1O7y2gvtIiKate1Xeq67msKDTzomMZEBbnARHx8/p6XK7Q4e317XbonczFAM0C8opSG9aRx9rG7jc5+HZU4TxxN2kkQLijUTw042mUaX5HZQvRPJkPsvugkpi8bKKcKcSRSfZObPrGASbuZgLisLoB2gTObsusT5Uh1ao2AzSqdlzdGXSLfC90QDewu7+9cbfP+j3Km56cswAXE3+nqNeaXzP4QUokQqwAkeqiyhFNFV67VaKrlVJax5hmNIV9nSU/aD4CwWDrQA0CRygYkUAzEymV8trEUiH1WBYpgqcogZ8OoAlAlQOzXHtnyDKS6TcPo/3+KJu3fEeFbMsVM2g3djfVPyeSCvK8M5IAHTLmMz4YWC7HPanyJn6oQ9xnpUcc05nnhRKzJ3syM62XW0zTtskML67cVkvMAKvJiihzMfmlUBjKE2LP6qeKJT3pgjW7tWhj/PelN9itgfFbGXkTTGjoX1tv55JSBK1DREM+S5yNHoZhYb7KXglH0w5SveaEnHmqZYmNiGWs+7j/nmMYXSbdSLQA3yApWE9V1NMbfDSHutYDqi53MrqXcP8XDiV7TMV0rZicOAci7jLHfyHoap6XuNk5UPMSq3tsnPaEnDt4TE/A6AzuI+aWMS97GCNJwtWStzOCGMO4XEEt3p4pSThqnYRRALNqaa7u76nrifGxnT7aHnhgoIZz4mwb6ySEzvj2vU7TsbjGUCr5mJ+lWa5eYLpYJZ0/2Z8tXSkycqx8j+cVOZtdS7o/acEJhuja6ru3L5LpPq9iHopZtq3wxyUQQP7LAaKv0cCKEWD7sI/2xAwoQi17oVuurAF0m65EIJ8SC9s/IBDMuLjmyyNgRQuzzxY6wDK7rK8kJk3blh/pjhzLE9p8AfEPGpoD4rwCulQnK9p+F4URuC8rslquUarz9YQ4nej2xfT+Ae2RsUixpP8yEm2WCYLrXScSF0rxXvvxhKi9V3stjVlom5QdD8mSPZEwcQpwDF3VPrLRljqJW62oC3SWHuPhMO8ozICHE3jCEnriXxpjV8lWGtknGJil7O6DVMY3pMoW57ocQ+8uMGULcS5GebJ8DyogNGwUvqrVSl7jggmsi+jUU89PYF9uozUWHnjj0xANw1ZP210GQbkHz3pp1y/6vLN+ZkGOG1Z0wErInI/t+6IlDTzyICeWYuG0+4EqTWvZBrJYuihmdFMFsv1v1Q4hDiIuCONn6HRBJU/d6EEct+xYC/qDoYQvmPQtj4sEWKCYEC2Pi/hc7tbRqHsQ1a/d+TNOqc2amzAWl3yTJoSeuLE9M5E7qapwuQsi8l8qYFb12QjGciFn2DgY+KXOuJ78kRS17LQHK8a7ogKZpa7oW1j8uq0TFIEJHueaJo02pz4mVUrJ2QpIOa2B5VW85zJ5Y7FofL+unSptUxqycEOtrW78EjVTOczl6EmJ9tX0BqrDV/8ZKeo3ALQzaT8StYPdthhZlUBTgKBhTiGDKDFtOiGut9ukuMiJZt+wSCVkulwn1hWAVd2aHbqX2qZ2rQiscM/6DfP3Um+yrwdgis0MpEFf/7/iKQidoKe/9BHYO+qYfs+xfMXCfrPHlul8uTzyhuaW2OqOd3G4vaf/LGvBrYtrbmYinvHNLTmCys8j4R+V7YrUFM14/2F2uRaqeihw99qY77owJGUqLQ4XEAyyS6EiXIXgqchwgo+LB++x4kEBPZjL8Z1Sl94tE67GmFpESYiKY5jNooRJnTM2DII6u2j2Fxpy2FeBzlBQELFQuiEUzfRg3d6+y4rhKDCdE3gnVX70ghq5EiINoAth1rxuyusrnTEUgDelXUmaIN5Z0CtRogFh2SE+go1WyJw6iNe2OadTnXCIYs+wEA2uDqMWPjnJCHLVSdxK42U97BsmOBoi9ROnubhAmFd1PHwUrwBMvdkxjVd51rjHL/hEDw5r9spwQn/Hgv/WqnuNvqHyZzDmOowBiL2xqsheDvbMHy36NJMQMeqLbjH9NdLLwYYyWfaOXHUhhS3/JFmPe5CQaBp3Pobw4SXHeMdpk30yMh4tq6yiBuC/+Ly10GmggRgcIdbls5h9iehrg64qy/+BCe6BhXv+XY6UdB97T7eKeMv1MPZZJ474jdw/d+hQ0xN4AJ+05IIiE4v5ytI0iiAMC+TjAawESx8GJh2LI5R9izBNHVzBhCRgfLxLmQQBLPfHASsTB09URnktEwltKcxlLGriFiZ+PUOS5QlmF+hazi4Ma8x7G6K3nICRUE26LdkXXvPkJqqoSJ6beBHEojsqVBXHMsp9k4AZZUdkG21zlVXXL9sr1JYsUefamyNo54P4eAM8yIg91m9N2eZlFP8i8kxPiHAvCCs4CVWOyc4fxHxHaRXqO30HgbwKketj9QbC7Xqsa25x9MLuSJ87ugAB6rOZewRSZxuBpBExjwlkERAUj3p/3M8QdAL3DQAeBO5h4ezrjPnt00fldPoxaNtGalftqImN7ZgPa5Sz6AHh9AZAB0AJGi0gsThG84HfRU9kaXYRiXYSFvXPAE8E8EUTnEjCRAbHTvb03D3Bmnwt64nCi4V9FVFF0EW+5JTDL+5UXfy4me/+e5EfbC3L/kuHjzx0xZ4ht/EOu/wNFbO2YhmAeMQAAAABJRU5ErkJggg==";
|
||||
|
||||
function down() {
|
||||
axios
|
||||
.get("https://xiaoxian521.github.io/hyperlink/img/pure.png", {
|
||||
responseType: "blob"
|
||||
})
|
||||
.then(({ data }) => {
|
||||
downloadByData(data, "test-data.png");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<div class="flex flex-wrap">
|
||||
<el-button
|
||||
@click="
|
||||
downloadByOnlineUrl(
|
||||
'https://xiaoxian521.github.io/hyperlink/img/pure.png',
|
||||
'test-url.png'
|
||||
)
|
||||
"
|
||||
>
|
||||
下载在线图片
|
||||
</el-button>
|
||||
|
||||
<el-button @click="downloadByBase64(base64, 'test-base64.png')">
|
||||
基于 base64 下载图片
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
@click="
|
||||
downloadByUrl(
|
||||
'https://github.com/xiaoxian521/xiaoxian521/archive/refs/heads/main.zip',
|
||||
'xiaoxian521.zip'
|
||||
)
|
||||
"
|
||||
>
|
||||
根据文件地址下载文件
|
||||
</el-button>
|
||||
|
||||
<el-button @click="down"> 根据后台接口文件流下载 </el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
230
Yi.Pure.Vue3/src/views/able/draggable.vue
Normal file
230
Yi.Pure.Vue3/src/views/able/draggable.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import Sortable, { Swap } from "sortablejs";
|
||||
import draggable from "vuedraggable/src/vuedraggable";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
|
||||
defineOptions({
|
||||
name: "Draggable"
|
||||
});
|
||||
|
||||
const { setSortSwap } = useAppStoreHook();
|
||||
|
||||
const gridLists = ref<Array<Object>>([
|
||||
{ grid: "cn", num: 1 },
|
||||
{ grid: "cn", num: 2 },
|
||||
{ grid: "cn", num: 3 },
|
||||
{ grid: "cn", num: 4 },
|
||||
{ grid: "cn", num: 5 },
|
||||
{ grid: "cn", num: 6 },
|
||||
{ grid: "cn", num: 7 },
|
||||
{ grid: "cn", num: 8 },
|
||||
{ grid: "cn", num: 9 }
|
||||
]);
|
||||
|
||||
const lists = ref<Array<Object>>([
|
||||
{ people: "cn", id: 1, name: "www.itxst.com" },
|
||||
{ people: "cn", id: 2, name: "www.baidu.com" },
|
||||
{ people: "cn", id: 3, name: "www.taobao.com" },
|
||||
{ people: "cn", id: 4, name: "www.google.com" }
|
||||
]);
|
||||
|
||||
const cutLists = ref([
|
||||
{ people: "cn", id: 1, name: "cut1" },
|
||||
{ people: "cn", id: 2, name: "cut2" },
|
||||
{ people: "cn", id: 3, name: "cut3" },
|
||||
{ people: "cn", id: 4, name: "cut4" }
|
||||
]);
|
||||
|
||||
const change = (evt): void => {
|
||||
console.log("evt: ", evt);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (!useAppStoreHook().sortSwap) Sortable.mount(new Swap());
|
||||
setSortSwap(true);
|
||||
new Sortable(document.querySelector(".cut-container"), {
|
||||
swap: true,
|
||||
forceFallback: true,
|
||||
chosenClass: "chosen",
|
||||
swapClass: "highlight",
|
||||
animation: 300
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<div class="drag-container">
|
||||
<!-- grid列表拖拽 -->
|
||||
<el-row :gutter="25">
|
||||
<el-col :xs="25" :sm="8" :md="8" :lg="8">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>grid列表拖拽</span>
|
||||
</div>
|
||||
</template>
|
||||
<draggable
|
||||
v-model="gridLists"
|
||||
class="grid-container"
|
||||
item-key="grid"
|
||||
animation="300"
|
||||
chosenClass="chosen"
|
||||
forceFallback="true"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div :class="'item' + ' ' + 'item-' + element.num">
|
||||
{{ element.num }}
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="25" :sm="8" :md="8" :lg="8">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>单列拖拽</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 单列拖拽 -->
|
||||
<draggable
|
||||
v-model="lists"
|
||||
item-key="name"
|
||||
chosen-class="chosen"
|
||||
force-fallback="true"
|
||||
animation="300"
|
||||
@change="change"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<div class="item-single">{{ element.name }} {{ index }}</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="25" :sm="8" :md="8" :lg="8">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>拖拽实现元素位置交换</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 拖拽实现元素位置切换 -->
|
||||
<div class="cut-container">
|
||||
<div
|
||||
v-for="(item, index) in cutLists"
|
||||
:key="index"
|
||||
class="item-cut"
|
||||
>
|
||||
<p>{{ item.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* grid列表拖拽 */
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-rows: 33.3% 33.3% 33.3%;
|
||||
grid-template-columns: 33.3% 33.3% 33.3%;
|
||||
}
|
||||
|
||||
.item-single {
|
||||
height: 77px;
|
||||
font-size: 1.5em;
|
||||
line-height: 85px;
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
border: 1px solid #e5e4e9;
|
||||
}
|
||||
|
||||
.item-cut {
|
||||
height: 77px;
|
||||
font-size: 1.5em;
|
||||
line-height: 77px;
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
border: 1px solid #e5e4e9;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: 2em;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
border: 1px solid #e5e4e9;
|
||||
|
||||
@media screen and (width <= 750px) {
|
||||
line-height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
background-color: #ef342a;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
background-color: #f68f26;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
background-color: #4ba946;
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
background-color: #0376c2;
|
||||
}
|
||||
|
||||
.item-5 {
|
||||
background-color: #c077af;
|
||||
}
|
||||
|
||||
.item-6 {
|
||||
background-color: #f8d29d;
|
||||
}
|
||||
|
||||
.item-7 {
|
||||
background-color: #b5a87f;
|
||||
}
|
||||
|
||||
.item-8 {
|
||||
background-color: #d0e4a9;
|
||||
}
|
||||
|
||||
.item-9 {
|
||||
background-color: #4dc7ec;
|
||||
}
|
||||
|
||||
.chosen {
|
||||
border: solid 2px #3089dc !important;
|
||||
}
|
||||
</style>
|
||||
106
Yi.Pure.Vue3/src/views/able/excel.vue
Normal file
106
Yi.Pure.Vue3/src/views/able/excel.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<script setup lang="ts">
|
||||
import { utils, writeFile } from "xlsx";
|
||||
|
||||
defineOptions({
|
||||
name: "Excel"
|
||||
});
|
||||
|
||||
interface DataItem {
|
||||
readonly id: string;
|
||||
[propName: string]: string;
|
||||
}
|
||||
|
||||
interface Columns {
|
||||
dataKey: string;
|
||||
key: string;
|
||||
title: string;
|
||||
width?: number;
|
||||
[propName: string]: string | number;
|
||||
}
|
||||
|
||||
const generateColumns = (length = 10, prefix = "column-", props?: any) =>
|
||||
Array.from({ length }).map((_, columnIndex) => ({
|
||||
...props,
|
||||
key: `${prefix}${columnIndex}`,
|
||||
dataKey: `${prefix}${columnIndex}`,
|
||||
title: `Column ${columnIndex}`,
|
||||
width: 150
|
||||
}));
|
||||
|
||||
const generateData = (
|
||||
columns: ReturnType<typeof generateColumns>,
|
||||
length = 200,
|
||||
prefix = "row-"
|
||||
) =>
|
||||
Array.from({ length }).map((_, rowIndex) => {
|
||||
return columns.reduce(
|
||||
(rowData, column, columnIndex) => {
|
||||
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
|
||||
return rowData;
|
||||
},
|
||||
{
|
||||
id: `${prefix}${rowIndex}`,
|
||||
parentId: null
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const columns = generateColumns(10);
|
||||
const data = generateData(columns, 1000);
|
||||
|
||||
const exportExcel = () => {
|
||||
const res: string[][] = data.map((item: DataItem) => {
|
||||
const arr = [];
|
||||
columns.forEach((column: Columns) => {
|
||||
arr.push(item[column.dataKey]);
|
||||
});
|
||||
return arr;
|
||||
});
|
||||
const titleList: string[] = [];
|
||||
columns.forEach((column: Columns) => {
|
||||
titleList.push(column.title);
|
||||
});
|
||||
res.unshift(titleList);
|
||||
const workSheet = utils.aoa_to_sheet(res);
|
||||
const workBook = utils.book_new();
|
||||
utils.book_append_sheet(workBook, workSheet, "数据报表");
|
||||
writeFile(workBook, "tableV2.xlsx");
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<el-button type="primary" @click="exportExcel">导出Excel</el-button>
|
||||
<div class="h-[25rem] mt-3">
|
||||
<el-auto-resizer>
|
||||
<template #default="{ height, width }">
|
||||
<el-table-v2
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:width="width"
|
||||
:height="height"
|
||||
fixed
|
||||
/>
|
||||
</template>
|
||||
</el-auto-resizer>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
68
Yi.Pure.Vue3/src/views/able/infinite-scroll.vue
Normal file
68
Yi.Pure.Vue3/src/views/able/infinite-scroll.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
|
||||
|
||||
defineOptions({
|
||||
name: "InfiniteScroll"
|
||||
});
|
||||
|
||||
const dataTemplate = new Array(10).fill({
|
||||
date: "2022-08-24",
|
||||
name: "RealityBoy",
|
||||
age: "18"
|
||||
});
|
||||
|
||||
const data = ref([]);
|
||||
const page = ref(0);
|
||||
const total = ref(10);
|
||||
const isBottom = ref(false);
|
||||
|
||||
const load = () => {
|
||||
if (isBottom.value) return;
|
||||
|
||||
page.value++;
|
||||
if (page.value <= total.value) {
|
||||
data.value = data.value.concat(dataTemplate);
|
||||
}
|
||||
|
||||
if (page.value === total.value) {
|
||||
isBottom.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
|
||||
<el-table
|
||||
v-el-table-infinite-scroll="load"
|
||||
border
|
||||
height="435px"
|
||||
:data="data"
|
||||
:infinite-scroll-disabled="isBottom"
|
||||
>
|
||||
<el-table-column width="80" type="index" label="序号" />
|
||||
<el-table-column prop="date" label="日期" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="age" label="年龄" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
102
Yi.Pure.Vue3/src/views/able/line-tree.vue
Normal file
102
Yi.Pure.Vue3/src/views/able/line-tree.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import ElTreeLine from "@/components/ReTreeLine";
|
||||
import { extractPathList, deleteChildren } from "@/utils/tree";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "LineTree"
|
||||
});
|
||||
|
||||
const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
|
||||
const menusData = computed(() => {
|
||||
return deleteChildren(menusTree);
|
||||
});
|
||||
const expandedKeys = extractPathList(menusData.value);
|
||||
const dataProps = {
|
||||
value: "uniqueId",
|
||||
children: "children"
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">普通树结构</div>
|
||||
</template>
|
||||
<div class="max-h-[550px] overflow-y-auto">
|
||||
<el-tree
|
||||
:data="menusData"
|
||||
:props="dataProps"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="uniqueId"
|
||||
:indent="30"
|
||||
><template v-slot:default="{ node }">
|
||||
<el-tree-line :node="node" :showLabelLine="true">
|
||||
<template v-slot:node-label>
|
||||
<span class="text-sm">
|
||||
{{ transformI18n(node.data.meta.title) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree-line>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">虚拟树结构</div>
|
||||
</template>
|
||||
<div class="max-h-[550px] overflow-y-auto">
|
||||
<el-tree-v2
|
||||
:data="menusData"
|
||||
:props="dataProps"
|
||||
show-checkbox
|
||||
:height="550"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
>
|
||||
<template v-slot:default="{ node }">
|
||||
<el-tree-line
|
||||
:node="node"
|
||||
:treeData="menusData"
|
||||
:showLabelLine="true"
|
||||
:indent="30"
|
||||
>
|
||||
<template v-slot:node-label>
|
||||
<span class="text-sm">
|
||||
{{ transformI18n(node.data.meta.title) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-tree-line>
|
||||
</template>
|
||||
</el-tree-v2>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
17
Yi.Pure.Vue3/src/views/able/map.vue
Normal file
17
Yi.Pure.Vue3/src/views/able/map.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { Amap } from "@/components/ReMap";
|
||||
|
||||
defineOptions({
|
||||
name: "MapPage"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Amap />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main-content {
|
||||
margin: 2px 0 0 !important;
|
||||
}
|
||||
</style>
|
||||
91
Yi.Pure.Vue3/src/views/able/menu-tree.vue
Normal file
91
Yi.Pure.Vue3/src/views/able/menu-tree.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import type { ElTreeV2 } from "element-plus";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
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";
|
||||
|
||||
defineOptions({
|
||||
name: "MenuTree"
|
||||
});
|
||||
|
||||
interface treeNode extends TreeNode {
|
||||
meta: {
|
||||
title: string;
|
||||
};
|
||||
}
|
||||
|
||||
const query = ref("");
|
||||
const dataProps = ref({
|
||||
value: "uniqueId",
|
||||
children: "children"
|
||||
});
|
||||
const treeRef = ref<InstanceType<typeof ElTreeV2>>();
|
||||
const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
|
||||
|
||||
const menusData = computed(() => {
|
||||
return deleteChildren(menusTree);
|
||||
});
|
||||
|
||||
const expandedKeys = extractPathList(menusData.value);
|
||||
|
||||
const onQueryChanged = (query: string) => {
|
||||
(treeRef as any).value!.filter(query);
|
||||
};
|
||||
|
||||
const filterMethod = (query: string, node: treeNode) => {
|
||||
return transformI18n(node.meta.title)!.indexOf(query) !== -1;
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="query"
|
||||
class="mb-4"
|
||||
placeholder="请输入关键字查找"
|
||||
clearable
|
||||
@input="onQueryChanged"
|
||||
/>
|
||||
<el-tree-v2
|
||||
ref="treeRef"
|
||||
:data="menusData"
|
||||
:props="dataProps"
|
||||
show-checkbox
|
||||
:height="500"
|
||||
:filter-method="filterMethod"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<span>{{ transformI18n(data.meta.title) }}</span>
|
||||
</template>
|
||||
</el-tree-v2>
|
||||
</el-card>
|
||||
</template>
|
||||
400
Yi.Pure.Vue3/src/views/able/mqtt-client.vue
Normal file
400
Yi.Pure.Vue3/src/views/able/mqtt-client.vue
Normal file
@@ -0,0 +1,400 @@
|
||||
<script setup lang="ts">
|
||||
// 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";
|
||||
|
||||
const protocol = location.protocol === "https:" ? "wss" : "ws";
|
||||
const port = protocol === "wss" ? 8084 : 8083;
|
||||
|
||||
// https://github.com/mqttjs/MQTT.js#qos
|
||||
const qosList = [0, 1, 2];
|
||||
|
||||
const connection = reactive({
|
||||
protocol,
|
||||
host: "broker.emqx.io",
|
||||
port,
|
||||
clientId: "emqx_vue3_" + Math.random().toString(16).substring(2, 8),
|
||||
username: "emqx_test",
|
||||
password: "emqx_test",
|
||||
clean: true,
|
||||
connectTimeout: 30 * 1000, // ms
|
||||
reconnectPeriod: 4000 // ms
|
||||
// for more options and details, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
|
||||
});
|
||||
|
||||
// 订阅 topic/mqttx 主题
|
||||
const subscription = ref({
|
||||
topic: "topic/mqttx",
|
||||
qos: 0 as any
|
||||
});
|
||||
|
||||
// 发布 topic/browser 主题
|
||||
const publish = ref({
|
||||
topic: "topic/browser",
|
||||
qos: 0 as any,
|
||||
payload: '{ "msg": "Hello, I am browser." }'
|
||||
});
|
||||
|
||||
let client = ref({
|
||||
connected: false
|
||||
} as mqtt.MqttClient);
|
||||
|
||||
const receivedMessages = ref("");
|
||||
const subscribedSuccess = ref(false);
|
||||
const btnLoadingType = ref("");
|
||||
const retryTimes = ref(0);
|
||||
|
||||
const initData = () => {
|
||||
client.value = {
|
||||
connected: false
|
||||
} as mqtt.MqttClient;
|
||||
retryTimes.value = 0;
|
||||
btnLoadingType.value = "";
|
||||
subscribedSuccess.value = false;
|
||||
};
|
||||
|
||||
const handleOnReConnect = () => {
|
||||
retryTimes.value += 1;
|
||||
if (retryTimes.value > 5) {
|
||||
try {
|
||||
client.value.end();
|
||||
initData();
|
||||
console.log("connection maxReconnectTimes limit, stop retry");
|
||||
} catch (error) {
|
||||
console.log("handleOnReConnect catch error:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const createConnection = () => {
|
||||
try {
|
||||
btnLoadingType.value = "connect";
|
||||
const { protocol, host, port, ...options } = connection;
|
||||
const connectUrl = `${protocol}://${host}:${port}/mqtt`;
|
||||
// 连接MQTT 服务器
|
||||
client.value = mqtt.connect(connectUrl, options);
|
||||
|
||||
if (client.value.on) {
|
||||
// https://github.com/mqttjs/MQTT.js#event-connect
|
||||
client.value.on("connect", () => {
|
||||
btnLoadingType.value = "";
|
||||
console.log("connection successful");
|
||||
});
|
||||
|
||||
// https://github.com/mqttjs/MQTT.js#event-reconnect
|
||||
client.value.on("reconnect", handleOnReConnect);
|
||||
|
||||
// https://github.com/mqttjs/MQTT.js#event-error
|
||||
client.value.on("error", error => {
|
||||
console.log("connection error:", error);
|
||||
});
|
||||
|
||||
// https://github.com/mqttjs/MQTT.js#event-message
|
||||
client.value.on("message", (topic: string, message) => {
|
||||
receivedMessages.value = receivedMessages.value.concat(
|
||||
message.toString()
|
||||
);
|
||||
console.log(`received message: ${message} from topic: ${topic}`);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
btnLoadingType.value = "";
|
||||
console.log("mqtt.connect error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// subscribe topic
|
||||
// https://github.com/mqttjs/MQTT.js#mqttclientsubscribetopictopic-arraytopic-object-options-callback
|
||||
const doSubscribe = () => {
|
||||
btnLoadingType.value = "subscribe";
|
||||
const { topic, qos } = subscription.value;
|
||||
client.value.subscribe(
|
||||
topic,
|
||||
{ qos },
|
||||
(error: Error, granted: mqtt.ISubscriptionGrant[]) => {
|
||||
btnLoadingType.value = "";
|
||||
if (error) {
|
||||
console.log("subscribe error:", error);
|
||||
return;
|
||||
}
|
||||
subscribedSuccess.value = true;
|
||||
console.log("subscribe successfully:", granted);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// unsubscribe topic
|
||||
// https://github.com/mqttjs/MQTT.js#mqttclientunsubscribetopictopic-array-options-callback
|
||||
const doUnSubscribe = () => {
|
||||
btnLoadingType.value = "unsubscribe";
|
||||
const { topic, qos } = subscription.value;
|
||||
client.value.unsubscribe(topic, { qos }, error => {
|
||||
btnLoadingType.value = "";
|
||||
subscribedSuccess.value = false;
|
||||
if (error) {
|
||||
console.log("unsubscribe error:", error);
|
||||
return;
|
||||
}
|
||||
console.log(`unsubscribed topic: ${topic}`);
|
||||
});
|
||||
};
|
||||
|
||||
// publish message
|
||||
// https://github.com/mqttjs/MQTT.js#mqttclientpublishtopic-message-options-callback
|
||||
const doPublish = () => {
|
||||
btnLoadingType.value = "publish";
|
||||
const { topic, qos, payload } = publish.value;
|
||||
client.value.publish(topic, payload, { qos }, error => {
|
||||
btnLoadingType.value = "";
|
||||
if (error) {
|
||||
console.log("publish error:", error);
|
||||
return;
|
||||
}
|
||||
console.log(`published message: ${payload}`);
|
||||
});
|
||||
};
|
||||
|
||||
// disconnect
|
||||
// https://github.com/mqttjs/MQTT.js#mqttclientendforce-options-callback
|
||||
const destroyConnection = () => {
|
||||
if (client.value.connected) {
|
||||
btnLoadingType.value = "disconnect";
|
||||
try {
|
||||
client.value.end(false, () => {
|
||||
initData();
|
||||
console.log("disconnected successfully");
|
||||
});
|
||||
} catch (error) {
|
||||
btnLoadingType.value = "";
|
||||
console.log("disconnect error:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleProtocolChange = (value: string) => {
|
||||
connection.port = value === "wss" ? 8084 : 8083;
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
try {
|
||||
if (client.value.end) {
|
||||
client.value.end();
|
||||
console.log("disconnected successfully");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<el-card shadow="never">
|
||||
<h1>设置</h1>
|
||||
<el-form label-position="top" :model="connection">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="protocol" label="协议">
|
||||
<el-select
|
||||
v-model="connection.protocol"
|
||||
@change="handleProtocolChange"
|
||||
>
|
||||
<el-option label="ws://" value="ws" />
|
||||
<el-option label="wss://" value="wss" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="host" label="主机">
|
||||
<el-input v-model="connection.host" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="port" label="端口">
|
||||
<el-input
|
||||
v-model.number="connection.port"
|
||||
type="number"
|
||||
placeholder="8083/8084"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="clientId" label="客户端ID">
|
||||
<el-input v-model="connection.clientId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="username" label="用户名">
|
||||
<el-input v-model="connection.username" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="password" label="密码">
|
||||
<el-input v-model="connection.password" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="client.connected"
|
||||
:loading="btnLoadingType === 'connect'"
|
||||
@click="createConnection"
|
||||
>
|
||||
{{ client.connected ? "已连接" : "连接" }}
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="client.connected"
|
||||
type="danger"
|
||||
:loading="btnLoadingType === 'disconnect'"
|
||||
@click="destroyConnection"
|
||||
>
|
||||
断开连接
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>订阅</h1>
|
||||
<el-form label-position="top" :model="subscription">
|
||||
<el-row :gutter="20" :align="'middle'">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="topic" label="主题">
|
||||
<el-input
|
||||
v-model="subscription.topic"
|
||||
:disabled="subscribedSuccess"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="qos" label="通信质量">
|
||||
<el-select
|
||||
v-model="subscription.qos"
|
||||
:disabled="subscribedSuccess"
|
||||
>
|
||||
<el-option
|
||||
v-for="qos in qosList"
|
||||
:key="qos"
|
||||
:label="qos"
|
||||
:value="qos"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="sub-btn"
|
||||
:loading="btnLoadingType === 'subscribe'"
|
||||
:disabled="!client.connected || subscribedSuccess"
|
||||
@click="doSubscribe"
|
||||
>
|
||||
{{ subscribedSuccess ? "已订阅" : "订阅" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="subscribedSuccess"
|
||||
type="primary"
|
||||
class="sub-btn"
|
||||
:loading="btnLoadingType === 'unsubscribe'"
|
||||
:disabled="!client.connected"
|
||||
@click="doUnSubscribe"
|
||||
>
|
||||
取消订阅
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>发布</h1>
|
||||
<el-form label-position="top" :model="publish">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="topic">
|
||||
<template #label>
|
||||
<span>主题</span>
|
||||
<el-text type="info" size="small">
|
||||
可将订阅主题设置为topic/browser，测试MQTT的自发自收。
|
||||
</el-text>
|
||||
</template>
|
||||
<el-input v-model="publish.topic" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="payload" label="有效载荷">
|
||||
<el-input v-model="publish.payload" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="qos" label="通信质量">
|
||||
<el-select v-model="publish.qos">
|
||||
<el-option
|
||||
v-for="qos in qosList"
|
||||
:key="qos"
|
||||
:label="qos"
|
||||
:value="qos"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-col :span="24">
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="btnLoadingType === 'publish'"
|
||||
:disabled="!client.connected"
|
||||
@click="doPublish"
|
||||
>
|
||||
发布
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4">
|
||||
<h1>接收</h1>
|
||||
<el-col :span="24">
|
||||
<el-input
|
||||
v-model="receivedMessages"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
readonly
|
||||
/>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</template>
|
||||
117
Yi.Pure.Vue3/src/views/able/pdf.vue
Normal file
117
Yi.Pure.Vue3/src/views/able/pdf.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import VuePdfEmbed from "vue-pdf-embed";
|
||||
|
||||
defineOptions({
|
||||
name: "Pdf"
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const pdfRef = ref<any>();
|
||||
const pageCount = ref(1);
|
||||
const loading = ref(true);
|
||||
const currentPage = ref(1);
|
||||
const currentRotation = ref(0);
|
||||
const showAllPages = ref(false);
|
||||
const rotations = [0, 90, 180, 270];
|
||||
|
||||
const source =
|
||||
"https://xiaoxian521.github.io/hyperlink/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";
|
||||
|
||||
const handleDocumentRender = () => {
|
||||
loading.value = false;
|
||||
pageCount.value = pdfRef.value.doc.numPages;
|
||||
};
|
||||
|
||||
const showAllPagesChange = () => {
|
||||
currentPage.value = showAllPages.value ? null : 1;
|
||||
};
|
||||
|
||||
const onPrint = () => {
|
||||
// 如果在打印时，打印页面是本身的两倍，在打印配置 页面 设置 仅限页码为奇数的页面 即可
|
||||
pdfRef.value.print();
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<div
|
||||
v-loading="loading"
|
||||
class="h-[calc(100vh-295px)]"
|
||||
:element-loading-text="t('status.pureLoad')"
|
||||
>
|
||||
<div class="flex justify-between items-center h-9">
|
||||
<div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
|
||||
共{{ pageCount }}页
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
background
|
||||
layout="prev, slot, next"
|
||||
:page-size="1"
|
||||
:total="pageCount"
|
||||
>
|
||||
{{ currentPage }} / {{ pageCount }}
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="w-[170px] flex-bc">
|
||||
<el-checkbox v-model="showAllPages" @change="showAllPagesChange">
|
||||
显示所有页面
|
||||
</el-checkbox>
|
||||
<IconifyIconOnline
|
||||
v-tippy="{
|
||||
maxWidth: 'none',
|
||||
content: `翻转（当前角度${rotations[currentRotation]}度）`
|
||||
}"
|
||||
icon="ic:baseline-rotate-90-degrees-ccw"
|
||||
class="cursor-pointer outline-transparent"
|
||||
@click="
|
||||
currentRotation === 3
|
||||
? (currentRotation = 0)
|
||||
: (currentRotation += 1)
|
||||
"
|
||||
/>
|
||||
<IconifyIconOnline
|
||||
v-tippy="{
|
||||
maxWidth: 'none',
|
||||
content: '打印'
|
||||
}"
|
||||
icon="ri:printer-line"
|
||||
class="cursor-pointer outline-transparent"
|
||||
@click="onPrint"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar>
|
||||
<vue-pdf-embed
|
||||
ref="pdfRef"
|
||||
class="h-full container overflow-auto"
|
||||
:rotation="rotations[currentRotation]"
|
||||
:page="currentPage"
|
||||
:source="source"
|
||||
@rendered="handleDocumentRender"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
41
Yi.Pure.Vue3/src/views/able/pinyin.vue
Normal file
41
Yi.Pure.Vue3/src/views/able/pinyin.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { html } from "pinyin-pro";
|
||||
|
||||
defineOptions({
|
||||
name: "Pinyin"
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<p v-html="html('带 音 调')" />
|
||||
<p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />
|
||||
<p class="mt-2 custom" v-html="html('自 定 义 样 式')" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom {
|
||||
/* 汉字的样式 */
|
||||
:deep(.py-chinese-item) {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 拼音的样式 */
|
||||
:deep(.py-pinyin-item) {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
204
Yi.Pure.Vue3/src/views/able/print/index.vue
Normal file
204
Yi.Pure.Vue3/src/views/able/print/index.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Print from "@/utils/print";
|
||||
import pieChart from "./pieChart.vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Print"
|
||||
});
|
||||
|
||||
interface User {
|
||||
date: string;
|
||||
name: string;
|
||||
age: number;
|
||||
address: string;
|
||||
}
|
||||
|
||||
const value = ref("1");
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: "1",
|
||||
el: ".el-table",
|
||||
label: "Table"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
el: ".echart",
|
||||
label: "Echart"
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
el: ".img",
|
||||
label: "Image"
|
||||
}
|
||||
];
|
||||
|
||||
function onPrint() {
|
||||
const el = options.filter(v => v.value === value.value)[0]?.el;
|
||||
Print(el).toPrint;
|
||||
}
|
||||
|
||||
const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
|
||||
if (rowIndex === 1) {
|
||||
return "warning-row";
|
||||
} else if (rowIndex === 3) {
|
||||
return "success-row";
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
const tableData: User[] = [
|
||||
{
|
||||
date: "2016-05-03",
|
||||
name: "Tom",
|
||||
age: 18,
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date: "2016-05-02",
|
||||
name: "Tom",
|
||||
age: 18,
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date: "2016-05-04",
|
||||
name: "Tom",
|
||||
age: 18,
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
},
|
||||
{
|
||||
date: "2016-05-01",
|
||||
name: "Tom",
|
||||
age: 18,
|
||||
address: "No. 189, Grove St, Los Angeles"
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">打印功能（报表、图表、图片）</span>
|
||||
<el-select
|
||||
v-model="value"
|
||||
class="!w-[100px] mr-2"
|
||||
placeholder="Select"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button size="small" type="primary" @click="onPrint">
|
||||
打印
|
||||
</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>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col
|
||||
v-motion
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="24"
|
||||
:xl="24"
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 200
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium text-lg text-center">Table</p>
|
||||
<el-table
|
||||
border
|
||||
:data="tableData"
|
||||
:row-class-name="tableRowClassName"
|
||||
class="el-table w-full mt-[10px]"
|
||||
>
|
||||
<el-table-column prop="date" label="Date" />
|
||||
<el-table-column prop="name" label="Name" />
|
||||
<el-table-column prop="age" label="age" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
v-motion
|
||||
:xs="11"
|
||||
:sm="11"
|
||||
:md="11"
|
||||
:lg="11"
|
||||
:xl="11"
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 200
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium text-lg text-center">Echart</p>
|
||||
<pieChart class="echart mt-[10px]" />
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
v-motion
|
||||
:xs="11"
|
||||
:sm="11"
|
||||
:md="11"
|
||||
:lg="11"
|
||||
:xl="11"
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
y: 100
|
||||
}"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 200
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium text-lg text-center">Image</p>
|
||||
<img
|
||||
src="https://pure-admin-utils.netlify.app/logo.png"
|
||||
alt="avatars"
|
||||
class="img mt-[10px] m-auto"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-table__row.warning-row) {
|
||||
--el-table-tr-bg-color: var(--el-color-warning-light-9);
|
||||
}
|
||||
|
||||
:deep(.el-table__row.success-row) {
|
||||
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
||||
}
|
||||
</style>
|
||||
43
Yi.Pure.Vue3/src/views/able/print/pieChart.vue
Normal file
43
Yi.Pure.Vue3/src/views/able/print/pieChart.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { useDark, useECharts } from "@pureadmin/utils";
|
||||
|
||||
const { isDark } = useDark();
|
||||
|
||||
const theme = computed(() => (isDark.value ? "dark" : "light"));
|
||||
|
||||
const pieChartRef = ref();
|
||||
const { setOptions } = useECharts(pieChartRef, {
|
||||
theme
|
||||
});
|
||||
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
//@ts-expect-error
|
||||
right: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "饼图",
|
||||
type: "pie",
|
||||
top: "20%",
|
||||
radius: "80%",
|
||||
center: ["40%", "50%"],
|
||||
color: ["#e6a23c", "#f56c6c", "#53a7ff"],
|
||||
data: [
|
||||
{ value: 400, name: "watchers" },
|
||||
{ value: 1600, name: "forks" },
|
||||
{ value: 7200, name: "star" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="pieChartRef" style="width: 100%; height: 35vh" />
|
||||
</template>
|
||||
129
Yi.Pure.Vue3/src/views/able/qrcode.vue
Normal file
129
Yi.Pure.Vue3/src/views/able/qrcode.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, unref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import ReQrcode from "@/components/ReQrcode";
|
||||
|
||||
defineOptions({
|
||||
name: "QrCode"
|
||||
});
|
||||
|
||||
const qrcodeText = "vue-pure-admin";
|
||||
|
||||
const asyncTitle = ref("");
|
||||
setTimeout(() => {
|
||||
asyncTitle.value = unref(qrcodeText);
|
||||
}, 3000);
|
||||
const codeClick = () => {
|
||||
message("点击事件", { type: "info" });
|
||||
};
|
||||
const disabledClick = () => {
|
||||
message("失效", { type: "info" });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
<el-row :gutter="20" justify="space-between">
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">基础用法</div>
|
||||
<ReQrcode :text="qrcodeText" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">img标签</div>
|
||||
<ReQrcode :text="qrcodeText" tag="img" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">样式配置</div>
|
||||
<ReQrcode
|
||||
:text="qrcodeText"
|
||||
:options="{
|
||||
color: {
|
||||
dark: '#55D187',
|
||||
light: '#2d8cf0'
|
||||
}
|
||||
}"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">点击事件</div>
|
||||
<ReQrcode :text="qrcodeText" @click="codeClick" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">异步内容</div>
|
||||
<ReQrcode :text="asyncTitle" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">失效</div>
|
||||
<ReQrcode
|
||||
:text="qrcodeText"
|
||||
disabled
|
||||
@disabled-click="disabledClick"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">logo配置</div>
|
||||
<ReQrcode
|
||||
:text="qrcodeText"
|
||||
logo="https://avatars.githubusercontent.com/u/44761321?v=4"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">logo样式</div>
|
||||
<ReQrcode
|
||||
:text="qrcodeText"
|
||||
:logo="{
|
||||
src: 'https://avatars.githubusercontent.com/u/44761321?v=4',
|
||||
logoSize: 0.2,
|
||||
borderSize: 0.05,
|
||||
borderRadius: 50,
|
||||
bgColor: 'blue'
|
||||
}"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||||
<div class="font-bold">大小配置</div>
|
||||
<ReQrcode :text="qrcodeText" :width="100" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
78
Yi.Pure.Vue3/src/views/able/ripple.vue
Normal file
78
Yi.Pure.Vue3/src/views/able/ripple.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "Ripple"
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<div class="mb-5">组件中的波纹</div>
|
||||
<el-alert
|
||||
title="v-ripple在某些组件中使用波纹特效会异常，这是因为v-ripple指令只能作用于当前元素，某些组件有多层元素嵌套，且目标元素没在顶层，所以会导致特效异常"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
/>
|
||||
<el-space wrap class="my-5">
|
||||
<el-button v-ripple>Default</el-button>
|
||||
<el-button v-ripple type="primary">Primary</el-button>
|
||||
<el-button v-ripple type="success">Success</el-button>
|
||||
<el-button v-ripple type="info">Info</el-button>
|
||||
<el-button v-ripple type="warning">Warning</el-button>
|
||||
<el-button v-ripple type="danger">Danger</el-button>
|
||||
</el-space>
|
||||
<el-card v-ripple class="mb-5 w-[510px] select-none" shadow="hover">
|
||||
卡片
|
||||
</el-card>
|
||||
|
||||
<div class="mb-5">
|
||||
只要在组件或HTML元素上使用v-ripple指令，就可以启用基本的ripple功能
|
||||
</div>
|
||||
<div
|
||||
v-ripple
|
||||
class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
|
||||
>
|
||||
HTML元素
|
||||
</div>
|
||||
<span
|
||||
v-ripple
|
||||
class="inline-block shadow-md rounded-md p-8 text-lg select-none"
|
||||
>
|
||||
行内元素需要添加display: block或display: inline-block才能生效
|
||||
</span>
|
||||
|
||||
<div class="my-5">
|
||||
当使用v-ripple.center时，将始终从目标的中心处产生波纹
|
||||
</div>
|
||||
<div
|
||||
v-ripple.center
|
||||
class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
|
||||
>
|
||||
始终从中心触发波纹
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
使用v-ripple="{ class: '' }"添加类来自定义波纹颜色，支持tailwindcss
|
||||
</div>
|
||||
<el-alert
|
||||
title="自定义样式生效为文字颜色，例如：color: 'red';"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
/>
|
||||
<div
|
||||
v-ripple="{ class: 'text-red-500' }"
|
||||
class="my-5 text-center shadow-md rounded-md p-4 text-lg select-none"
|
||||
>
|
||||
自定义波纹颜色
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
50
Yi.Pure.Vue3/src/views/able/sensitive.vue
Normal file
50
Yi.Pure.Vue3/src/views/able/sensitive.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Mint from "mint-filter";
|
||||
|
||||
defineOptions({
|
||||
name: "Sensitive"
|
||||
});
|
||||
|
||||
// 自定义敏感词字典
|
||||
const words = ["脑残", "废物", "白痴", "三八", "智障"];
|
||||
|
||||
const modelValue = ref();
|
||||
const mint = new Mint(words);
|
||||
|
||||
function onInput() {
|
||||
modelValue.value = mint.filter(modelValue.value).text;
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<div class="flex flex-wrap gap-2 my-2">
|
||||
<span>自定义敏感词</span>
|
||||
<el-tag
|
||||
v-for="(word, index) in words"
|
||||
:key="index"
|
||||
type="warning"
|
||||
class="mx-1"
|
||||
effect="dark"
|
||||
round
|
||||
>
|
||||
{{ word }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-input v-model="modelValue" @input="onInput" />
|
||||
<p class="mt-2">{{ modelValue }}</p>
|
||||
</el-card>
|
||||
</template>
|
||||
29
Yi.Pure.Vue3/src/views/able/typeit.vue
Normal file
29
Yi.Pure.Vue3/src/views/able/typeit.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { TypeIt, type TypeItOptions } from "@/components/ReTypeit";
|
||||
|
||||
defineOptions({
|
||||
name: "Typeit"
|
||||
});
|
||||
|
||||
const options: TypeItOptions = {
|
||||
strings: ["test1", "test2", "test3"]
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<TypeIt :options="options" />
|
||||
</el-card>
|
||||
</template>
|
||||
40
Yi.Pure.Vue3/src/views/able/verify.vue
Normal file
40
Yi.Pure.Vue3/src/views/able/verify.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Vcode from "vue3-puzzle-vcode";
|
||||
|
||||
const isShow = ref(true);
|
||||
|
||||
function onSuccess() {
|
||||
console.log("验证成功");
|
||||
}
|
||||
|
||||
function onFail() {
|
||||
console.log("验证失败");
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
|
||||
<Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
185
Yi.Pure.Vue3/src/views/able/video-frame/canvasRenderer.ts
Normal file
185
Yi.Pure.Vue3/src/views/able/video-frame/canvasRenderer.ts
Normal file
@@ -0,0 +1,185 @@
|
||||
// import { throttle } from "@pureadmin/utils";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
|
||||
export class CanvasRenderer {
|
||||
private canvas: HTMLCanvasElement;
|
||||
private ctx: CanvasRenderingContext2D;
|
||||
private images: {
|
||||
img: HTMLImageElement;
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}[];
|
||||
private container: HTMLElement;
|
||||
private positionX: number;
|
||||
private isDragging: boolean;
|
||||
private startX: number;
|
||||
|
||||
constructor(containerId: string) {
|
||||
this.canvas = document.createElement("canvas");
|
||||
this.ctx = this.canvas.getContext("2d")!;
|
||||
this.images = [];
|
||||
this.positionX = 0;
|
||||
this.isDragging = false;
|
||||
this.startX = 0;
|
||||
|
||||
this.container = document.getElementById(containerId);
|
||||
if (this.container) {
|
||||
this.container.appendChild(this.canvas);
|
||||
this.canvas.width = this.container.clientWidth;
|
||||
this.canvas.height = this.container.clientHeight;
|
||||
}
|
||||
}
|
||||
|
||||
public addImage(
|
||||
url: string,
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number
|
||||
) {
|
||||
const img = new Image();
|
||||
img.src = url;
|
||||
|
||||
this.images.push({
|
||||
img,
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height
|
||||
});
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
public render() {
|
||||
this.clearRect();
|
||||
|
||||
this.images.forEach(imgProps => {
|
||||
const x = imgProps.x + this.positionX;
|
||||
this.ctx.drawImage(
|
||||
imgProps.img,
|
||||
x,
|
||||
imgProps.y,
|
||||
imgProps.width,
|
||||
imgProps.height
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
public clearImages() {
|
||||
this.images = [];
|
||||
}
|
||||
|
||||
public clearRect() {
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
|
||||
public drawTick(event) {
|
||||
this.render();
|
||||
|
||||
// 当前勾选图片的索引
|
||||
const index =
|
||||
Math.ceil(
|
||||
(Math.abs(this.positionX) + event.offsetX) / this.images[0].width
|
||||
) - 1;
|
||||
const x = event.offsetX;
|
||||
const y = event.offsetY;
|
||||
|
||||
// 绘制样式
|
||||
this.ctx.strokeStyle = "red";
|
||||
this.ctx.lineWidth = 4;
|
||||
this.ctx.lineCap = "round";
|
||||
|
||||
// 绘制对勾
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(x - 10, y);
|
||||
this.ctx.lineTo(x, y + 10);
|
||||
this.ctx.lineTo(x + 15, y - 10);
|
||||
this.ctx.stroke();
|
||||
|
||||
emitter.emit("imageInfo", this.images[index]);
|
||||
}
|
||||
|
||||
public addListener() {
|
||||
if (!this.canvas) return;
|
||||
this.canvas.addEventListener("click", this.handleClick);
|
||||
this.canvas.addEventListener("mousedown", this.handleMouseDown);
|
||||
this.canvas.addEventListener("mousemove", this.handleMouseMove);
|
||||
this.canvas.addEventListener("mouseup", this.handleMouseUp);
|
||||
this.canvas.addEventListener("touchstart", this.handleTouchStart);
|
||||
this.canvas.addEventListener("touchmove", this.handleTouchMove);
|
||||
this.canvas.addEventListener("touchend", this.handleTouchEnd);
|
||||
// window.addEventListener("resize", throttle(this.handleWindowResize, 200));
|
||||
}
|
||||
|
||||
private handleClick = (event: MouseEvent) => {
|
||||
this.drawTick(event);
|
||||
};
|
||||
|
||||
private handleMouseDown = (event: MouseEvent) => {
|
||||
this.startDrag(event.clientX);
|
||||
};
|
||||
|
||||
private handleMouseMove = (event: MouseEvent) => {
|
||||
this.drag(event.clientX);
|
||||
};
|
||||
|
||||
private handleMouseUp = () => {
|
||||
this.endDrag();
|
||||
};
|
||||
|
||||
private handleTouchStart = (event: TouchEvent) => {
|
||||
if (event.touches.length === 1) {
|
||||
event.preventDefault();
|
||||
this.startDrag(event.touches[0].clientX);
|
||||
}
|
||||
};
|
||||
|
||||
private handleTouchMove = (event: TouchEvent) => {
|
||||
if (event.touches.length === 1) {
|
||||
event.preventDefault();
|
||||
this.drag(event.touches[0].clientX);
|
||||
}
|
||||
};
|
||||
|
||||
private handleTouchEnd = () => {
|
||||
this.endDrag();
|
||||
};
|
||||
|
||||
private startDrag(clientX: number) {
|
||||
this.canvas.style.cursor = "grabbing";
|
||||
this.canvas.style.userSelect = "none";
|
||||
|
||||
this.startX = clientX;
|
||||
this.isDragging = true;
|
||||
}
|
||||
|
||||
private drag(clientX: number) {
|
||||
if (!this.isDragging) return;
|
||||
|
||||
const deltaX = clientX - this.startX;
|
||||
const maxPositionX =
|
||||
this.images.length * this.images[0].width - this.container.clientWidth;
|
||||
this.positionX = Math.max(
|
||||
Math.min(this.positionX + deltaX, 0),
|
||||
-maxPositionX
|
||||
);
|
||||
this.startX = clientX;
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
private endDrag() {
|
||||
this.canvas.style.cursor = "grab";
|
||||
this.canvas.style.userSelect = "auto";
|
||||
this.isDragging = false;
|
||||
}
|
||||
|
||||
// private handleWindowResize = () => {
|
||||
// this.canvas.width = this.container.clientWidth;
|
||||
// this.canvas.height = this.container.clientHeight;
|
||||
// this.render();
|
||||
// };
|
||||
}
|
||||
179
Yi.Pure.Vue3/src/views/able/video-frame/index.vue
Normal file
179
Yi.Pure.Vue3/src/views/able/video-frame/index.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<script setup lang="ts">
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { useLoader } from "@pureadmin/utils";
|
||||
import { CanvasRenderer } from "./canvasRenderer";
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "VideoFrame"
|
||||
});
|
||||
|
||||
const num = 200;
|
||||
const curImg = ref("");
|
||||
const renderer = ref();
|
||||
const captureUtil = ref();
|
||||
const loading = ref(false);
|
||||
const { loadScript } = useLoader();
|
||||
|
||||
const { VITE_PUBLIC_PATH } = import.meta.env;
|
||||
const getPath = path => `${VITE_PUBLIC_PATH}wasm/${path}`;
|
||||
const src = getPath("index.js");
|
||||
const workerPath = getPath("capture.worker.js");
|
||||
const wasmPath = getPath("capture.worker.wasm");
|
||||
|
||||
loadScript({
|
||||
src
|
||||
}).then(mgs => {
|
||||
if (mgs[0].message === "加载成功") {
|
||||
// @ts-expect-error
|
||||
captureUtil.value = cheetahCapture.initCapture({
|
||||
workerPath,
|
||||
wasmPath
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
renderer.value = new CanvasRenderer("canvas-container");
|
||||
emitter.on("imageInfo", info => (curImg.value = info.img.src));
|
||||
});
|
||||
|
||||
function beforeUpload(file) {
|
||||
curImg.value = "";
|
||||
loading.value = true;
|
||||
renderer.value.clearImages();
|
||||
// api参考 https://github.com/wanwu/cheetah-capture#api
|
||||
captureUtil.value.then(res => {
|
||||
res.capture({
|
||||
// 视频文件
|
||||
file,
|
||||
// 抽取指定数目的帧图片，传递`number`是按照数目抽帧，传递数组是指定抽帧的时间，单位毫秒（抽帧策略：https://github.com/wanwu/cheetah-capture/issues/6#issuecomment-1634384486）
|
||||
info: 16,
|
||||
// 当抽帧结果变化的回调
|
||||
onChange: (list, { url }) => {
|
||||
renderer.value.addImage(url, num * list.url.length, 0, num, num);
|
||||
},
|
||||
// 当抽帧结束并成功的回调
|
||||
onSuccess: () => {
|
||||
renderer.value.addListener();
|
||||
// 默认选中第一张
|
||||
renderer.value.drawTick({ offsetX: num / 2, offsetY: num / 2 });
|
||||
loading.value = false;
|
||||
},
|
||||
// 当抽帧过程出现错误的回调
|
||||
onError: () => {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 解绑`imageInfo`公共事件，防止多次触发
|
||||
emitter.off("imageInfo");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
<p>
|
||||
基于自定义编译
|
||||
<el-link
|
||||
href="https://github.com/FFmpeg/FFmpeg"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
FFmpeg
|
||||
</el-link>
|
||||
的截帧工具，支持MP4、MOV、AVI、WebM、MKV等主流格式，支持
|
||||
H.264（AVC）、H.265（HEVC）、MPEG-2、MPEG-4、VP8、VP9、WMV3编码格式
|
||||
</p>
|
||||
当然还可以支持更多视频格式，只要FFmpeg支持的，按理都能支持，您也可参考
|
||||
<el-link
|
||||
href="https://github.com/wanwu/cheetah-capture"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
cheetah-capture
|
||||
</el-link>
|
||||
和
|
||||
<el-link
|
||||
href="https://github.com/jordiwang/web-capture"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
web-capture
|
||||
</el-link>
|
||||
修改并编译wasm等文件（强烈推荐在Ubuntu系统进行编译）
|
||||
<p>
|
||||
mac系统推荐安装
|
||||
<el-link
|
||||
href="https://github.com/utmapp/UTM"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
UTM
|
||||
</el-link>
|
||||
虚拟机，windows系统推荐安装VMware虚拟机
|
||||
</p>
|
||||
<p>
|
||||
当然这只是一个视频帧截取工具，如果您想要更多操作可以研究下
|
||||
<el-link
|
||||
href="https://ffmpegwasm.netlify.app/"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
ffmpeg.wasm
|
||||
</el-link>
|
||||
，它是基于 FFmpeg 的纯 WebAssembly / JavaScript
|
||||
工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap">
|
||||
<el-upload
|
||||
drag
|
||||
:show-file-list="false"
|
||||
accept=".mp4,.mov,.avi,.webm,.mkv"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<div class="el-upload__text">
|
||||
可拖拽上传视频（默认截取16张帧图片，可在代码中自行修改）
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-image
|
||||
v-if="curImg"
|
||||
:src="curImg"
|
||||
:preview-src-list="Array.of(curImg)"
|
||||
class="w-[180px] h-[180px] ml-2 rounded-[6px]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="canvas-container"
|
||||
v-loading="loading"
|
||||
element-loading-text="温馨提示：可左右拖拽图片并单击选取所需的帧图片"
|
||||
class="w-full h-[200px] overflow-hidden mt-6"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep(.el-upload-dragger) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
67
Yi.Pure.Vue3/src/views/able/video.vue
Normal file
67
Yi.Pure.Vue3/src/views/able/video.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
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 Player from "xgplayer";
|
||||
import "xgplayer/dist/index.min.css";
|
||||
|
||||
defineOptions({
|
||||
name: "VideoPage"
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
new Player({
|
||||
id: "mse",
|
||||
lang: "zh",
|
||||
// 默认静音
|
||||
volume: 0,
|
||||
autoplay: false,
|
||||
screenShot: true,
|
||||
videoAttributes: {
|
||||
crossOrigin: "anonymous"
|
||||
},
|
||||
url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
|
||||
poster:
|
||||
"//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
|
||||
fluid: deviceDetection(),
|
||||
//传入倍速可选数组
|
||||
playbackRate: [0.5, 0.75, 1, 1.5, 2]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<div id="mse" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#mse {
|
||||
flex: auto;
|
||||
}
|
||||
</style>
|
||||
202
Yi.Pure.Vue3/src/views/able/watermark.vue
Normal file
202
Yi.Pure.Vue3/src/views/able/watermark.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
|
||||
import { useWatermark } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "WaterMark"
|
||||
});
|
||||
|
||||
const local = ref();
|
||||
const preventLocal = ref();
|
||||
const color = ref("#409EFF");
|
||||
const value = ref("vue-pure-admin");
|
||||
const { setWatermark, clear } = useWatermark();
|
||||
const { setWatermark: setLocalWatermark, clear: clearLocal } =
|
||||
useWatermark(local);
|
||||
const { setWatermark: setPreventLocalWatermark } = useWatermark(preventLocal);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
setPreventLocalWatermark("无法删除的水印", {
|
||||
forever: true,
|
||||
width: 180,
|
||||
height: 70
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 在离开该页面时清除整页水印
|
||||
clear();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
<el-link
|
||||
href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; 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/watermark.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/able/watermark.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-space wrap class="!mb-2">
|
||||
<span> 请输入要创建水印的值：</span>
|
||||
<el-input v-model="value" class="mr-4" style="width: 200px" clearable />
|
||||
<span>请选择要创建水印的颜色：</span>
|
||||
<el-color-picker v-model="color" show-alpha />
|
||||
</el-space>
|
||||
|
||||
<el-space wrap>
|
||||
<el-button plain @click="setWatermark(value, { color })">
|
||||
创建整页水印
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变水印
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
rotate: 0,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变且水平90度的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
],
|
||||
shadowConfig: [20]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变且有阴影的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
globalAlpha: 0.15, // 值越低越透明
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页高透明渐变水印
|
||||
</el-button>
|
||||
<el-button plain @click="clear">清除整页水印</el-button>
|
||||
</el-space>
|
||||
|
||||
<div ref="local" class="w-1/2 h-[200px] border border-sky-500 mt-4" />
|
||||
|
||||
<el-space wrap class="mt-6">
|
||||
<el-button
|
||||
plain
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
color,
|
||||
width: 140,
|
||||
height: 65
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部水印
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 65,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变水印
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 65,
|
||||
rotate: 0,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变且水平90度的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 65,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
],
|
||||
shadowConfig: [20]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变且有阴影的水印
|
||||
</el-button>
|
||||
<el-button plain @click="clearLocal">清除局部水印</el-button>
|
||||
</el-space>
|
||||
|
||||
<div
|
||||
ref="preventLocal"
|
||||
class="w-1/2 h-[200px] border border-indigo-500 mt-4"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
146
Yi.Pure.Vue3/src/views/able/wavesurfer/index.vue
Normal file
146
Yi.Pure.Vue3/src/views/able/wavesurfer/index.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<script setup lang="ts">
|
||||
import WaveSurfer from "wavesurfer.js";
|
||||
import { getTime } from "@pureadmin/utils";
|
||||
import { Play, Pause, Forward, Rewind } from "./svg";
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Wavesurfer"
|
||||
});
|
||||
|
||||
const loading = ref(true);
|
||||
const wavesurfer = ref(null);
|
||||
const wavesurferRef = ref();
|
||||
// 音频总时长（格式化后 mm:ss）
|
||||
const totalTime = ref();
|
||||
// 音频总时长（单位秒）
|
||||
const totalSecondTime = ref();
|
||||
// 音频当前播放位置时长
|
||||
const curTime = ref();
|
||||
// 音频是否正在播放
|
||||
const isPlay = ref(false);
|
||||
|
||||
const { VITE_PUBLIC_PATH } = import.meta.env;
|
||||
const url = `${VITE_PUBLIC_PATH}audio/海阔天空.mp3`;
|
||||
|
||||
function init() {
|
||||
wavesurfer.value = WaveSurfer.create({
|
||||
container: wavesurferRef.value,
|
||||
height: "auto",
|
||||
waveColor: "rgb(200, 0, 200)",
|
||||
progressColor: "rgb(100, 0, 100)",
|
||||
cursorColor: "rgb(64, 158, 255)",
|
||||
cursorWidth: 4,
|
||||
// backend: "MediaElement",
|
||||
url
|
||||
});
|
||||
|
||||
// 音频被解码后触发
|
||||
wavesurfer.value.on("decode", () => (loading.value = false));
|
||||
|
||||
// 当音频已解码并可以播放时触发
|
||||
wavesurfer.value.on("ready", () => {
|
||||
if (!wavesurfer.value) return;
|
||||
const { decodedData } = wavesurfer.value;
|
||||
totalSecondTime.value = decodedData.duration;
|
||||
const { m, s } = getTime(decodedData.duration);
|
||||
totalTime.value = `${m}:${s}`;
|
||||
// 光标位置取中
|
||||
wavesurfer.value.setTime(decodedData.duration / 2);
|
||||
// 设置音频音量（范围0-1）
|
||||
// wavesurfer.value.setVolume(1);
|
||||
});
|
||||
|
||||
// 音频位置改变时，播放期间连续触发
|
||||
wavesurfer.value.on("timeupdate", timer => {
|
||||
if (timer > totalSecondTime.value) return;
|
||||
const { m, s } = getTime(timer);
|
||||
curTime.value = `${m}:${s}`;
|
||||
});
|
||||
|
||||
// 音频播放时触发
|
||||
wavesurfer.value.on("play", () => (isPlay.value = true));
|
||||
|
||||
// 音频暂停时触发
|
||||
wavesurfer.value.on("pause", () => (isPlay.value = false));
|
||||
}
|
||||
|
||||
onMounted(init);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (wavesurfer.value) {
|
||||
wavesurfer.value.destroy();
|
||||
wavesurfer.value = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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]">
|
||||
（温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您）
|
||||
</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>
|
||||
<div
|
||||
v-loading="loading"
|
||||
class="w-8/12 !m-auto !mt-[20px]"
|
||||
element-loading-background="transparent"
|
||||
>
|
||||
<div ref="wavesurferRef" />
|
||||
<div v-show="totalTime" class="flex justify-between">
|
||||
<span class="text-[#81888f]">00:00</span>
|
||||
<h1 class="text-4xl mt-2">{{ curTime }}</h1>
|
||||
<span class="text-[#81888f]">{{ totalTime }}</span>
|
||||
</div>
|
||||
<div v-show="totalTime" class="flex mt-2 w-[180px] justify-around m-auto">
|
||||
<Rewind
|
||||
v-tippy="{
|
||||
content: '快退（可长按）',
|
||||
placement: 'bottom'
|
||||
}"
|
||||
v-longpress:0:100="() => wavesurfer?.skip(-1)"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<div
|
||||
v-tippy="{
|
||||
content: isPlay ? '暂停' : '播放',
|
||||
placement: 'bottom'
|
||||
}"
|
||||
class="cursor-pointer"
|
||||
@click="wavesurfer?.playPause()"
|
||||
>
|
||||
<Play v-if="isPlay" v-motion-pop />
|
||||
<Pause v-else v-motion-pop />
|
||||
</div>
|
||||
<Forward
|
||||
v-tippy="{
|
||||
content: '快进（可长按）',
|
||||
placement: 'bottom'
|
||||
}"
|
||||
v-longpress:0:100="() => wavesurfer?.skip(1)"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
1
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/forward.svg
Normal file
1
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/forward.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#409EFF" d="M515.5 91.5C747.4 91.5 936 280.1 936 512S747.4 932.5 515.5 932.5 95 743.9 95 512 283.6 91.5 515.5 91.5m0-87C235.2 4.5 8 231.7 8 512s227.2 507.5 507.5 507.5S1023 792.3 1023 512 795.8 4.5 515.5 4.5"/><path fill="#81888f" d="m337.7 450.8 84.1 61.2-84.1 61.2zm-28.8-115c-30.1 0-58.2 23.8-58.2 58.1v236.2c0 34.3 28.1 58.1 58.2 58.1 11.5 0 23.3-3.5 33.9-11.2l162.4-118.1c31.9-23.2 31.9-70.7 0-93.8L342.8 347c-10.6-7.7-22.4-11.2-33.9-11.2"/><path fill="#81888f" d="m529.1 450.8 84.1 61.2-84.1 61.2zm-28.8-115c-30.1 0-58.2 23.8-58.2 58.1v236.2c0 34.3 28.1 58.1 58.2 58.1 11.5 0 23.3-3.5 33.9-11.2l162.4-118.1c31.9-23.2 31.9-70.7 0-93.8L534.2 347c-10.6-7.7-22.4-11.2-33.9-11.2"/><path fill="#81888f" d="M736.8 367c-24 0-43.5 19.5-43.5 43.5v203c0 24 19.5 43.5 43.5 43.5s43.5-19.5 43.5-43.5v-203c0-24-19.5-43.5-43.5-43.5"/></svg>
|
||||
|
After Width: | Height: | Size: 942 B |
15
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/index.ts
Normal file
15
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/index.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import Play from "./play.svg?component";
|
||||
import Pause from "./pause.svg?component";
|
||||
import Forward from "./forward.svg?component";
|
||||
import Rewind from "./rewind.svg?component";
|
||||
|
||||
export {
|
||||
/** 播放 */
|
||||
Play,
|
||||
/** 暂停 */
|
||||
Pause,
|
||||
/** 快进 */
|
||||
Forward,
|
||||
/** 快退 */
|
||||
Rewind
|
||||
};
|
||||
1
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/pause.svg
Normal file
1
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/pause.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="icon" viewBox="0 0 1024 1024"><path fill="#f56c6c" d="M512 42.667C252.793 42.667 42.667 252.793 42.667 512S252.793 981.333 512 981.333 981.333 771.207 981.333 512 771.207 42.667 512 42.667M708.547 543.16l-266.667 176A37.333 37.333 0 0 1 384 688V336.033a37.333 37.333 0 0 1 57.893-31.16l266.667 176a37.333 37.333 0 0 1 0 62.32z"/></svg>
|
||||
|
After Width: | Height: | Size: 405 B |
1
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/play.svg
Normal file
1
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/play.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="icon" viewBox="0 0 1024 1024"><path fill="#409eff" d="M512 0C229.227 0 0 229.227 0 512s229.227 512 512 512 512-229.227 512-512S794.773 0 512 0m-33.023 704.742c0 34.191-25.028 62.18-55.617 62.18s-55.618-27.975-55.618-62.18V319.258c0-34.19 25.028-62.18 55.618-62.18s55.617 27.975 55.617 62.18zm170.328 0c0 34.191-25.027 62.18-55.617 62.18s-55.617-27.975-55.617-62.18V319.258c0-34.19 25.027-62.18 55.617-62.18s55.617 27.975 55.617 62.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 513 B |
1
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/rewind.svg
Normal file
1
Yi.Pure.Vue3/src/views/able/wavesurfer/svg/rewind.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#409EFF" d="M512 90.3c231.9 0 420.5 188.6 420.5 420.5S743.9 931.3 512 931.3 91.5 742.7 91.5 510.8 280.1 90.3 512 90.3m0-87C231.7 3.3 4.5 230.5 4.5 510.8s227.2 507.5 507.5 507.5 507.5-227.2 507.5-507.5S792.3 3.3 512 3.3"/><path fill="#81888f" d="M689.8 449.7V572l-84.1-61.2zm28.8-115.1c-11.5 0-23.3 3.5-33.9 11.2L522.3 463.9c-31.9 23.2-31.9 70.6 0 93.8l162.4 118.1c10.6 7.7 22.4 11.2 33.9 11.2 30.1 0 58.2-23.8 58.2-58.1V392.7c0-34.3-28.1-58.1-58.2-58.1"/><path fill="#81888f" d="M498.4 449.7V572l-84.1-61.2zm28.8-115.1c-11.5 0-23.3 3.5-33.9 11.2L330.9 463.9c-31.9 23.2-31.9 70.6 0 93.8l162.4 118.1c10.6 7.7 22.4 11.2 33.9 11.2 30.1 0 58.2-23.8 58.2-58.1V392.7c0-34.3-28.1-58.1-58.2-58.1"/><path fill="#81888f" d="M290.7 365.8c-24 0-43.5 19.5-43.5 43.5v203c0 24 19.5 43.5 43.5 43.5s43.5-19.5 43.5-43.5v-203c0-24-19.5-43.5-43.5-43.5"/></svg>
|
||||
|
After Width: | Height: | Size: 951 B |
Reference in New Issue
Block a user