提交 1c81c18d 作者: 方治民

test: 实验性添加 unocss icon

上级 bae26471
......@@ -2,7 +2,17 @@ import type { Plugin } from 'vite'
// https://github.com/antfu/unocss
import Unocss from 'unocss/vite'
import { presetIcons } from 'unocss'
export function configUnocssPlugin(): Plugin[] {
return Unocss()
return Unocss({
presets: [
presetIcons({
prefix: 'icon-',
extraProperties: {
display: 'inline-flex',
},
}),
],
})
}
<script setup lang="ts">
const props = defineProps({
icon: {
type: String,
required: true,
},
size: {
type: Number || String,
default: 32,
},
color: {
type: String,
default: '#000',
},
})
const size = computed(() => `${props.size}rpx`)
const color = computed(() => props.color)
</script>
<template>
<view class="icon" />
</template>
<style lang="less" scoped>
.icon {
width: v-bind(size);
height: v-bind(size);
color: v-bind(color);
}
</style>
......@@ -36,19 +36,32 @@
const animate = ref()
const handUp = () => {
if (animate.value) {
return
}
Message.toast('👋🏻')
animate.value = 'animate-iteration-infinite'
setTimeout(() => (animate.value = ''), 1000)
setTimeout(() => (animate.value = null), 1500)
}
</script>
<template>
<view class="content flex-center flex-col">
<fui-avatar src="/static/logo.png" radius="14" size="large" background="transparent" @click="surprise" />
<view class="flex flex-col justify-center mb-3">
<fui-avatar
src="/static/logo.png"
radius="14"
size="large"
background="transparent"
class="!mb-5"
@click="surprise"
/>
<view class="flex-center flex-col mb-5">
<text class="title">{{ title }}</text>
<text class="title">{{ $t('app.hello') }}</text>
<uni-icons type="hand-up" size="30" :class="['mt-5', 'animate-heart-beat', animate]" @click="handUp" />
<Icon icon="emojione:grinning-face" size="48" class="m-3" />
<uni-icons type="hand-up" size="30" class="mt-3 animate-swing" :class="[animate]" @click="handUp" />
</view>
<fui-footer isFixed>
<template #text>
......
import { defineConfig } from 'unocss'
import presetWeapp from 'unocss-preset-weapp'
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { defaultAttributes, transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
const transformRules = {
':': '-',
'.': '_dl_',
'/': '_sl_',
'%': '_pes_',
'!': '_el_',
'#': '_wn_',
'(': '_lbl_',
')': '_lbr_',
'[': '_lfl_',
']': '_lfr_',
$: '_do_',
',': '_lco_',
'=': '_eqe_',
}
export default defineConfig({
presets: [
......@@ -20,9 +36,14 @@ export default defineConfig({
],
transformers: [
// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
transformerAttributify(),
transformerAttributify({
attributes: [...defaultAttributes, 'icon'],
transformRules,
}),
// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
transformerClass(),
transformerClass({
transformRules,
}),
],
})
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论