151  
查询码:00000144
图标下拉选择(rview-c)
作者: 郁冲冲 于 2019年12月26日 发布在分类 / 人防组 / 人防前端 下,并于 2019年12月26日 编辑
下拉选择图标组件

使用场景:
    表单类型中,菜单配置下拉选择;(需要配置图标的选择)
    可下拉选择图标;可中文搜索选择图标

  图例


   使用方法:
  cnpm install rview-c --save
使用组件:
    <template>
        <div>
            <div class="select">
                <div v-for="(item, index) in arr" :key="index">
   //组件Start
                    <IconSelect  @getIconValue="getIconValue2"  :inputIconValue="inputIconValue"> </IconSelect>
//组件End
                </div>
            </div>
            <p>{{icondata}}</p>
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                dataIcon:[],
                icondata:'',
                arr:[
                    {icon:""}
                ],
                inputIconValue:""
            }
        },
        methods:{
            getIconValue2(icon){
                //赋值
                this.icondata = icon;
            },
        },
    }
    </script>

*注意事项:
    由于引用的是组件库中的font文件,本地项目中的main.js引用的font路径要注意:
    import 'rview-c/src/assets/font/iconfont.css'



  Methds:

参数 
类型  
是否必填  
描述 
getIconValue 
Function  

用于获取icon值的方法
inputIconValue 
String  
否 |
用于详情页input框赋值


tips: 如何更新 【前端组件库中】  最新的图标?
    在UI提供最新的font文件中;font文件中的html文件中获取有用数据,并打印出数组(从而获得最新的图标库)
    
 let icon = $(".font-class .code-name").text().replace(/[\r\n]/g, "");
          let name = $(".font-class .name").text().replace(/[\r\n]/g, "");
          var newArr = [];
    
          let s = icon.split(" ");
          let ss = name.split(" ");
          let resultIcon = s.filter((item) => item !== "");
          let resultName = ss.filter((item) => item !== "");
          resultIcon.forEach((e,eindex)=>{
            resultName.forEach((i,iindex)=>{
                if(eindex==iindex){
                  newArr.push({icon:resultIcon[eindex],name:resultName[eindex]})
                }
            })
          })
  
  // console.log(resultIcon) 
  // console.log(resultName)
  // console.log(JSON.stringify(newArr))
    

    
         
    




 推荐知识

 历史版本

修改日期 修改人 备注
2019-12-26 13:52:22[当前版本] 郁冲冲 1.1.1
2019-12-26 13:51:36 郁冲冲 1.1.1

知识分享平台 -V 4.8.7 -wcp