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

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


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

http://www.xdnf.cn/news/3111.html

相关文章:

  • shell---expect
  • MySQL 中 redo log、undo log 以及 bin log 的区别
  • 北京亦庄机器人马拉松:人机共跑背后的技术突破与产业启示
  • 【Linux】记录一个有用PS1
  • 自创天炎十二戟算法设计,禁止抄袭
  • Elasticsearch:没有 “AG” 的 RAG?
  • 解决STM32待机模式无法下载程序问题的深度探讨
  • 论文阅读:2024 ACM SIGSAC Membership inference attacks against in-context learning
  • 《算法笔记》10.6小节——图算法专题->拓扑排序 问题 C: Legal or Not
  • Spring 转发 form-data 文件上传请求时中文文件名乱码
  • 【大模型面试每日一题】Day 4:低资源语言建模方案
  • vue3 打字机效果
  • 【CUDA pytorch】
  • DAPO:对GRPO的几点改进
  • 模式识别的基本概念与理论体系
  • 智能机器人在物流行业的应用:效率提升与未来展望
  • pycharm导入同目录下文件未标红但报错ModuleNotFoundError
  • iVX 开源战略:多维突破下的产业生态革新与未来图景
  • MCP的基础知识
  • C++从入门到实战(十一)详细讲解C/C++语言中内存分布与C与C++内存管理对比
  • 一种动态分配内存错误的解决办法
  • Chrome插件备忘
  • Godot笔记:入门索引
  • 卷积神经网络
  • 解析2.4G射频芯片采用DFN封装的技术原因
  • 32单片机——串口
  • 精选10个好用的WordPress免费主题
  • Day106 | 灵神 | 二叉树 二叉树中的最长交错路径
  • OpenAI 2025 4月最新动态综述
  • DINOv2 - 无监督学习鲁棒视觉特征