在原生代码(非webpack)里使用iview的注意事项

最近公司在做一个项目,使用的框架是iview,使用过程中同事遇到一些问题,这些问题对于有些同学来说根本就不是问题,但总会有同学需要,为了帮助不太会用的同学快速找到问题,做了如下整理:

下载vue,iview.min.js,iview.css包并引入:

(注意:也可以使用尾部链接进行引用,但是这样的话,当遇到突然没有网的时候,页面样式会出现问题,所以我认为最好是下载压缩文件,在项目中引用比较好,另如果需要使用图标,必须下载fonts文件与iview.css放在同一个文件夹下面,但不需要在html代码中引入)

复制代码
<link rel="stylesheet" type="text/css" href="../../css/iview.css">
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/iview.min.js"></script>


css文件


js文件

重点:

有很多同学不细心,没有注意到它文档的提示,导致出现一些问题:

文章提示

一定要注意这句话,有很多组件在原生html模式下是不能使用的。
单有些组件的文档里面没有提示这句话,也不能使用,那么我将对组件做一些整理,一下内容都是在非template/render模式下需要特殊使用的组件:
1.按钮 i-button
2.图标:
图标后面直接跟文字,则会显示不出来文字内容: <Icon type="ios-checkmark" />文字
可以这样修改: <Icon type="ios-checkmark"></Icon>文字
3.栅格: i-col
4.导航菜单: i-menu
5.标签页: tabs tab-pane
6.下拉菜单: dropdown-menu dropdown-item
7.面包屑: Breadcrumb-item
8.锚点: Anchor-link
9.输入框: i-input
10.开关: i-switch
11.表格: i-table
11.选择器: i-select i-option
12.日期时间: Date-picker Time-picker
以上不是全部的特殊使用的组件,但基本可以看出主要是两种形式:
一种是i-**(如:i-table),另一种是拆词(如:Date-picker)

最后编辑于:2025-04-21 10:55:35
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
月夕·花晨3 小时前
Gateway-过滤器
java·分布式·spring·spring cloud·微服务·gateway·sentinel
hssfscv4 小时前
JAVA学习笔记——9道综合练习习题+二维数组
java·笔记·学习
Elastic 中国社区官方博客5 小时前
AutoOps:简单的 Elasticsearch 集群监控与管理现已支持本地部署
大数据·人工智能·elasticsearch·搜索引擎·云计算·全文检索
初听于你6 小时前
缓存技术揭秘
java·运维·服务器·开发语言·spring·缓存
云手机掌柜7 小时前
技术深度解析:指纹云手机如何通过设备指纹隔离技术重塑多账号安全管理
大数据·服务器·安全·智能手机·矩阵·云计算
小蒜学长7 小时前
springboot多功能智能手机阅读APP设计与实现(代码+数据库+LW)
java·spring boot·后端·智能手机
zizisuo9 小时前
解决在使用Lombok时maven install 找不到符号的问题
java·数据库·maven
笨蛋少年派10 小时前
JAVA基础语法
java·开发语言
渡我白衣10 小时前
深入剖析:boost::intrusive_ptr 与 std::shared_ptr 的性能边界和实现哲学
开发语言·c++·spring
计算机毕设残哥10 小时前
基于Hadoop+Spark的人体体能数据分析与可视化系统开源实现
大数据·hadoop·python·scrapy·数据分析·spark·dash