mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2025-01-10 08:09:09 +08:00
feat: add basic
This commit is contained in:
parent
9603871a40
commit
770471fc3d
33
components/button/index.tsx
Normal file
33
components/button/index.tsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { computed, defineComponent } from 'vue'
|
||||||
|
import type { CSSInterpolation } from '@antd-tiny-vue/cssinjs'
|
||||||
|
import { useStyleRegister } from '@antd-tiny-vue/cssinjs'
|
||||||
|
import type { ThemeToken } from '../theme'
|
||||||
|
import { useToken } from '../theme'
|
||||||
|
|
||||||
|
export const generateButtonStyle = (prefixCls: string, token: ThemeToken): CSSInterpolation => ({
|
||||||
|
[`.${prefixCls}`]: {
|
||||||
|
backgroundColor: token.primaryColor,
|
||||||
|
padding: '10px 20px',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: 'red'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const Button = defineComponent({
|
||||||
|
name: 'AButton',
|
||||||
|
setup() {
|
||||||
|
const prefixCls = 'ant-btn'
|
||||||
|
const [theme, token, hashId] = useToken()
|
||||||
|
const info = computed<any>(() => ({
|
||||||
|
theme: theme.value,
|
||||||
|
token: token.value,
|
||||||
|
path: [prefixCls],
|
||||||
|
hashId: hashId.value
|
||||||
|
}))
|
||||||
|
const wrapSSR = useStyleRegister(info, () => [generateButtonStyle(prefixCls, token.value as any)])
|
||||||
|
return () => wrapSSR(<button class={[prefixCls, hashId.value]}>按钮</button>)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default Button
|
@ -7,10 +7,14 @@ title: 基础按钮
|
|||||||
|
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<script lang="ts" setup></script>
|
<script lang="ts" setup>
|
||||||
|
import Button from '../../../components/button'
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>按钮</div>
|
<div>
|
||||||
|
<Button />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
Loading…
Reference in New Issue
Block a user