base-vue支持组件库支持前缀类名
This commit is contained in:
oneao committed
1 parent
8f4c696bdd
commit
8bd73b3786
18 files changed
+266
-152
No files matched your search
@@ -3,7 +3,7 @@
|
||||
"version": "1.0.0",
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./styles": "./src/_styles/index.scss"
|
||||
"./index.scss": "./src/index.scss"
|
||||
},
|
||||
"typesVersions": {
|
||||
"*": {
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@iconify/vue": "^2.1.0",
|
||||
"@iconify/vue": "5.0.0",
|
||||
"vue": "^3.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { InjectionKey } from 'vue'
|
||||
|
||||
export interface ConfigProviderContext {
|
||||
prefixCls: string
|
||||
}
|
||||
|
||||
export const configProviderInjectionKey: InjectionKey<ConfigProviderContext>
|
||||
= Symbol('ConfigProvider')
|
||||
@@ -0,0 +1,26 @@
|
||||
import { defineComponent, getCurrentInstance, provide, reactive, toRefs } from 'vue'
|
||||
import { configProviderInjectionKey } from './context'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ConfigProvider',
|
||||
props: {
|
||||
prefixCls: { type: String, default: 'ao' },
|
||||
global: { type: Boolean, default: false },
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const { prefixCls } = toRefs(props)
|
||||
const config = reactive({ prefixCls: prefixCls.value })
|
||||
|
||||
if (props.global) {
|
||||
const instance = getCurrentInstance()
|
||||
if (instance) {
|
||||
instance.appContext.app.provide(configProviderInjectionKey, config)
|
||||
}
|
||||
}
|
||||
else {
|
||||
provide(configProviderInjectionKey, config)
|
||||
}
|
||||
|
||||
return () => slots.default?.()
|
||||
},
|
||||
})
|
||||
@@ -1,4 +0,0 @@
|
||||
@import './theme';
|
||||
@import '../button/index.scss';
|
||||
|
||||
@prefix: 'my-prefix';
|
||||
@@ -1,8 +0,0 @@
|
||||
/* 主题色 */
|
||||
$primary-color: #007bff;
|
||||
$secondary-color: #6c757d;
|
||||
$success-color: #28a745;
|
||||
$warning-color: #ffc107;
|
||||
$danger-color: #dc3545;
|
||||
$light-color: #f8f9fa;
|
||||
$dark-color: #343a40;
|
||||
@@ -0,0 +1,17 @@
|
||||
$prefix: 'ao' !default;
|
||||
|
||||
// 主色系
|
||||
$primary-color: #1677ff !default;
|
||||
$primary-hover-color: #0958d9 !default;
|
||||
|
||||
// 功能色
|
||||
$success-color: #52c41a !default;
|
||||
$danger-color: #ff4d4f !default;
|
||||
$warning-color: #faad14 !default;
|
||||
$info-color: #13c2c2 !default;
|
||||
|
||||
// 中性色
|
||||
$background-color: #f5f7fa !default;
|
||||
$border-color: #d9d9d9 !default;
|
||||
$text-color: #000000de !default;
|
||||
$text-secondary-color: #595959 !default;
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { ConfigProviderContext } from '../_config/context'
|
||||
import { inject } from 'vue'
|
||||
import { configProviderInjectionKey } from '../_config/context'
|
||||
|
||||
const DEFAULT_PREFIX = 'ao'
|
||||
|
||||
export function getPrefixCls(componentName?: string): string {
|
||||
const configProvider: ConfigProviderContext | undefined
|
||||
= inject(configProviderInjectionKey, undefined)
|
||||
|
||||
const prefix = configProvider?.prefixCls ?? DEFAULT_PREFIX
|
||||
|
||||
return componentName ? `${prefix}-${componentName}` : prefix
|
||||
}
|
||||
@@ -1,95 +1,29 @@
|
||||
/* 基本按钮样式 */
|
||||
.btn {
|
||||
height: 40px; /* 增大按钮高度 */
|
||||
padding: 0 24px; /* 左右内边距增加 */
|
||||
font-size: 14px;
|
||||
font-weight: 500; /* 加粗字体 */
|
||||
border-radius: 6px; /* 增大圆角 */
|
||||
@import '../_styles/theme/index.scss';
|
||||
|
||||
// 按钮基础样式示例
|
||||
.#{$prefix}-btn {
|
||||
padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease; /* 平滑过渡效果 */
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 默认阴影效果 */
|
||||
}
|
||||
|
||||
/* 主色按钮 */
|
||||
.btn-primary {
|
||||
background: $primary-color; /* 使用主题色 */
|
||||
color: #fff;
|
||||
border: 1px solid $primary-color; /* 与背景颜色一致的边框 */
|
||||
}
|
||||
&-default {
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
color: $text-secondary-color;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: darken($primary-color, 10%); /* 悬停效果 */
|
||||
border-color: darken($primary-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 悬停时阴影加重 */
|
||||
}
|
||||
&-primary {
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
|
||||
/* 辅助色按钮 */
|
||||
.btn-secondary {
|
||||
background: $secondary-color; /* 使用辅助色 */
|
||||
color: #fff;
|
||||
border: 1px solid $secondary-color; /* 边框颜色 */
|
||||
}
|
||||
&:hover {
|
||||
background: $primary-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: darken($secondary-color, 10%);
|
||||
border-color: darken($secondary-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 成功色按钮 */
|
||||
.btn-success {
|
||||
background: $success-color; /* 成功色 */
|
||||
color: #fff;
|
||||
border: 1px solid $success-color; /* 边框颜色 */
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: darken($success-color, 10%);
|
||||
border-color: darken($success-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 警告色按钮 */
|
||||
.btn-warning {
|
||||
background: $warning-color; /* 警告色 */
|
||||
color: #fff;
|
||||
border: 1px solid $warning-color; /* 边框颜色 */
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: darken($warning-color, 10%);
|
||||
border-color: darken($warning-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 危险色按钮 */
|
||||
.btn-danger {
|
||||
background: $danger-color; /* 危险色 */
|
||||
color: #fff;
|
||||
border: 1px solid $danger-color; /* 边框颜色 */
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: darken($danger-color, 10%);
|
||||
border-color: darken($danger-color, 10%);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
|
||||
}
|
||||
|
||||
/* 链接按钮 */
|
||||
.btn-link {
|
||||
background: transparent;
|
||||
color: $primary-color;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
text-decoration: underline;
|
||||
&-danger {
|
||||
background: $danger-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,14 @@
|
||||
import type { PropType } from 'vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Button',
|
||||
name: 'AButton',
|
||||
props: {
|
||||
type: {
|
||||
type: String as PropType<'primary' | 'secondary' | 'danger' | 'link'>,
|
||||
default: 'primary',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
type: { type: String as () => 'primary' | 'danger' | 'default', default: 'default' },
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const baseClass = 'btn'
|
||||
const typeClass = `btn-${props.type}`
|
||||
|
||||
return () => (
|
||||
<button class={`${baseClass} ${typeClass}`} disabled={props.disabled}>
|
||||
{slots.default?.()}
|
||||
</button>
|
||||
)
|
||||
const prefixCls = getPrefixCls('btn')
|
||||
const cls = computed(() => [prefixCls, `${prefixCls}-${props.type}`])
|
||||
return () => <button class={cls.value}>{slots.default?.()}</button>
|
||||
},
|
||||
})
|
||||
@@ -1,3 +1,4 @@
|
||||
export { default as ConfigProvider } from './_config'
|
||||
export { default as Button } from './button'
|
||||
export { default as Icon } from './icon'
|
||||
export { default as Input } from './input'
|
||||
@@ -0,0 +1 @@
|
||||
@import './button/index.scss';
|
||||
Reference in new issue
Block a user