删除多余代码
This commit is contained in:
sexygoat
@@ -1,103 +0,0 @@
|
||||
<!-- 文档：https://github.com/PanJiaChen/vue-countTo -->
|
||||
<template>
|
||||
<div class="page-content">
|
||||
<!-- 基础用法 -->
|
||||
<h2>基础用法</h2>
|
||||
<CountTo :endVal="count1" :duration="1000"></CountTo>
|
||||
|
||||
<!-- 带前缀后缀 -->
|
||||
<h2>带前缀后缀</h2>
|
||||
<CountTo prefix="¥" suffix="元" :startVal="0" :endVal="count2" :duration="2000"></CountTo>
|
||||
|
||||
<!-- 小数点和分隔符 -->
|
||||
<h2>小数点和分隔符</h2>
|
||||
<CountTo
|
||||
:startVal="0"
|
||||
:endVal="count3"
|
||||
:decimals="2"
|
||||
decimal="."
|
||||
separator=","
|
||||
:duration="2500"
|
||||
></CountTo>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<h2>控制按钮</h2>
|
||||
<CountTo
|
||||
ref="countTo"
|
||||
:startVal="0"
|
||||
:endVal="count4"
|
||||
:duration="3000"
|
||||
:autoplay="false"
|
||||
></CountTo>
|
||||
|
||||
<div class="mt-4">
|
||||
<ElButtonGroup>
|
||||
<ElButton @click="start" v-ripple>开始</ElButton>
|
||||
<ElButton @click="pause" v-ripple>暂停</ElButton>
|
||||
<ElButton @click="reset" v-ripple>重置</ElButton>
|
||||
</ElButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CountTo } from 'vue3-count-to'
|
||||
|
||||
const count1 = ref(1000)
|
||||
const count2 = ref(19999.99)
|
||||
const count3 = ref(2023.45)
|
||||
const count4 = ref(5000)
|
||||
|
||||
const countTo = ref()
|
||||
const isCounting = ref(false)
|
||||
|
||||
// 控制方法
|
||||
const start = () => {
|
||||
if (isCounting.value) return
|
||||
|
||||
try {
|
||||
countTo.value?.reset()
|
||||
countTo.value?.start()
|
||||
isCounting.value = true
|
||||
} catch (error) {
|
||||
console.error('启动计数器失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const pause = () => {
|
||||
if (!isCounting.value) return
|
||||
|
||||
try {
|
||||
countTo.value?.pause()
|
||||
isCounting.value = false
|
||||
} catch (error) {
|
||||
console.error('暂停计数器失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
try {
|
||||
countTo.value?.reset()
|
||||
isCounting.value = false
|
||||
} catch (error) {
|
||||
console.error('重置计数器失败:', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 20px 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div class="page-content">
|
||||
<ArtExcelImport @import-success="handleImportSuccess" @import-error="handleImportError">
|
||||
<template #import-text> 上传 Excel </template>
|
||||
</ArtExcelImport>
|
||||
|
||||
<ArtExcelExport
|
||||
style="margin-left: 10px"
|
||||
:data="tableData"
|
||||
filename="用户数据"
|
||||
sheetName="用户列表"
|
||||
type="success"
|
||||
:headers="headers"
|
||||
@export-success="handleExportSuccess"
|
||||
@export-error="handleExportError"
|
||||
>
|
||||
导出 Excel
|
||||
</ArtExcelExport>
|
||||
|
||||
<ElButton type="danger" @click="handleClear" v-ripple>清除数据</ElButton>
|
||||
|
||||
<ArtTable :data="tableData" style="margin-top: 10px">
|
||||
<ElTableColumn
|
||||
v-for="key in Object.keys(headers)"
|
||||
:key="key"
|
||||
:prop="key"
|
||||
:label="headers[key as keyof typeof headers]"
|
||||
/>
|
||||
</ArtTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface TableData {
|
||||
name: string
|
||||
age: number
|
||||
city: string
|
||||
}
|
||||
|
||||
const handleImportSuccess = (data: any[]) => {
|
||||
// 将导入的数据转换为正确的格式
|
||||
const formattedData = data.map((item) => ({
|
||||
name: item['姓名'],
|
||||
age: Number(item['年龄']),
|
||||
city: item['城市']
|
||||
}))
|
||||
tableData.value = formattedData
|
||||
|
||||
// tableData.value = data
|
||||
}
|
||||
|
||||
const handleImportError = (error: Error) => {
|
||||
// 处理导入错误
|
||||
console.error('导入失败:', error)
|
||||
}
|
||||
|
||||
// 使用类型化的ref
|
||||
const tableData = ref<TableData[]>([
|
||||
{ name: '李四', age: 20, city: '上海' },
|
||||
{ name: '张三', age: 25, city: '北京' },
|
||||
{ name: '王五', age: 30, city: '广州' },
|
||||
{ name: '赵六', age: 35, city: '深圳' },
|
||||
{ name: '孙七', age: 28, city: '杭州' },
|
||||
{ name: '周八', age: 32, city: '成都' },
|
||||
{ name: '吴九', age: 27, city: '武汉' },
|
||||
{ name: '郑十', age: 40, city: '南京' },
|
||||
{ name: '刘一', age: 22, city: '重庆' },
|
||||
{ name: '陈二', age: 33, city: '西安' }
|
||||
])
|
||||
|
||||
// 自定义表头映射
|
||||
const headers = {
|
||||
name: '姓名',
|
||||
age: '年龄',
|
||||
city: '城市'
|
||||
}
|
||||
|
||||
const handleExportSuccess = () => {
|
||||
ElMessage.success('导出成功')
|
||||
}
|
||||
|
||||
const handleExportError = (error: Error) => {
|
||||
ElMessage.error(`导出失败: ${error.message}`)
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
tableData.value = []
|
||||
}
|
||||
</script>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div class="page-content">
|
||||
<div class="action-buttons">
|
||||
<ElButton :disabled="isLaunching" v-ripple @click="handleSingleLaunch"
|
||||
>✨ 放个小烟花</ElButton
|
||||
>
|
||||
<ElButton :disabled="isLaunching" v-ripple @click="handleImageLaunch(bp)"
|
||||
>🎉 打开幸运红包</ElButton
|
||||
>
|
||||
<ElButton :disabled="isLaunching" v-ripple @click="handleMultipleLaunch('')"
|
||||
>🎆 璀璨烟火秀</ElButton
|
||||
>
|
||||
<ElButton :disabled="isLaunching" v-ripple @click="handleImageLaunch(sd)"
|
||||
>❄️ 飘点小雪花</ElButton
|
||||
>
|
||||
<ElButton :disabled="isLaunching" v-ripple @click="handleMultipleLaunch(sd)"
|
||||
>❄️ 浪漫暴风雪</ElButton
|
||||
>
|
||||
</div>
|
||||
|
||||
<ElDescriptions
|
||||
title="礼花组件说明"
|
||||
direction="vertical"
|
||||
:column="1"
|
||||
border
|
||||
style="margin-top: 50px"
|
||||
>
|
||||
<ElDescriptionsItem label="显示时机">
|
||||
礼花效果组件全局注册了，在节假日的时候，会自动显示，你可以通过配置文件来控制显示时机
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="礼花样式">
|
||||
默认显示几何图形，可以配置图片，图片需要提前在 components/Ceremony/Fireworks 文件预先定义
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="节日配置">
|
||||
在 src/config/festival.ts 文件中，可以配置节日和对应的礼花样式
|
||||
</ElDescriptionsItem>
|
||||
<ElDescriptionsItem label="快捷键">
|
||||
command + shift + p 或者 ctrl + shift + p
|
||||
</ElDescriptionsItem>
|
||||
</ElDescriptions>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { mittBus } from '@/utils/sys'
|
||||
|
||||
import bp from '@imgs/ceremony/hb.png'
|
||||
import sd from '@imgs/ceremony/sd.png'
|
||||
|
||||
const timerRef = ref<ReturnType<typeof setInterval> | null>(null)
|
||||
const isLaunching = ref(false)
|
||||
|
||||
const triggerFireworks = (count: number, src: string) => {
|
||||
// 清除之前的定时器
|
||||
if (timerRef.value) {
|
||||
clearInterval(timerRef.value)
|
||||
timerRef.value = null
|
||||
}
|
||||
|
||||
isLaunching.value = true // 开始发射时设置状态
|
||||
|
||||
let fired = 0
|
||||
timerRef.value = setInterval(() => {
|
||||
mittBus.emit('triggerFireworks', src)
|
||||
fired++
|
||||
|
||||
// 达到指定次数后清除定时器
|
||||
if (fired >= count) {
|
||||
clearInterval(timerRef.value!)
|
||||
timerRef.value = null
|
||||
isLaunching.value = false // 发射完成后解除禁用
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 简化后的处理函数
|
||||
const handleSingleLaunch = () => {
|
||||
mittBus.emit('triggerFireworks')
|
||||
}
|
||||
|
||||
const handleMultipleLaunch = (src: string) => {
|
||||
triggerFireworks(10, src)
|
||||
}
|
||||
|
||||
const handleImageLaunch = (src: string) => {
|
||||
mittBus.emit('triggerFireworks', src)
|
||||
}
|
||||
|
||||
// 组件卸载时清理定时器
|
||||
onUnmounted(() => {
|
||||
if (timerRef.value) {
|
||||
clearInterval(timerRef.value)
|
||||
timerRef.value = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.action-buttons {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,175 +0,0 @@
|
||||
<template>
|
||||
<div class="page-content">
|
||||
<div class="form">
|
||||
<ElSelect v-model="iconType" placeholder="Select" style="width: 240px">
|
||||
<ElOption
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</ElSelect>
|
||||
<div class="colors-icon">
|
||||
<ElCheckbox v-model="isColorsIcon" label="彩色图标" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<ul class="icon-list">
|
||||
<li v-for="icon in systemIconClasses" :key="icon.className" @click="copyIcon(icon)">
|
||||
<i
|
||||
class="iconfont-sys"
|
||||
v-if="iconType === 'unicode'"
|
||||
v-html="icon.unicode"
|
||||
:style="getIconStyle()"
|
||||
></i>
|
||||
<i :class="`iconfont-sys ${icon.className}`" v-else :style="getIconStyle()"></i>
|
||||
<span>{{ iconType === 'unicode' ? icon.unicode : icon.className }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { extractIconClasses, IconfontType } from '@/utils/constants'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const iconType = ref('unicode')
|
||||
const options = [
|
||||
{
|
||||
value: 'unicode',
|
||||
label: 'Unicode'
|
||||
},
|
||||
{
|
||||
value: 'fontClass',
|
||||
label: 'Font class'
|
||||
}
|
||||
]
|
||||
const systemIconClasses = ref<IconfontType[]>([])
|
||||
|
||||
const isColorsIcon = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
systemIconClasses.value = extractIconClasses()
|
||||
})
|
||||
|
||||
const copyIcon = (text: IconfontType) => {
|
||||
if (!text) return
|
||||
|
||||
let copyipt = document.createElement('input')
|
||||
copyipt.setAttribute(
|
||||
'value',
|
||||
(iconType.value === 'unicode' ? text.unicode : text.className) || ''
|
||||
)
|
||||
document.body.appendChild(copyipt)
|
||||
copyipt.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(copyipt)
|
||||
|
||||
ElMessage.success(`已复制`)
|
||||
}
|
||||
|
||||
const getRandomColor = () => {
|
||||
const colors = ['#2d8cf0', '#19be6b', '#ff9900', '#f24965', '#9463f7']
|
||||
return colors[Math.floor(Math.random() * colors.length)]
|
||||
}
|
||||
|
||||
const getIconStyle = () => {
|
||||
return isColorsIcon.value ? { color: getRandomColor() } : { color: 'var(--art-text-gray-700)' }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
$border-color: #eee;
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.colors-icon {
|
||||
box-sizing: border-box;
|
||||
height: var(--el-component-custom-height);
|
||||
padding: 0 30px;
|
||||
margin-left: 10px;
|
||||
border: 1px solid var(--art-border-dashed-color);
|
||||
border-radius: calc(var(--custom-radius) / 3 + 2px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 20px;
|
||||
|
||||
.icon-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
width: calc(100% + 16px);
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: 0 8px;
|
||||
margin: 0 16px 16px 0;
|
||||
overflow: hidden;
|
||||
color: rgba(#fff, 0.8);
|
||||
text-align: center;
|
||||
border: 1px solid rgb(var(--art-gray-300-rgb), 0.8);
|
||||
border-radius: 12px !important;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--art-gray-100);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 26px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--art-text-gray-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $device-notebook) {
|
||||
.page-content {
|
||||
.list {
|
||||
.icon-list {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $device-ipad-vertical) {
|
||||
.page-content {
|
||||
.list {
|
||||
.icon-list {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $device-phone) {
|
||||
.page-content {
|
||||
.list {
|
||||
.icon-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<div class="page-content">
|
||||
<div class="select">
|
||||
<div class="item">
|
||||
<h3>Unicode</h3>
|
||||
<ArtIconSelector
|
||||
:iconType="IconTypeEnum.UNICODE"
|
||||
@getIcon="getIcon"
|
||||
defaultIcon=""
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3>ClassName</h3>
|
||||
<ArtIconSelector
|
||||
:iconType="IconTypeEnum.CLASS_NAME"
|
||||
@getIcon="getIcon"
|
||||
width="260px"
|
||||
defaultIcon="iconsys-baitianmoshi3"
|
||||
/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3>禁用</h3>
|
||||
<ArtIconSelector
|
||||
:iconType="IconTypeEnum.CLASS_NAME"
|
||||
@getIcon="getIcon"
|
||||
width="260px"
|
||||
defaultIcon="iconsys-baitianmoshi3"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { IconTypeEnum } from '@/enums/appEnum'
|
||||
|
||||
// 获取选择的图标
|
||||
const getIcon = (icon: string) => {
|
||||
console.log(icon)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select {
|
||||
.item {
|
||||
margin-bottom: 30px;
|
||||
|
||||
h3 {
|
||||
padding-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div class="page-content">
|
||||
<ArtCutterImg
|
||||
style="margin-top: 20px"
|
||||
v-model:imgUrl="imageUrl"
|
||||
:boxWidth="540"
|
||||
:boxHeight="300"
|
||||
:cutWidth="360"
|
||||
:cutHeight="200"
|
||||
:quality="1"
|
||||
:tool="true"
|
||||
:watermarkText="'My Watermark'"
|
||||
watermarkColor="#ff0000"
|
||||
:showPreview="true"
|
||||
:originalGraph="false"
|
||||
:previewTitle="'预览效果'"
|
||||
@error="handleError"
|
||||
@imageLoadComplete="handleLoadComplete"
|
||||
@imageLoadError="handleLoadError"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import lockImg from '@imgs/lock/lock_screen_1.webp'
|
||||
const imageUrl = ref(lockImg)
|
||||
|
||||
const handleError = (error: any) => {
|
||||
console.error('裁剪错误:', error)
|
||||
}
|
||||
|
||||
const handleLoadComplete = (result: any) => {
|
||||
console.log('图片加载完成:', result)
|
||||
}
|
||||
|
||||
const handleLoadError = (error: any) => {
|
||||
console.error('图片加载失败:', error)
|
||||
}
|
||||
</script>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="page-content">
|
||||
<!-- 基础用法 -->
|
||||
<ArtTextScroll
|
||||
text="Art Design Pro 是一款专注于用户体验和视觉设计的后台管理系统模版 <a target='_blank' href='https://www.lingchen.kim/art-design-pro/docs/'>点击我 </a>访问官方文档"
|
||||
/>
|
||||
|
||||
<!-- 使用不同的类型 -->
|
||||
<ArtTextScroll type="success" text="这是一条成功类型的滚动公告" />
|
||||
|
||||
<ArtTextScroll type="warning" text="这是一条警告类型的滚动公告" />
|
||||
|
||||
<ArtTextScroll type="danger" text="这是一条危险类型的滚动公告" />
|
||||
|
||||
<ArtTextScroll type="info" text="这是一条信息类型的滚动公告" />
|
||||
|
||||
<!-- 自定义速度和方向 -->
|
||||
<ArtTextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-content {
|
||||
:deep(.text-scroll-container) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="page-content">
|
||||
<div class="video-container">
|
||||
<ArtVideoPlayer
|
||||
playerId="my-video-1"
|
||||
:videoUrl="videoUrl"
|
||||
:posterUrl="posterUrl"
|
||||
:autoplay="false"
|
||||
:volume="0.5"
|
||||
:playbackRates="[0.5, 1, 1.5, 2]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import lockImg from '@imgs/lock/lock_screen_1.webp'
|
||||
|
||||
// 视频源和封面图片URL
|
||||
const videoUrl = ref(
|
||||
'//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4'
|
||||
)
|
||||
const posterUrl = ref(lockImg)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video-container {
|
||||
max-width: 600px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user