メニュー
Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Element Plus Skills Library - A comprehensive skill library for AI agents to understand and utilize Element Plus UI components. Invoke when user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.
Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.
Alert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.
Autocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.
Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.
Backtop component for back-to-top button. Invoke when user needs to provide quick navigation back to the top of a long page.
| name | el-anchor |
| description | Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Anchor provides quick navigation to specific sections on the current page.
<template>
<el-anchor>
<el-anchor-link href="#section1" title="Section 1" />
<el-anchor-link href="#section2" title="Section 2" />
<el-anchor-link href="#section3" title="Section 3" />
</el-anchor>
</template>
<template>
<el-anchor direction="horizontal">
<el-anchor-link href="#section1" title="Section 1" />
<el-anchor-link href="#section2" title="Section 2" />
</el-anchor>
</template>
<template>
<el-anchor :container="containerRef" :offset="100">
<el-anchor-link href="#section1" title="Section 1" />
</el-anchor>
</template>
<script setup>
import { ref } from 'vue'
const containerRef = ref(null)
</script>
<template>
<el-anchor type="underline">
<el-anchor-link href="#section1" title="Section 1" />
</el-anchor>
</template>
| Name | Description | Type | Default |
|---|---|---|---|
| container | Scroll container | string | HTMLElement | Window | — |
| offset | Scroll offset | number | 0 |
| bound | Offset for triggering anchor | number | 15 |
| duration | Scroll duration (ms) | number | 300 |
| marker | Show marker | boolean | true |
| type | Anchor type | 'default' | 'underline' | 'default' |
| direction | Anchor direction | 'vertical' | 'horizontal' | 'vertical' |
| Name | Description | Type |
|---|---|---|
| change | Active link changes | (href: string) => void |
| click | Link clicked | (e: MouseEvent, href?: string) => void |
| Name | Description | Type |
|---|---|---|
| scrollTo | Scroll to specific position | (href: string) => void |
| Name | Description | Type | Default |
|---|---|---|---|
| title | Link text | string | — |
| href | Link address | string | — |
| Name | Description |
|---|---|
| default | Child links |
| sub-link | Child links |
container for custom scroll areasoffset for fixed headersdirection="horizontal" for top navigation