当前位置: 首页 > 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


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

相关文章:

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

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

基于go的简单管理系统(增删改查)

package mainimport ("database/sql""fmt"_ "github.com/go-sql-driver/mysql" )var db *sql.DBtype user struct {id intname stringage int }// 建立连接 func initDB() (err error) {dsn : "root:123456tcp(127.0.0.1:3306)/mysqltes…...

Python 用一等函数重新审视“命令”设计模式

引言 在软件开发中&#xff0c;设计模式是解决常见问题的有效方法。“命令”设计模式旨在解耦调用操作的对象&#xff08;调用者&#xff09;和提供实现的对象&#xff08;接收者&#xff09;。本文将深入探讨“命令”模式&#xff0c;并介绍如何使用一等函数对其进行简化。 …...

pycharm导入同目录下文件未标红但报错ModuleNotFoundError

此贴仅为记录debug过程&#xff0c;为防后续再次遇见 问题 问题情境 复现文章模型&#xff0c;pycharm项目初次运行 问题描述 在导入同目录下其它文件夹中的python文件时&#xff0c;未标红&#xff0c;但运行时报错ModuleNotFoundError 报错信息 未找到该模块 Traceback …...

BOSS的收入 - 华为OD机试(A卷,Java题解)

华为OD机试题库《C》限时优惠 9.9 华为OD机试题库《Python》限时优惠 9.9 华为OD机试题库《JavaScript》限时优惠 9.9 代码不懂有疑问欢迎留言或私我们的VX&#xff1a;code5bug。 题目描述 一个 XX 产品行销总公司&#xff0c;只有一个 boss&#xff0c;其有若干一级分销&…...

Qt:(创建项目)

目录 1. 使⽤QtCreator新建项⽬ 1.1 新建项⽬ 1.2 选择项⽬模板 1.3 选择项⽬路径 1.4 选择构建系统 1.5 填写类信息设置界⾯ ​编辑 1.6 选择语⾔和翻译⽂件 1.6 选择Qt套件 1.7 选择版本控制系统 1.8 最终效果 1. 使⽤QtCreator新建项⽬ 1.1 新建项⽬ 打开Qt…...

网络原理 - 12(HTTP/HTTPS - 3 - 响应)

目录 认识“状态码”&#xff08;status code&#xff09; 200 OK 404 Not Found 403 Forbidden 405 Method Not Allowed 500 Internal Server Error 504 Gateway Timeout 302 Move temporarily 301 Moved Permanently 418 I am a teaport 状态码小结&#xff1a; …...

OpenCV 4.7企业级开发实战:从图像处理到目标检测的全方位指南

简介 OpenCV作为工业级计算机视觉开发的核心工具库,其4.7版本在图像处理、视频分析和深度学习模型推理方面实现了显著优化。 本文将从零开始,系统讲解OpenCV 4.7的核心特性和功能更新,同时结合企业级应用场景,提供详细代码示例和实战项目,帮助读者掌握从基础图像处理到复…...

QT6 源(63)篇六:阅读与注释 QString 这个类,包含了 QString 类的 完整源码,也附上 QLatin1String 类的

&#xff08;9&#xff09;给出完整的源代码&#xff1a; #ifndef QSTRING_H #define QSTRING_H//验证了&#xff0c;没有此宏定义的 #if 不成立 #if defined(QT_NO_CAST_FROM_ASCII) && defined(QT_RESTRICTED_CAST_FROM_ASCII) #error QT_NO_CAST_FROM_ASCII a…...

PixONE 六维力传感器:赋能 OEM 机器人,12 自由度精准感知

The PixONE&#xff0c;一款为OEM设计的多模态12自由度机器人传感器&#xff0c;以其卓越的性能和广泛的适用性&#xff0c;正引领着机器人传感技术的革新。这款传感器不仅外观精致&#xff0c;达到IP68防护等级&#xff0c;易于消毒&#xff0c;而且其中心的大孔设计使得电缆和…...

nginx 解决跨域问题

本地用 8080 端口启动的服务访问后台API有跨域问题&#xff0c; from origin http://localhost:8080 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: Redirect is not allowed for a preflight request. 其实用 9021 端…...

私有知识库 Coco AI 实战(五):打造 ES 新特性查询助手

有了实战&#xff08;四&#xff09;的经验&#xff0c;再打造个 ES 新特性查询助手就非常简单了。新的小助手使用的数据还是 ES 官方文档&#xff0c;模型设置也可沿用上次小助手的设置。 克隆小助手 我们进入 Coco Server 首页小助手菜单&#xff0c;选择“ES 索引参数查询…...

2025 新生 DL-FWI 培训

摘要: 本贴给出 8 次讨论式培训的提纲, 每次培训 1 小时. Basic concepts 1.1 Sesmic data processing – regular process 1.2 Full waveform inversion 1.3 Deep learning full waveform inversion Network structure 2.1 InversionNet Encoder-decorder structure 2.2 FCNV…...

VR汽车线束:汽车制造的新变革

汽车线束&#xff0c;作为汽车电路网络的主体&#xff0c;宛如汽车的 “神经网络”&#xff0c;承担着连接汽车各个部件、传输电力与信号的重任&#xff0c;对汽车的正常运行起着关键作用。从汽车的发动机到仪表盘&#xff0c;从传感器到各类电子设备&#xff0c;无一不是通过线…...

Centos离线安装Docker(无坑版)

1、下载并上传docker离线安装包 官方地址&#xff1a;安装包下载 2、上传到离线安装的服务器解压 tar -zxvf docker-28.1.1.tgz#拷贝解压二进制文件到相关目录 cp docker/* /usr/bin/ 3、创建docker启动文件 cat << EOF > /usr/lib/systemd/system/docker.servic…...

JConsole监控centos服务器中的springboot的服务

场景 在centos服务器中,有一个aa.jar的springboot服务,我想用JConsole监控它的JVM情况,具体怎么实现。 配置 Spring Boot 应用以启用 JMX 在java应用启动项进行配置 java -Djava.rmi.server.hostname=服务器IP -Dcom.sun.management.jmxremote=true \ -Dcom.sun.managem…...

centos 安装jenkins

centos 安装jenkins 在 CentOS 上安装 Jenkins 是一个相对直接的过程。以下是一个逐步指南&#xff0c;帮助你安装 Jenkins&#xff1a; 步骤 1&#xff1a;安装 Java Jenkins 需要 Java 运行环境&#xff0c;因此首先确保你的系统上安装了 Java。你可以使用以下命令来安装 …...

M1 Mac pip3 install错误记录

M芯片mac pip install 错误记录 环境 M3芯片MacPython3.13.1pip 24.3.1 场景 安装 nacos-sdk-python 时安装失败 % pip3 install nacos-sdk-pythonerror: externally-managed-environment This environment is externally managed ╰─> To install Python packages sy…...

搭建基于 ChatGPT 的问答系统

对于开发者来说&#xff0c;如何能够基于 ChatGPT 搭建一个完整、全面的问答系统&#xff0c;是极具实战价值与实践意义的。 要搭建基于 ChatGPT 的完整问答系统&#xff0c;除去上一部分所讲述的如何构建 Prompt Engineering 外&#xff0c;还需 要完成多个额外的步骤。例如…...

「动态规划」线性DP:最长上升子序列(LIS)|编辑距离 / LeetCode 300|72(C++)

概述 DP&#xff0c;即动态规划是解决最优化问题的一类算法&#xff0c;我们要通过将原始问题分解成规模更小的、相似的子问题&#xff0c;通过求解这些易求解的子问题来计算原始问题。 线性DP是一类基本DP&#xff0c;我们来通过它感受DP算法的奥义。 最长上升子序列&#x…...

IP 地址和 MAC 地址是如何转换的

在计算机网络的世界里&#xff0c;IP 地址和 MAC 地址就像是网络设备的两个重要 “身份证”&#xff0c;各自承担着不同的职责。IP 地址基于网络层&#xff0c;用于在复杂的网络环境中定位设备&#xff1b;MAC 地址则是固化在网卡上的物理地址&#xff0c;是设备的硬件标识。那…...

[Unity]设置自动打包脚本

背景 我们经常会使用自动打包功能 文件名称: AutoBuild.csusing System.IO; using System.Linq; using UnityEditor; using UnityEngine;public class AutoBuilder {[MenuItem("Build/GetCurrentBuildTarget")]public static void GetCurrentBuildTarget(){Debug.L…...

使用Docker部署魔豆文库:本地化搭建私有文档管理系统

文章目录 前言1.关于Moredoc2.本地部署Moredoc3.Moredoc简单使用4. 安装内网穿透5.配置Moredoc公网地址6. 配置固定公网地址 前言 电脑中文件超多的小伙伴们&#xff0c;是不是每次打开机都感觉像是打开了潘多拉魔盒&#xff1f;那些杂乱无章的文档和文件夹简直让人头大如斗&a…...

数据结构---【二叉搜索树】

必须满足的条件&#xff1a;左子树中所有节点的值< 根节点的值 < 右子树中所有节点的值 任意节点的左右子树也是搜索二叉树&#xff0c;也要满足上面的条件 二叉搜索树与堆不同&#xff0c;不一定是完全二叉树&#xff0c;采用链式结构 搜索二叉树的中序遍历是升序 1、查…...

智能检索革命全景透视——基于《搜索引擎信息检索困境破解体系》深度拆解

以下为严格遵循您要求的完整解析报告&#xff0c;全文约52000字符&#xff0c;包含7章26个子节156个量化指标&#xff1a; 智能检索革命全景透视——基于《搜索引擎信息检索困境破解体系》深度拆解 第一章 行业格局解码&#xff08;2987字&#xff09; 1.1 用户画像三维透视…...

STM32printf重定向到串口含armcc和gcc两种方案

STM32串口重定向&#xff1a;MDK与GCC环境下需重写的函数差异 在嵌入式开发中&#xff0c;尤其是使用 STM32系列微控制器 的项目中&#xff0c;调试信息的输出是不可或缺的一部分。为了方便调试&#xff0c;开发者通常会选择将 printf 等标准输出函数通过 UART 串口发送到 PC …...

蓝桥杯 序列计数

序列计数 原题目链接 题目描述 小明想知道&#xff0c;满足以下条件的正整数序列的数量&#xff1a; 第一项为 n&#xff1b;第二项不超过 n&#xff1b;从第三项开始&#xff0c;每一项小于前两项的差的绝对值。 请计算&#xff0c;对于给定的 n&#xff0c;有多少种满足…...

CSS常用属性_(进阶)

目录 1.尺寸单位与颜色 &#xff08;1&#xff09;尺寸 &#xff08;2&#xff09;颜色 常用2种 &#xff08;3&#xff09;颜色属性值&#xff08;透明度&#xff09; 例如&#xff1a; 2.字体属性font 例如&#xff1a; **顺序 3.文本属性 ​编辑例如&#xff1a; …...

模拟频谱分析仪(Linux c++ Qt)

此Demo由三个小项目组成,分布是模拟的硬件采集频谱数据端,后台处理端以及qt前端,于Linux系统下进行开发,使用的软件为clion和QtCreator,编程语言为c,使用了linux下的boost库(1.72),多线程和TCP,UDP以及c的一些新特性,为本人自己想的练手的小项目. 1.项目架构 整体设计采集端不…...

从实列中学习linux shell5: 利用shell 脚本 检测硬盘空间容量,当使用量达到80%的时候 发送邮件

下面是用于检测硬盘空间并在使用量达到80%时发送邮件的Shell脚本 第一步 编写脚本 #!/bin/bash# 邮件配置 recipient"zhaoqingyou99qhzt.com" subject"磁盘空间警报" mail_cmd"/usr/bin/mail" # 根据实际邮件命令路径修改# 检查是否安装邮件工…...

NLP 分词技术学习

文章目录 分词1. 分词方法2. 分词工具3. 分词难点 分词 分词是将连续的中文字符串序列切分成有意义的词语序列的过程&#xff0c;是 NLP 的基础任务之一。需要掌握以下内容&#xff1a; 1. 分词方法 基于规则/词典的方法&#xff08;字符串匹配&#xff09;&#xff1a; 正向…...

大模型——使用 StarRocks 作为向量数据库

大模型——使用 StarRocks 作为向量数据库 本章节介绍了 StarRocks,这是一款高性能的分析数据库,并演示了如何将其用作向量数据库。内容涵盖了设置、文档加载、标记化、创建向量数据库实例以及构建一个能够检索的问答系统。 StarRocks StarRocks 是一个次世代的亚秒级 MPP…...

涨薪技术|0到1学会性能测试第44课-apachetop模块监控

前面的推文我们认识了apache目录结构与配置知识&#xff0c;今天我们继续来看下apache监控技术&#xff0c;究竟是怎么做性能监控???后续文章都会系统分享干货&#xff0c;带大家从0到1学会性能测试。 Apache监控技术 关于apache监控通常会有两种方法&#xff1a; 一是&…...

MySQL 基本查询(一)

文章目录 Create(insert)指定列的单行插入和全列插入多行全列插入和指定列的多行插入如果主键存在&#xff0c;要插入替换存在的值replace 基本select全列查询指定列查询where子句where子句案例语文成绩在 [80, 90] 分的同学及语文成绩数学成绩是 58 或者 59 或者 98 或者 99 分…...

Chrome 136 H265 WebRTC 支持 正式版本已包含

时间过的真快&#xff0c;去年8月份写过一篇文章介绍如何加参数方式启动Chrome H265 硬件解码器&#xff0c; 现在的136版本已经包含在内&#xff0c;至此WebRTC已经完整包含了H264和H265解码器&#xff0c;这个事情应该从2015年开始&#xff0c;Google强推VP9 AV1&#xff0c…...

涨薪技术|0到1学会性能测试第43课-apache status模块监控

前面的推文我们认识了apache目录结构与配置知识,今天我们继续来看下apache监控技术,究竟是怎么做性能监控的。后续文章都会系统分享干货,带大家从0到1学会性能测试。 Apache监控技术 关于apache监控通常会有两种方法: 一是:使用apache自带的status监控模块进行监控; 二是…...

一、Javaweb是什么?

1.1 客户端与服务端 客户端 &#xff1a;用于与用户进行交互&#xff0c;接受用户的输入或操作&#xff0c;且展示服务器端的数据以及向服务器传递数据。 例如&#xff1a;手机app&#xff0c;微信小程序、浏览器… 服务端 &#xff1a;与客户端进行交互&#xff0c;接受客户…...

研发效率破局之道阅读总结(4)个人效率

研发效率破局之道阅读总结(4)个人效率 Author: Once Day Date: 2025年4月30日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 程序的艺术_Once-Day…...

word模板填充导出-(支持word导出、pdf导出)

word模板填充转pdf导出处理 关于word模板填充示例java根据word模板填充数据并导出-五官一体即忢 相关依赖插件【LibreOffice】 安装 LibreOffice&#xff1a;从LibreOffice 官方网站下载并安装适合 Windows 系统或者Linux系统的版本 启动 LibreOffice 服务&#xff1a;打开…...

【Kubernets知识】Secret组件更新大全

文章目录 Kubernetes Secret 更新机制详解及场景指南一、直接替换式更新&#xff08;全量覆盖&#xff09;操作命令特点适用场景风险提示 二、JSON Patch 精准更新操作命令特点适用场景示例流程 三、Strategic Merge Patch&#xff08;策略合并&#xff09;操作命令特点适用场景…...

《分词算法大揭秘:BPE、BBPE、WordPiece、ULM常见方法介绍》

分词算法是自然语言处理&#xff08;NLP&#xff09;中的一个重要预处理步骤&#xff0c;它将文本分割成更小的单元&#xff08;如单词、子词或字符&#xff09;。以下是几种常见的分词算法&#xff1a;Byte Pair Encoding (BPE)、Byte-level BPE (BBPE)、WordPiece 和 Unigram…...

MySQL RR (Repeatable Read) 隔离级别规则细节

准备 测试表&#xff1a; CREATE TABLE transaction_test (id int,value int,mtime timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,PRIMARY KEY (id) ) ENGINE InnoDB;mysql设置&#xff1a; transaction_isolation REPEATABLE-READ auto…...

iOS HTTPS 抓包踩坑记:几种方案尝试与替代工具记录

iOS HTTPS 抓包踩坑记&#xff1a;几种方案尝试与替代工具记录 最近负责一个 iOS App 的调试任务&#xff0c;遇到了 HTTPS 接口抓包难题&#xff0c;顺手做个记录&#xff0c;顺带分享一些试过的工具和方案。 背景 这个 App 启用了 HTTPS 双向认证和证书 pinning&#xff0…...

第十一节:Shell脚本编程

理论知识 Shell 脚本的基本概念&#xff1a;Shell 脚本是一种为 shell 编写的脚本程序&#xff0c;它可以将一系列的命令组合在一起&#xff0c;实现自动化任务。Shell 脚本通常以 .sh 为扩展名。Shell 脚本的执行方式&#xff1a;可以将 Shell 脚本作为可执行程序执行&#x…...

Electron Forge【实战】带图片的 AI 聊天

改用支持图片的 AI 模型 qwen-turbo 仅支持文字&#xff0c;要想体验图片聊天&#xff0c;需改用 qwen-vl-plus src/initData.ts {id: 2,name: "aliyun",title: "阿里 -- 通义千问",desc: "阿里百炼 -- 通义千问",// https://help.aliyun.com/z…...

Learning vtkjs之OutlineFilter

过滤器 外轮廓包围盒生成 介绍 vtkOutlineFilter - 一个为较大单元生成三角形的过滤器 vtkOutlineFilter 是一个将具有三个以上点的单元转换为三角形的过滤器。 感觉就是一个包围盒生成的算法&#xff0c;而且试用下来&#xff0c;只能支持一个InputConnection 效果 核心逻…...

腾讯云CodeBuddy初体验

我正在参加CodeBuddy「首席试玩官」内容创作大赛&#xff0c;本文所使用的 CodeBuddy 免费下载链接&#xff1a;腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴”&#xff1b; 最近AI编程很火&#xff0c;据说我司程序员现在每天可以准点下班&#xff0c;AI起到了很大的作…...

加速LLM大模型推理,KV缓存技术详解与PyTorch实现

随着大型语言模型(LLM)规模和复杂度的指数级增长&#xff0c;推理效率已成为人工智能领域亟待解决的关键挑战。当前&#xff0c;GPT-4、Claude 3和Llama 3等大模型虽然表现出强大的理解与生成能力&#xff0c;但其自回归解码过程中的计算冗余问题依然显著制约着实际应用场景中的…...

江西省电价新政发布!微电网源网荷储充一体化平台重塑企业能源格局!

一. 江西省发改委发布发布 4月25日&#xff0c;江西省发改委发布关于公开征求《关于进一步完善分时电价机制有关事项的通知&#xff08;征求意见稿&#xff09;》意见的公告。征求意见提出&#xff1a; 江西省&#xff1a;中午3小时谷段电价&#xff0c;电价下浮60%~70% 除1…...

深夜突发:OpenAI紧急修复GPT-4o“献媚”问题

凌晨三点&#xff0c;OpenAI首席执行官Sam Altman发布官方声明&#xff0c;宣布针对GPT-4o的“献媚”问题展开紧急修复。这场突如其来的技术风波&#xff0c;源于近期大量用户对模型行为模式的不满。许多用户发现&#xff0c;当他们向GPT-4o提出类似“你觉得我怎么样”或“如果…...