u
This commit is contained in:
oneao committed
1 parent
985b42cafb
commit
5e3dccc88b
25 files changed
+931
-543
No files matched your search
@@ -0,0 +1,47 @@
|
||||
import type { Ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export interface UseSelectableProps<T> {
|
||||
modelValue: T[]
|
||||
multiple?: boolean
|
||||
options?: Record<string, any>[]
|
||||
valueField?: string
|
||||
}
|
||||
|
||||
export function useSelectable<T>(
|
||||
props: UseSelectableProps<T>,
|
||||
onChange?: (selectedValues: T[], selectedOptions?: Record<string, any>[]) => void,
|
||||
) {
|
||||
const valueField = props.valueField || 'value'
|
||||
|
||||
// 修复：使用泛型参数明确指定 ref 的类型
|
||||
const selectedValues = ref<T[]>(props.modelValue) as Ref<T[]>
|
||||
|
||||
const updateValue = (option: Record<string, any>, checked: boolean) => {
|
||||
const val = option[valueField] as T
|
||||
|
||||
let newValues: T[]
|
||||
if (props.multiple) {
|
||||
newValues = checked
|
||||
? selectedValues.value.includes(val)
|
||||
? [...selectedValues.value]
|
||||
: [...selectedValues.value, val]
|
||||
: selectedValues.value.filter(v => v !== val)
|
||||
}
|
||||
else {
|
||||
newValues = checked ? [val] : []
|
||||
}
|
||||
|
||||
selectedValues.value = newValues
|
||||
|
||||
// 如果有 options，返回完整对象数组
|
||||
const selectedOptions = props.options?.filter(opt => newValues.includes(opt[valueField]))
|
||||
|
||||
onChange?.(newValues, selectedOptions)
|
||||
}
|
||||
|
||||
return {
|
||||
selectedValues,
|
||||
updateValue,
|
||||
}
|
||||
}
|
||||
@@ -66,7 +66,7 @@ $text-color-anti: var(--ao-text-color-anti); // 色彩-文字-反色
|
||||
$text-color-link: var(--ao-text-color-link); // 色彩-文字-链接
|
||||
|
||||
$border-radius: 2px;
|
||||
$stroke-color: var(--ao-stroke-color); // 分割线（内容区域之间的分隔，如列表、面板内部）
|
||||
$separator-color: var(--ao-separator-color); // 分割线（内容区域之间的分隔，如列表、面板内部）
|
||||
$border-color: var(--ao-border-color); // 组件边框（Input、Select、Card 等容器的外部边框）
|
||||
|
||||
$bg-color-control: var(
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
--ao-text-color-link: #4582e6; /* 链接文字 */
|
||||
--ao-text-color-watermark: rgba(255, 255, 255, 10%); /* 水印 / 背景文字 */
|
||||
|
||||
--ao-stroke-color: #393939; // 分割线
|
||||
--ao-separator-color: #393939; // 分割线
|
||||
--ao-border-color: #5e5e5e; // 边框
|
||||
|
||||
--ao-bg-color-control: transparent; // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
// 字体相关token
|
||||
:root {
|
||||
// 字体family token
|
||||
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
|
||||
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
|
||||
|
||||
// 字体大小 token
|
||||
--td-font-size-link-small: 12px;
|
||||
--td-font-size-link-medium: 14px;
|
||||
--td-font-size-link-large: 16px;
|
||||
--td-font-size-mark-small: 12px;
|
||||
--td-font-size-mark-medium: 14px;
|
||||
--td-font-size-body-small: 12px;
|
||||
--td-font-size-body-medium: 13px;
|
||||
--td-font-size-body-large: 1px;
|
||||
--td-font-size-title-small: 14px;
|
||||
--td-font-size-title-medium: 16px;
|
||||
--td-font-size-title-large: 18px;
|
||||
--td-font-size-title-extraLarge: 20px;
|
||||
--td-font-size-headline-small: 24px;
|
||||
--td-font-size-headline-medium: 28px;
|
||||
--td-font-size-headline-large: 36px;
|
||||
--td-font-size-display-medium: 48px;
|
||||
--td-font-size-display-large: 64px;
|
||||
|
||||
// 字体行高 token
|
||||
--td-line-height-link-small: 20px;
|
||||
--td-line-height-link-medium: 22px;
|
||||
--td-line-height-link-large: 24px;
|
||||
--td-line-height-mark-small: 20px;
|
||||
--td-line-height-mark-medium: 22px;
|
||||
--td-line-height-body-small: 20px;
|
||||
--td-line-height-body-medium: 22px;
|
||||
--td-line-height-body-large: 24px;
|
||||
--td-line-height-title-small: 22px;
|
||||
--td-line-height-title-medium: 24px;
|
||||
--td-line-height-title-large: 26px;
|
||||
--td-line-height-title-extraLarge: 28px;
|
||||
--td-line-height-headline-small: 32px;
|
||||
--td-line-height-headline-medium: 36px;
|
||||
--td-line-height-headline-large: 44px;
|
||||
--td-line-height-display-medium: 56px;
|
||||
--td-line-height-display-large: 72px;
|
||||
|
||||
// font token
|
||||
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
|
||||
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
|
||||
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
|
||||
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
|
||||
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
|
||||
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
|
||||
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
|
||||
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
|
||||
--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
|
||||
--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
|
||||
--td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
|
||||
var(--td-font-family);
|
||||
--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
|
||||
var(--td-font-family);
|
||||
--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
|
||||
var(--td-font-family);
|
||||
}
|
||||
@@ -57,7 +57,7 @@
|
||||
--ao-text-color-link: #003cab; /* 链接文字 */
|
||||
--ao-text-color-watermark: rgba(0, 0, 0, 10%); /* 水印 / 背景文字 */
|
||||
|
||||
--ao-stroke-color: #e8e8e8; // 分割线
|
||||
--ao-separator-color: #e8e8e8; // 分割线
|
||||
--ao-border-color: #ddd; // 边框
|
||||
|
||||
--ao-bg-color-control: #fff; // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
// border-radius相关 token
|
||||
:root {
|
||||
--td-radius-small: 2px;
|
||||
--td-radius-default: 3px;
|
||||
--td-radius-medium: 6px;
|
||||
--td-radius-large: 9px;
|
||||
--td-radius-extraLarge: 12px;
|
||||
--td-radius-round: 999px;
|
||||
--td-radius-circle: 50%;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
// size/margin/padding相关 token
|
||||
:root {
|
||||
--td-size-2: 2px;
|
||||
--td-size-4: 4px;
|
||||
--td-size-6: 6px;
|
||||
--td-size-8: 8px;
|
||||
--td-size-12: 12px;
|
||||
--td-size-16: 16px;
|
||||
--td-size-20: 20px;
|
||||
--td-size-24: 24px;
|
||||
--td-size-28: 28px;
|
||||
--td-size-32: 32px;
|
||||
--td-size-36: 36px;
|
||||
--td-size-40: 40px;
|
||||
--td-size-48: 48px;
|
||||
--td-size-56: 56px;
|
||||
--td-size-64: 64px;
|
||||
--td-size-72: 72px;
|
||||
}
|
||||
@@ -6,6 +6,9 @@ export { default as Icon } from './icon'
|
||||
export { default as Input } from './input'
|
||||
export { default as Popconfirm } from './popconfirm'
|
||||
export { default as Popup } from './popup'
|
||||
export { default as Radio } from './radio'
|
||||
export { default as Separator } from './separator'
|
||||
export { default as Space } from './space'
|
||||
export { default as Spin } from './spin'
|
||||
export { default as Tag } from './tag'
|
||||
export { default as TagGroup } from './tag-group'
|
||||
|
||||
@@ -13,3 +13,6 @@
|
||||
@use './tooltip/index.scss' as *;
|
||||
@use './tag/index.scss' as *;
|
||||
@use './tag-group/index.scss' as *;
|
||||
@use './space/index.scss' as *;
|
||||
@use './separator/index.scss' as *;
|
||||
@use './radio/index.scss' as *;
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { PropType, VNode } from 'vue'
|
||||
import { defineComponent, ref, watch } from 'vue'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
import Button from '../button/index'
|
||||
import Icon from '../icon/index'
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
@use '../_styles/_variables.scss' as *;
|
||||
|
||||
$radio-prefix: '#{$prefix}-radio';
|
||||
|
||||
.#{$radio-prefix} {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
input[type='radio'] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
& .#{$radio-prefix}-circle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 勾选圆点
|
||||
input[type='radio']:checked + .#{$radio-prefix}-circle::after {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #1890ff;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
animation: scaleIn 0.2s ease forwards;
|
||||
box-shadow: 0 0 6px #1890ff33; // #33 = 20% 透明度
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&-clicked {
|
||||
.#{$radio-prefix}-circle {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { computed, defineComponent, ref } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'AnimatedRadio',
|
||||
props: {
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: null,
|
||||
},
|
||||
value: {
|
||||
type: [String, Number, Boolean],
|
||||
required: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
class: {
|
||||
type: [String, Array, Object],
|
||||
default: '',
|
||||
},
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
setup(props, { slots, emit }) {
|
||||
const prefixCls = getPrefixCls('radio')
|
||||
const isClicked = ref(false)
|
||||
|
||||
const checked = computed(() => props.modelValue === props.value)
|
||||
|
||||
const handleChange = () => {
|
||||
if (!props.disabled) {
|
||||
emit('update:modelValue', props.value)
|
||||
// 播放点击动画
|
||||
isClicked.value = true
|
||||
setTimeout(() => (isClicked.value = false), 300)
|
||||
}
|
||||
}
|
||||
|
||||
return () => (
|
||||
<label
|
||||
class={[
|
||||
prefixCls,
|
||||
props.class,
|
||||
checked.value ? `${prefixCls}-checked` : '',
|
||||
props.disabled ? `${prefixCls}-disabled` : '',
|
||||
isClicked.value ? `${prefixCls}-clicked` : '',
|
||||
]}
|
||||
style={{ ...props.style }}
|
||||
>
|
||||
<div class={`${prefixCls}-wrapper`}>
|
||||
<input
|
||||
type="radio"
|
||||
value={props.value}
|
||||
checked={checked.value}
|
||||
disabled={props.disabled}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<span class={`${prefixCls}-circle`} />
|
||||
</div>
|
||||
<div class={`${prefixCls}-content`}>
|
||||
{slots.default ? slots.default() : null}
|
||||
</div>
|
||||
</label>
|
||||
)
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="padding:20px; max-width:600px;">
|
||||
<h3>1. 简单水平分割线</h3>
|
||||
<ASeparator />
|
||||
|
||||
<h3>2. 垂直分割线</h3>
|
||||
<div style="display:flex; align-items:center; gap:16px;">
|
||||
<span>左</span>
|
||||
<ASeparator layout="vertical" />
|
||||
<span>右</span>
|
||||
</div>
|
||||
|
||||
<h3>3. 虚线分割线</h3>
|
||||
<ASeparator dashed />
|
||||
<div style="display:flex; align-items:center; gap:16px; margin-top:8px;">
|
||||
<span>左</span>
|
||||
<ASeparator layout="vertical" dashed />
|
||||
<span>右</span>
|
||||
</div>
|
||||
|
||||
<h3>4. 水平分割线带文字</h3>
|
||||
<ASeparator content="分割文字" align="center" />
|
||||
<ASeparator content="左侧文字" align="left" />
|
||||
<ASeparator content="右侧文字" align="right" />
|
||||
|
||||
<h3>5. 使用插槽自定义内容</h3>
|
||||
<ASeparator>
|
||||
<strong style="color:red">自定义内容</strong>
|
||||
</ASeparator>
|
||||
|
||||
<h3>6. 配合 ASpace 使用 separator</h3>
|
||||
<ASpace size="middle" separator>
|
||||
<div style="width:60px;height:40px;background:#eee;">
|
||||
A
|
||||
</div>
|
||||
<div style="width:60px;height:40px;background:#ccc;">
|
||||
B
|
||||
</div>
|
||||
<div style="width:60px;height:40px;background:#aaa;">
|
||||
C
|
||||
</div>
|
||||
</ASpace>
|
||||
|
||||
<h3>7. 带自定义 margin</h3>
|
||||
<ASeparator :margin="12" />
|
||||
<div style="display:flex; align-items:center; gap:16px; margin-top:8px;">
|
||||
<span>左</span>
|
||||
<ASeparator layout="vertical" :margin="[0, 8]" />
|
||||
<span>右</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,78 @@
|
||||
@use '../_styles/_variables.scss' as *;
|
||||
@use 'sass:color';
|
||||
|
||||
$separator-prefix: '#{$prefix}-separator';
|
||||
|
||||
.#{$separator-prefix} {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
color: $text-color-base;
|
||||
box-sizing: border-box;
|
||||
&.#{$separator-prefix}-layout-horizontal {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-top: 1px solid $separator-color;
|
||||
margin: 6px 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&.#{$separator-prefix}-layout-vertical {
|
||||
border-top: 0;
|
||||
display: inline-block;
|
||||
height: 0.9em;
|
||||
vertical-align: middle;
|
||||
border-left: 1px solid $separator-color;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
&.#{$separator-prefix}-dashed {
|
||||
// 水平虚线
|
||||
&.#{$separator-prefix}-layout-horizontal {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
|
||||
// 垂直虚线
|
||||
&.#{$separator-prefix}-layout-vertical {
|
||||
border-left-style: dashed;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$separator-prefix}-text {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
border-top: 0;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
width: 50%;
|
||||
border-top: 1px solid $separator-color;
|
||||
}
|
||||
}
|
||||
|
||||
& .#{$separator-prefix}-text-inner:not(:empty) {
|
||||
padding: 0 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.#{$separator-prefix}-text-left {
|
||||
&::before {
|
||||
width: 10%;
|
||||
}
|
||||
&::after {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$separator-prefix}-text-right {
|
||||
&::before {
|
||||
width: 90%;
|
||||
}
|
||||
&::after {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import type { PropType, VNode } from 'vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Separator',
|
||||
props: {
|
||||
layout: {
|
||||
type: String as PropType<'horizontal' | 'vertical'>,
|
||||
default: 'horizontal',
|
||||
},
|
||||
dashed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
align: {
|
||||
type: String as PropType<'left' | 'right' | 'center'>,
|
||||
default: 'center',
|
||||
},
|
||||
margin: {
|
||||
type: [Number, Array] as any,
|
||||
default: null,
|
||||
},
|
||||
content: {
|
||||
type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
|
||||
default: '',
|
||||
},
|
||||
class: {
|
||||
type: [String, Array, Object],
|
||||
default: '',
|
||||
},
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
emits: [],
|
||||
setup(props, { slots }) {
|
||||
const prefixCls = getPrefixCls('separator')
|
||||
|
||||
// 根据 props.margin 生成样式
|
||||
const marginStyle = () => {
|
||||
if (props.margin == null)
|
||||
return {}
|
||||
if (typeof props.margin === 'number') {
|
||||
return props.layout === 'horizontal'
|
||||
? { margin: `${props.margin}px 0` }
|
||||
: { margin: `0 ${props.margin}px` }
|
||||
}
|
||||
if (Array.isArray(props.margin)) {
|
||||
return { margin: props.margin.map(v => `${v}px`).join(' ') }
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
// 渲染文字或默认插槽
|
||||
const renderContent = (content: string | VNode | (() => VNode)) => {
|
||||
if (slots.default)
|
||||
return slots.default()
|
||||
if (typeof content === 'function')
|
||||
return content()
|
||||
if (typeof content === 'string')
|
||||
return <span class={`${prefixCls}-content`}>{content}</span>
|
||||
return content
|
||||
}
|
||||
|
||||
const isHorizontal = props.layout === 'horizontal'
|
||||
const hasContent = !!(slots.default?.().length || props.content)
|
||||
|
||||
return () => (
|
||||
<div
|
||||
class={[
|
||||
prefixCls,
|
||||
`${prefixCls}-layout-${props.layout}`,
|
||||
props.dashed ? `${prefixCls}-dashed` : '',
|
||||
isHorizontal && hasContent ? `${prefixCls}-text` : '',
|
||||
isHorizontal && hasContent ? `${prefixCls}-text-${props.align}` : '',
|
||||
props.class,
|
||||
]}
|
||||
style={{ ...marginStyle(), ...props.style }}
|
||||
>
|
||||
{isHorizontal ? <span class={`${prefixCls}-text-inner`}>{renderContent(props.content)}</span> : null}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h3>水平 wrap + 不同间距 + align</h3>
|
||||
<ASpace wrap :size="[10, 20]" align="start" style="width: 300px; border:1px solid #ccc;">
|
||||
<div style="width:120px;height:40px;background:#eee;">
|
||||
1
|
||||
</div>
|
||||
<div style="width:120px;height:40px;background:#ccc;">
|
||||
2
|
||||
</div>
|
||||
<div style="width:120px;height:40px;background:#aaa;">
|
||||
3
|
||||
</div>
|
||||
<div style="width:120px;height:40px;background:#f0f;">
|
||||
4
|
||||
</div>
|
||||
</ASpace>
|
||||
|
||||
<h3>垂直排列 + align</h3>
|
||||
<ASpace :size="[20, 10]" style="border:1px solid #ccc;" separator>
|
||||
<div style="width:120px;height:40px;background:#eee;">
|
||||
1
|
||||
</div>
|
||||
<div style="width:120px;height:40px;background:#ccc;">
|
||||
2
|
||||
</div>
|
||||
<div style="width:120px;height:40px;background:#aaa;">
|
||||
3
|
||||
</div>
|
||||
</ASpace>
|
||||
|
||||
<h3>默认 small/middle/large 间距</h3>
|
||||
<ASpace size="small" align="baseline">
|
||||
<div style="width:60px;height:40px;background:#eee;">
|
||||
A
|
||||
</div>
|
||||
|
||||
<div style="width:60px;height:40px;background:#ccc;">
|
||||
B
|
||||
</div>
|
||||
<div style="width:60px;height:40px;background:#aaa;">
|
||||
C
|
||||
</div>
|
||||
</ASpace>
|
||||
<div>
|
||||
<AButton>测试</AButton>
|
||||
<ASeparator layout="vertical" />
|
||||
<AButton>测试</AButton>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
@use '../_styles/_variables.scss' as *;
|
||||
@use 'sass:color';
|
||||
|
||||
$space-prefix: '#{$prefix}-space';
|
||||
|
||||
.#{$space-prefix} {
|
||||
display: inline-flex;
|
||||
|
||||
&.#{$space-prefix}-direction-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.#{$space-prefix}-direction-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.#{$space-prefix}-align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
&.#{$space-prefix}-align-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
&.#{$space-prefix}-align-center {
|
||||
align-items: center;
|
||||
}
|
||||
&.#{$space-prefix}-align-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
&.#{$space-prefix}-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import type { PropType, VNode } from 'vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
import Separator from '../separator/index'
|
||||
|
||||
const sizeMap = {
|
||||
small: 8,
|
||||
middle: 16,
|
||||
large: 24,
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ASpace',
|
||||
props: {
|
||||
size: {
|
||||
type: [String, Number, Array] as PropType<'small' | 'middle' | 'large' | number | [number, number]>,
|
||||
default: 'middle',
|
||||
},
|
||||
direction: {
|
||||
type: String as () => 'horizontal' | 'vertical',
|
||||
default: 'horizontal',
|
||||
},
|
||||
align: {
|
||||
type: String as () => 'start' | 'center' | 'end' | 'baseline',
|
||||
default: 'center',
|
||||
},
|
||||
wrap: { type: Boolean, default: false },
|
||||
separator: { type: Boolean, default: false },
|
||||
class: { type: [String, Array, Object], default: '' },
|
||||
style: { type: Object, default: () => ({}) },
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const prefixCls = getPrefixCls('space')
|
||||
|
||||
const getGap = (): [number, number] => {
|
||||
if (Array.isArray(props.size))
|
||||
return props.size
|
||||
if (typeof props.size === 'string' && sizeMap[props.size as keyof typeof sizeMap]) {
|
||||
const val = sizeMap[props.size as keyof typeof sizeMap]
|
||||
return [val, val]
|
||||
}
|
||||
return [props.size as number, props.size as number]
|
||||
}
|
||||
|
||||
return () => {
|
||||
const [rowGap, colGap] = getGap()
|
||||
const isHorizontal = props.direction === 'horizontal'
|
||||
|
||||
const children = slots.default?.() || []
|
||||
const items: VNode[] = []
|
||||
children.forEach((child, index) => {
|
||||
items.push(child)
|
||||
if (props.separator && index < children.length - 1) {
|
||||
items.push(
|
||||
<Separator
|
||||
layout={isHorizontal ? 'vertical' : 'horizontal'}
|
||||
/>,
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
class={[prefixCls, props.class, `${prefixCls}-align-${props.align}`, `${prefixCls}-direction-${props.direction}`, props.wrap && `${prefixCls}-wrap`]}
|
||||
style={{
|
||||
gap: isHorizontal ? `${rowGap}px ${colGap}px` : `${rowGap}px`,
|
||||
...props.style,
|
||||
}}
|
||||
>
|
||||
{items}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface TagOption {
|
||||
label: string
|
||||
value: string | number
|
||||
}
|
||||
|
||||
const tagOptions: TagOption[] = [
|
||||
{ label: '标签1', value: 1 },
|
||||
{ label: '标签2', value: 2 },
|
||||
{ label: '标签3', value: 3 },
|
||||
]
|
||||
|
||||
const customOptions: TagOption[] = [
|
||||
{ label: '成功', value: 'success' },
|
||||
{ label: '警告', value: 'warning' },
|
||||
{ label: '错误', value: 'error' },
|
||||
]
|
||||
|
||||
// 多选示例
|
||||
const multiSelected = ref<(string | number)[]>([1, 2])
|
||||
function handleMultiChange(selectedOptions: TagOption[]) {
|
||||
console.log('多选 change:', selectedOptions)
|
||||
}
|
||||
|
||||
// 单选示例
|
||||
const singleSelected = ref<(string | number)[]>([2])
|
||||
function handleSingleChange(selectedOptions: TagOption[]) {
|
||||
console.log('单选 change:', selectedOptions)
|
||||
}
|
||||
|
||||
// slot 渲染示例
|
||||
const slotSelected = ref<(string | number)[]>(['b'])
|
||||
|
||||
// 自定义样式示例
|
||||
const customSelected = ref<(string | number)[]>(['success'])
|
||||
function handleCustomChange(selectedOptions: TagOption[]) {
|
||||
console.log('自定义样式 change:', selectedOptions)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="padding: 20px;">
|
||||
<h2>ATagGroup 使用示例</h2>
|
||||
|
||||
<!-- 1. 多选 options 渲染 -->
|
||||
<section style="margin-bottom: 20px;">
|
||||
<h3>多选 - Options 渲染</h3>
|
||||
<ATagGroup
|
||||
v-model="multiSelected"
|
||||
:options="tagOptions"
|
||||
multiple
|
||||
@change="handleMultiChange"
|
||||
/>
|
||||
<p>选中值: {{ multiSelected }}</p>
|
||||
</section>
|
||||
|
||||
<!-- 2. 单选 options 渲染 -->
|
||||
<section style="margin-bottom: 20px;">
|
||||
<h3>单选 - Options 渲染</h3>
|
||||
<ATagGroup
|
||||
v-model="singleSelected"
|
||||
:options="tagOptions"
|
||||
:multiple="false"
|
||||
@change="handleSingleChange"
|
||||
/>
|
||||
<p>选中值: {{ singleSelected }}</p>
|
||||
</section>
|
||||
|
||||
<!-- 3. Slot 渲染 -->
|
||||
<section style="margin-bottom: 20px;">
|
||||
<h3>Slot 渲染</h3>
|
||||
<ATagGroup v-model="slotSelected">
|
||||
<ATag value="a">
|
||||
自定义A
|
||||
</ATag>
|
||||
<ATag value="b" checked>
|
||||
自定义B
|
||||
</ATag>
|
||||
<ATag value="c" disabled>
|
||||
自定义C
|
||||
</ATag>
|
||||
</ATagGroup>
|
||||
<p>选中值: {{ slotSelected }}</p>
|
||||
</section>
|
||||
|
||||
<!-- 4. 自定义 checkedProps / uncheckedProps -->
|
||||
<section>
|
||||
<h3>自定义样式</h3>
|
||||
<ATagGroup
|
||||
v-model="customSelected"
|
||||
:options="customOptions"
|
||||
:checked-props="{ type: 'solid', status: 'success' }"
|
||||
:unchecked-props="{ type: 'solid', status: 'default' }"
|
||||
@change="handleCustomChange"
|
||||
/>
|
||||
<p>选中值: {{ customSelected }}</p>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,113 +1,83 @@
|
||||
import type { PropType, VNode } from 'vue'
|
||||
import { cloneVNode, defineComponent, ref, watch } from 'vue'
|
||||
import { cloneVNode, defineComponent } from 'vue'
|
||||
import { useSelectable } from '../_hooks/useSelectable'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
import Tag from '../tag/index'
|
||||
|
||||
interface TagOption {
|
||||
label?: string
|
||||
value: string | number
|
||||
disabled?: boolean
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TagGroup',
|
||||
name: 'ATagGroup',
|
||||
props: {
|
||||
modelValue: { type: Array as PropType<(string | number)[]>, default: () => [] },
|
||||
multiple: { type: Boolean, default: true },
|
||||
options: {
|
||||
type: Array as PropType<Array<{ label: string, value: string | number }>>,
|
||||
default: () => [],
|
||||
},
|
||||
checkedProps: {
|
||||
type: Object as PropType<{ type?: 'solid' | 'light' | 'outline' | 'outline-light', status?: 'primary' | 'danger' | 'warning' | 'success' | 'default' }>,
|
||||
default: () => ({
|
||||
type: 'solid',
|
||||
status: 'primary',
|
||||
}),
|
||||
},
|
||||
uncheckedProps: {
|
||||
type: Object as PropType<{ type?: 'solid' | 'light' | 'outline' | 'outline-light', status?: 'primary' | 'danger' | 'warning' | 'success' | 'default' }>,
|
||||
default: () => ({
|
||||
type: 'solid',
|
||||
status: 'default',
|
||||
}),
|
||||
},
|
||||
options: { type: Array as PropType<TagOption[]>, default: () => [] },
|
||||
labelField: { type: String, default: 'label' },
|
||||
valueField: { type: String, default: 'value' },
|
||||
checkedProps: { type: Object as PropType<Record<string, any>>, default: () => ({ type: 'solid', status: 'primary' }) },
|
||||
uncheckedProps: { type: Object as PropType<Record<string, any>>, default: () => ({ type: 'solid', status: 'default' }) },
|
||||
class: { type: [String, Array, Object], default: '' },
|
||||
style: { type: Object, default: () => ({}) },
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup(props, { slots, emit }) {
|
||||
const prefixCls = getPrefixCls('tag-group')
|
||||
const selectedValues = ref<(string | number)[]>([...props.modelValue])
|
||||
|
||||
// 外部 v-model 更新时同步内部值
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
selectedValues.value = [...val]
|
||||
const { selectedValues, updateValue } = useSelectable(
|
||||
{
|
||||
modelValue: props.modelValue,
|
||||
multiple: props.multiple,
|
||||
options: props.options,
|
||||
valueField: props.valueField,
|
||||
},
|
||||
(newVal, selectedOptions) => {
|
||||
emit('update:modelValue', newVal)
|
||||
emit('change', selectedOptions)
|
||||
},
|
||||
)
|
||||
|
||||
const updateValue = (value: string | number, checked: boolean) => {
|
||||
let newValues = [...selectedValues.value]
|
||||
|
||||
if (props.multiple) {
|
||||
if (checked) {
|
||||
if (!newValues.includes(value))
|
||||
newValues.push(value)
|
||||
}
|
||||
else {
|
||||
newValues = newValues.filter(v => v !== value)
|
||||
}
|
||||
}
|
||||
else {
|
||||
// 单选：checked 为 true → 只保留当前值
|
||||
newValues = checked ? [value] : []
|
||||
}
|
||||
|
||||
selectedValues.value = newValues
|
||||
emit('update:modelValue', newValues)
|
||||
emit('change', newValues)
|
||||
}
|
||||
|
||||
const renderTag = (value: string | number, label?: string, vnode?: VNode) => {
|
||||
const checked = selectedValues.value.includes(value)
|
||||
const renderTag = (option: TagOption, vnode?: VNode) => {
|
||||
const val = option[props.valueField]
|
||||
const checked = selectedValues.value.includes(val)
|
||||
const baseProps = {
|
||||
'key': value,
|
||||
value,
|
||||
'key': val,
|
||||
'value': val,
|
||||
checked,
|
||||
'checkable': true,
|
||||
'checkedProps': props.checkedProps,
|
||||
'uncheckedProps': props.uncheckedProps,
|
||||
'onUpdate:checked': (val: boolean) => updateValue(value, val),
|
||||
}
|
||||
|
||||
if (vnode) {
|
||||
return cloneVNode(vnode, baseProps)
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<Tag {...baseProps}>
|
||||
{label}
|
||||
</Tag>
|
||||
)
|
||||
'disabled': option.disabled,
|
||||
'onUpdate:checked': (valChecked: boolean) => updateValue(option, valChecked),
|
||||
}
|
||||
return vnode ? cloneVNode(vnode, baseProps) : <Tag {...baseProps}>{option[props.labelField]}</Tag>
|
||||
}
|
||||
|
||||
// slot 渲染
|
||||
const renderOptionsTags = () => props.options.map(opt => renderTag(opt))
|
||||
|
||||
const renderSlotTags = () => {
|
||||
const slotNodes = slots.default?.() || []
|
||||
return slotNodes.map((vnode: VNode) => {
|
||||
if ((vnode.type as any)?.name === 'Tag') {
|
||||
const value = (vnode.props as any)?.value
|
||||
return renderTag(value, undefined, vnode)
|
||||
// 判断 vnode.type 是否等于 Tag 组件本身
|
||||
if (vnode.type === Tag) {
|
||||
const vnodeProps = vnode.props || {}
|
||||
const option = {
|
||||
value: vnodeProps.value,
|
||||
label: vnodeProps.label ?? vnodeProps.value,
|
||||
disabled: vnodeProps.disabled,
|
||||
}
|
||||
return renderTag(option, vnode)
|
||||
}
|
||||
return vnode
|
||||
})
|
||||
}
|
||||
|
||||
// options 渲染
|
||||
const renderOptionTags = () =>
|
||||
props.options.map(opt => renderTag(opt.value, opt.label))
|
||||
|
||||
return () => (
|
||||
<div class={[prefixCls, props.class]} style={{ ...props.style }}>
|
||||
{props.options.length ? renderOptionTags() : renderSlotTags()}
|
||||
</div>
|
||||
)
|
||||
return () => {
|
||||
const children = props.options.length ? renderOptionsTags() : renderSlotTags()
|
||||
return <div class={[prefixCls, props.class]} style={props.style}>{children}</div>
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
<template>
|
||||
<div class="demo">
|
||||
<!-- 正常态 -->
|
||||
<div class="row">
|
||||
<ATag size="small">
|
||||
small
|
||||
@@ -102,6 +103,106 @@
|
||||
outline-light
|
||||
</ATag>
|
||||
</div>
|
||||
|
||||
<!-- 禁用态 -->
|
||||
<div class="row">
|
||||
<ATag size="small" disabled>
|
||||
small
|
||||
</ATag>
|
||||
<ATag size="medium" disabled>
|
||||
medium
|
||||
</ATag>
|
||||
<ATag size="large" disabled>
|
||||
large
|
||||
</ATag>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<ATag shape="round" disabled>
|
||||
round
|
||||
</ATag>
|
||||
<ATag shape="mark" disabled>
|
||||
mark
|
||||
</ATag>
|
||||
<ATag shape="square" disabled>
|
||||
square
|
||||
</ATag>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<ATag type="solid" disabled>
|
||||
solid
|
||||
</ATag>
|
||||
<ATag type="light" disabled>
|
||||
light
|
||||
</ATag>
|
||||
<ATag type="outline" disabled>
|
||||
outline
|
||||
</ATag>
|
||||
<ATag type="outline-light" disabled>
|
||||
outline-light
|
||||
</ATag>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<ATag type="solid" status="primary" disabled>
|
||||
solid
|
||||
</ATag>
|
||||
<ATag type="light" status="primary" disabled>
|
||||
light
|
||||
</ATag>
|
||||
<ATag type="outline" status="primary" disabled>
|
||||
outline
|
||||
</ATag>
|
||||
<ATag type="outline-light" status="primary" disabled>
|
||||
outline-light
|
||||
</ATag>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<ATag type="solid" status="danger" disabled>
|
||||
solid
|
||||
</ATag>
|
||||
<ATag type="light" status="danger" disabled>
|
||||
light
|
||||
</ATag>
|
||||
<ATag type="outline" status="danger" disabled>
|
||||
outline
|
||||
</ATag>
|
||||
<ATag type="outline-light" status="danger" disabled>
|
||||
outline-light
|
||||
</ATag>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<ATag type="solid" status="warning" disabled>
|
||||
solid
|
||||
</ATag>
|
||||
<ATag type="light" status="warning" disabled>
|
||||
light
|
||||
</ATag>
|
||||
<ATag type="outline" status="warning" disabled>
|
||||
outline
|
||||
</ATag>
|
||||
<ATag type="outline-light" status="warning" disabled>
|
||||
outline-light
|
||||
</ATag>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<ATag type="solid" status="success" disabled>
|
||||
solid
|
||||
</ATag>
|
||||
<ATag type="light" status="success" disabled>
|
||||
light
|
||||
</ATag>
|
||||
<ATag type="outline" status="success" disabled>
|
||||
outline
|
||||
</ATag>
|
||||
<ATag type="outline-light" status="success" disabled>
|
||||
outline-light
|
||||
</ATag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -16,75 +16,57 @@ $tag-prefix: '#{$prefix}-tag';
|
||||
border-radius: $border-color;
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
|
||||
&-size-large {
|
||||
&.#{$tag-prefix}-size-large {
|
||||
padding: 0 8px;
|
||||
height: 24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
&-size-medium {
|
||||
&.#{$tag-prefix}-size-medium {
|
||||
padding: 0 6px;
|
||||
height: 22px;
|
||||
font-size: 12px;
|
||||
}
|
||||
&-size-small {
|
||||
&.#{$tag-prefix}-size-small {
|
||||
padding: 0 4px;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
&-shape-round {
|
||||
|
||||
&.#{$tag-prefix}-shape-round {
|
||||
border-radius: 12px;
|
||||
}
|
||||
&-shape-mark {
|
||||
border-radius: 0px 12px 12px 0;
|
||||
&.#{$tag-prefix}-shape-mark {
|
||||
border-radius: 0 12px 12px 0;
|
||||
}
|
||||
&-icon {
|
||||
|
||||
&.#{$tag-prefix}-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
&-close {
|
||||
&.#{$tag-prefix}-close {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
transition: filter 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
||||
|
||||
color: currentColor;
|
||||
filter: brightness(1.2); /* 比父色亮 20% */
|
||||
filter: brightness(1.2);
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.8); /* 比父色暗 20% */
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&-check {
|
||||
&.#{$tag-prefix}-check {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
cursor: default;
|
||||
&.#{$tag-prefix}-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&-check.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-default {
|
||||
background-color: $default-color-disabled;
|
||||
color: $text-color-disabled;
|
||||
}
|
||||
|
||||
&-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-primary {
|
||||
background-color: $primary-color-disabled;
|
||||
}
|
||||
|
||||
&-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-danger {
|
||||
background-color: $danger-color-disabled;
|
||||
}
|
||||
|
||||
&-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-warning {
|
||||
background-color: $warning-color-disabled;
|
||||
}
|
||||
|
||||
&-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-success {
|
||||
background-color: $success-color-disabled;
|
||||
}
|
||||
|
||||
&-type-solid {
|
||||
&.#{$tag-prefix}-type-solid {
|
||||
&.#{$tag-prefix}-status-default {
|
||||
color: $text-color-base;
|
||||
background-color: $default-color;
|
||||
@@ -107,7 +89,8 @@ $tag-prefix: '#{$prefix}-tag';
|
||||
}
|
||||
}
|
||||
|
||||
&-type-light {
|
||||
// light 类型
|
||||
&.#{$tag-prefix}-type-light {
|
||||
&.#{$tag-prefix}-status-default {
|
||||
color: $text-color-base;
|
||||
background-color: $default-color-light;
|
||||
@@ -130,35 +113,34 @@ $tag-prefix: '#{$prefix}-tag';
|
||||
}
|
||||
}
|
||||
|
||||
&-type-outline {
|
||||
// outline 类型
|
||||
&.#{$tag-prefix}-type-outline {
|
||||
background-color: transparent;
|
||||
|
||||
&.#{$tag-prefix}-status-default {
|
||||
color: $text-color-base;
|
||||
background-color: transparent;
|
||||
border-color: $default-color;
|
||||
}
|
||||
&.#{$tag-prefix}-status-primary {
|
||||
color: $primary-color;
|
||||
background-color: transparent;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
&.#{$tag-prefix}-status-success {
|
||||
color: $success-color;
|
||||
background-color: transparent;
|
||||
border-color: $success-color;
|
||||
}
|
||||
&.#{$tag-prefix}-status-warning {
|
||||
color: $warning-color;
|
||||
background-color: transparent;
|
||||
border-color: $warning-color;
|
||||
}
|
||||
&.#{$tag-prefix}-status-danger {
|
||||
color: $danger-color;
|
||||
background-color: transparent;
|
||||
border-color: $danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-type-outline-light {
|
||||
// outline-light 类型
|
||||
&.#{$tag-prefix}-type-outline-light {
|
||||
&.#{$tag-prefix}-status-default {
|
||||
color: $text-color-base;
|
||||
background-color: $default-color-light;
|
||||
|
||||
@@ -1,52 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const checked = ref(['1'])
|
||||
|
||||
const checked1 = ref(false)
|
||||
const checked2 = ref(false)
|
||||
const checked3 = ref(false)
|
||||
|
||||
const STYLE_B_UNCHECKED_PROPS = {
|
||||
theme: 'default',
|
||||
variant: 'outline',
|
||||
}
|
||||
|
||||
const STYLE_C_CHECKED_PROPS = {
|
||||
theme: 'primary',
|
||||
variant: 'outline',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="demo">
|
||||
<div class="row">
|
||||
<ATag show-close checkable disabled>
|
||||
测试 1
|
||||
</ATag>
|
||||
<ATagGroup v-model="checked">
|
||||
<ATag show-close value="1">
|
||||
测试 1
|
||||
</ATag>
|
||||
<ATag show-close value="2">
|
||||
测试2
|
||||
</ATag>
|
||||
</ATagGroup>
|
||||
</div>
|
||||
<div style="height: 800px;display: flex;align-items: center;justify-content: center;">
|
||||
<ARadio>
|
||||
123
|
||||
</ARadio>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -18,6 +18,10 @@ declare module 'vue' {
|
||||
AMessage: typeof import('@ao/ao-design')['Message']
|
||||
APopconfirm: typeof import('@ao/ao-design')['Popconfirm']
|
||||
APopup: typeof import('@ao/ao-design')['Popup']
|
||||
ARadio: typeof import('@ao/ao-design')['Radio']
|
||||
ARdio: typeof import('@ao/ao-design')['Rdio']
|
||||
ASeparator: typeof import('@ao/ao-design')['Separator']
|
||||
ASpace: typeof import('@ao/ao-design')['Space']
|
||||
ASpin: typeof import('@ao/ao-design')['Spin']
|
||||
ATag: typeof import('@ao/ao-design')['Tag']
|
||||
ATagGroup: typeof import('@ao/ao-design')['TagGroup']
|
||||
|
||||
@@ -1,278 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>12方向Tooltip</title>
|
||||
<style>
|
||||
/* 基础样式 */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
# 驰诺国际货运有限公司
|
||||
|
||||
.trigger {
|
||||
padding: 0.8rem 1.6rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #2196f3;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
<div style="text-align: center">订舱委托书</div>
|
||||
|
||||
.trigger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
公司编号：CNNYYY230108
|
||||
|
||||
/* Tooltip 核心样式 */
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
min-width: 60px;
|
||||
max-width: 240px;
|
||||
padding: 0.8rem 1.2rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
border-radius: 4px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.2s,
|
||||
visibility 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
<div style="text-align: center">
|
||||
<table border="1">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
发货人 JIANGXIARTSENCHEMICALCO.,LTD SULPHUR&PHOSPHORUS CHEMICAL BASE GUIXI,JIANGXI,P.R.CHINA
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
收货人 ARTSEN?CHEMICAL?AMERICA?LLC 19?LOVELAND?STREET MADISON,?NJ?07940 T:?908-419-0704??F:973-520-8290
|
||||
ATTN:?WALTER?CHENG
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
通知人 ARTSEN?CHEMICAL?AMERICA?LLC 19?LOVELAND?STREET MADISON,?NJ?07940 T:?908-419-0704??F:973-520-8290
|
||||
ATTN:?WALTER?CHENG
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>船公司</td>
|
||||
<td>船期 2023/01/20</td>
|
||||
<td>航名／航次 XIN DA YANG ZHOU 086E</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>起运港 NINGBO, CHINA</td>
|
||||
<td colspan="2">目的港 HOUSTON</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
/* 箭头通用样式 */
|
||||
.tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px solid transparent;
|
||||
}
|
||||
<div style="text-align: center">
|
||||
<table border="1">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="3">唛头：NOMARK</td>
|
||||
<td>TOTAL:</td>
|
||||
<td>1</td>
|
||||
<td></td>
|
||||
<td>18000.00</td>
|
||||
<td>30.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5">箱量：1X20'TKFCL</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5">运输条款：FREIGHTPREPAID</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6">备注：</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
/* 不同方向的样式 */
|
||||
/* 上方系列 */
|
||||
.tooltip.top {
|
||||
transform: translate(-50%, calc(-100% - 12px));
|
||||
}
|
||||
.tooltip.top::after {
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-top-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.tooltip.top-left {
|
||||
transform: translate(calc(-100% + 12px), calc(-100% - 12px));
|
||||
}
|
||||
.tooltip.top-left::after {
|
||||
bottom: -12px;
|
||||
left: 12px;
|
||||
border-top-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.tooltip.top-right {
|
||||
transform: translate(12px, calc(-100% - 12px));
|
||||
}
|
||||
.tooltip.top-right::after {
|
||||
bottom: -12px;
|
||||
right: 12px;
|
||||
border-top-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 下方系列 */
|
||||
.tooltip.bottom {
|
||||
transform: translate(-50%, 12px);
|
||||
}
|
||||
.tooltip.bottom::after {
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-bottom-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.tooltip.bottom-left {
|
||||
transform: translate(calc(-100% + 12px), 12px);
|
||||
}
|
||||
.tooltip.bottom-left::after {
|
||||
top: -12px;
|
||||
left: 12px;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.tooltip.bottom-right {
|
||||
transform: translate(12px, 12px);
|
||||
}
|
||||
.tooltip.bottom-right::after {
|
||||
top: -12px;
|
||||
right: 12px;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 左侧系列 */
|
||||
.tooltip.left {
|
||||
transform: translate(calc(-100% - 12px), -50%);
|
||||
}
|
||||
.tooltip.left::after {
|
||||
right: -12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-left-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.tooltip.left-top {
|
||||
transform: translate(calc(-100% - 12px), calc(-100% + 12px));
|
||||
}
|
||||
.tooltip.left-top::after {
|
||||
right: -12px;
|
||||
top: 12px;
|
||||
border-left-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.tooltip.left-bottom {
|
||||
transform: translate(calc(-100% - 12px), 12px);
|
||||
}
|
||||
.tooltip.left-bottom::after {
|
||||
right: -12px;
|
||||
bottom: 12px;
|
||||
border-left-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 右侧系列 */
|
||||
.tooltip.right {
|
||||
transform: translate(12px, -50%);
|
||||
}
|
||||
.tooltip.right::after {
|
||||
left: -12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-right-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.tooltip.right-top {
|
||||
transform: translate(12px, calc(-100% + 12px));
|
||||
}
|
||||
.tooltip.right-top::after {
|
||||
left: -12px;
|
||||
top: 12px;
|
||||
border-right-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.tooltip.right-bottom {
|
||||
transform: translate(12px, 12px);
|
||||
}
|
||||
.tooltip.right-bottom::after {
|
||||
left: -12px;
|
||||
bottom: 12px;
|
||||
border-right-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 显示状态 */
|
||||
.tooltip.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="text-align: center;"><table border="1"><tbody><tr><td colspan="4">Shipper: CHANNEL INTERNATIONAL FREIGHT CO.,LTD 24 FLOOR, YINYI GLOBAL CENTER,B BLOCK,NO.42 YAOHANG STREET HAISHUDISTRICT,NINGBO,CHINA TEL:0086-574-87337359 FAX:0086-574-87135310</td><td rowspan="3" colspan="4">TO：宁波坤洲国际物流有限公司 ATTN: TEL: FROM：宁波驰诺/裘珊珊 TEL:0574-87237893 QQ:1597608137 业务编号：CNNBYS230201 开航日期：2023-02-0400:00:00.0 船公司：现代商船 柜量：2X2OTKFCL运费条款：FREIGHTPREPAID 运输条款：CY-CY</td></tr><tr><td colspan="4">Consignee: NSINTERNATIONAL(THAILAND)CO.LTD 75/49 RICHMOND BLDG.,15 FL SUKHUMVIT SOI 26 KLONGTOEY,BANGKOK1011O THAILAND ATTN:IMPORT@NSINTER.COM TEL: +66-2-665-6710 FAX:+66-2-665-6494</td></tr><tr><td colspan="4">Notify Party: NS INTERNATIONAL (THAILAND) CO.,LTD 75/49 RICHMOND BLDG., 15 FL SUKHUMVIT SOI 26 KLONGTOEY,BANGKOK1011O THAILAND ATTN:IMPORT@NSINTER.COM TEL:+66-2-665-6710 FAX: +66-2-665-6494</td></tr><tr><td colspan="2">起运港(PortOf Loading):</td><td colspan="3">中转港(Port of Dischargc):</td><td colspan="3">目的港(Final Destination):</td></tr><tr><td colspan="2">NINGBO,CHINA</td><td colspan="3"></td><td colspan="3">LEAM CHA BANG</td></tr><tr><td>标志和号码</td><td colspan="2">件数和包装种类</td><td colspan="3">货名</td><td>毛重(公斤)</td><td>体积(立方米)</td></tr><tr><td>SMAU9992165 SMAU9992170</td><td colspan="2">2TANKS</td><td colspan="3">BULK LIQUID ARGON CLASS:2.2 UN:1951</td><td>44000.000KGS</td><td>50.000CBM</td></tr></tbody></table></div>
|
||||
|
||||
<script>
|
||||
class TooltipManager {
|
||||
constructor() {
|
||||
this.tooltip = null
|
||||
this.init()
|
||||
}
|
||||
|
||||
init() {
|
||||
// 创建tooltip元素
|
||||
this.tooltip = document.createElement('div')
|
||||
this.tooltip.className = 'tooltip'
|
||||
document.body.appendChild(this.tooltip)
|
||||
|
||||
// 绑定触发事件
|
||||
document.querySelectorAll('.trigger').forEach((trigger) => {
|
||||
trigger.addEventListener('mouseenter', (e) => this.show(e))
|
||||
trigger.addEventListener('mouseleave', () => this.hide())
|
||||
})
|
||||
}
|
||||
|
||||
show(e) {
|
||||
const { direction } = e.target.dataset
|
||||
const text = e.target.dataset.tooltip
|
||||
const triggerRect = e.target.getBoundingClientRect()
|
||||
|
||||
// 设置内容
|
||||
this.tooltip.textContent = text
|
||||
this.tooltip.className = `tooltip ${direction}`
|
||||
|
||||
// 计算初始位置
|
||||
const { offsetWidth: tw, offsetHeight: th } = this.tooltip
|
||||
const { left: tx, top: ty, width: trw, height: thr } = triggerRect
|
||||
const offset = 12 // 基础偏移量
|
||||
|
||||
// 方向位置映射
|
||||
const positionMap = {
|
||||
top: { left: tx + trw / 2, top: ty - th - offset },
|
||||
'top-left': { left: tx + trw - 12, top: ty - th - offset },
|
||||
'top-right': { left: tx + 12, top: ty - th - offset },
|
||||
bottom: { left: tx + trw / 2, top: ty + thr + offset },
|
||||
'bottom-left': { left: tx + trw - 12, top: ty + thr + offset },
|
||||
'bottom-right': { left: tx + 12, top: ty + thr + offset },
|
||||
left: { left: tx - tw - offset, top: ty + thr / 2 },
|
||||
'left-top': { left: tx - tw - offset, top: ty + 12 },
|
||||
'left-bottom': { left: tx - tw - offset, top: ty + thr - 12 },
|
||||
right: { left: tx + trw + offset, top: ty + thr / 2 },
|
||||
'right-top': { left: tx + trw + offset, top: ty + 12 },
|
||||
'right-bottom': { left: tx + trw + offset, top: ty + thr - 12 },
|
||||
}
|
||||
|
||||
// 获取计算后的位置
|
||||
let { left, top } = positionMap[direction]
|
||||
|
||||
// 边界检测（防止超出视口）
|
||||
const viewportWidth = window.innerWidth
|
||||
const viewportHeight = window.innerHeight
|
||||
|
||||
// 水平方向边界处理
|
||||
if (left < 0)
|
||||
left = 12 // 左边界
|
||||
else if (left + tw > viewportWidth) left = viewportWidth - tw - 12 // 右边界
|
||||
|
||||
// 垂直方向边界处理
|
||||
if (top < 0)
|
||||
top = 12 // 上边界
|
||||
else if (top + th > viewportHeight) top = viewportHeight - th - 12 // 下边界
|
||||
|
||||
// 应用位置
|
||||
this.tooltip.style.left = `${left}px`
|
||||
this.tooltip.style.top = `${top}px`
|
||||
|
||||
// 显示tooltip
|
||||
requestAnimationFrame(() => {
|
||||
this.tooltip.classList.add('visible')
|
||||
})
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.tooltip.classList.remove('visible')
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化Tooltip管理器
|
||||
new TooltipManager()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
联系人：裘珊珊电话：0574-87237893QQ:1597608137传真：0574-87135310宁波市海曙区药行街42号银亿环球中心B座24楼
|
||||
Reference in new issue
Block a user