Files
kuboard-press/.vuepress/comp/KuboardDemo.vue
2021-05-28 23:01:23 +08:00

58 lines
1.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<i18n locale="en" lang="yaml">
hi: kuboard
</i18n>
<i18n locale="cn" lang="yaml">
hi: kuboard
</i18n>
<template>
<div style="display: inline-block;">
<div style="cursor: pointer;" :id="`demo-popover-target-${suffix}`">
<slot>
<span :style="`font-weight: bold; color: ${color};`">{{label}}</span>
</slot>
</div>
<b-popover :target="`demo-popover-target-${suffix}`" triggers="hover" placement="bottom" variant="primary">
<template #title>在线演示</template>
<div style="font-size: 13px; color: #666;">
在线演示环境中您具备 <span style="color: red; font-weight: bold">只读</span> 权限只能体验 Kuboard 的一部分功能<br/>
</div>
<div style="padding: 10px; border: 1px solid #eee; border-radius: 10px; margin: 10px 0px; background-color: #fafafa;">
<a href="https://demo.kuboard.cn" target="_blank">https://demo.kuboard.cn</a> <br/>
<div style="width: 60px; display: inline-block;margin-top: 5px;">&nbsp;</div>
demo <br/>
<div style="width: 60px; display: inline-block">&nbsp;</div>
demo123
</div>
</b-popover>
</div>
</template>
<script>
export default {
props: {
suffix: { type: String, required: false, default: '' },
label: { type: String, required: false, default: 'Demo' },
color: { type: String, required: false, default: 'auto' },
},
data() {
return {
}
},
computed: {
},
components: { },
mounted () {
},
methods: {
}
}
</script>
<style scoped lang="scss">
</style>