mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
37 lines
874 B
Vue
37 lines
874 B
Vue
<template>
|
|
<div ref="doc" class="n-doc" style="padding: 150px">
|
|
<n-button @click="show = !show"> show </n-button>
|
|
<n-button @click="i = 0"> cash </n-button>
|
|
<n-button @click="i = 1"> contacts </n-button>
|
|
<n-button @click="i = 2"> contacts2 </n-button>
|
|
<div style="position: relative">
|
|
<n-base-icon-transition v-if="show">
|
|
<n-icon v-if="i === 0" :size="60">
|
|
<md-cash />
|
|
</n-icon>
|
|
<n-icon v-else-if="i === 1" :size="60">
|
|
<md-contacts />
|
|
</n-icon>
|
|
<span v-else-if="i === 2" style="display: inline-block"> 123 </span>
|
|
</n-base-icon-transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { MdCash, MdContacts } from '@vicons/ionicons4'
|
|
|
|
export default {
|
|
components: {
|
|
MdCash,
|
|
MdContacts
|
|
},
|
|
data () {
|
|
return {
|
|
i: 0,
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|