docs(select): custom arrow icon

This commit is contained in:
07akioni 2022-02-04 04:45:21 +08:00
parent 1c0343c5d9
commit 334d47ad70
3 changed files with 12 additions and 13 deletions

View File

@ -13,8 +13,8 @@ Make arrow a bit different.
>
<template #arrow>
<transition name="slide-left">
<animal-rabbit16-regular v-if="show1" />
<animal-turtle16-regular v-else />
<flash-checkmark16-regular v-if="show1" />
<flash16-regular v-else />
</transition>
</template>
</n-select>
@ -33,15 +33,15 @@ Make arrow a bit different.
<script lang="ts">
import MdSearch from '@vicons/ionicons4/MdSearch'
import AnimalTurtle16Regular from '@vicons/fluent/AnimalTurtle16Regular'
import AnimalRabbit16Regular from '@vicons/fluent/AnimalRabbit16Regular'
import Flash16Regular from '@vicons/fluent/Flash16Regular'
import FlashCheckmark16Regular from '@vicons/fluent/FlashCheckmark16Regular'
import { defineComponent, ref } from 'vue'
export default defineComponent({
components: {
MdSearch,
AnimalTurtle16Regular,
AnimalRabbit16Regular
Flash16Regular,
FlashCheckmark16Regular
},
setup () {
return {

View File

@ -9,8 +9,8 @@
<n-select v-model:show="show1" placeholder="选择歌曲" :options="options">
<template #arrow>
<transition name="slide-left">
<animal-rabbit16-regular v-if="show1" />
<animal-turtle16-regular v-else />
<flash-checkmark16-regular v-if="show1" />
<flash16-regular v-else />
</transition>
</template>
</n-select>
@ -29,15 +29,15 @@
<script lang="ts">
import MdSearch from '@vicons/ionicons4/MdSearch'
import AnimalTurtle16Regular from '@vicons/fluent/AnimalTurtle16Regular'
import AnimalRabbit16Regular from '@vicons/fluent/AnimalRabbit28Regular'
import Flash16Regular from '@vicons/fluent/Flash16Regular'
import FlashCheckmark16Regular from '@vicons/fluent/FlashCheckmark16Regular'
import { defineComponent, ref } from 'vue'
export default defineComponent({
components: {
MdSearch,
AnimalTurtle16Regular,
AnimalRabbit16Regular
Flash16Regular,
FlashCheckmark16Regular
},
setup () {
return {

View File

@ -28,7 +28,6 @@ render-tag.vue
focus.vue
render-person.vue
tag-input.vue
change-debug.vue
placeholder-debug.vue
menu-debug.vue
render-debug.vue