mirror of
https://gitee.com/h_mo/uniapp-vue3-vite-ts-template
synced 2025-04-05 19:41:44 +08:00
398 lines
9.7 KiB
Vue
398 lines
9.7 KiB
Vue
<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 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: '',
|
|
rotateFlip: false,
|
|
beat: false,
|
|
fade: false,
|
|
bounce: false,
|
|
flip: false,
|
|
shake: false,
|
|
spin: false,
|
|
});
|
|
|
|
const setAttribute = (e: any) => {
|
|
const { k: key, v: value } = e.currentTarget.dataset;
|
|
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 = '';
|
|
return;
|
|
}
|
|
// @ts-ignore
|
|
attribute[key] = !attribute[key];
|
|
if (key == 'sharp' && attribute.sharp) {
|
|
attribute.mode = 'solid';
|
|
}
|
|
}
|
|
};
|
|
|
|
const onNumberChange = (e: any) => {
|
|
const { k: key, type } = e.currentTarget.dataset;
|
|
if (key in attribute) {
|
|
// @ts-ignore
|
|
let num = attribute[key] ? parseInt(attribute[key]) : 0;
|
|
switch (type) {
|
|
case 'minus':
|
|
num -= 1;
|
|
break;
|
|
case 'plus':
|
|
num += 1;
|
|
break;
|
|
}
|
|
// @ts-ignore
|
|
attribute[key] = num <= 0 || num > 360 ? '' : num.toString();
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<AppProvider>
|
|
<view class="check-icon-wrap">
|
|
<FontAwesomeIcon
|
|
:name="iconName"
|
|
:mode="attribute.mode"
|
|
:sharp="attribute.sharp"
|
|
:color="attribute.color"
|
|
:size="attribute.size"
|
|
:rotate="attribute.rotate"
|
|
:rotate-flip="attribute.rotateFlip"
|
|
:beat="attribute.beat"
|
|
:fade="attribute.fade"
|
|
:bounce="attribute.bounce"
|
|
:flip="attribute.flip"
|
|
:shake="attribute.shake"
|
|
:spin="attribute.spin"
|
|
/>
|
|
</view>
|
|
<view class="check-wrap">
|
|
<view class="input-wrap">
|
|
<input
|
|
placeholder="Icon Name"
|
|
type="text"
|
|
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 flex-row">
|
|
<view>大小(size)[rpx]:</view>
|
|
<view class="flex-row input-wrap">
|
|
<view
|
|
class="icon-warp minus"
|
|
@click="onNumberChange"
|
|
data-k="size"
|
|
data-type="minus"
|
|
>
|
|
<FontAwesomeIcon name="minus" bg-color="#C3C6D1" />
|
|
</view>
|
|
<input
|
|
class="attribute-input"
|
|
type="number"
|
|
v-model.trim.lazy="attribute.size"
|
|
/>
|
|
<view
|
|
class="icon-warp plus"
|
|
@click="onNumberChange"
|
|
data-k="size"
|
|
data-type="plus"
|
|
>
|
|
<FontAwesomeIcon name="plus" bg-color="#C3C6D1" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rotate flex-row">
|
|
<view>旋转角度(rotate)[deg]: </view>
|
|
<view class="flex-row input-wrap">
|
|
<view
|
|
class="icon-warp minus"
|
|
@click="onNumberChange"
|
|
data-k="rotate"
|
|
data-type="minus"
|
|
>
|
|
<FontAwesomeIcon name="minus" bg-color="#C3C6D1" />
|
|
</view>
|
|
<input
|
|
class="attribute-input"
|
|
type="number"
|
|
v-model.trim.lazy="attribute.rotate"
|
|
/>
|
|
<view
|
|
class="icon-warp plus"
|
|
@click="onNumberChange"
|
|
data-k="rotate"
|
|
data-type="plus"
|
|
>
|
|
<FontAwesomeIcon name="plus" bg-color="#C3C6D1" />
|
|
</view>
|
|
</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">
|
|
<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: 20rpx 0 36rpx 0;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
.check-icon-wrap {
|
|
height: 160rpx;
|
|
max-height: 200rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: scroll;
|
|
}
|
|
.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 {
|
|
& > view {
|
|
margin-top: 16rpx;
|
|
}
|
|
margin-top: 24rpx;
|
|
.attribute-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.attribute-item {
|
|
width: 30%;
|
|
height: 56rpx;
|
|
padding-left: 32rpx;
|
|
text {
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.attribute-input {
|
|
width: 96rpx;
|
|
}
|
|
.input-wrap {
|
|
border: 1rpx solid #c3c6d1;
|
|
border-radius: 16rpx;
|
|
//padding: 0 12rpx;
|
|
margin-left: 16rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.icon-warp {
|
|
background-color: #c3c6d1;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
padding: 0 16rpx;
|
|
&.plus {
|
|
border-top-right-radius: 16rpx;
|
|
border-bottom-right-radius: 16rpx;
|
|
}
|
|
&.minus {
|
|
border-top-left-radius: 16rpx;
|
|
border-bottom-left-radius: 16rpx;
|
|
}
|
|
}
|
|
.attribute-input {
|
|
text-align: center;
|
|
flex-grow: 1;
|
|
height: 52rpx;
|
|
margin: 0 16rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|