mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
75 lines
1.7 KiB
Markdown
75 lines
1.7 KiB
Markdown
|
# 基础用法
|
|||
|
Thing 提供了很多 slot 来定制。
|
|||
|
```html
|
|||
|
<n-switch v-model="avatar"/>
|
|||
|
<n-switch v-model="header"/>
|
|||
|
<n-switch v-model="headerExtra"/>
|
|||
|
<n-switch v-model="description"/>
|
|||
|
<n-switch v-model="footer"/>
|
|||
|
<n-switch v-model="action"/>
|
|||
|
<n-thing>
|
|||
|
<template v-slot:avatar v-if="avatar">
|
|||
|
<n-avatar>
|
|||
|
<n-icon>
|
|||
|
<md-cash />
|
|||
|
</n-icon>
|
|||
|
</n-avatar>
|
|||
|
</template>
|
|||
|
<template v-slot:header v-if="header">
|
|||
|
货币
|
|||
|
</template>
|
|||
|
<template v-slot:header-extra v-if="headerExtra">
|
|||
|
<n-button circle size="tiny">
|
|||
|
<template v-slot:icon>
|
|||
|
<md-cash />
|
|||
|
</template>
|
|||
|
</n-button>
|
|||
|
</template>
|
|||
|
<template v-slot:description v-if="description">
|
|||
|
描述
|
|||
|
</template>
|
|||
|
货币是为了提高交易效率而用于交换的中介商品。货币有多种形式,如贝壳粮食等自然物、金属纸张等加工品、银行卡信用卡等磁条卡、移动支付加密货币等APP。
|
|||
|
<template v-slot:footer v-if="footer">
|
|||
|
尾部
|
|||
|
</template>
|
|||
|
<template v-slot:action v-if="action">
|
|||
|
<n-button size="tiny" style="margin-right: 8px;">
|
|||
|
<template v-slot:icon>
|
|||
|
<md-cash />
|
|||
|
</template>
|
|||
|
1 块钱
|
|||
|
</n-button>
|
|||
|
<n-button size="tiny" style="margin-right: 8px;">
|
|||
|
<template v-slot:icon>
|
|||
|
<md-cash />
|
|||
|
</template>
|
|||
|
10 块钱
|
|||
|
</n-button>
|
|||
|
<n-button size="tiny">
|
|||
|
<template v-slot:icon>
|
|||
|
<md-cash />
|
|||
|
</template>
|
|||
|
100 块钱
|
|||
|
</n-button>
|
|||
|
</template>
|
|||
|
</n-thing>
|
|||
|
```
|
|||
|
```js
|
|||
|
import mdCash from 'naive-ui/lib/icons/md-cash'
|
|||
|
|
|||
|
export default {
|
|||
|
components: {
|
|||
|
mdCash
|
|||
|
},
|
|||
|
data () {
|
|||
|
return {
|
|||
|
avatar: true,
|
|||
|
header: true,
|
|||
|
headerExtra: true,
|
|||
|
description: true,
|
|||
|
footer: true,
|
|||
|
action: true
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
```
|