mirror of
				https://github.com/antd-tiny-vue/antd-tiny-vue.git
				synced 2025-10-31 16:51:45 +08:00 
			
		
		
		
	feat: add delete button
This commit is contained in:
		| @@ -1,33 +0,0 @@ | ||||
| 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 | ||||
| @@ -1,30 +0,0 @@ | ||||
| import { createTheme, useCacheToken } from '@antd-tiny-vue/cssinjs' | ||||
| import { computed } from 'vue' | ||||
|  | ||||
| export interface ThemeToken { | ||||
|   primaryColor: string | ||||
| } | ||||
|  | ||||
| export const defaultTheme: ThemeToken = { | ||||
|   primaryColor: '#1890ff' | ||||
| } | ||||
|  | ||||
| function derivative(theme: ThemeToken) { | ||||
|   return { | ||||
|     ...theme | ||||
|   } | ||||
| } | ||||
|  | ||||
| const theme = createTheme(derivative) | ||||
|  | ||||
| export const useToken = () => { | ||||
|   const mergedTheme = computed(() => theme) | ||||
|   const cacheToken = useCacheToken( | ||||
|     mergedTheme, | ||||
|     computed(() => [defaultTheme]), | ||||
|     computed(() => ({ | ||||
|       salt: 'true' | ||||
|     })) | ||||
|   ) | ||||
|   return [mergedTheme, computed(() => cacheToken.value[0]), computed(() => cacheToken.value[1])] | ||||
| } | ||||
| @@ -7,14 +7,10 @@ title: 基础按钮 | ||||
|  | ||||
| </docs> | ||||
|  | ||||
| <script lang="ts" setup> | ||||
|   import Button from '../../../components/button' | ||||
| </script> | ||||
| <script lang="ts" setup></script> | ||||
|  | ||||
| <template> | ||||
|   <div> | ||||
|     <Button /> | ||||
|   </div> | ||||
|   <div></div> | ||||
| </template> | ||||
|  | ||||
| <style scoped></style> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user