ci(field): 文档集成 field 组件解析
This commit is contained in:
就眠仪式
parent
5e750b5a23
commit
23317590c4
@ -1,7 +1,7 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-avatar :href="href"></lay-avatar>
|
||||
<lay-avatar :src="src"></lay-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -10,10 +10,10 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const href = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
|
||||
const src = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
|
||||
|
||||
return {
|
||||
href
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -24,7 +24,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-avatar :href="avatar" radius></lay-avatar>
|
||||
<lay-avatar :src="src" radius></lay-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -34,10 +34,10 @@ export default {
|
||||
|
||||
setup() {
|
||||
|
||||
const avatar = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
|
||||
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
|
||||
|
||||
return {
|
||||
avatar
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -48,10 +48,10 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-avatar :href="avatar" size="xs"></lay-avatar>
|
||||
<lay-avatar :href="avatar" size="sm"></lay-avatar>
|
||||
<lay-avatar :href="avatar"></lay-avatar>
|
||||
<lay-avatar :href="avatar" size="lg"></lay-avatar>
|
||||
<lay-avatar :src="src" size="xs"></lay-avatar>
|
||||
<lay-avatar :src="src" size="sm"></lay-avatar>
|
||||
<lay-avatar :src="src"></lay-avatar>
|
||||
<lay-avatar :src="src" size="lg"></lay-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -60,10 +60,10 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const avatar = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
|
||||
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
|
||||
|
||||
return {
|
||||
avatar
|
||||
src
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -71,7 +71,9 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
<lay-field title="Avatar attributes" style="margin-top:40px"/>
|
||||
::: field Avatar attributes
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
| ------ | ---- | -------------- |
|
||||
|
||||
@ -103,7 +103,9 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
<lay-field title="Checkbox attributes" style="margin-top:40px"/>
|
||||
::: field Checkbox attributes
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
| -------- | ---- | ----------------------- |
|
||||
@ -111,7 +113,9 @@ export default {
|
||||
| skin | 主题 | -- |
|
||||
| label | 选中值 | -- |
|
||||
|
||||
<lay-field title="Checkbox events" style="margin-top:40px"/>
|
||||
::: field Checkbox events
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
| -------- | ---- | ----------------------- |
|
||||
|
||||
@ -25,7 +25,10 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
<lay-field title="Collapse attributes" style="margin-top:40px"/>
|
||||
|
||||
::: field Collapse attributes
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
| ----- | ------ | -------------- |
|
||||
|
||||
@ -64,12 +64,11 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
| ------- | -------- | -------------- |
|
||||
| v-model | 当前激活 | -- |
|
||||
| type | 主题样式 | `card` `brief` |
|
||||
::: field Rate attributes
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
| ------- | -------- | --- |
|
||||
| v-model | 评分值 | -- |
|
||||
| length | 评分长度 | -- |
|
||||
| length | 评分长度 | -- |
|
||||
@ -1,7 +1,7 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab v-model:modelValue="current">
|
||||
<lay-tab v-model="current1">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
</lay-tab>
|
||||
@ -13,10 +13,10 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const current = ref("1")
|
||||
const current1 = ref("1")
|
||||
|
||||
return {
|
||||
current
|
||||
current1
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -76,7 +76,10 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
<lay-field title="Tab attributes" style="margin-top:40px"/>
|
||||
::: field Tab attributes
|
||||
|
||||
:::
|
||||
|
||||
|
||||
| | | |
|
||||
| ------- | -------- | -------------- |
|
||||
|
||||
@ -23,23 +23,7 @@ const plugins = [
|
||||
md.use(snippet)
|
||||
.use(preWrapper)
|
||||
.use(container, 'demo', demo)
|
||||
.use(...createContainer('tip', 'TIP'))
|
||||
.use(...createContainer('warning', 'WARNING'))
|
||||
.use(...createContainer('danger', 'WARNING'))
|
||||
.use(container, 'v-pre', {
|
||||
render: (tokens: Token[], idx: number) =>
|
||||
tokens[idx].nesting === 1 ? '<div v-pre>\n' : '</div>\n',
|
||||
})
|
||||
.use(container, 'details', {
|
||||
render: (tokens: Token[], idx: number) => {
|
||||
const info = tokens[idx].info.trim().slice(7).trim() // 7 = 'details'.length
|
||||
return tokens[idx].nesting === 1
|
||||
? `<details class="custom-block details">${
|
||||
info ? `<summary>${info}</summary>` : ''
|
||||
}\n`
|
||||
: '</details>'
|
||||
},
|
||||
})
|
||||
.use(...createContainer('field', '描述信息'))
|
||||
},
|
||||
}),
|
||||
]
|
||||
|
||||
@ -21,11 +21,11 @@ export default function createContainer(
|
||||
const token = tokens[idx]
|
||||
const info = token.info.trim().slice(klass.length).trim()
|
||||
if (token.nesting === 1) {
|
||||
return `<div class="${klass} custom-block"><p class="custom-block-title">${
|
||||
return `<lay-field title="${
|
||||
info || defaultTitle
|
||||
}</p>\n`
|
||||
}" style="margin-top:40px">`
|
||||
} else {
|
||||
return '</div>\n'
|
||||
return '</lay-field>\n'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<img
|
||||
:src="href"
|
||||
:src="src"
|
||||
class="layui-avatar"
|
||||
:class="[
|
||||
radius ? 'layui-avatar-radius' : '',
|
||||
@ -13,7 +13,7 @@
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
href?: String
|
||||
src?: String
|
||||
radius?: boolean
|
||||
size?: string
|
||||
}>()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user