mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
fix: vue demo cannot resolve slot template (#1986)
Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>
This commit is contained in:
Yugang Cao
GitHub
parent
160c3d6dbe
commit
0fccebae1c
@ -8,7 +8,11 @@ const {
|
||||
} = require('./convert-md-to-demo')
|
||||
|
||||
function getPartsOfDemo (text) {
|
||||
const template = text.match(/<template>([\s\S]*?)<\/template>/)[1]
|
||||
// slot template
|
||||
const firstIndex = text.indexOf('<template>')
|
||||
let template = text.slice(firstIndex + 10)
|
||||
const lastIndex = template.lastIndexOf('</template>')
|
||||
template = template.slice(0, lastIndex)
|
||||
const script = text.match(/<script.*?>([\s\S]*?)<\/script>/)?.[1]?.trim()
|
||||
const style = text.match(/<style>([\s\S]*?)<\/style>/)?.[1]
|
||||
const markdownText = text
|
||||
|
||||
@ -1,30 +1,32 @@
|
||||
<markdown>
|
||||
# Avatar Group
|
||||
|
||||
Crowded people.
|
||||
</markdown>
|
||||
|
||||
```html
|
||||
<n-avatar-group :options="options" :size="40" :max="3" />
|
||||
<n-avatar-group :options="options" :size="40" :max="3">
|
||||
<template #avatar="{ option: { name, src } }">
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-avatar :src="src" />
|
||||
</template>
|
||||
{{ name }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<template #rest="{ options, rest }">
|
||||
<n-dropdown
|
||||
:options="options.map((option) => ({ key: option.name, label: option.name }))"
|
||||
placement="top"
|
||||
>
|
||||
<n-avatar>+{{ rest }}</n-avatar>
|
||||
</n-dropdown>
|
||||
</template>
|
||||
</n-avatar-group>
|
||||
```
|
||||
<template>
|
||||
<n-avatar-group :options="options" :size="40" :max="3" />
|
||||
<n-avatar-group :options="options" :size="40" :max="3">
|
||||
<template #avatar="{ option: { name, src } }">
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-avatar :src="src" />
|
||||
</template>
|
||||
{{ name }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<template #rest="{ options, rest }">
|
||||
<n-dropdown
|
||||
:options="options.map((option) => ({ key: option.name, label: option.name }))"
|
||||
placement="top"
|
||||
>
|
||||
<n-avatar>+{{ rest }}</n-avatar>
|
||||
</n-dropdown>
|
||||
</template>
|
||||
</n-avatar-group>
|
||||
</template>
|
||||
|
||||
```js
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
@ -55,4 +57,4 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
</script>
|
||||
@ -12,7 +12,7 @@ badge
|
||||
icon
|
||||
name-size
|
||||
fallback
|
||||
group
|
||||
group.vue
|
||||
v-show-debug
|
||||
```
|
||||
|
||||
|
||||
@ -1,30 +1,32 @@
|
||||
<markdown>
|
||||
# 头像组
|
||||
|
||||
人多不一定是好事。
|
||||
</markdown>
|
||||
|
||||
```html
|
||||
<n-avatar-group :options="options" :size="40" :max="3" />
|
||||
<n-avatar-group :options="options" :size="40" :max="3">
|
||||
<template #avatar="{ option: { name, src } }">
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-avatar :src="src" />
|
||||
</template>
|
||||
{{ name }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<template #rest="{ options, rest }">
|
||||
<n-dropdown
|
||||
:options="options.map((option) => ({ key: option.name, label: option.name }))"
|
||||
placement="top"
|
||||
>
|
||||
<n-avatar>+{{ rest }}</n-avatar>
|
||||
</n-dropdown>
|
||||
</template>
|
||||
</n-avatar-group>
|
||||
```
|
||||
<template>
|
||||
<n-avatar-group :options="options" :size="40" :max="3" />
|
||||
<n-avatar-group :options="options" :size="40" :max="3">
|
||||
<template #avatar="{ option: { name, src } }">
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-avatar :src="src" />
|
||||
</template>
|
||||
{{ name }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<template #rest="{ options, rest }">
|
||||
<n-dropdown
|
||||
:options="options.map((option) => ({ key: option.name, label: option.name }))"
|
||||
placement="top"
|
||||
>
|
||||
<n-avatar>+{{ rest }}</n-avatar>
|
||||
</n-dropdown>
|
||||
</template>
|
||||
</n-avatar-group>
|
||||
</template>
|
||||
|
||||
```js
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
@ -55,4 +57,4 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
</script>
|
||||
@ -12,7 +12,7 @@ badge
|
||||
icon
|
||||
name-size
|
||||
fallback
|
||||
group
|
||||
group.vue
|
||||
v-show-debug
|
||||
```
|
||||
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
# Cover
|
||||
|
||||
Card can have a cover.
|
||||
|
||||
```html
|
||||
<n-card title="Card with Cover">
|
||||
<template #cover>
|
||||
<img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
|
||||
</template>
|
||||
Card Content
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
20
src/card/demos/enUS/cover.demo.vue
Normal file
20
src/card/demos/enUS/cover.demo.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<markdown>
|
||||
# Cover
|
||||
|
||||
Card can have a cover.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="Card with Cover">
|
||||
<template #cover>
|
||||
<img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
|
||||
</template>
|
||||
Card Content
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
@ -7,7 +7,7 @@ Just put something in it.
|
||||
```demo
|
||||
basic
|
||||
size
|
||||
cover
|
||||
cover.vue
|
||||
hoverable
|
||||
slots
|
||||
border
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
# 封面
|
||||
|
||||
卡片可以有封面。
|
||||
|
||||
```html
|
||||
<n-card title="带封面的卡片">
|
||||
<template #cover>
|
||||
<img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
|
||||
</template>
|
||||
卡片内容
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
20
src/card/demos/zhCN/cover.demo.vue
Normal file
20
src/card/demos/zhCN/cover.demo.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<markdown>
|
||||
# 封面
|
||||
|
||||
卡片可以有封面。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="带封面的卡片">
|
||||
<template #cover>
|
||||
<img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
|
||||
</template>
|
||||
卡片内容
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
@ -7,7 +7,7 @@
|
||||
```demo
|
||||
basic
|
||||
size
|
||||
cover
|
||||
cover.vue
|
||||
hoverable
|
||||
slots
|
||||
border
|
||||
|
||||
Loading…
Reference in New Issue
Block a user