mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
a4063fd8d2
* docs: accessibility improvement for navbar * docs: accessibility improvement for demo * refactor: replace ElPopover with ElDropdown * docs: accessibility improvement for nav-full * docs: accessibility improvement for back-to-top * feat: add skip link that jump to the content
47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { Warning } from '@element-plus/icons-vue'
|
|
import { useLang } from '../../composables/lang'
|
|
import apiTypingLocale from '../../../i18n/component/api-typing.json'
|
|
|
|
defineProps({
|
|
type: String,
|
|
details: String,
|
|
})
|
|
|
|
const lang = useLang()
|
|
const detail = computed(() => apiTypingLocale[lang.value].detail)
|
|
</script>
|
|
|
|
<template>
|
|
<span class="inline-flex items-center">
|
|
<code class="api-typing mr-1">
|
|
{{ type }}
|
|
</code>
|
|
<ClientOnly>
|
|
<ElTooltip v-if="details" effect="light" trigger="click">
|
|
<ElButton
|
|
text
|
|
:icon="Warning"
|
|
:aria-label="detail"
|
|
class="p-2 text-4"
|
|
/>
|
|
<template #content>
|
|
<slot>
|
|
<div class="m-1">
|
|
<code
|
|
style="
|
|
color: var(--code-tooltip-color);
|
|
background-color: var(--code-tooltip-bg-color);
|
|
"
|
|
>
|
|
{{ details }}
|
|
</code>
|
|
</div>
|
|
</slot>
|
|
</template>
|
|
</ElTooltip>
|
|
</ClientOnly>
|
|
</span>
|
|
</template>
|