mirror of
https://gitee.com/h_mo/uniapp-vue3-vite-ts-template
synced 2025-04-06 03:58:03 +08:00
wip: FontAwesomeIcon
This commit is contained in:
h_mo
parent
9131d5de2c
commit
5afb1999a3
@ -11,7 +11,6 @@
|
||||
*/
|
||||
import { FontAwesomeIconProps } from '@/components/FontAwesomeIcon/props';
|
||||
import { computed } from 'vue';
|
||||
import { isObject } from 'lodash-es';
|
||||
|
||||
const props = defineProps(FontAwesomeIconProps);
|
||||
|
||||
@ -22,24 +21,54 @@
|
||||
'fa-border': props.border,
|
||||
};
|
||||
|
||||
const singleBeat = props.beat && !props.fade;
|
||||
const singleFade = !props.beat && props.fade;
|
||||
const BeatFade = props.beat && props.fade;
|
||||
|
||||
const iconClassObject = [
|
||||
'fa-' + props.mode,
|
||||
'fa-' + props.name,
|
||||
`fa-${props.mode}`,
|
||||
`fa-${props.name}`,
|
||||
props.frameSize ? `fa-flip-${props.frameSize}` : '',
|
||||
props.sharp ? 'fass' : '',
|
||||
props.rotate ? 'fa-rotate-by' : '',
|
||||
props.flip ? `fa-flip-${props.flip}` : '',
|
||||
props.beat ? `fa-beat` : '',
|
||||
props.fade ? `fa-fade` : '',
|
||||
props.beat && props.fade ? `fa-beat-fade` : '',
|
||||
props.reverse ? `fa-flip-${props.reverse}` : '',
|
||||
singleBeat ? `fa-beat` : '',
|
||||
singleFade ? `fa-fade` : '',
|
||||
BeatFade ? `fa-beat-fade` : '',
|
||||
props.bounce ? 'fa-bounce' : '',
|
||||
props.flip ? 'fa-flip' : '',
|
||||
];
|
||||
|
||||
const iconStyleObject = {
|
||||
'--fa-rotate-angle': `${props.rotate}deg`,
|
||||
'--fa-animation-duration': `${props.duration}s`,
|
||||
'--fa-beat-scale': `${props.scale}`,
|
||||
'--fa-beat-opacity': `${props.opacity}`,
|
||||
};
|
||||
const iconStyleObject = Object.assign(
|
||||
{
|
||||
'--fa-animation-duration': `${props.duration}s`,
|
||||
},
|
||||
props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
|
||||
singleBeat ? { '--fa-beat-scale': `${props.scale}` } : {},
|
||||
singleFade ? { '--fa-fade-opacity': `${props.opacity}` } : {},
|
||||
BeatFade
|
||||
? { '--fa-beat-fade-scale': `${props.scale}`, '--fa-beat-fade-opacity': `${props.opacity}` }
|
||||
: {},
|
||||
props.bounce
|
||||
? {
|
||||
'--fa-bounce-rebound': props.bounceConfig?.rebound || '-0.125em',
|
||||
'--fa-bounce-height': props.bounceConfig?.height || '-0.5em',
|
||||
'--fa-bounce-start-scale-x': props.bounceConfig?.startScaleX || '1.1',
|
||||
'--fa-bounce-start-scale-y': props.bounceConfig?.startScaleY || '0.9',
|
||||
'--fa-bounce-jump-scale-x': props.bounceConfig?.jumpScaleX || '0.9',
|
||||
'--fa-bounce-jump-scale-y': props.bounceConfig?.jumpScaleY || '1.1',
|
||||
'--fa-bounce-land-scale-x': props.bounceConfig?.landScaleX || '1.05',
|
||||
'--fa-bounce-land-scale-y': props.bounceConfig?.landScaleY || '0.95',
|
||||
}
|
||||
: {},
|
||||
props.flip
|
||||
? {
|
||||
'--fa-flip-x': props.flipConfig?.x || '0',
|
||||
'--fa-flip-y': props.flipConfig?.y || '1',
|
||||
'--fa-flip-z': props.flipConfig?.z || '0',
|
||||
'--fa-flip-angle': props.flipConfig?.angle || '-180deg',
|
||||
}
|
||||
: {},
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<view class="icon-wrap" :style="wrapStyleObject">
|
||||
|
||||
@ -68,10 +68,10 @@ export const FontAwesomeIconProps = {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
/** icon flip
|
||||
* @description 翻转
|
||||
/** icon reverse
|
||||
* @description 对称翻转
|
||||
*/
|
||||
flip: {
|
||||
reverse: {
|
||||
type: String,
|
||||
validator(value: string) {
|
||||
// The value must match one of these strings
|
||||
@ -80,7 +80,7 @@ export const FontAwesomeIconProps = {
|
||||
},
|
||||
/**
|
||||
* icon beat
|
||||
* @description 跳动动画
|
||||
* @description 缩放动画
|
||||
* @param duration Number 时间 s
|
||||
* @param scale Number 比例
|
||||
*/
|
||||
@ -120,4 +120,66 @@ export const FontAwesomeIconProps = {
|
||||
type: Number,
|
||||
default: 0.6,
|
||||
},
|
||||
/**
|
||||
* icon bounce
|
||||
* @description 弹跳动画
|
||||
*/
|
||||
bounce: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon bounceConfig
|
||||
* @description 弹跳动画属性设置
|
||||
*/
|
||||
bounceConfig: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
// 设置图标在跳跃后着陆时的反弹量
|
||||
rebound: '-0.125em',
|
||||
// 设置图标弹跳时跳到的最大高度
|
||||
height: '-0.5em',
|
||||
// 设置图标开始反弹时的水平失真（“挤压”）
|
||||
startScaleX: '1.1',
|
||||
// 将图标的水平失真（“挤压”）设置在跳转的顶部
|
||||
startScaleY: '0.9',
|
||||
// 将图标的水平失真（“挤压”）设置在跳转的顶部
|
||||
jumpScaleX: '0.9',
|
||||
// 将图标的垂直失真（“挤压”）设置在跳转的顶部
|
||||
jumpScaleY: '1.1',
|
||||
// 设置跳跃后着陆时图标的水平失真（“挤压”）
|
||||
landScaleX: '1.05',
|
||||
// 设置跳跃后着陆时图标的垂直失真（“挤压”）
|
||||
landScaleY: '0.95',
|
||||
};
|
||||
},
|
||||
},
|
||||
/**
|
||||
* icon flip
|
||||
* @description 翻转动画
|
||||
*/
|
||||
flip: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* icon flipConfig
|
||||
* @description 翻转动画属性设置
|
||||
*/
|
||||
flipConfig: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
// 设置表示旋转轴的矢量的 x 坐标（0~1）
|
||||
x: '0',
|
||||
// 设置矢量的 y 坐标，表示旋转轴（0~1)
|
||||
y: '1',
|
||||
// 设置矢量的 z 坐标，表示旋转轴（0~1)
|
||||
z: '0',
|
||||
// 设置翻转的旋转角度。正角表示顺时针旋转，负角表示逆时针旋转。
|
||||
angle: '-180deg',
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -33,29 +33,60 @@
|
||||
<view>rotate-旋转角度</view>
|
||||
<view> <FontAwesomeIcon mode="duotone" name="house" rotate="63" />duotone 63</view>
|
||||
<view> <FontAwesomeIcon mode="duotone" name="snowboarding" rotate="58" />duotone 58</view>
|
||||
<view>flip-翻转</view>
|
||||
<view>reverse-对称翻转</view>
|
||||
<view> <FontAwesomeIcon mode="duotone" name="snowboarding" />duotone 正常</view>
|
||||
<view>
|
||||
<FontAwesomeIcon mode="duotone" name="snowboarding" flip="horizontal" />duotone 水平翻转
|
||||
<FontAwesomeIcon mode="duotone" name="snowboarding" reverse="horizontal" />duotone 水平翻转
|
||||
</view>
|
||||
<view>
|
||||
<FontAwesomeIcon mode="duotone" name="snowboarding" flip="vertical" />duotone 垂直翻转
|
||||
<FontAwesomeIcon mode="duotone" name="snowboarding" reverse="vertical" />duotone 垂直翻转
|
||||
</view>
|
||||
<view>
|
||||
<FontAwesomeIcon mode="duotone" name="snowboarding" flip="both" />duotone 垂直水平翻转
|
||||
<FontAwesomeIcon mode="duotone" name="snowboarding" reverse="both" />duotone 垂直水平翻转
|
||||
</view>
|
||||
<view>beat-跳动动画</view>
|
||||
<view>beat-缩放动画</view>
|
||||
<FontAwesomeIcon name="circle-plus" beat />
|
||||
<FontAwesomeIcon name="heart" beat />
|
||||
<view>duration-动画持续时间</view>
|
||||
<FontAwesomeIcon name="heart" beat duration="1.5" />
|
||||
<view>scale-动画比例</view>
|
||||
<view>scale-缩放比例</view>
|
||||
<FontAwesomeIcon name="heart" beat duration="1.5" scale="2.0" />
|
||||
<view>fade-淡入淡出动画 </view>
|
||||
<FontAwesomeIcon name="heart" fade />
|
||||
<view>opacity-透明度值 </view>
|
||||
<FontAwesomeIcon name="heart" fade opacity="0.2" />
|
||||
<FontAwesomeIcon name="heart" beat fade opacity="0.68" scale="3.0" />
|
||||
<view>beat+fade-跳动+淡入淡出动画 </view>
|
||||
<FontAwesomeIcon name="heart" beat fade opacity="0.68" duration="1.5" scale="2.0" />
|
||||
<view>bounce-弹跳动画 </view>
|
||||
<FontAwesomeIcon name="basketball" bounce />
|
||||
<FontAwesomeIcon name="volleyball" bounce />
|
||||
<FontAwesomeIcon name="frog" bounce />
|
||||
<FontAwesomeIcon
|
||||
name="envelope"
|
||||
bounce
|
||||
:bounce-config="{
|
||||
rebound: 0,
|
||||
startScaleX: 1,
|
||||
startScaleY: 1,
|
||||
jumpScaleX: 1,
|
||||
jumpScaleY: 1,
|
||||
landScaleX: 1,
|
||||
landScaleY: 1,
|
||||
}"
|
||||
/>
|
||||
<view>flip-翻转动画</view>
|
||||
<FontAwesomeIcon name="compact-disc" flip />
|
||||
<FontAwesomeIcon name="camera-rotate" flip />
|
||||
<FontAwesomeIcon name="cassette-tape" flip />
|
||||
<FontAwesomeIcon
|
||||
name="scroll"
|
||||
flip
|
||||
:flip-config="{
|
||||
x: '1',
|
||||
y: '0',
|
||||
}"
|
||||
/>
|
||||
<FontAwesomeIcon name="money-check-dollar" flip duration="3" />
|
||||
</AppProvider>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user