2019-12-17 14:36:37 +08:00
|
|
|
<template>
|
2020-12-12 13:51:22 +08:00
|
|
|
<div ref="doc" class="n-doc" style="padding: 150px">
|
2021-02-09 15:04:22 +08:00
|
|
|
<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>
|
2020-12-12 13:51:22 +08:00
|
|
|
<div style="position: relative">
|
2019-12-17 14:36:37 +08:00
|
|
|
<n-base-icon-transition v-if="show">
|
2021-01-12 17:55:58 +08:00
|
|
|
<n-icon v-if="i === 0" :size="60">
|
2019-12-17 14:36:37 +08:00
|
|
|
<md-cash />
|
|
|
|
</n-icon>
|
|
|
|
<n-icon v-else-if="i === 1" :size="60">
|
|
|
|
<md-contacts />
|
|
|
|
</n-icon>
|
2020-12-12 13:51:22 +08:00
|
|
|
<span v-else-if="i === 2" style="display: inline-block"> 123 </span>
|
2019-12-17 14:36:37 +08:00
|
|
|
</n-base-icon-transition>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-02-09 15:04:22 +08:00
|
|
|
import { MdCash, MdContacts } from '@vicons/ionicons4'
|
2019-12-17 14:36:37 +08:00
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2020-11-03 18:56:13 +08:00
|
|
|
MdCash,
|
|
|
|
MdContacts
|
2019-12-17 14:36:37 +08:00
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
i: 0,
|
|
|
|
show: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|