mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
477 lines
7.1 KiB
Markdown
477 lines
7.1 KiB
Markdown
# 装作你没看见
|
|
Debug 用的。
|
|
```html
|
|
<div class="debug-zone"
|
|
n-light-theme-background-color-hint="#ececec"
|
|
n-dark-theme-background-color-hint="transparent"
|
|
>
|
|
<n-button
|
|
type="default"
|
|
round
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Default
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
disabled
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Primary
|
|
</n-button>
|
|
<n-button
|
|
type="info"
|
|
icon-placement="right"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Info
|
|
</n-button>
|
|
<n-button
|
|
type="warning"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Warning
|
|
</n-button>
|
|
<n-button
|
|
type="success"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Success
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Error
|
|
</n-button>
|
|
<n-button
|
|
type="default"
|
|
ghost
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Default
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
ghost
|
|
round
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Primary
|
|
</n-button>
|
|
<n-button
|
|
type="info"
|
|
ghost
|
|
disabled
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Info
|
|
</n-button>
|
|
<n-button
|
|
type="warning"
|
|
ghost
|
|
icon-placement="right"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Warning
|
|
</n-button>
|
|
<n-button
|
|
type="success"
|
|
ghost
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Success
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
ghost
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Error
|
|
</n-button>
|
|
<n-button
|
|
type="default"
|
|
loading
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Default
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
loading
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Primary
|
|
</n-button>
|
|
<n-button
|
|
type="info"
|
|
loading
|
|
round
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Info
|
|
</n-button>
|
|
<n-button
|
|
type="warning"
|
|
loading
|
|
disabled
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Warning
|
|
</n-button>
|
|
<n-button
|
|
type="success"
|
|
loading
|
|
icon-placement="right"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Success
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
loading
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Error
|
|
</n-button>
|
|
<n-button
|
|
type="default"
|
|
ghost
|
|
loading
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Default
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
ghost
|
|
loading
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Primary
|
|
</n-button>
|
|
<n-button
|
|
type="info"
|
|
ghost
|
|
loading
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Info
|
|
</n-button>
|
|
<n-button
|
|
type="warning"
|
|
ghost
|
|
loading
|
|
round
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Warning
|
|
</n-button>
|
|
<n-button
|
|
type="success"
|
|
ghost
|
|
loading
|
|
disabled
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Success
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
ghost
|
|
loading
|
|
icon-placement="right"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Error
|
|
</n-button>
|
|
<n-button
|
|
type="default"
|
|
round
|
|
block
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Default
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
disabled
|
|
block
|
|
size="small"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Primary
|
|
</n-button>
|
|
<n-button
|
|
type="info"
|
|
icon-placement="right"
|
|
block
|
|
size="large"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Info
|
|
</n-button>
|
|
<n-button
|
|
type="warning"
|
|
block
|
|
ghost
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Warning
|
|
</n-button>
|
|
<n-button
|
|
type="success"
|
|
block
|
|
loading
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Success
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
block
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Error
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
disabled
|
|
circle
|
|
size="small"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Primary
|
|
</n-button>
|
|
<n-button
|
|
type="info"
|
|
icon-placement="right"
|
|
circle
|
|
size="large"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Info
|
|
</n-button>
|
|
<n-button
|
|
type="warning"
|
|
circle
|
|
ghost
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Warning
|
|
</n-button>
|
|
<n-button
|
|
type="success"
|
|
circle
|
|
loading
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Success
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
circle
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Error
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Error
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
size="large"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
</n-button>
|
|
<n-button
|
|
type="error"
|
|
round
|
|
size="large"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
</n-button>
|
|
<n-button-group>
|
|
<n-button
|
|
type="default"
|
|
round
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Default
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
disabled
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Primary
|
|
</n-button>
|
|
<n-button
|
|
type="info"
|
|
icon-placement="right"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Info
|
|
</n-button>
|
|
<n-button
|
|
type="warning"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Warning
|
|
</n-button>
|
|
</n-button-group>
|
|
<n-button-group vertical>
|
|
<n-button
|
|
type="default"
|
|
round
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Default
|
|
</n-button>
|
|
<n-button
|
|
type="primary"
|
|
disabled
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Primary
|
|
</n-button>
|
|
<n-button
|
|
type="info"
|
|
icon-placement="right"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Info
|
|
</n-button>
|
|
<n-button
|
|
type="warning"
|
|
>
|
|
<template v-slot:icon>
|
|
<md-save />
|
|
</template>
|
|
Warning
|
|
</n-button>
|
|
</n-button-group>
|
|
</div>
|
|
```
|
|
```js
|
|
import mdSave from 'naive-ui/lib/icons/md-save'
|
|
|
|
export default {
|
|
components: {
|
|
mdSave
|
|
},
|
|
mounted () {
|
|
console.log(this)
|
|
}
|
|
}
|
|
```
|
|
```css
|
|
.n-button {
|
|
margin-right: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.debug-zone {
|
|
border-radius: 4px;
|
|
background-color: transparent;
|
|
transition: background-color .3s ease-in-out;
|
|
}
|
|
.n-light-theme {
|
|
.debug-zone {
|
|
border-radius: 4px;
|
|
background-color: #ececec;
|
|
}
|
|
}
|
|
``` |