mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2025-01-10 08:09:09 +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>
|
</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>
|
||||||
|
Loading…
Reference in New Issue
Block a user