mirror of
				https://github.com/antd-tiny-vue/antd-tiny-vue.git
				synced 2025-10-31 08:41: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 | ||||||
| @@ -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> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user