图标选择组件 - IkFlowIconPicker

图标选择组件。

props

props	类型	说明	默认值
modelValue	String	默认显示的图标	'ik-shouye'
iconBackground	String	默认显示的图标的背景色	'#28b8a4'
colors	Array	背景选择值	[ '#1e90ff', '#28b8a4', '#1ABD89', '#FF933C', '#409EFF', '#F45D41', '#8167F5', '#5D7092', '#73A0FA', '#909399']

事件

名称	说明
update:modelValue	选择图标触发
update:iconBackground	选择图标背景色触发

示例代码

<script lang="ts" setup>
// 默认图标
const modelValue = ref('ikflow-caigou')
// 默认图标背景色
const iconBackground = ref('#28b8a4')
// 图标背景色选择选项
const colors = ref([
  '#1e90ff',
  '#28b8a4',
  '#1ABD89',
  '#FF933C',
  '#409EFF',
  '#F45D41',
  '#8167F5',
  '#5D7092',
  '#73A0FA',
  '#909399'
])

// 选择图标
const changeModel = (val: string) => {
  modelValue.value = val
}

// 选择图标背景
const changeBackground = (val: string) => {
  iconBackground.value = val
}
</script>

<template>
  <IkPageMain fixed style="padding: 16px; box-sizing: border-box">
    <div style="width: 750px; height: 500px;">
      <IkFlowIconPicker
        :model-value="modelValue"
        :icon-background="iconBackground"
        :colors="colors"
        @update:modelValue="changeModel"
        @update:iconBackground="changeBackground"
      />
    </div>
  </IkPageMain>
</template>

<style scoped lang="scss">
</style>