blackteay/uniapp-vue3-vite-ts-template
1
0
Fork 0
mirror of https://gitee.com/h_mo/uniapp-vue3-vite-ts-template synced 2025-04-06 03:58:03 +08:00
Code Issues Projects Releases Wiki Activity

feat: 完善FontAwesomeIcon demo

Browse Source
This commit is contained in:
h_mo 2022-10-06 21:32:50 +08:00
parent b7ccd95e9b
commit 7b9a1e81f2
1 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/demo/example/fontAwesomeIcon/index.vue
View File

@ -1,6 +1,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import AppProvider from '@/components/AppProvider/inedx.vue'; import AppProvider from '@/components/AppProvider/inedx.vue';
import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue'; import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
import { ref } from 'vue';
import { SetClipboardData } from '@/utils/uniapi';
const iconLink = ref('https://fontawesome.com/icons');
const onCopyLink = () => {
SetClipboardData(iconLink.value);
console.log('的反馈了高考历史电饭锅');
};
</script> </script>
<template> <template>
<AppProvider> <AppProvider>
@ -10,16 +19,23 @@
在微信小程序中请不要引用全部字体,在组件目录index.scss中配置, 已测试: 支持H5, APP(安卓), 在微信小程序中请不要引用全部字体,在组件目录index.scss中配置, 已测试: 支持H5, APP(安卓),
微信小程序 微信小程序
</view> </view>
<view class="tip">
全部icon请查看:
<text class="link">{{ iconLink }}</text>
<FontAwesomeIcon mode="duotone" name="copy" @click="onCopyLink" />
</view>
<view class="title">mode-不同风格,对应相应字体文件</view> <view class="title">mode-不同风格,对应相应字体文件</view>
<view> <FontAwesomeIcon name="house" />solid (默认)</view> <view> <FontAwesomeIcon name="house" />solid (默认)</view>
<view> <FontAwesomeIcon mode="regular" name="house" />regular</view> <view> <FontAwesomeIcon mode="regular" name="house" />regular</view>
<view> <FontAwesomeIcon mode="light" name="grid-2" />light grid-2</view>
<view> <FontAwesomeIcon mode="light" name="house" />light</view> <view> <FontAwesomeIcon mode="light" name="house" />light</view>
<view> <FontAwesomeIcon mode="thin" name="house" />thin</view> <view> <FontAwesomeIcon mode="thin" name="house" />thin</view>
<view> <FontAwesomeIcon mode="duotone" name="house" />duotone</view> <view> <FontAwesomeIcon mode="duotone" name="trash-can-clock" />duotone trash-can-clock</view>
<view class="title">sharp-直角图标(只支持solid),对应相应字体文件</view> <view> <FontAwesomeIcon mode="duotone" name="house" />duotone house</view>
<view class="title">sharp-直角图标(只支持大部分solid),对应sharp字体文件</view>
<view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view> <view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view>
<view class="title">mode(brands)-品牌logo,对应相应字体文件</view> <view class="title">mode(brands)-品牌logo,对应brands字体文件</view>
<view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view> <view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view>
<view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view> <view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view>
@ -202,6 +218,13 @@
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #ff253a; color: #ff253a;
.link {
margin-right: 16rpx;
&:hover {
opacity: 0.6;
text-decoration: underline;
}
}
} }
.title { .title {
font-size: 28rpx; font-size: 28rpx;