feat: 通用动画效果
咬轮猫
3 years ago
parent
829a99a732
commit
c958367c99
@ -0,0 +1,6 @@
|
||||
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" width="200" height="200">
|
||||
<path
|
||||
d="M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z"
|
||||
></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,105 @@
|
||||
<!-- eslint-disable vue/html-indent -->
|
||||
<template>
|
||||
<div style="height: 100%">
|
||||
<el-tag
|
||||
closable
|
||||
v-if="select_val"
|
||||
@close="addAnimation('')"
|
||||
@click="drawer_visiable = true"
|
||||
style="cursor: pointer"
|
||||
>{{
|
||||
common_animate_list
|
||||
.map((m) => m.children)
|
||||
.reduce((pre, curr) => {
|
||||
return pre.concat(curr);
|
||||
})
|
||||
.find((f) => f.value == select_val)?.label
|
||||
}}
|
||||
<el-icon :size="10"> <svg-analysis name="setting"></svg-analysis> </el-icon
|
||||
></el-tag>
|
||||
<el-tag v-else type="success" style="cursor: pointer" @click="drawer_visiable = true"
|
||||
>新增</el-tag
|
||||
>
|
||||
<el-drawer v-model="drawer_visiable" title="选择动画" direction="ltr">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane
|
||||
:label="tab_item.label"
|
||||
:name="tab_item.label"
|
||||
v-for="tab_item in common_animate_list"
|
||||
:key="tab_item.label"
|
||||
>
|
||||
<el-scrollbar height="500px">
|
||||
<div class="flex flex-wrap">
|
||||
<div
|
||||
class="animate"
|
||||
v-for="(animate, index) in tab_item.children"
|
||||
:key="index"
|
||||
@mouseenter="play_index = index"
|
||||
@mouseleave="play_index = null"
|
||||
@click="addAnimation(animate.value)"
|
||||
>
|
||||
<div
|
||||
:class="`${
|
||||
play_index == index
|
||||
? `animate__animated animate__${animate.value} animate__slow animate__infinite`
|
||||
: ''
|
||||
}`"
|
||||
>
|
||||
{{ animate.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar></el-tab-pane
|
||||
>
|
||||
</el-tabs>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ElTag, ElDrawer, ElTabs, ElTabPane, ElScrollbar, ElIcon } from 'element-plus';
|
||||
import { ref, watch } from 'vue';
|
||||
import { common_animate_list } from '@/config-center/system/index';
|
||||
import SvgAnalysis from '@/components/svg-analysis/index.vue';
|
||||
const props = defineProps({
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
const emits = defineEmits(['updateCommonAniVal']);
|
||||
const select_val = ref(props.val);
|
||||
const drawer_visiable = ref(false);
|
||||
const activeName = ref('进入');
|
||||
const play_index = ref<null | number>(null);
|
||||
const addAnimation = (val: string) => {
|
||||
emits('updateCommonAniVal', val);
|
||||
drawer_visiable.value = false;
|
||||
};
|
||||
watch(
|
||||
() => props.val,
|
||||
(new_val) => {
|
||||
select_val.value = new_val;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style scoped>
|
||||
.animate {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.animate > div {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background: #f5f8fb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 12px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue