基本使用

图标

#yibao-tuichu

#yibao-shezhi1

#yibao-daibanshixiang-01

#yibao-baoxiuguanli-01

#yibao-weijiguanli-01

#yibao-huiyi

#yibao-liucheng

#yibao-renwu

#yibao-shujufenxi

#yibao-wenjianguanli

#yibao-xiangmushengji

#yibao-waibu

#yibao-youjian

#yibao-tonggaoxiaoxi

#yibao-shoucangjia

#yibao-shenghuojiaofei

#yibao-baokuan

#yibao-gongjuxiang

#yibao-yiliaoyongpin

#yibao-keyanfuwu

#yibao-yiliaofuwu

#yibao-zinvjiaoyu

#yibao-zhichengpingshen

#yibao-shebaochaxun

#yibao-rongzifuwu

#yibao-zhengcechaxun

#yibao-shebaobutie

#yibao-a-03-01

#yibao-a-05-01-01

#yibao-a-07-01

#yibao-a-08-01

#yibao-a-09-01

<template>
    <div>
        <el-form :model="form" ref="form" :rules="rules" label-width="80px">
            <el-form-item label="图标" prop="formIcon">
                <yb-icon-select
                    v-model="form.formIcon"
                    :iconsList="iconsList"
                    clearable
                    :span="3"
                />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    formIcon: '',
                },
                rules: {
                    formIcon: {
                        required: true,
                        message: '图标不能为空',
                        trigger: 'blur',
                    },
                },
                iconsList: [
                    '#yibao-tuichu',
                    '#yibao-shezhi1',
                    '#yibao-daibanshixiang-01',
                    '#yibao-baoxiuguanli-01',
                    '#yibao-weijiguanli-01',
                    '#yibao-huiyi',
                    '#yibao-liucheng',
                    '#yibao-renwu',
                    '#yibao-shujufenxi',
                    '#yibao-wenjianguanli',
                    '#yibao-xiangmushengji',
                    '#yibao-waibu',
                    '#yibao-youjian',
                    '#yibao-tonggaoxiaoxi',
                    '#yibao-shoucangjia',
                    '#yibao-shenghuojiaofei',
                    '#yibao-baokuan',
                    '#yibao-gongjuxiang',
                    '#yibao-yiliaoyongpin',
                    '#yibao-keyanfuwu',
                    '#yibao-yiliaofuwu',
                    '#yibao-zinvjiaoyu',
                    '#yibao-zhichengpingshen',
                    '#yibao-shebaochaxun',
                    '#yibao-rongzifuwu',
                    '#yibao-zhengcechaxun',
                    '#yibao-shebaobutie',
                    '#yibao-a-03-01',
                    '#yibao-a-05-01-01',
                    '#yibao-a-07-01',
                    '#yibao-a-08-01',
                    '#yibao-a-09-01',
                ],
            };
        },
    };
</script>

显示 复制 复制

YbIconSelect Props

参数	说明	类型	可选值	默认值
value/v-model	绑定值	string	--	--
span	控制每行显示icon 数量 同el-col	number	--	4
--	其他属性同el-input	--	--	--

YbIconSelect Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	仅在输入框失去焦点或用户按下回车时触发	(value: string
input	在 Input 值改变时触发	(value: string
clear	在点击由 clearable 属性生成的清空按钮时触发	--

YbIconSelect Methods

方法名	说明	参数
getIconSelect	返回input 实例	--