mirror of
https://gitee.com/h_mo/uniapp-vue3-vite-ts-template
synced 2025-04-05 06:12:44 +08:00
wip-FontAwesomeIcon check
This commit is contained in:
Huang
parent
cdd1d0f83d
commit
35d5bb920d
@ -125,14 +125,14 @@ pnpm install
|
||||
- 运行
|
||||
|
||||
```bash
|
||||
# 其他端请查看 webpage.json script
|
||||
# 其他端请查看 package.json script
|
||||
pnpm dev:h5
|
||||
```
|
||||
|
||||
- 打包
|
||||
|
||||
```bash
|
||||
# 其他端请查看 webpage.json script
|
||||
# 其他端请查看 package.json script
|
||||
pnpm build:h5
|
||||
```
|
||||
|
||||
|
||||
38
package.json
38
package.json
@ -35,19 +35,19 @@
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-app-plus": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-components": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-h5": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-i18n": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-mp-alipay": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-mp-baidu": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-mp-kuaishou": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-mp-lark": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-mp-qq": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-mp-toutiao": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-quickapp-webview": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-app": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-app-plus": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-components": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-h5": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-i18n": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-mp-alipay": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-mp-baidu": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-mp-kuaishou": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-mp-lark": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-mp-qq": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-mp-toutiao": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-quickapp-webview": "^3.0.0-alpha-3060420220922008",
|
||||
"@fortawesome/fontawesome-free": "^6.2.0",
|
||||
"crypto-js": "^4.1.1",
|
||||
"echarts": "^5.4.0",
|
||||
@ -60,15 +60,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dcloudio/types": "^2.6.12",
|
||||
"@dcloudio/uni-automator": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-cli-shared": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3060420220922006",
|
||||
"@dcloudio/uni-automator": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/uni-cli-shared": "^3.0.0-alpha-3060420220922008",
|
||||
"@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3060420220922008",
|
||||
"@types/crypto-js": "^4.1.1",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/node": "^17.0.45",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.39.0",
|
||||
"@typescript-eslint/parser": "^5.39.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.40.0",
|
||||
"@typescript-eslint/parser": "^5.40.0",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint": "^8.25.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
@ -82,7 +82,7 @@
|
||||
"sass": "^1.55.0",
|
||||
"typescript": "^4.8.4",
|
||||
"unplugin-vue-components": "^0.22.8",
|
||||
"vite": "^3.1.6",
|
||||
"vite": "^3.1.7",
|
||||
"vite-plugin-eslint": "^1.8.1"
|
||||
},
|
||||
"husky": {
|
||||
|
||||
622
pnpm-lock.yaml
generated
622
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
14
src/components/Test/index.vue
Normal file
14
src/components/Test/index.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
});
|
||||
|
||||
const text = 'TEXT: ' + props.text;
|
||||
</script>
|
||||
<template>
|
||||
<view>{{ text }}</view>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
328
src/demo/example/fontAwesomeIcon/check.vue
Normal file
328
src/demo/example/fontAwesomeIcon/check.vue
Normal file
@ -0,0 +1,328 @@
|
||||
<script lang="ts" setup>
|
||||
import AppProvider from '@/components/AppProvider/inedx.vue';
|
||||
import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
|
||||
import Test from '@/components/Test/index.vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const iconName = ref('house');
|
||||
|
||||
const modeList = ['solid', 'regular', 'light', 'thin', 'duotone', 'brands'];
|
||||
|
||||
const colors = [
|
||||
{
|
||||
color: '#000000',
|
||||
name: '黑色',
|
||||
},
|
||||
{
|
||||
color: '#FFFFFF',
|
||||
name: '白色',
|
||||
},
|
||||
{
|
||||
color: '#0000FF',
|
||||
name: '蓝色',
|
||||
},
|
||||
{
|
||||
color: '#008080',
|
||||
name: '蓝绿色',
|
||||
},
|
||||
{
|
||||
color: '#FF0000',
|
||||
name: '红色',
|
||||
},
|
||||
{
|
||||
color: '#00FF00',
|
||||
name: '绿色',
|
||||
},
|
||||
{
|
||||
color: '#FFFF00',
|
||||
name: '黄色',
|
||||
},
|
||||
];
|
||||
|
||||
const sizes = ['24', '44', '64', '88'];
|
||||
const rotates = [false, '45', '20', '69', '90', '180', '270', '288'];
|
||||
const rotateFlips = [
|
||||
{
|
||||
value: false,
|
||||
name: '正常',
|
||||
},
|
||||
{
|
||||
value: 'horizontal',
|
||||
name: '水平翻转',
|
||||
},
|
||||
{
|
||||
value: 'vertical',
|
||||
name: '垂直翻转',
|
||||
},
|
||||
{
|
||||
value: 'both',
|
||||
name: '垂直水平翻转',
|
||||
},
|
||||
];
|
||||
const animations = [
|
||||
{
|
||||
value: 'beat',
|
||||
name: '缩放',
|
||||
},
|
||||
{
|
||||
value: 'fade',
|
||||
name: '淡入淡出',
|
||||
},
|
||||
{
|
||||
value: 'bounce',
|
||||
name: '弹跳',
|
||||
},
|
||||
{
|
||||
value: 'flip',
|
||||
name: '翻转',
|
||||
},
|
||||
{
|
||||
value: 'shake',
|
||||
name: '抖动',
|
||||
},
|
||||
{
|
||||
value: 'spin',
|
||||
name: '旋转',
|
||||
},
|
||||
];
|
||||
|
||||
const attribute = reactive({
|
||||
mode: 'solid',
|
||||
sharp: false,
|
||||
color: '#000000',
|
||||
size: '',
|
||||
rotate: false,
|
||||
rotateFlip: false,
|
||||
beat: false,
|
||||
fade: false,
|
||||
bounce: false,
|
||||
flip: false,
|
||||
shake: false,
|
||||
spin: false,
|
||||
});
|
||||
|
||||
const setAttribute = (e: any) => {
|
||||
console.log(e);
|
||||
const key = e.currentTarget.dataset.k;
|
||||
const value = e.currentTarget.dataset.v;
|
||||
const replaces = ['mode', 'color', 'size', 'rotate', 'rotateFlip'];
|
||||
if (key in attribute) {
|
||||
if (replaces.includes(key)) {
|
||||
// @ts-ignore
|
||||
attribute[key] = value;
|
||||
if (key == 'mode') attribute.sharp = false;
|
||||
if (key == 'rotate') attribute.rotateFlip = false;
|
||||
if (key == 'rotateFlip') attribute.rotate = false;
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
attribute[key] = !attribute[key];
|
||||
if (key == 'sharp' && attribute.sharp) {
|
||||
attribute.mode = 'solid';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<AppProvider>
|
||||
<view class="title">Icon Check</view>
|
||||
<FontAwesomeIcon
|
||||
:name="iconName"
|
||||
:mode="attribute.mode"
|
||||
:sharp="attribute.sharp"
|
||||
:color="attribute.color"
|
||||
:size="attribute.size"
|
||||
:rotate="attribute.rotate"
|
||||
:rotate-flip="attribute.rotateFlip"
|
||||
/>
|
||||
<Test :text="attribute.mode" />
|
||||
<view class="check-wrap">
|
||||
<view class="input-wrap">
|
||||
<input placeholder="Icon Name" v-model.trim.lazy="iconName" />
|
||||
</view>
|
||||
<view class="icon-wrap">
|
||||
<FontAwesomeIcon name="circle-exclamation-check" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="attribute-wrap">
|
||||
<view class="mode">
|
||||
<view>风格(mode): </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(mode, index) in modeList" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
@click="setAttribute"
|
||||
data-k="mode"
|
||||
:data-v="mode"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
:name="attribute.mode == mode ? 'circle-dot' : 'circle'"
|
||||
/><text>{{ mode }}</text>
|
||||
</view>
|
||||
</template>
|
||||
<view
|
||||
class="attribute-item"
|
||||
style="width: 50%"
|
||||
@click="setAttribute"
|
||||
data-k="sharp"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:mode="attribute.sharp ? 'solid' : 'regular'"
|
||||
:name="attribute.sharp ? 'square-check' : 'square'"
|
||||
/><text>直角(sharp)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="color">
|
||||
<view>颜色(color): </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(item, index) in colors" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
@click="setAttribute"
|
||||
data-k="color"
|
||||
:data-v="item.color"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
:name="attribute.color == item.color ? 'circle-dot' : 'circle'"
|
||||
/><text>{{ item.name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="size">
|
||||
<view>大小(size)[rpx]: </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(item, index) in sizes" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
@click="setAttribute"
|
||||
data-k="size"
|
||||
:data-v="item"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
:name="attribute.size == item ? 'circle-dot' : 'circle'"
|
||||
/><text>{{ item }}rpx</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rotate">
|
||||
<view>旋转角度(rotate)[deg]: </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(item, index) in rotates" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
@click="setAttribute"
|
||||
data-k="rotate"
|
||||
:data-v="item"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
:name="attribute.rotate == item ? 'circle-dot' : 'circle'"
|
||||
/><text>{{ index != 0 ? item + 'deg' : '正常' }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="color">
|
||||
<view>翻转(rotateFlip): </view>
|
||||
<view class="attribute-list">
|
||||
<template v-for="(item, index) in rotateFlips" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
style="width: 50%"
|
||||
@click="setAttribute"
|
||||
data-k="rotateFlip"
|
||||
:data-v="item.value"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
mode="regular"
|
||||
:name="
|
||||
attribute.rotateFlip == item.value ? 'circle-dot' : 'circle'
|
||||
"
|
||||
/><text>{{ item.name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="animation">
|
||||
<view>动画: </view>
|
||||
<view class="attribute-list">
|
||||
<view
|
||||
class="attribute-item"
|
||||
style="width: 50%"
|
||||
@click="setAttribute"
|
||||
data-k="sharp"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:mode="attribute.sharp ? 'solid' : 'regular'"
|
||||
:name="attribute.sharp ? 'square-check' : 'square'"
|
||||
/><text>直角(sharp)</text>
|
||||
</view>
|
||||
<template v-for="(item, index) in animations" :key="index">
|
||||
<view
|
||||
class="attribute-item"
|
||||
style="width: 50%"
|
||||
@click="setAttribute"
|
||||
:data-k="item.value"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:mode="attribute[item.value] ? 'solid' : 'regular'"
|
||||
:name="attribute[item.value] ? 'square-check' : 'square'"
|
||||
/><text>{{ item.name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</AppProvider>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
margin: 60rpx 0 36rpx 0;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.check-wrap {
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
border-radius: 88rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 36rpx;
|
||||
.input-wrap {
|
||||
flex-grow: 1;
|
||||
input {
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
.icon-wrap {
|
||||
width: 64rpx;
|
||||
text-align: right;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.attribute-wrap {
|
||||
margin-top: 24rpx;
|
||||
.attribute-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.attribute-item {
|
||||
width: 30%;
|
||||
height: 56rpx;
|
||||
padding-left: 32rpx;
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.mode {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,35 +3,49 @@
|
||||
import AppProvider from '@/components/AppProvider/inedx.vue';
|
||||
import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
|
||||
import { SetClipboardData } from '@/utils/uniapi';
|
||||
import { useRouter } from '@/hooks/router';
|
||||
|
||||
const iconLink = ref('https://fontawesome.com/icons');
|
||||
const route = useRouter();
|
||||
|
||||
const onCopyLink = () => {
|
||||
SetClipboardData(iconLink.value);
|
||||
};
|
||||
const onOpen = () => {
|
||||
/* #ifdef H5 */
|
||||
window.open(iconLink.value);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
onCopyLink();
|
||||
/* #endif */
|
||||
};
|
||||
const jumpCheck = () => {
|
||||
route.push('/demo/example/fontAwesomeIcon/check');
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<AppProvider>
|
||||
<view class="h2"> FontAwesomeIcon 图标组件基于font awesome icon v6.20</view>
|
||||
<view class="h2"> FontAwesomeIcon 图标组件基于font awesome icon v6.2</view>
|
||||
<view class="tip">
|
||||
Tip: 由于字体文件太大,共7种风格图标, 7个字体文件,
|
||||
Tip: 共6种风格图标, 7个字体文件,
|
||||
<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
|
||||
微信小程序和阿里小程序动态远程加载font awesome 字体,
|
||||
在\src\utils\fonts.ts中配置,
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
APP加载font awesome 字体, 在\src\utils\fonts.ts中配置,
|
||||
<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
|
||||
H5,APP(Android)在组件目录index.scss中配置引入字体,
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN || MP-ALIPAY || APP-PLUS -->
|
||||
在组件目录index.scss中配置引入字体,
|
||||
<!-- #endif -->
|
||||
已测试: 支持H5, APP(安卓), 微信小程序
|
||||
已测试: 支持H5, APP(Android), 微信小程序
|
||||
</view>
|
||||
<view class="tip">
|
||||
全部icon请查看:
|
||||
<text class="link">{{ iconLink }}</text>
|
||||
<view class="tip" style="color: #595858; margin-top: 10px">
|
||||
官网:
|
||||
<text class="link" @click="onOpen">{{ iconLink }}</text>
|
||||
<FontAwesomeIcon mode="duotone" name="copy" @click="onCopyLink" />
|
||||
</view>
|
||||
<view class="tip" style="color: #595858; margin-top: 10px">
|
||||
<view>使用方法: 在官网图标库搜索查找需要的图标,Copy Icon Name</view>
|
||||
<view class="link" @click="jumpCheck">图标不可用? Check!</view>
|
||||
</view>
|
||||
<view class="title">mode-不同风格,对应相应字体</view>
|
||||
<view> <FontAwesomeIcon name="house" />solid (默认)</view>
|
||||
<view> <FontAwesomeIcon mode="regular" name="house" />regular</view>
|
||||
@ -43,10 +57,10 @@
|
||||
trash-can-clock</view
|
||||
>
|
||||
<view> <FontAwesomeIcon mode="duotone" name="house" />duotone house</view>
|
||||
<view class="title">sharp-直角图标(只支持大部分solid),对应sharp字体</view>
|
||||
<view class="title">sharp-直角图标,对应sharp字体</view>
|
||||
<view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view>
|
||||
|
||||
<view class="title">mode(brands)-品牌logo,对应brands字体</view>
|
||||
<view class="title">mode(brands)-logo,对应brands字体</view>
|
||||
<view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view>
|
||||
<view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view>
|
||||
|
||||
@ -313,6 +327,7 @@
|
||||
.link {
|
||||
margin-right: 16rpx;
|
||||
&:hover {
|
||||
color: #315efb;
|
||||
opacity: 0.6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -322,6 +337,7 @@
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin: 28rpx 0 8rpx 0;
|
||||
color: #3b82f6;
|
||||
color: #333333;
|
||||
font-style: oblique;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -92,6 +92,14 @@
|
||||
"meta": {
|
||||
"ignoreAuth": true
|
||||
}
|
||||
},{
|
||||
"path": "fontAwesomeIcon/check",
|
||||
"style": {
|
||||
"navigationBarTitleText": "FontAwesomeIcon-Check"
|
||||
},
|
||||
"meta": {
|
||||
"ignoreAuth": true
|
||||
}
|
||||
}]
|
||||
}],
|
||||
"globalStyle": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user