mirror of
				https://github.com/antd-tiny-vue/antd-tiny-vue.git
				synced 2025-11-01 01:01:44 +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> | </docs> | ||||||
|  |  | ||||||
| <script lang="ts" setup> | <script lang="ts" setup></script> | ||||||
|   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