mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-12-15 14:50:29 +08:00
perf: 优化演示页面
This commit is contained in:
xiaoxian521
35
src/views/able/danmaku/danmu.ts
Normal file
35
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 };
|
||||
215
src/views/able/danmaku/index.vue
Normal file
215
src/views/able/danmaku/index.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<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>
|
||||
</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>
|
||||
Reference in New Issue
Block a user