mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-09 13:53:38 +08:00
perf: 优化演示页面
This commit is contained in:
xiaoxian521
@@ -25,10 +25,10 @@ watch(icon, () => {
|
||||
>
|
||||
animate.css
|
||||
</el-link>
|
||||
选择器组件
|
||||
选择器
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<ReAnimateSelector v-model="icon" />
|
||||
<ReAnimateSelector v-model="icon" class="!w-[200px]" />
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -14,7 +14,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">通过iframe引入按钮页面</span>
|
||||
<span class="font-medium">通过 iframe 引入按钮页面</span>
|
||||
</div>
|
||||
</template>
|
||||
<iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
|
||||
152
src/views/components/cascader.vue
Normal file
152
src/views/components/cascader.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
provinceAndCityDataPlus,
|
||||
provinceAndCityData,
|
||||
convertTextToCode,
|
||||
regionDataPlus,
|
||||
regionData,
|
||||
CodeToText
|
||||
} from "@/utils/chinaArea";
|
||||
import { ref } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Cascader"
|
||||
});
|
||||
|
||||
const selectedOptions1 = ref(["110000", "110100"]);
|
||||
const selectedOptions2 = ref(["120000", "120100", "120101"]);
|
||||
const selectedOptions3 = ref(["130000", ""]);
|
||||
const selectedOptions4 = ref(["120000", "120100", ""]);
|
||||
|
||||
const handleChange = value => {
|
||||
console.log(value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header> <p class="font-medium">区域级联选择器</p> </template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
1. 二级联动（不带“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions1"
|
||||
:options="provinceAndCityData"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</span>
|
||||
<div class="leading-10">
|
||||
<div>绑定值：{{ selectedOptions1 }}</div>
|
||||
<div>
|
||||
区域码转汉字：
|
||||
{{ CodeToText[selectedOptions1[0]] }},
|
||||
{{ CodeToText[selectedOptions1[1]] }}
|
||||
</div>
|
||||
<div>
|
||||
汉字转区域码：
|
||||
{{
|
||||
convertTextToCode(
|
||||
CodeToText[selectedOptions1[0]],
|
||||
CodeToText[selectedOptions1[1]]
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
2. 二级联动（带有“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions3"
|
||||
:options="provinceAndCityDataPlus"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</span>
|
||||
<div class="leading-10">
|
||||
<div>绑定值：{{ selectedOptions3 }}</div>
|
||||
<div>
|
||||
区域码转汉字：
|
||||
{{ CodeToText[selectedOptions3[0]] }},
|
||||
{{ CodeToText[selectedOptions3[1]] }}
|
||||
</div>
|
||||
<div>
|
||||
汉字转区域码：
|
||||
{{
|
||||
convertTextToCode(
|
||||
CodeToText[selectedOptions3[0]],
|
||||
CodeToText[selectedOptions3[1]]
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
3. 三级联动（不带“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions2"
|
||||
:options="regionData"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</span>
|
||||
<div class="leading-10">
|
||||
<div>绑定值：{{ selectedOptions2 }}</div>
|
||||
<div>
|
||||
区域码转汉字：
|
||||
{{ CodeToText[selectedOptions2[0]] }},
|
||||
{{ CodeToText[selectedOptions2[1]] }},
|
||||
{{ CodeToText[selectedOptions2[2]] }}
|
||||
</div>
|
||||
<div>
|
||||
汉字转区域码：
|
||||
{{
|
||||
convertTextToCode(
|
||||
CodeToText[selectedOptions2[0]],
|
||||
CodeToText[selectedOptions2[1]],
|
||||
CodeToText[selectedOptions2[2]]
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
4. 三级联动（带"全部选项"）
|
||||
<el-cascader
|
||||
v-model="selectedOptions4"
|
||||
:options="regionDataPlus"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</span>
|
||||
<div class="leading-10">
|
||||
<div>绑定值：{{ selectedOptions4 }}</div>
|
||||
<div>
|
||||
区域码转汉字：
|
||||
{{ CodeToText[selectedOptions4[0]] }},
|
||||
{{ CodeToText[selectedOptions4[1]] }},
|
||||
{{ CodeToText[selectedOptions4[2]] }}
|
||||
</div>
|
||||
<div>
|
||||
汉字转区域码：
|
||||
{{
|
||||
convertTextToCode(
|
||||
CodeToText[selectedOptions4[0]],
|
||||
CodeToText[selectedOptions4[1]],
|
||||
CodeToText[selectedOptions4[2]]
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">基本使用</p>
|
||||
<p class="mb-2">基础用法</p>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
@@ -13,12 +13,12 @@ defineOptions({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">右键菜单组件</span>
|
||||
<span class="font-medium">右键菜单</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 基本使用 -->
|
||||
<!-- 基础用法 -->
|
||||
<basic />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
|
||||
35
src/views/components/count-to.vue
Normal file
35
src/views/components/count-to.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
|
||||
|
||||
defineOptions({
|
||||
name: "CountTo"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">数字动画</span>
|
||||
</div>
|
||||
</template>
|
||||
<ReNormalCountTo
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'2em'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
<br />
|
||||
<ul class="flex">
|
||||
<ReboundCountTo
|
||||
v-for="(num, inx) of [1, 6, 6, 6]"
|
||||
:key="inx"
|
||||
:i="num"
|
||||
:blur="inx"
|
||||
:delay="inx + 1"
|
||||
/>
|
||||
</ul>
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -1,36 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
|
||||
|
||||
defineOptions({
|
||||
name: "CountTo"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">数字动画组件</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex items-center">
|
||||
<ReNormalCountTo
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'2em'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
<ul class="flex ml-8">
|
||||
<ReboundCountTo
|
||||
v-for="(num, inx) of [1, 6, 6, 6]"
|
||||
:key="inx"
|
||||
:i="num"
|
||||
:blur="inx"
|
||||
:delay="inx + 1"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from "vue";
|
||||
import avatar from "./avatar.png";
|
||||
import { ref, onBeforeUnmount } from "vue";
|
||||
import ReCropper from "@/components/ReCropper";
|
||||
import { formatBytes } from "@pureadmin/utils";
|
||||
|
||||
@@ -9,6 +9,7 @@ defineOptions({
|
||||
});
|
||||
|
||||
const infos = ref();
|
||||
const popoverRef = ref();
|
||||
const refCropper = ref();
|
||||
const showPopover = ref(false);
|
||||
const cropperImg = ref<string>("");
|
||||
@@ -18,6 +19,10 @@ function onCropper({ base64, blob, info }) {
|
||||
infos.value = info;
|
||||
cropperImg.value = base64;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
popoverRef.value.hide();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -25,7 +30,7 @@ function onCropper({ base64, blob, info }) {
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
图片裁剪组件，基于开源的
|
||||
图片裁剪，基于开源的
|
||||
<el-link
|
||||
href="https://fengyuanchen.github.io/cropperjs/"
|
||||
target="_blank"
|
||||
@@ -37,39 +42,41 @@ function onCropper({ base64, blob, info }) {
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-popover
|
||||
:visible="showPopover"
|
||||
placement="right"
|
||||
width="300px"
|
||||
:teleported="false"
|
||||
>
|
||||
<template #reference>
|
||||
<ReCropper
|
||||
ref="refCropper"
|
||||
class="w-[30vw]"
|
||||
:src="avatar"
|
||||
circled
|
||||
@cropper="onCropper"
|
||||
@readied="showPopover = true"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex flex-wrap justify-center items-center text-center">
|
||||
<el-image
|
||||
v-if="cropperImg"
|
||||
:src="cropperImg"
|
||||
:preview-src-list="Array.of(cropperImg)"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-if="infos" class="mt-1">
|
||||
<p>
|
||||
图像大小：{{ parseInt(infos.width) }} ×
|
||||
{{ parseInt(infos.height) }}像素
|
||||
</p>
|
||||
<p>
|
||||
文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
|
||||
</p>
|
||||
<div v-loading="!showPopover" element-loading-background="transparent">
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:visible="showPopover"
|
||||
placement="right"
|
||||
width="300px"
|
||||
>
|
||||
<template #reference>
|
||||
<ReCropper
|
||||
ref="refCropper"
|
||||
class="w-[30vw]"
|
||||
:src="avatar"
|
||||
circled
|
||||
@cropper="onCropper"
|
||||
@readied="showPopover = true"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex flex-wrap justify-center items-center text-center">
|
||||
<el-image
|
||||
v-if="cropperImg"
|
||||
:src="cropperImg"
|
||||
:preview-src-list="Array.of(cropperImg)"
|
||||
fit="cover"
|
||||
/>
|
||||
<div v-if="infos" class="mt-1">
|
||||
<p>
|
||||
图像大小：{{ parseInt(infos.width) }} ×
|
||||
{{ parseInt(infos.height) }}像素
|
||||
</p>
|
||||
<p>
|
||||
文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
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 };
|
||||
@@ -1,215 +0,0 @@
|
||||
<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>
|
||||
@@ -20,8 +20,8 @@ const router = useRouter();
|
||||
|
||||
function onBaseClick() {
|
||||
addDialog({
|
||||
title: "基本使用",
|
||||
contentRenderer: () => <p>弹框内容-基本使用</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
|
||||
title: "基础用法",
|
||||
contentRenderer: () => <p>弹框内容-基础用法</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
|
||||
});
|
||||
}
|
||||
|
||||
@@ -422,7 +422,7 @@ function onBeforeSureClick() {
|
||||
title: "点击底部确定按钮的回调",
|
||||
contentRenderer: () => (
|
||||
<p>
|
||||
弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
|
||||
弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
|
||||
</p>
|
||||
),
|
||||
beforeSure: (done, { options, index }) => {
|
||||
@@ -454,15 +454,16 @@ function onBeforeSureClick() {
|
||||
，采用函数式调用弹框组件（更多操作实例请参考
|
||||
<span
|
||||
class="cursor-pointer text-primary"
|
||||
@click="router.push({ name: 'Dept' })"
|
||||
>系统管理页面</span
|
||||
@click="router.push({ name: 'SystemDept' })"
|
||||
>
|
||||
系统管理页面
|
||||
</span>
|
||||
）
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button @click="onBaseClick"> 基本使用 </el-button>
|
||||
<el-button @click="onBaseClick"> 基础用法 </el-button>
|
||||
<el-button @click="onDraggableClick"> 可拖拽 </el-button>
|
||||
<el-button @click="onFullscreenClick"> 全屏 </el-button>
|
||||
<el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
|
||||
@@ -510,7 +511,7 @@ function onBeforeSureClick() {
|
||||
点击底部取消按钮的回调（会暂停弹框的关闭）
|
||||
</el-button>
|
||||
<el-button @click="onBeforeSureClick">
|
||||
点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
|
||||
点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
@@ -1,223 +0,0 @@
|
||||
<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>
|
||||
</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>
|
||||
21
src/views/components/icon-select.vue
Normal file
21
src/views/components/icon-select.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { IconSelect } from "@/components/ReIcon";
|
||||
|
||||
defineOptions({
|
||||
name: "IconSelect"
|
||||
});
|
||||
|
||||
const icon = ref("ep:add-location");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">图标选择器</span>
|
||||
</div>
|
||||
</template>
|
||||
<IconSelect v-model="icon" class="w-[200px]" />
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -76,7 +76,7 @@ watch(
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
JSON编辑器组件，采用开源的
|
||||
JSON编辑器，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/leezng/vue-json-pretty"
|
||||
target="_blank"
|
||||
@@ -87,7 +87,7 @@ watch(
|
||||
（支持大数据量）。
|
||||
</span>
|
||||
<span class="font-medium">
|
||||
当然我们还有一款代码编辑器组件推荐（这里就不做演示了），采用开源的
|
||||
当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
|
||||
<el-link
|
||||
href="https://github.com/surmon-china/vue-codemirror"
|
||||
target="_blank"
|
||||
@@ -1,17 +0,0 @@
|
||||
<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>
|
||||
@@ -14,7 +14,7 @@ defineOptions({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> Message提示 </span>
|
||||
<span class="font-medium"> 消息提示 </span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -53,7 +53,7 @@ function changeDirection(val) {
|
||||
<el-card class="box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">无缝滚动示例</span>
|
||||
<span class="font-medium">无缝滚动</span>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
@@ -30,6 +30,30 @@ const optionsBasis: Array<OptionsType> = [
|
||||
}
|
||||
];
|
||||
|
||||
/** tooltip 提示 */
|
||||
const optionsTooltip: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一",
|
||||
tip: "周一启航，新的篇章"
|
||||
},
|
||||
{
|
||||
label: "周二",
|
||||
tip: "周二律动，携手共进"
|
||||
},
|
||||
{
|
||||
label: "周三",
|
||||
tip: "周三昂扬，激情不减"
|
||||
},
|
||||
{
|
||||
label: "周四",
|
||||
tip: "周四精进，事半功倍"
|
||||
},
|
||||
{
|
||||
label: "周五",
|
||||
tip: "周五喜悦，收尾归档"
|
||||
}
|
||||
];
|
||||
|
||||
/** 禁用 */
|
||||
const optionsDisabled: Array<OptionsType> = [
|
||||
{
|
||||
@@ -51,7 +75,7 @@ const optionsDisabled: Array<OptionsType> = [
|
||||
}
|
||||
];
|
||||
|
||||
/** 设置图标 */
|
||||
/** 可设置图标 */
|
||||
const optionsIcon: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一",
|
||||
@@ -65,8 +89,7 @@ const optionsIcon: Array<OptionsType> = [
|
||||
icon: "terminalWindowLine"
|
||||
},
|
||||
{
|
||||
label: "周四",
|
||||
icon: "streamline-emojis:airplane"
|
||||
label: "周四"
|
||||
},
|
||||
{
|
||||
label: "周五",
|
||||
@@ -99,7 +122,7 @@ const optionsLabel: Array<OptionsType> = [
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon(HomeFilled), {
|
||||
class: "m-auto w-[20px] h-[20px]"
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周一</p>
|
||||
</div>
|
||||
@@ -109,7 +132,7 @@ const optionsLabel: Array<OptionsType> = [
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon("terminalWindowLine"), {
|
||||
class: "m-auto w-[20px] h-[20px]"
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周二</p>
|
||||
</div>
|
||||
@@ -119,7 +142,7 @@ const optionsLabel: Array<OptionsType> = [
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon("streamline-emojis:cow-face"), {
|
||||
class: "m-auto w-[20px] h-[20px]"
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周三</p>
|
||||
</div>
|
||||
@@ -142,7 +165,7 @@ const optionsChange: Array<OptionsType> = [
|
||||
}
|
||||
];
|
||||
|
||||
/** change事件 */
|
||||
/** change 事件 */
|
||||
function onChange({ index, option }) {
|
||||
const { label, value } = option;
|
||||
message(`当前选中项索引为：${index}，名字为${label}，值为${value}`, {
|
||||
@@ -158,26 +181,37 @@ function onChange({ index, option }) {
|
||||
<span class="font-medium">分段控制器</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="mb-2">
|
||||
基础用法（v-model）<span class="text-primary">
|
||||
{{ optionsBasis[value].label }}
|
||||
</span>
|
||||
</p>
|
||||
<Segmented v-model="value" :options="optionsBasis" />
|
||||
<el-divider />
|
||||
<p class="mb-2">禁用</p>
|
||||
<Segmented :options="optionsDisabled" />
|
||||
<el-divider />
|
||||
<p class="mb-2">设置图标</p>
|
||||
<Segmented :options="optionsIcon" />
|
||||
<el-divider />
|
||||
<p class="mb-2">只设置图标</p>
|
||||
<Segmented :options="optionsOnlyIcon" />
|
||||
<el-divider />
|
||||
<p class="mb-2">自定义渲染</p>
|
||||
<Segmented :options="optionsLabel" />
|
||||
<el-divider />
|
||||
<p class="mb-2">change事件</p>
|
||||
<Segmented :options="optionsChange" @change="onChange" />
|
||||
<el-scrollbar>
|
||||
<p class="mb-2">
|
||||
基础用法（v-model）<span class="text-primary">
|
||||
{{ optionsBasis[value].label }}
|
||||
</span>
|
||||
</p>
|
||||
<Segmented v-model="value" :options="optionsBasis" />
|
||||
<el-divider />
|
||||
<p class="mb-2">tooltip 提示</p>
|
||||
<Segmented :options="optionsTooltip" />
|
||||
<el-divider />
|
||||
<p class="mb-2">change 事件</p>
|
||||
<Segmented :options="optionsChange" @change="onChange" />
|
||||
<el-divider />
|
||||
<p class="mb-2">禁用</p>
|
||||
<Segmented :options="optionsDisabled" />
|
||||
<el-divider />
|
||||
<p class="mb-2">可设置图标</p>
|
||||
<Segmented :options="optionsIcon" />
|
||||
<el-divider />
|
||||
<p class="mb-2">只设置图标</p>
|
||||
<Segmented :options="optionsOnlyIcon" />
|
||||
<el-divider />
|
||||
<p class="mb-2">自定义渲染</p>
|
||||
<Segmented :options="optionsLabel" />
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -9,7 +9,7 @@ defineOptions({
|
||||
const selectRange = ref<string>("");
|
||||
const dataLists = ref([
|
||||
{
|
||||
title: "基本使用",
|
||||
title: "基础用法",
|
||||
echo: [],
|
||||
disabled: false
|
||||
},
|
||||
@@ -23,7 +23,7 @@ const settingTB: ContextProps = reactive({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">切割面板组件</span>
|
||||
<span class="font-medium">切割面板</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="split-pane">
|
||||
@@ -31,17 +31,21 @@ const settingTB: ContextProps = reactive({
|
||||
<!-- #paneL 表示指定该组件为左侧面板 -->
|
||||
<template #paneL>
|
||||
<!-- 自定义左侧面板的内容 -->
|
||||
<div class="dv-a">A</div>
|
||||
<el-scrollbar>
|
||||
<div class="dv-a">A</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<!-- #paneR 表示指定该组件为右侧面板 -->
|
||||
<template #paneR>
|
||||
<!-- 再次将右侧面板进行拆分 -->
|
||||
<splitpane :splitSet="settingTB">
|
||||
<template #paneL>
|
||||
<div class="dv-b">B</div>
|
||||
<el-scrollbar><div class="dv-b">B</div></el-scrollbar>
|
||||
</template>
|
||||
<template #paneR>
|
||||
<div class="dv-c">C</div>
|
||||
<el-scrollbar>
|
||||
<div class="dv-c">C</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</splitpane>
|
||||
</template>
|
||||
@@ -51,36 +55,25 @@ const settingTB: ContextProps = reactive({
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$W: 100%;
|
||||
$H: 70vh;
|
||||
|
||||
.split-pane {
|
||||
width: 70vw;
|
||||
height: $H;
|
||||
width: 100%;
|
||||
height: calc(100vh - 260px);
|
||||
font-size: 50px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border: 1px solid #e5e6eb;
|
||||
|
||||
.dv-a,
|
||||
.dv-b,
|
||||
.dv-c {
|
||||
width: $W;
|
||||
height: $W;
|
||||
line-height: $H;
|
||||
.dv-a {
|
||||
padding-top: 30vh;
|
||||
color: rgba($color: dodgerblue, $alpha: 80%);
|
||||
}
|
||||
|
||||
.dv-b,
|
||||
.dv-c {
|
||||
line-height: 250px;
|
||||
}
|
||||
|
||||
.dv-b {
|
||||
padding-top: 10vh;
|
||||
color: rgba($color: #000, $alpha: 80%);
|
||||
}
|
||||
|
||||
.dv-c {
|
||||
padding-top: 18vh;
|
||||
color: rgba($color: #ce272d, $alpha: 80%);
|
||||
}
|
||||
}
|
||||
123
src/views/components/swiper.vue
Normal file
123
src/views/components/swiper.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import SwiperCore from "swiper";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
||||
|
||||
defineOptions({
|
||||
name: "Swiper"
|
||||
});
|
||||
|
||||
SwiperCore.use([Autoplay, Navigation, Pagination]);
|
||||
|
||||
const swiperExample: any[] = [
|
||||
{ id: 0, label: "基础滑动", options: {} },
|
||||
{
|
||||
id: 1,
|
||||
label: "按钮切换",
|
||||
options: {
|
||||
navigation: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "分页器",
|
||||
options: {
|
||||
pagination: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "分页器 / 动态指示点",
|
||||
options: {
|
||||
pagination: { dynamicBullets: true }
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "分页器 / 进度条",
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
type: "progressbar"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: "分页器 / 分式",
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
type: "fraction"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "一次显示多个Slides",
|
||||
options: {
|
||||
pagination: {
|
||||
clickable: true
|
||||
},
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: "无限循环",
|
||||
options: {
|
||||
autoplay: {
|
||||
delay: 2000,
|
||||
disableOnInteraction: false
|
||||
},
|
||||
navigation: true,
|
||||
pagination: {
|
||||
clickable: true
|
||||
},
|
||||
loop: true
|
||||
}
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
Swiper插件（
|
||||
<el-link
|
||||
href="https://github.com/nolimits4web/swiper"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
github地址
|
||||
</el-link>
|
||||
）
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="10">
|
||||
<el-col v-for="item in swiperExample" :key="item.id" :span="12">
|
||||
<h6 class="py-[16px] text-base">{{ item.label }}</h6>
|
||||
<swiper v-bind="item.options">
|
||||
<swiper-slide v-for="i in 5" :key="i">
|
||||
<div
|
||||
class="flex justify-center items-center h-[240px] border border-[#999]"
|
||||
>
|
||||
Slide{{ i }}
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-card__body) {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
119
src/views/components/timeline.vue
Normal file
119
src/views/components/timeline.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import { markRaw } from "vue";
|
||||
import { randomGradient } from "@pureadmin/utils";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
defineOptions({
|
||||
name: "TimeLine"
|
||||
});
|
||||
|
||||
const { lastBuildTime } = __APP_INFO__;
|
||||
const activities = [
|
||||
{
|
||||
content: "支持圆点发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(useRenderFlicker())
|
||||
},
|
||||
{
|
||||
content: "支持方形发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
|
||||
},
|
||||
{
|
||||
content: "支持渐变发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(
|
||||
useRenderFlicker({
|
||||
background: randomGradient({
|
||||
randomizeHue: true
|
||||
})
|
||||
})
|
||||
)
|
||||
},
|
||||
{
|
||||
content: "支持默认颜色",
|
||||
timestamp: lastBuildTime
|
||||
},
|
||||
{
|
||||
content: "支持自定义颜色",
|
||||
timestamp: lastBuildTime,
|
||||
color: "#F56C6C"
|
||||
},
|
||||
{
|
||||
content: "支持自定义图标",
|
||||
timestamp: lastBuildTime,
|
||||
color: "transparent",
|
||||
icon: useRenderIcon(Iphone, {
|
||||
color: "#0bbd87"
|
||||
})
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">时间线</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:color="activity.color"
|
||||
:timestamp="activity.timestamp"
|
||||
>
|
||||
{{ activity.content }}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
|
||||
<el-timeline class="pl-40">
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:color="activity.color"
|
||||
:timestamp="activity.timestamp"
|
||||
placement="bottom"
|
||||
>
|
||||
<div class="message">
|
||||
vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.message {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
padding: 5px 12px;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.message::after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
content: "";
|
||||
border-color: var(--el-color-primary) transparent transparent;
|
||||
border-style: solid dashed dashed;
|
||||
border-width: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
|
||||
defineOptions({
|
||||
name: "Typeit"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 打字机组件 </span>
|
||||
</div>
|
||||
</template>
|
||||
<TypeIt :values="['test1', 'test2', 'test3']" />
|
||||
</el-card>
|
||||
</template>
|
||||
@@ -1,60 +0,0 @@
|
||||
<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>
|
||||
</template>
|
||||
<div id="mse" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#mse {
|
||||
flex: auto;
|
||||
}
|
||||
</style>
|
||||
92
src/views/components/virtual-list/horizontal.vue
Normal file
92
src/views/components/virtual-list/horizontal.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
|
||||
|
||||
const items = ref([]);
|
||||
const search = ref("");
|
||||
|
||||
for (let i = 0; i < 800; i++) {
|
||||
items.value.push({
|
||||
id: i
|
||||
});
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!search.value) return items.value;
|
||||
const lowerCaseSearch = search.value;
|
||||
return items.value.filter(i => i.id == lowerCaseSearch);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dynamic-scroller-demo">
|
||||
<div class="flex-ac mb-4 shadow-2xl">
|
||||
水平模式 horizontal
|
||||
<el-input
|
||||
v-model="search"
|
||||
class="mr-2 !w-[1/1.5]"
|
||||
clearable
|
||||
placeholder="Filter..."
|
||||
style="width: 300px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DynamicScroller
|
||||
:items="filteredItems"
|
||||
:min-item-size="54"
|
||||
direction="horizontal"
|
||||
class="scroller"
|
||||
>
|
||||
<template #default="{ item, index, active }">
|
||||
<DynamicScrollerItem
|
||||
:item="item"
|
||||
:active="active"
|
||||
:size-dependencies="[item.id]"
|
||||
:data-index="index"
|
||||
:data-active="active"
|
||||
:title="`Click to change message ${index}`"
|
||||
:style="{
|
||||
width: `${Math.max(130, Math.round((item.id?.length / 20) * 20))}px`
|
||||
}"
|
||||
class="message"
|
||||
>
|
||||
<div>
|
||||
<IconifyIconOnline
|
||||
icon="openmoji:beaming-face-with-smiling-eyes"
|
||||
width="40"
|
||||
/>
|
||||
<p class="text-center">{{ item.id }}</p>
|
||||
</div>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
</DynamicScroller>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dynamic-scroller-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
flex: auto 1 1;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 24px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.message {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 32px;
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
31
src/views/components/virtual-list/index.vue
Normal file
31
src/views/components/virtual-list/index.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import verticalList from "./vertical.vue";
|
||||
import horizontalList from "./horizontal.vue";
|
||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||
|
||||
defineOptions({
|
||||
name: "VirtualList"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
虚拟列表（
|
||||
<el-link
|
||||
href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
github地址
|
||||
</el-link>
|
||||
）
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-full flex justify-around flex-wrap">
|
||||
<vertical-list class="h-[500px] w-[500px]" />
|
||||
<horizontal-list class="h-[500px] w-[500px]" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
79
src/views/components/virtual-list/vertical.vue
Normal file
79
src/views/components/virtual-list/vertical.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
|
||||
|
||||
const items = ref([]);
|
||||
const search = ref("");
|
||||
|
||||
for (let i = 0; i < 800; i++) {
|
||||
items.value.push({
|
||||
id: i
|
||||
});
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!search.value) return items.value;
|
||||
const lowerCaseSearch = search.value;
|
||||
return items.value.filter(i => i.id == lowerCaseSearch);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dynamic-scroller-demo">
|
||||
<div class="flex-ac mb-4 shadow-2xl">
|
||||
垂直模式 vertical
|
||||
<el-input
|
||||
v-model="search"
|
||||
class="!w-[350px]"
|
||||
clearable
|
||||
placeholder="Filter..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DynamicScroller
|
||||
:items="filteredItems"
|
||||
:min-item-size="54"
|
||||
class="scroller"
|
||||
>
|
||||
<template #default="{ item, index, active }">
|
||||
<DynamicScrollerItem
|
||||
:item="item"
|
||||
:active="active"
|
||||
:size-dependencies="[item.id]"
|
||||
:data-index="index"
|
||||
:data-active="active"
|
||||
:title="`Click to change message ${index}`"
|
||||
class="message"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<IconifyIconOnline
|
||||
icon="openmoji:beaming-face-with-smiling-eyes"
|
||||
width="40"
|
||||
/>
|
||||
<span>{{ item.id }}</span>
|
||||
</div>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
</DynamicScroller>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dynamic-scroller-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
flex: auto 1 1;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.message {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
min-height: 32px;
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user