😎增加页面动画效果选择组件
This commit is contained in:
zuohuaijun
parent
772435b924
commit
4970b5a63b
134
Web/src/views/system/infoSetting/component/transform.vue
Normal file
134
Web/src/views/system/infoSetting/component/transform.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="1140">
|
||||
<template #header>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
|
||||
<span> 页面动画效果 </span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; text-align: center; width: 100%">
|
||||
<template v-for="(itm, idx) in state.animateLidt" :key="idx">
|
||||
<div
|
||||
v-if="itm.isShow"
|
||||
:class="itm.name"
|
||||
class="transBox animate__animated animate__delay-.2s"
|
||||
:style="`${idx == state.idx ? 'background: var(--el-color-primary);color:#FFF' : ''}`"
|
||||
@click="cliAnimate(itm, idx)"
|
||||
>
|
||||
{{ itm.label || itm.name }}
|
||||
</div>
|
||||
<div v-else class="transBox">{{ itm.label || itm.name }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button icon="ele-CircleCloseFilled" @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const emits = defineEmits(['getAnimation']);
|
||||
const state = reactive({
|
||||
idx: 999,
|
||||
isShowDialog: false,
|
||||
animateLidt: [
|
||||
{ name: 'animate__bounce', isShow: true, value: 'bounce', label: '弹跳' },
|
||||
{ name: 'animate__fadeIn', isShow: true, value: 'fadeIn', label: '渐显' },
|
||||
{ name: 'animate__flash', isShow: true, value: 'flash', label: '闪烁' },
|
||||
{ name: 'animate__rubberBand', isShow: true, value: 'rubberBand', label: '拉伸带' },
|
||||
{ name: 'animate__bounceIn', isShow: true, value: 'bounceIn', label: '弹簧' },
|
||||
{ name: 'animate__shakeX', isShow: true, value: 'shakeX', label: '左右晃动' },
|
||||
{ name: 'animate__shakeY', isShow: true, value: 'shakeY', label: '上下晃动' },
|
||||
{ name: 'animate__tada', isShow: true, value: 'tada', label: '摆动' },
|
||||
{ name: 'animate__swing', isShow: true, value: 'swing', label: '左右扇形摇摆' },
|
||||
{ name: 'animate__wobble', isShow: true, value: 'wobble', label: '扇形摇摆' },
|
||||
{ name: 'animate__jello', isShow: true, value: 'jello', label: '上下拉扯晃动' },
|
||||
{ name: 'animate__bounceInDown', isShow: true, value: 'bounceInDown', label: '向下弹入' },
|
||||
{ name: 'animate__bounceInRight', isShow: true, value: 'bounceInRight', label: '向左弹入' },
|
||||
{ name: 'animate__bounceInLeft', isShow: true, value: 'bounceInRight', label: '向右弹入' },
|
||||
{ name: 'animate__bounceInUp', isShow: true, value: 'bounceInUp', label: '向上弹入' },
|
||||
{ name: 'animate__fadeInUp', isShow: true, value: 'fadeInUp', label: '向上进入' },
|
||||
{ name: 'animate__fadeInDown', isShow: true, value: 'fadeInDown', label: '向下进入' },
|
||||
{ name: 'animate__fadeInRight', isShow: true, value: 'fadeInLeft', label: '向右进入' },
|
||||
{ name: 'animate__fadeInLeft', isShow: true, value: 'fadeInLeft', label: '向右进入' },
|
||||
{ name: 'animate__fadeInTopLeft', isShow: true, value: 'fadeInTopLeft', label: '左上方进入' },
|
||||
{ name: 'animate__fadeInTopRight', isShow: true, value: 'fadeInTopRight', label: '右上方进入' },
|
||||
{ name: 'animate__fadeInBottomLeft', isShow: true, value: 'fadeInBottomLeft', label: '左下方进入' },
|
||||
{ name: 'animate__fadeInBottomRight', isShow: true, value: 'fadeInBottomRight', label: '右下方进入' },
|
||||
{ name: 'animate__fadeInUpBig', isShow: true, value: 'fadeInUpBig', label: '向上长距离进入' },
|
||||
{ name: 'animate__fadeInDownBig', isShow: true, value: 'fadeInDownBig', label: '向下长距离进入' },
|
||||
{ name: 'animate__fadeInRightBig', isShow: true, value: 'fadeInRightBig', label: '向左长距离进入' },
|
||||
{ name: 'animate__fadeInLeftBig', isShow: true, value: 'fadeInLeftBig', label: '向右长距离进入' },
|
||||
{ name: 'animate__lightSpeedInRight', isShow: true, value: 'lightSpeedInRight', label: '光速从右侧进入' },
|
||||
{ name: 'animate__lightSpeedInLeft', isShow: true, value: 'lightSpeedInLeft', label: '光速从左侧进入' },
|
||||
{ name: 'animate__zoomIn', isShow: true, value: 'zoomIn', label: '由小变大进入' },
|
||||
{ name: 'animate__zoomInLeft', isShow: true, value: 'zoomInLeft', label: '左变大进入' },
|
||||
{ name: 'animate__zoomInRight', isShow: true, value: 'zoomInRight', label: '右变大进入' },
|
||||
{ name: 'animate__zoomInDown', isShow: true, value: 'zoomInDown', label: '向下变大进入' },
|
||||
{ name: 'animate__zoomInUp', isShow: true, value: 'zoomInUp', label: '向上变大进入' },
|
||||
{ name: 'animate__rotateIn', isShow: true, value: 'rotateIn', label: '旋转进入' },
|
||||
// { name: 'animate__flip', isShow: true, value: 'flip', label: 'Y轴旋转' },
|
||||
{ name: 'animate__flipInY', isShow: true, value: 'flipInY', label: '中心Y轴旋转' },
|
||||
{ name: 'animate__rotateInDownLeft', isShow: true, value: 'rotateInDownLeft', label: '左顺时针旋转' },
|
||||
{ name: 'animate__rotateInDownRight', isShow: true, value: 'rotateInDownRight', label: '左逆时针旋转' },
|
||||
{ name: 'animate__rotateInUpLeft', isShow: true, value: 'rotateInUpLeft', label: '右逆时针旋转' },
|
||||
{ name: 'animate__rotateInUpRight', isShow: true, value: 'rotateInUpRight', label: '右顺时针旋转' },
|
||||
],
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = async (row: any) => {
|
||||
if (row.value) {
|
||||
state.animateLidt.forEach((itm, idx) => {
|
||||
if (itm.value == row.value) return (state.idx = idx);
|
||||
});
|
||||
}
|
||||
state.isShowDialog = true;
|
||||
};
|
||||
|
||||
// 取消
|
||||
const cancel = () => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (state.idx == 999) return cancel();
|
||||
emits('getAnimation', state.animateLidt[state.idx]);
|
||||
cancel();
|
||||
};
|
||||
|
||||
const cliAnimate = (itm: { isShow: boolean }, idx: number) => {
|
||||
itm.isShow = false;
|
||||
state.idx = idx;
|
||||
setTimeout(() => {
|
||||
itm.isShow = true;
|
||||
}, 1);
|
||||
};
|
||||
|
||||
// 导出对象
|
||||
defineExpose({ openDialog });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transBox {
|
||||
width: 200px;
|
||||
color: var(--el-color-primary);
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
border: 1px var(--el-color-primary) dotted;
|
||||
|
||||
// background: var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
@ -88,35 +88,11 @@
|
||||
<template #label>
|
||||
<el-icon><ele-Position /></el-icon> 页面动画
|
||||
</template>
|
||||
<el-select v-model="state.sysInfo.animation" placeholder="页面动画">
|
||||
<el-option label="slide-right" value="slide-right"></el-option>
|
||||
<el-option label="slide-left" value="slide-left"></el-option>
|
||||
<el-option label="opacitys" value="opacitys"></el-option>
|
||||
<el-option label="fade" value="fade"></el-option>
|
||||
<el-option label="fadeUp" value="fadeUp"></el-option>
|
||||
<el-option label="fadeDown" value="fadeDown"></el-option>
|
||||
<el-option label="fadeLeft" value="fadeLeft"></el-option>
|
||||
<el-option label="fadeRight" value="fadeRight"></el-option>
|
||||
<el-option label="lightSpeedLeft" value="lightSpeedLeft"></el-option>
|
||||
<el-option label="lightSpeedRight" value="lightSpeedRight"></el-option>
|
||||
<el-option label="zoom" value="zoom"></el-option>
|
||||
<el-option label="zoomUp" value="zoomUp"></el-option>
|
||||
<el-option label="zoomDown" value="zoomDown"></el-option>
|
||||
<el-option label="zoomLeft" value="zoomLeft"></el-option>
|
||||
<el-option label="zoomRight" value="zoomRight"></el-option>
|
||||
<el-option label="flip" value="flip"></el-option>
|
||||
<el-option label="flipX" value="flipX"></el-option>
|
||||
<el-option label="flipY" value="flipY"></el-option>
|
||||
<el-option label="backUp" value="backUp"></el-option>
|
||||
<el-option label="backDown" value="backDown"></el-option>
|
||||
<el-option label="backLeft" value="backLeft"></el-option>
|
||||
<el-option label="backRight" value="backRight"></el-option>
|
||||
<el-option label="bounce" value="bounce"></el-option>
|
||||
<el-option label="bounceUp" value="bounceUp"></el-option>
|
||||
<el-option label="bounceDown" value="bounceDown"></el-option>
|
||||
<el-option label="bounceLeft" value="bounceLeft"></el-option>
|
||||
<el-option label="bounceRight" value="bounceRight"></el-option>
|
||||
</el-select>
|
||||
<el-input v-model="state.sysInfo.animation">
|
||||
<template #append>
|
||||
<el-button icon="ele-Search" @click="handTransfromWindow" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="ICP备案号">
|
||||
<template #label>
|
||||
@ -190,6 +166,8 @@
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<transform ref="transformRef" @getAnimation="getAnimation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -197,11 +175,14 @@
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import { ElMessage, UploadFile, UploadFiles, UploadInstance } from 'element-plus';
|
||||
import { loadSysInfo } from '/@/utils/sysInfo';
|
||||
|
||||
import chineseColors from '/@/layout/navBars/topBar/colors.json';
|
||||
import transform from './component/transform.vue';
|
||||
|
||||
import { getAPI } from '/@/utils/axios-utils';
|
||||
import { SysFileApi, SysTenantApi } from '/@/api-services';
|
||||
|
||||
const transformRef = ref<InstanceType<typeof transform>>();
|
||||
const host = window.location.host;
|
||||
const uploadRef = ref<UploadInstance>();
|
||||
const state = reactive({
|
||||
@ -223,6 +204,16 @@ onMounted(async () => {
|
||||
state.isLoading = false;
|
||||
});
|
||||
|
||||
// 打开选择动画
|
||||
const handTransfromWindow = () => {
|
||||
transformRef.value?.openDialog({ name: state.sysInfo.animation });
|
||||
};
|
||||
|
||||
// 动画返回
|
||||
const getAnimation = (e: any) => {
|
||||
if (e.name) state.sysInfo.animation = e.value;
|
||||
};
|
||||
|
||||
// 保存
|
||||
const saveSysInfo = async () => {
|
||||
try {
|
||||
@ -330,4 +321,9 @@ const setThemeColor = (e: any) => {
|
||||
left: calc(50% - 10px);
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
|
||||
.fade:hover {
|
||||
animation: fadeIn;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user