IconInput

组件描述组件描述组件描述组件描述组件描述组件描述。

基础用法

可以直接选择element-ui的icon组件，也可以在云端图标中进行查询使用。

basic.vue

<template>
  <dk-icon-input v-model="icon"></dk-icon-input>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const icon = ref()
</script>

图标展示

如果开发者有想在其他地方进行使用图标弹窗的话，也可以使用该组件进行调用。

content.vue

<template>
  <DkIconContent ref="iconContent" @choose="onChoose"></DkIconContent>
  <p>选中的图标：{{ chooseIcon }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const chooseIcon = ref('')
const onChoose = (icon) => {
  chooseIcon.value = icon
}
</script>

图标弹窗

如果开发者有想在其他地方进行使用图标弹窗的话，也可以使用该组件进行调用。

dialog.vue

<template>
  <p>选中的图标：{{ chooseIcon }}</p>
  <dk-icon-dialog ref="iconDialog" @confirm="onChoose"></dk-icon-dialog>
  <el-button @click="show()">显示</el-button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const iconDialog = ref()
const chooseIcon = ref('')
const onChoose = (icon) => {
  chooseIcon.value = icon
}
const show = () => {
  iconDialog.value.open()
}
</script>

组件配置

IconInput Props

属性	说明	类型	默认值
type	参数类型	string	-

IconInput Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

IconInput Slots

插槽名	说明
default	自定义默认内容

类型定义

组件导出以下类型定义

import type { IconInputProps } from '@vipl520/dk-ui'

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值
--dk-icon-input-background	-