wip-font-awesome-icon示例组件部分属性

2025-04-05 19:41:44 +08:00 · 2022-09-29 17:11:29 +08:00 · 2022-09-29 17:11:29 +08:00 · 9131d5de2c
commit 9131d5de2c
parent 89a695fbde
7 changed files with 251 additions and 24 deletions
--- a/src/assets/style/auxiliary.scss
+++ b/src/assets/style/auxiliary.scss
@ -68,8 +68,8 @@ web-view,
 // 历遍生成4个方向的底部安全区
@each $d in top, right, bottom, left {
  .safe-area-inset-#{$d} {
-    padding-#{$d}: 0;
-    padding-#{$d}: constant(safe-area-inset-#{$d});
-    padding-#{$d}: env(safe-area-inset-#{$d});
+    padding-#{$d}: 0 !important;
+    padding-#{$d}: constant(safe-area-inset-#{$d}) !important;
+    padding-#{$d}: env(safe-area-inset-#{$d}) !important;
  }
 }
--- a/src/components/AppProvider/inedx.vue
+++ b/src/components/AppProvider/inedx.vue
@ -1,7 +1,11 @@
 <script lang="ts" setup name="AppProvider"></script>
 <template>
-  <view>
+  <view class="app-page safe-area-inset-bottom">
    <slot></slot>
  </view>
 </template>
-<style scoped></style>
+<style scoped>
+  .app-page {
+    padding: 12rpx 28rpx;
+  }
+</style>
--- a/src/components/FontAwesomeIcon/index.vue
+++ b/src/components/FontAwesomeIcon/index.vue
@ -1,29 +1,56 @@
 <script lang="ts" setup>
  /**
   * 基于 Font Awesome Icon v6.2.0
-   * 不支持 pro (专业版)的相关功能 和 图标
   * solid 支持
   * regular 支持
   * brands 支持
-   * light 不支持
-   * sharp 不支持
-   * thin 不支持
-   * duotone 不支持
+   * light 支持
+   * sharp 支持
+   * thin 支持
+   * duotone 支持
   */
+  import { FontAwesomeIconProps } from '@/components/FontAwesomeIcon/props';
+  import { computed } from 'vue';
+  import { isObject } from 'lodash-es';
+
+  const props = defineProps(FontAwesomeIconProps);
+
+  const wrapStyleObject = {
+    color: props.color,
+    'font-size': `${props.size}rpx`,
+    'background-color': props.bgColor,
+    'fa-border': props.border,
+  };
+
+  const iconClassObject = [
+    '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` : '',
+  ];
+
+  const iconStyleObject = {
+    '--fa-rotate-angle': `${props.rotate}deg`,
+    '--fa-animation-duration': `${props.duration}s`,
+    '--fa-beat-scale': `${props.scale}`,
+    '--fa-beat-opacity': `${props.opacity}`,
+  };
 </script>
 <template>
-  <view> <view class="fa-solid fa-house" />solid </view>
-  <view> <view class="fa-regular fa-house" />regular</view>
-  <view> <view class="fa-light fa-house" />light</view>
-  <view> <view class="fa-thin fa-house" />thin</view>
-  <view>
-    <view class="fa-duotone fa-house" /> <i class="fa-duotone fa-magnifying-glass"></i>duotone</view
-  >
-  <view> <view class="fa-brands fa-bilibili" />brands </view>
-  <view> <view class="fass fa-user" />sharp </view>
+  <view class="icon-wrap" :style="wrapStyleObject">
+    <text class="icon" :style="iconStyleObject" :class="iconClassObject" />
+  </view>
 </template>
 <style lang="scss" scoped>
-  .font-awesome-icon {
+  .icon-wrap {
    display: inline-block;
+    .icon {
+      display: inline-block;
+    }
  }
 </style>
--- a/src/components/FontAwesomeIcon/props.ts
+++ b/src/components/FontAwesomeIcon/props.ts
@ -1,3 +1,123 @@
-const FontAwesomeIconProps = {
-  // is,
+type StyleType = 'solid' | 'regular' | 'light' | 'thin' | 'duotone' | 'brands' | 'sharp';
+
+export const FontAwesomeIconProps = {
+  /** icon name
+   * @link: https://fontawesome.com/icons
+   */
+  name: {
+    type: String,
+    required: true,
+  },
+  /** icon 风格
+   * 不同风格对应不同的css, 使用时请加载相应的css
+   */
+  mode: {
+    type: String,
+    default: 'solid',
+    validator(value: string) {
+      // The value must match one of these strings
+      return ['solid', 'regular', 'light', 'thin', 'duotone', 'brands'].includes(value);
+    },
+  },
+  /** icon sharp
+   * 对应sharp css
+   */
+  sharp: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * icon sizing
+   * @description 2xs-xs-sm-lg-xl-2xl 1-10x
+   */
+  frameSize: {
+    type: String,
+  },
+  /**
+   * icon size
+   * @description 大小 单位 rpx
+   */
+  size: {
+    type: Number,
+  },
+  /**
+   * icon color
+   * @description 图标颜色
+   */
+  color: {
+    type: String,
+  },
+  /**
+   * icon color
+   * @description 背景色
+   */
+  bgColor: {
+    type: String,
+  },
+  /** icon border
+   * @description 边框
+   */
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  /** icon rotate
+   * @description 旋转角度
+   */
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  /** icon flip
+   * @description 翻转
+   */
+  flip: {
+    type: String,
+    validator(value: string) {
+      // The value must match one of these strings
+      return ['horizontal', 'vertical', 'both'].includes(value);
+    },
+  },
+  /**
+   * icon beat
+   * @description 跳动动画
+   * @param duration Number 时间 s
+   * @param scale Number 比例
+   */
+  beat: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * icon duration
+   * @description 动画持续时间(所有动画使用) s
+   */
+  duration: {
+    type: Number,
+    default: 1,
+  },
+  /**
+   * icon scale
+   * @description 动画比例(跳动动画使用)
+   */
+  scale: {
+    type: Number,
+    default: 1.25,
+  },
+  /**
+   * icon fade
+   * @description 淡入淡出动画
+   */
+  fade: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * icon opacity
+   * @description 透明度值 (淡入淡出动画使用)
+   */
+  opacity: {
+    type: Number,
+    default: 0.6,
+  },
 };
--- a/src/demo/example/fontAwesomeIcon/index.vue
+++ b/src/demo/example/fontAwesomeIcon/index.vue
@ -0,0 +1,61 @@
+<script lang="ts" setup>
+  import AppProvider from '@/components/AppProvider/inedx.vue';
+  import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
+</script>
+<template>
+  <AppProvider>
+    <view>mode-不同风格</view>
+    <view> <FontAwesomeIcon name="house" />solid </view>
+    <view> <FontAwesomeIcon mode="regular" name="house" />regular</view>
+    <view> <FontAwesomeIcon mode="light" name="house" />light</view>
+    <view> <FontAwesomeIcon mode="thin" name="house" />thin</view>
+    <view> <FontAwesomeIcon mode="duotone" name="house" />duotone</view>
+    <view>sharp-直角图标</view>
+    <view> <FontAwesomeIcon name="user" sharp /> sharp </view>
+
+    <view>mode(brands)-品牌logo</view>
+    <view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view>
+    <view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view>
+
+    <view>color-颜色</view>
+    <view> <FontAwesomeIcon name="house" color="Tomato" />solid </view>
+    <view> <FontAwesomeIcon mode="regular" name="house" color="Dodgerblue" />regular</view>
+    <view> <FontAwesomeIcon mode="light" name="house" color="Mediumslateblue" />light</view>
+    <view> <FontAwesomeIcon mode="brands" name="bilibili" color="Dodgerblue" /> brands </view>
+
+    <view>size-大小</view>
+    <view> <FontAwesomeIcon mode="light" name="house" size="24" />light 24rpx</view>
+    <view> <FontAwesomeIcon mode="thin" name="house" size="44" />thin 44rpx</view>
+    <view> <FontAwesomeIcon mode="duotone" name="house" size="64" />duotone 64rpx</view>
+    <view>bgColor-背景色</view>
+    <view> <FontAwesomeIcon name="house" bg-color="DodgerBlue" />solid </view>
+    <view> <FontAwesomeIcon mode="regular" name="house" bg-color="SkyBlue" />regular</view>
+    <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> <FontAwesomeIcon mode="duotone" name="snowboarding" />duotone 正常</view>
+    <view>
+      <FontAwesomeIcon mode="duotone" name="snowboarding" flip="horizontal" />duotone 水平翻转
+    </view>
+    <view>
+      <FontAwesomeIcon mode="duotone" name="snowboarding" flip="vertical" />duotone 垂直翻转
+    </view>
+    <view>
+      <FontAwesomeIcon mode="duotone" name="snowboarding" flip="both" />duotone 垂直水平翻转
+    </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>
+    <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" />
+  </AppProvider>
+</template>
+<style lang="scss" scoped></style>
--- a/src/pages.json
+++ b/src/pages.json
@ -82,6 +82,17 @@
        "ignoreAuth": true
      }
    }]
+  },{
+    "root": "demo/example",
+    "pages": [{
+      "path": "fontAwesomeIcon/index",
+      "style": {
+        "navigationBarTitleText": "FontAwesomeIcon-Demo"
+      },
+      "meta": {
+        "ignoreAuth": true
+      }
+    }]
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@ -1,13 +1,15 @@
 <script lang="ts" setup>
  import BasicButton from '@/components/BasicButton/index.vue';
  import AppProvider from '@/components/AppProvider/inedx.vue';
-  import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
  import { useRouter } from '@/hooks/router';

  const router = useRouter();
  const jumpList1 = () => {
    router.push('/pagesA/list/test1/index?key=words&page=1&limit=15');
  };
+  const jumpFontAwesomeIcon = () => {
+    router.push('/demo/example/fontAwesomeIcon/index');
+  };
 </script>

 <template>
@ -16,7 +18,9 @@
    <view class="flex-row justify-center">
      <BasicButton @click="jumpList1">List1 → </BasicButton>
    </view>
-    <FontAwesomeIcon />
+    <view class="flex-row justify-center">
+      <BasicButton @click="jumpFontAwesomeIcon">FontAwesomeIcon → </BasicButton>
+    </view>
  </AppProvider>
 </template>