u
This commit is contained in:
oneao committed
1 parent
a8f3e58a27
commit
f8963da889
28 files changed
+862
-207
No files matched your search
@@ -1,162 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { arrow, useFloating, offset } from '@floating-ui/vue';
|
||||
|
||||
// 4 个方向按钮的 refs
|
||||
const referenceBottom = ref(null);
|
||||
const referenceTop = ref(null);
|
||||
const referenceLeft = ref(null);
|
||||
const referenceRight = ref(null);
|
||||
|
||||
const floatingBottom = ref(null);
|
||||
const floatingTop = ref(null);
|
||||
const floatingLeft = ref(null);
|
||||
const floatingRight = ref(null);
|
||||
|
||||
const arrowBottom = ref(null);
|
||||
const arrowTop = ref(null);
|
||||
const arrowLeft = ref(null);
|
||||
const arrowRight = ref(null);
|
||||
|
||||
// useFloating 分别初始化
|
||||
const { floatingStyles: bottomStyles, middlewareData: bottomData } = useFloating(
|
||||
referenceBottom,
|
||||
floatingBottom,
|
||||
{ placement: 'bottom-start', middleware: [offset(10), arrow({ element: arrowBottom })] }
|
||||
);
|
||||
|
||||
const { floatingStyles: topStyles, middlewareData: topData } = useFloating(
|
||||
referenceTop,
|
||||
floatingTop,
|
||||
{ placement: 'top', middleware: [offset(10), arrow({ element: arrowTop })] }
|
||||
);
|
||||
|
||||
const { floatingStyles: leftStyles, middlewareData: leftData } = useFloating(
|
||||
referenceLeft,
|
||||
floatingLeft,
|
||||
{ placement: 'left', middleware: [offset(10), arrow({ element: arrowLeft })] }
|
||||
);
|
||||
|
||||
const { floatingStyles: rightStyles, middlewareData: rightData } = useFloating(
|
||||
referenceRight,
|
||||
floatingRight,
|
||||
{ placement: 'right', middleware: [offset(10), arrow({ element: arrowRight })] }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<t-tooltip content="这是Tooltip内容">
|
||||
<t-button>hover me</t-button>
|
||||
<t-button>hover me</t-button>
|
||||
</t-tooltip>
|
||||
<div class="demo">
|
||||
<!-- Bottom -->
|
||||
<div class="item">
|
||||
<button ref="referenceBottom">Bottom</button>
|
||||
<div ref="floatingBottom" :style="bottomStyles" class="floating-box">
|
||||
Bottom Floating
|
||||
<div
|
||||
ref="arrowBottom"
|
||||
class="floating-arrow"
|
||||
:style="{
|
||||
left: bottomData.arrow?.x != null ? `${bottomData.arrow.x}px` : '',
|
||||
top: bottomData.arrow?.y != null ? `${bottomData.arrow.y}px` : '',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Top -->
|
||||
<div class="item">
|
||||
<button ref="referenceTop">Top</button>
|
||||
<div ref="floatingTop" :style="topStyles" class="floating-box">
|
||||
Top Floating
|
||||
<div
|
||||
ref="arrowTop"
|
||||
class="floating-arrow"
|
||||
:style="{
|
||||
left: topData.arrow?.x != null ? `${topData.arrow.x}px` : '',
|
||||
top: topData.arrow?.y != null ? `${topData.arrow.y}px` : '',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left -->
|
||||
<div class="item">
|
||||
<button ref="referenceLeft">Left</button>
|
||||
<div ref="floatingLeft" :style="leftStyles" class="floating-box">
|
||||
Left Floating
|
||||
<div
|
||||
ref="arrowLeft"
|
||||
class="floating-arrow"
|
||||
:style="{
|
||||
left: leftData.arrow?.x != null ? `${leftData.arrow.x}px` : '',
|
||||
top: leftData.arrow?.y != null ? `${leftData.arrow.y}px` : '',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right -->
|
||||
<div class="item">
|
||||
<button ref="referenceRight">Right</button>
|
||||
<div ref="floatingRight" :style="rightStyles" class="floating-box">
|
||||
Right Floating
|
||||
<div
|
||||
ref="arrowRight"
|
||||
class="floating-arrow"
|
||||
:style="{
|
||||
left: rightData.arrow?.x != null ? `${rightData.arrow.x}px` : '',
|
||||
top: rightData.arrow?.y != null ? `${rightData.arrow.y}px` : '',
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.demo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 120px;
|
||||
padding: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.floating-box {
|
||||
position: absolute;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 箭头 */
|
||||
.floating-arrow {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.floating-arrow::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #333;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "base-uniapp",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-app-harmony": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-components": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-h5": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-alipay": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-baidu": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-harmony": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-jd": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-kuaishou": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-lark": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-qq": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-toutiao": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-4070620250821001",
|
||||
"pinia": "2.0.36",
|
||||
"pinia-plugin-persistedstate": "3.2.1",
|
||||
"vue": "^3.5.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dcloudio/types": "^3.4.8",
|
||||
"@dcloudio/uni-automator": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-4070620250821001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001",
|
||||
|
||||
"@uni-helper/plugin-uni": "0.1.0",
|
||||
"@uni-helper/uni-env": "^0.1.8",
|
||||
"@uni-helper/uni-types": "^1.0.0-alpha.6",
|
||||
"@uni-helper/vite-plugin-uni-components": "0.2.0",
|
||||
"@uni-helper/vite-plugin-uni-layouts": "0.1.11",
|
||||
"@uni-helper/vite-plugin-uni-manifest": "^0.2.8",
|
||||
"@uni-helper/vite-plugin-uni-platform": "^0.0.5",
|
||||
|
||||
"@types/node": "^20.17.9",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.1.7",
|
||||
"vue-tsc": "^3.0.7",
|
||||
"sass": "1.77.8",
|
||||
"postcss": "^8.4.49",
|
||||
"postcss-html": "^1.8.0",
|
||||
"postcss-scss": "^4.0.9"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -0,0 +1,79 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"lib": ["esnext", "dom"],
|
||||
"baseUrl": ".",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
},
|
||||
"resolveJsonModule": true,
|
||||
"types": [
|
||||
|
||||
],
|
||||
"allowJs": true,
|
||||
"noImplicitThis": true,
|
||||
"outDir": "dist",
|
||||
"sourceMap": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"vueCompilerOptions": {
|
||||
"plugins": ["@uni-helper/uni-types/volar-plugin"]
|
||||
},
|
||||
"include": [
|
||||
"package.json",
|
||||
"src/**/*.ts",
|
||||
"src/**/*.js",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.jsx",
|
||||
"src/**/*.vue",
|
||||
"src/**/*.json"
|
||||
],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
@@ -0,0 +1,129 @@
|
||||
import type { PropType, VNode } from 'vue'
|
||||
import { defineComponent, provide, reactive, ref, watch } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
import { collapseGroupKey } from './context'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'collapse',
|
||||
props: {
|
||||
activeKey: {
|
||||
type: [String, Number, Boolean, Array] as PropType<
|
||||
string | number | boolean | (string | number | boolean)[]
|
||||
>,
|
||||
default: undefined,
|
||||
},
|
||||
defaultActiveKey: {
|
||||
type: [String, Number, Boolean, Array] as PropType<
|
||||
string | number | boolean | (string | number | boolean)[]
|
||||
>,
|
||||
default: undefined,
|
||||
},
|
||||
borderLess: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
defaultExpandAll: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
expandIcon: {
|
||||
type: [Boolean, String, Object, Function] as PropType<
|
||||
boolean | string | VNode | ((args: { expanded: boolean }) => VNode)
|
||||
>,
|
||||
default: true,
|
||||
},
|
||||
expandIconPlacement: {
|
||||
type: String as PropType<'left' | 'right'>,
|
||||
default: 'left',
|
||||
},
|
||||
destroyOnHide: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
class: {
|
||||
type: [String, Array, Object],
|
||||
default: '',
|
||||
},
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
emits: ['update:activeKey', 'change'],
|
||||
setup(props, { slots, emit }) {
|
||||
const prefixCls = getPrefixCls('collapse-group')
|
||||
|
||||
const _activeKey = ref(props.activeKey ?? props.defaultActiveKey ?? (!props.accordion ? [] : undefined))
|
||||
|
||||
watch(
|
||||
() => props.activeKey,
|
||||
(newVal) => {
|
||||
_activeKey.value = newVal ?? (!props.accordion ? [] : undefined)
|
||||
},
|
||||
)
|
||||
|
||||
const handleChange = (val: string | number | boolean, e: Event) => {
|
||||
// 外部 v-model 类型决定内部 value 的类型
|
||||
const isArrayMode = Array.isArray(_activeKey.value)
|
||||
if (isArrayMode) {
|
||||
const arr = [...(_activeKey.value as (string | number | boolean)[])]
|
||||
const idx = arr.indexOf(val)
|
||||
if (idx >= 0) {
|
||||
arr.splice(idx, 1)
|
||||
}
|
||||
else {
|
||||
if (props.accordion)
|
||||
arr.length = 0 // 单选时只保留最后一个
|
||||
arr.push(val)
|
||||
}
|
||||
_activeKey.value = arr
|
||||
emit('update:activeKey', arr)
|
||||
emit('change', arr, e)
|
||||
}
|
||||
else {
|
||||
// 非数组模式：单选或多选时非数组 v-model
|
||||
const newVal = _activeKey.value === val ? undefined : val
|
||||
_activeKey.value = newVal
|
||||
emit('update:activeKey', newVal)
|
||||
emit('change', newVal, e)
|
||||
}
|
||||
}
|
||||
|
||||
provide(
|
||||
collapseGroupKey,
|
||||
reactive({
|
||||
name: 'AoCollapseGroup' as const,
|
||||
activeKey: _activeKey,
|
||||
disabled: props.disabled,
|
||||
defaultExpandAll: props.defaultExpandAll,
|
||||
expandIcon: props.expandIcon,
|
||||
expandIconPlacement: props.expandIconPlacement,
|
||||
destroyOnHide: props.destroyOnHide,
|
||||
borderLess: props.borderLess,
|
||||
slots,
|
||||
handleChange,
|
||||
}),
|
||||
)
|
||||
|
||||
return () => (
|
||||
<div
|
||||
class={[
|
||||
prefixCls,
|
||||
props.class,
|
||||
{ [`${prefixCls}-border-less`]: props.borderLess },
|
||||
]}
|
||||
style={{ ...props.style }}
|
||||
>
|
||||
{ slots.default?.()}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,258 @@
|
||||
import type { PropType, TransitionProps, VNode } from 'vue'
|
||||
import type { CollapseGroupContext } from './context'
|
||||
import { computed, defineComponent, inject, ref, Transition, watch } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
import Icon from '../icon/index'
|
||||
|
||||
import { collapseGroupKey } from './context'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CollapseItem',
|
||||
props: {
|
||||
expanded: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
defaultExpanded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: [String, Number, Boolean] as PropType<string | number | boolean>,
|
||||
required: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
expandIcon: {
|
||||
type: [Boolean, String, Object, Function] as PropType<
|
||||
boolean | string | VNode | ((args: { expanded: boolean }) => VNode)
|
||||
>,
|
||||
default: true,
|
||||
},
|
||||
expandIconPlacement: {
|
||||
type: String as PropType<'left' | 'right'>,
|
||||
},
|
||||
title: {
|
||||
type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
|
||||
default: '',
|
||||
},
|
||||
destroyOnHide: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
headerRightContent: {
|
||||
type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
|
||||
},
|
||||
borderLess: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
class: {
|
||||
type: [String, Array, Object],
|
||||
default: '',
|
||||
},
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
emits: ['change', 'update:modelValue', 'update:expanded'],
|
||||
setup(props, { slots, emit }) {
|
||||
const prefixCls = getPrefixCls('collapse')
|
||||
|
||||
const collapseGroupCtx = inject<CollapseGroupContext | undefined>(collapseGroupKey, undefined)
|
||||
|
||||
const _expanded = ref(props.defaultExpanded)
|
||||
|
||||
const inGroup = computed(() => !!collapseGroupCtx)
|
||||
const isDisabled = computed(() => props.disabled || collapseGroupCtx?.disabled)
|
||||
const isExpanded = computed(() => {
|
||||
if (inGroup.value && collapseGroupCtx) {
|
||||
const groupValue = collapseGroupCtx.activeKey
|
||||
if (Array.isArray(groupValue)) {
|
||||
return groupValue.includes(props.value)
|
||||
}
|
||||
return groupValue === props.value
|
||||
}
|
||||
return props.expanded ?? props.modelValue ?? _expanded.value
|
||||
})
|
||||
const isDestroyOnHide = computed(() => props.destroyOnHide || collapseGroupCtx?.destroyOnHide)
|
||||
const isBorderLess = computed(() => props.borderLess || collapseGroupCtx?.borderLess)
|
||||
|
||||
const isMounted = ref(isDestroyOnHide.value ? isExpanded.value : true)
|
||||
|
||||
watch(isExpanded, (isExpanded) => {
|
||||
if (isExpanded && !isMounted.value) {
|
||||
isMounted.value = true
|
||||
}
|
||||
})
|
||||
|
||||
const handleChange = (event: MouseEvent) => {
|
||||
if (isDisabled.value)
|
||||
return
|
||||
|
||||
if (inGroup.value && collapseGroupCtx) {
|
||||
collapseGroupCtx.handleChange(props.value, event)
|
||||
}
|
||||
else {
|
||||
const newChecked = !isExpanded.value
|
||||
if (props.expanded === undefined)
|
||||
_expanded.value = newChecked
|
||||
|
||||
emit('update:modelValue', newChecked)
|
||||
emit('update:expanded', newChecked)
|
||||
}
|
||||
|
||||
emit('change', { value: props.value, event })
|
||||
}
|
||||
|
||||
watch(() => props.expanded, (val) => {
|
||||
if (val !== undefined) {
|
||||
_expanded.value = val
|
||||
}
|
||||
})
|
||||
|
||||
const renderTitle = () => {
|
||||
const content = slots.title ? slots.title() : (typeof props.title === 'function' ? props.title() : props.title)
|
||||
|
||||
return <div class={`${prefixCls}-title`}>{content}</div>
|
||||
}
|
||||
|
||||
const mergedExpandIcon = computed(() => {
|
||||
if (props.expandIcon !== undefined)
|
||||
return props.expandIcon
|
||||
if (collapseGroupCtx?.expandIcon !== undefined)
|
||||
return collapseGroupCtx.expandIcon
|
||||
return true // 默认值
|
||||
})
|
||||
|
||||
const mergedExpandIconPlacement = computed<'left' | 'right'>(() => {
|
||||
if (props.expandIconPlacement)
|
||||
return props.expandIconPlacement
|
||||
if (collapseGroupCtx?.expandIconPlacement)
|
||||
return collapseGroupCtx.expandIconPlacement
|
||||
return 'left'
|
||||
})
|
||||
|
||||
const renderExpandIcon = () => {
|
||||
const iconProp = mergedExpandIcon.value
|
||||
const placement = mergedExpandIconPlacement.value
|
||||
|
||||
// 插槽优先
|
||||
if (slots.expandIcon) {
|
||||
return slots.expandIcon({ expanded: isExpanded.value })
|
||||
}
|
||||
|
||||
if (typeof iconProp === 'boolean') {
|
||||
if (!iconProp)
|
||||
return null
|
||||
return (
|
||||
<Icon
|
||||
size={16}
|
||||
icon="ix:chevron-down"
|
||||
class={[
|
||||
`${prefixCls}-icon`,
|
||||
`${prefixCls}-icon-${placement}`,
|
||||
isExpanded.value
|
||||
? `${prefixCls}-icon-expanded`
|
||||
: `${prefixCls}-icon-collapsed`,
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (typeof iconProp === 'string') {
|
||||
return (
|
||||
<Icon
|
||||
icon={iconProp}
|
||||
class={[`${prefixCls}-icon`, `${prefixCls}-icon-${placement}`]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (typeof iconProp === 'function') {
|
||||
return iconProp({ expanded: isExpanded.value })
|
||||
}
|
||||
|
||||
return iconProp // VNode
|
||||
}
|
||||
|
||||
const renderHeaderRight = () => {
|
||||
if (slots.headerRightContent)
|
||||
return slots.headerRightContent()
|
||||
const content = props.headerRightContent
|
||||
return typeof content === 'function' ? content() : content
|
||||
}
|
||||
|
||||
const transitionEvents: TransitionProps = {
|
||||
onEnter: (el: Element) => {
|
||||
(el as HTMLDivElement).style.height = `${el.scrollHeight}px`
|
||||
},
|
||||
onAfterEnter: (el: Element) => {
|
||||
(el as HTMLDivElement).style.height = 'auto'
|
||||
},
|
||||
onBeforeLeave: (el: Element) => {
|
||||
(el as HTMLDivElement).style.height = `${el.scrollHeight}px`
|
||||
},
|
||||
onLeave: (el: Element) => {
|
||||
(el as HTMLDivElement).style.height = '0'
|
||||
},
|
||||
onAfterLeave: () => {
|
||||
if (isDestroyOnHide.value) {
|
||||
isMounted.value = false
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
return () => {
|
||||
const iconVNode = renderExpandIcon()
|
||||
const titleVNode = renderTitle()
|
||||
const headerRight = renderHeaderRight()
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
prefixCls,
|
||||
props.class,
|
||||
{ [`${prefixCls}-disabled`]: isDisabled.value },
|
||||
{ [`${prefixCls}-border-less`]: isBorderLess.value },
|
||||
]}
|
||||
style={{ ...props.style }}
|
||||
>
|
||||
<div class={`${prefixCls}-header`} onClick={handleChange}>
|
||||
{mergedExpandIconPlacement.value === 'left'
|
||||
? (
|
||||
<>
|
||||
{iconVNode}
|
||||
{titleVNode}
|
||||
{headerRight}
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
{titleVNode}
|
||||
{headerRight}
|
||||
{iconVNode}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Transition name="collapse-slider" {...transitionEvents}>
|
||||
<div class={`${prefixCls}-body`} v-show={isExpanded.value}>
|
||||
{isMounted.value && (
|
||||
<div class={`${prefixCls}-content`}>
|
||||
{slots.default?.()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { InjectionKey, VNode } from 'vue'
|
||||
|
||||
export interface CollapseGroupContext {
|
||||
name: 'AoCollapseGroup'
|
||||
activeKey: string | number | boolean | (string | number | boolean)[] | undefined
|
||||
defaultExpandAll: boolean
|
||||
disabled: boolean
|
||||
expandIcon: boolean | string | VNode | ((args: { expanded: boolean }) => VNode)
|
||||
expandIconPlacement: 'left' | 'right'
|
||||
destroyOnHide: boolean
|
||||
borderLess: boolean
|
||||
handleChange: (value: string | number | boolean, e: Event) => void
|
||||
}
|
||||
|
||||
export const collapseGroupKey: InjectionKey<CollapseGroupContext> = Symbol('CollapseGroup')
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<ACollapseGroup expand-icon-placement="left" style="width: 400px;" border-less>
|
||||
<ACollapse value="1" title="这是一个折叠标题">
|
||||
这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
||||
</ACollapse>
|
||||
<ACollapse value="2" title="这是一个折叠标题" disabled>
|
||||
这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
|
||||
<template #headerRightContent>
|
||||
<!-- 右侧内容可以是图标、按钮等 -->
|
||||
<button>
|
||||
操作
|
||||
</button>
|
||||
</template>
|
||||
</ACollapse>
|
||||
</ACollapseGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -2,18 +2,96 @@
|
||||
@use 'sass:color';
|
||||
|
||||
$collapse-prefix: '#{$prefix}-collapse';
|
||||
$collapse-group-prefix: '#{$prefix}-collapse-group';
|
||||
|
||||
.#{$collapse-prefix} {
|
||||
.#{$collapse-group-prefix} {
|
||||
font-size: 14px;
|
||||
color: $text-color-base;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: solid 1px $border-color;
|
||||
border: solid 1px $border-color-component;
|
||||
border-bottom: 0;
|
||||
background: $bg-color-container;
|
||||
&.#{$collapse-group-prefix}-border-less {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$collapse-prefix}-panel {
|
||||
.#{$collapse-prefix} {
|
||||
overflow: hidden;
|
||||
|
||||
&.#{$collapse-prefix}-border-less {
|
||||
border: none;
|
||||
.#{$collapse-prefix}-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
.#{$collapse-prefix}-body {
|
||||
background-color: $bg-color-container;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$collapse-prefix}-disabled {
|
||||
.#{$collapse-prefix}-header {
|
||||
cursor: not-allowed;
|
||||
color: $text-color-disabled;
|
||||
}
|
||||
.#{$collapse-prefix}-body .#{$collapse-prefix}-content {
|
||||
color: $text-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$collapse-prefix}-header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: solid 1px $border-color-component;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.#{$collapse-prefix}-icon {
|
||||
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.#{$collapse-prefix}-icon-left {
|
||||
margin-right: 8px;
|
||||
}
|
||||
&.#{$collapse-prefix}-icon-right {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&.#{$collapse-prefix}-icon-expanded {
|
||||
}
|
||||
&.#{$collapse-prefix}-icon-collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.#{$collapse-prefix}-title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$collapse-prefix}-body {
|
||||
border-bottom: solid 1px $border-color;
|
||||
background: $bg-color-secondarycomponent;
|
||||
overflow: inherit;
|
||||
.#{$collapse-prefix}-content {
|
||||
padding: 12px 16px 12px 40px;
|
||||
color: $text-color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-slider-enter-from,
|
||||
.collapse-slider-leave-to {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.collapse-slider-enter-active,
|
||||
.collapse-slider-leave-active {
|
||||
transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
||||
}
|
||||
@@ -4,7 +4,8 @@ export { default as Button } from './button'
|
||||
export { default as Card } from './card'
|
||||
export { default as Checkbox } from './checkbox/checkbox'
|
||||
export { default as CheckboxGroup } from './checkbox/checkbox-group'
|
||||
export { default as Collapse } from './collapse'
|
||||
export { default as Collapse } from './collapse/collapse'
|
||||
export { default as CollapseGroup } from './collapse/collapse-group'
|
||||
export { default as Drawer } from './drawer'
|
||||
export { default as Group } from './group'
|
||||
export { default as Icon } from './icon'
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DescriptionsGroup',
|
||||
props: {
|
||||
class: {
|
||||
type: [String, Array, Object],
|
||||
default: '',
|
||||
},
|
||||
style: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
emits: [],
|
||||
setup(props, { slots, emit }) {
|
||||
const prefixCls = getPrefixCls('descriptions-group')
|
||||
return () => (
|
||||
<div class={[prefixCls, props.class]} style={{ ...props.style }}>
|
||||
{slots.default?.()}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
+2
-2
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
|
||||
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Collapse',
|
||||
name: 'Descriptions',
|
||||
props: {
|
||||
class: {
|
||||
type: [String, Array, Object],
|
||||
@@ -15,7 +15,7 @@ export default defineComponent({
|
||||
},
|
||||
emits: [],
|
||||
setup(props, { slots, emit }) {
|
||||
const prefixCls = getPrefixCls('collapse')
|
||||
const prefixCls = getPrefixCls('descriptions')
|
||||
return () => (
|
||||
<div class={[prefixCls, props.class]} style={{ ...props.style }}>
|
||||
{slots.default?.()}
|
||||
@@ -0,0 +1,7 @@
|
||||
@use '../_styles/_variables.scss' as *;
|
||||
@use 'sass:color';
|
||||
|
||||
$descriptions-prefix: '#{$prefix}-descriptions';
|
||||
|
||||
.#{$descriptions-prefix} {
|
||||
}
|
||||
@@ -6,7 +6,6 @@ export interface TagGroupContext {
|
||||
disabled: boolean
|
||||
checkable: boolean
|
||||
slots: Slots
|
||||
multiple: boolean
|
||||
handleChange: (value: string | number | boolean, e: Event) => void
|
||||
}
|
||||
|
||||
|
||||
@@ -91,7 +91,6 @@ export default defineComponent({
|
||||
disabled: groupDisabled,
|
||||
slots,
|
||||
checkable: true,
|
||||
multiple: props.multiple,
|
||||
handleChange,
|
||||
}),
|
||||
)
|
||||
|
||||
@@ -1,48 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
function toggleLoading() {
|
||||
loading.value = !loading.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 卡片 -->
|
||||
<ACard
|
||||
:loading="loading"
|
||||
title="标题"
|
||||
sub-title="副标题"
|
||||
style="width: 400px;"
|
||||
hover-shadow
|
||||
cover="https://tdesign.gtimg.com/site/source/card-demo.png"
|
||||
>
|
||||
<template #actions>
|
||||
actions
|
||||
</template>
|
||||
<div>
|
||||
content
|
||||
|
||||
这里是内容
|
||||
|
||||
<template #footer>
|
||||
这里是footer
|
||||
</template>
|
||||
</ACard>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<button style="margin-top: 16px;" @click="toggleLoading">
|
||||
{{ loading ? '关闭 Loading' : '开启 Loading' }}
|
||||
</button>
|
||||
<t-descriptions-item label="Name">
|
||||
TDesign
|
||||
</t-descriptions-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
height: 800px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -13,6 +13,8 @@ declare module 'vue' {
|
||||
ACard: typeof import('@ao/ao-design')['Card']
|
||||
ACheckbox: typeof import('@ao/ao-design')['Checkbox']
|
||||
ACheckboxGroup: typeof import('@ao/ao-design')['CheckboxGroup']
|
||||
ACollapse: typeof import('@ao/ao-design')['Collapse']
|
||||
ACollapseGroup: typeof import('@ao/ao-design')['CollapseGroup']
|
||||
AConfigProvider: typeof import('@ao/ao-design')['ConfigProvider']
|
||||
ADrawer: typeof import('@ao/ao-design')['Drawer']
|
||||
AGroup: typeof import('@ao/ao-design')['Group']
|
||||
|
||||
Reference in new issue
Block a user