mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2024-11-10 09:39:15 +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>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
<script lang="ts" setup>
|
||||
import Button from '../../../components/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>按钮</div>
|
||||
<div>
|
||||
<Button />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
Loading…
Reference in New Issue
Block a user