在原生代码(非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
© 著作权归作者所有,转载或内容合作请联系作者

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

相关推荐
程序员Bears4 分钟前
SSM整合:Spring+SpringMVC+MyBatis完美融合实战指南
java·spring·mybatis
数据与人工智能律师1 小时前
加密货币投资亏损后,能否以“欺诈”或“不当销售”索赔?
大数据·网络·算法·云计算·区块链
AdSet聚合广告2 小时前
APP广告变现,开发者如何判断对接的广告SDK安全合规?
大数据·后端·算法·安全·uni-app
liuyang-neu2 小时前
黑马点评双拦截器和Threadlocal实现原理
java
csdn_aspnet3 小时前
Java 程序求圆弧段的面积(Program to find area of a Circular Segment)
java·开发语言
人大博士的交易之路4 小时前
今日行情明日机会——20250527
大数据·数学建模·数据挖掘·缠中说禅·涨停回马枪·道琼斯结构
Magnum Lehar4 小时前
vulkan游戏引擎vulkan部分的fence实现
java·前端·游戏引擎
on the way 1234 小时前
创建型模式之Factory Method(工厂方法)
android·java·工厂方法模式
无心水4 小时前
【后端高阶面经:MongoDB篇】41、MongoDB 是怎么做到高可用的?
java·开发语言·mongodb·java面试·高可用·后端高阶面经·后端工程师的高阶面经
袖清暮雨4 小时前
ClickHouse讲解
大数据·数据库·数据仓库·clickhouse·oracle