当前位置: 首页 > news >正文

在原生代码(非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


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

相关文章:

  • 回归分析丨基于R语言复杂数据回归与混合效应模型【多水平/分层/嵌套】技术与代码
  • AI预测3D新模型百十个定位预测+胆码预测+去和尾2025年4月30日第68弹
  • mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz的下载安装和使用
  • PostgreSQL Patroni集群组件作用介绍:Patroni、etcd、HAProxy、Keepalived、Watchdog
  • 在Carla中构建自动驾驶:使用PID控制和ROS2进行路径跟踪
  • Android学习总结之自定义view设计模式理解
  • 尼日利亚slot游戏出海赛道借助本土网盟cpi流量广告投放优势
  • 企业数据合规实战:用API+AI构建备案核验系统
  • Python爬虫(11)Python数据存储实战:深入解析NoSQL数据库的核心应用与实战
  • WPF性能优化举例
  • python+echart绘制一个听力图
  • 第六章 QT基础:9、Qt中数据库的操作
  • 【Dify系列教程重置精品版】第四章:实现Dify的 hello world
  • Learning vtkjs之ImageCropFilter
  • C++负载均衡远程调用学习之自定义内存池管理
  • 突破SQL注入字符转义的实战指南:绕过技巧与防御策略
  • RSYSLOG收集深信服log
  • 20250430在ubuntu14.04.6系统上查看系统实时网速
  • 耘想WinNAS:企业级NAS解决方案的终极选择
  • JavaScript 代码搜索框
  • 陈颖已任上海黄浦区委常委、统战部部长
  • 人民日报评论员:因势利导对经济布局进行调整优化
  • 世界黄金协会:一季度全球黄金投资需求同比增170%
  • 亚马逊拟为商品标注“关税成本”,特朗普致电贝索斯讨说法
  • 为治理商家“卷款跑路”“退卡难”,预付式消费司法解释5月起实施
  • 俄罗斯纪念卫国战争胜利80周年阅兵式首次彩排在莫斯科举行