mirror of
				https://github.com/antd-tiny-vue/antd-tiny-vue.git
				synced 2025-10-31 16:51:45 +08:00 
			
		
		
		
	feat: add basic
This commit is contained in:
		
							
								
								
									
										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 | ||||
		Reference in New Issue
	
	Block a user