mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2024-11-10 09:39:15 +08:00
feat: add delete button
This commit is contained in:
parent
770471fc3d
commit
8222f10259
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user