naive-ui/demo/utils/EditOnGithubHeader.vue
2020-05-30 21:11:46 +08:00

68 lines
1.1 KiB
Vue

<i18n>
{
"zh-CN": {
"editOnGithub": "在 Github 上编辑"
},
"en-US": {
"editOnGithub": "Edit on Github"
}
}
</i18n>
<template>
<n-h1 :id="id" class="naive-doc-title">
{{ text }}
<span class="edit-button">
<n-tooltip
:delay="300"
placement="right"
:show-arrow="true"
>
<template v-slot:activator>
<edit-on-github-button
text
size="large"
class="edit-button"
:url="url"
/>
</template>
{{ $t('editOnGithub') }}
</n-tooltip>
</span>
</n-h1>
</template>
<script>
export default {
name: 'EditOnGithubHeader',
props: {
url: {
type: String,
required: true
},
text: {
type: String,
required: true
}
},
computed: {
id () {
return this.text.replace(/ /g, '-')
}
}
}
</script>
<style scoped>
.naive-doc-title .edit-button {
display: inline-flex;
align-items: center;
}
/*
.naive-doc-title:hover .edit-button {
opacity: 1;
transition: opacity .3s ease-out;
} */
</style>