ElementUI以及uvie的图标使用和设置

对应uview来说使用图标非常方便:

https://www.uviewui.com/components/icon.html

这个是uview的官网介绍:

1.可以看到直接name后面写上就可以了,具体有哪些图标可以在官网上面的地址找到.

<u-icon name="photo"></u-icon>

2.下面还可以给这个图标指定size,和颜色

<u-icon name="photo" color="#2979ff" size="28"></u-icon>

3.还可以指定一个自定义的图标,给name属性指定一个图标地址就可以了.

<u-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>

4.一般上面就够用了,如果不够用,可以自定义图标库

https://www.uviewui.com/guide/customIcon.html 官网上的介绍.

5.隆重介绍一个特别好用的uniapp的扩展组件.

https://ext.dcloud.net.cn/plugin?id=3455

这组件,这个easyinput,是个增强的input组件

打开网址以后,然后点击使用hbuilderx导入,就可以了,不需要在页面中进行import,并且在components中进行声明,

因为使用了easycom的模式所以不用声明了,关于这个easycom的模式有个博文会说到.

然后使用,

https://ext.dcloud.net.cn/plugin?id=3455

这个地方也有详细的使用方法

导入以后,直接在uview的页面中使用就可以了

<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>

比如这样使用,根据他的帮助文档就能轻松的,解决,输入框,前后加图标等等的问题.

?

上面是效果

改成persion,把这个prefixIcon

?

就变成这样了,所有的图标都可以在这里查看.

https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons

easyinput的各种效果可以在这里看到:

https://hellouniapp.dcloud.net.cn/pages/extUI/easyinput/easyinput

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

然后再说一下elementui中的图标使用:

1.只需要添加prefix-icon="iconfont icon-xxx"即可（头部插入）

https://element.eleme.cn/#/zh-CN/component/icon

elementui的所有的小图标的代码都能在上面查看

//例如
<el-input
prefix-icon="iconfont icon-sousuo"
v-model="searchTableInfo"
placeholder="请输入姓名"
style="width:240px"
></el-input>

2.添加suffix-icon=“iconfont icon-xxx”（尾部添加）

//例如
<el-input
suffix-icon="iconfont icon-sousuo"
v-model="searchTableInfo"
placeholder="请输入姓名"
style="width:240px"
></el-input>

效果是:

?