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';
|
@use 'sass:color';
|
||||||
|
|
||||||
$collapse-prefix: '#{$prefix}-collapse';
|
$collapse-prefix: '#{$prefix}-collapse';
|
||||||
|
$collapse-group-prefix: '#{$prefix}-collapse-group';
|
||||||
|
|
||||||
.#{$collapse-prefix} {
|
.#{$collapse-group-prefix} {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $text-color-base;
|
color: $text-color-base;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
border: solid 1px $border-color;
|
border: solid 1px $border-color-component;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
background: $bg-color-container;
|
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 Card } from './card'
|
||||||
export { default as Checkbox } from './checkbox/checkbox'
|
export { default as Checkbox } from './checkbox/checkbox'
|
||||||
export { default as CheckboxGroup } from './checkbox/checkbox-group'
|
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 Drawer } from './drawer'
|
||||||
export { default as Group } from './group'
|
export { default as Group } from './group'
|
||||||
export { default as Icon } from './icon'
|
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'
|
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'Collapse',
|
name: 'Descriptions',
|
||||||
props: {
|
props: {
|
||||||
class: {
|
class: {
|
||||||
type: [String, Array, Object],
|
type: [String, Array, Object],
|
||||||
@@ -15,7 +15,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
emits: [],
|
emits: [],
|
||||||
setup(props, { slots, emit }) {
|
setup(props, { slots, emit }) {
|
||||||
const prefixCls = getPrefixCls('collapse')
|
const prefixCls = getPrefixCls('descriptions')
|
||||||
return () => (
|
return () => (
|
||||||
<div class={[prefixCls, props.class]} style={{ ...props.style }}>
|
<div class={[prefixCls, props.class]} style={{ ...props.style }}>
|
||||||
{slots.default?.()}
|
{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
|
disabled: boolean
|
||||||
checkable: boolean
|
checkable: boolean
|
||||||
slots: Slots
|
slots: Slots
|
||||||
multiple: boolean
|
|
||||||
handleChange: (value: string | number | boolean, e: Event) => void
|
handleChange: (value: string | number | boolean, e: Event) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -91,7 +91,6 @@ export default defineComponent({
|
|||||||
disabled: groupDisabled,
|
disabled: groupDisabled,
|
||||||
slots,
|
slots,
|
||||||
checkable: true,
|
checkable: true,
|
||||||
multiple: props.multiple,
|
|
||||||
handleChange,
|
handleChange,
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,48 +1,17 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const loading = ref(false)
|
|
||||||
|
|
||||||
function toggleLoading() {
|
|
||||||
loading.value = !loading.value
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div>
|
||||||
<!-- 卡片 -->
|
content
|
||||||
<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>
|
|
||||||
|
|
||||||
这里是内容
|
<t-descriptions-item label="Name">
|
||||||
|
TDesign
|
||||||
<template #footer>
|
</t-descriptions-item>
|
||||||
这里是footer
|
|
||||||
</template>
|
|
||||||
</ACard>
|
|
||||||
|
|
||||||
<!-- 按钮 -->
|
|
||||||
<button style="margin-top: 16px;" @click="toggleLoading">
|
|
||||||
{{ loading ? '关闭 Loading' : '开启 Loading' }}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.main {
|
|
||||||
height: 800px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -13,6 +13,8 @@ declare module 'vue' {
|
|||||||
ACard: typeof import('@ao/ao-design')['Card']
|
ACard: typeof import('@ao/ao-design')['Card']
|
||||||
ACheckbox: typeof import('@ao/ao-design')['Checkbox']
|
ACheckbox: typeof import('@ao/ao-design')['Checkbox']
|
||||||
ACheckboxGroup: typeof import('@ao/ao-design')['CheckboxGroup']
|
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']
|
AConfigProvider: typeof import('@ao/ao-design')['ConfigProvider']
|
||||||
ADrawer: typeof import('@ao/ao-design')['Drawer']
|
ADrawer: typeof import('@ao/ao-design')['Drawer']
|
||||||
AGroup: typeof import('@ao/ao-design')['Group']
|
AGroup: typeof import('@ao/ao-design')['Group']
|
||||||
|
|||||||
Reference in new issue
Block a user