wallimn
- 浏览: 5189419 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
silence19841230：
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn：
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng：
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng：
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn：
<div class="quote_title ...
前端框架iviewui使用示例之菜单+多Tab页布局
前言：
综合使用menu、tab实现菜单+Tab页的布局模式。学习调试作品，代码不是很严谨，但基本功能都实现了。
效果：
代码：
打开开发者工具，看看是不是有什么资源没有找到。再看看iviewui的代码有没有转化为正常的HTML代码。
综合使用menu、tab实现菜单+Tab页的布局模式。学习调试作品，代码不是很严谨，但基本功能都实现了。
效果：
代码：
<!DOCTYPE html>
<!--
作者：wallimn
博客：http://wallimn.iteye.com
时间：2017-11-22
-->
<html>
<head>
<meta charset="utf-8">
<title>iview示例</title>
<link rel="stylesheet" type="text/css" href="iview/styles/iview.css">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="iview/iview.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style type="text/css">
body,html{
background: #f5f7f9;
}
.layout{
}
.layout-logo{
width: 100px;
height: 40px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-content{
position:absolute;
right:0;
left:0;
top:90px;
bottom:90px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.layout-content-main{
min-height: 400px;
padding: 10px;
}
.layout-copy{
text-align: center;
padding: 5px 0 10px;
color: #9ea7b4;
position:absolute;
bottom:0;
right:0;
left:0;
width:100%;
height:90px;
}
.layout-top{
position:absolute;
top:0;
right:0;
left:0;
width:100%;
height:90px;
}
</style>
</head>
<body>
<div id="app">
<div class="layout">
<div class="layout-top">
<div class="layout-logo"></div>
</div>
<div class="layout-content">
<Row >
<i-col span="5">
<i-menu active-name="1-1" width="auto" accordion :open-names="[menuData[0].name]" @on-select="menuSelect" :style="{height:mainHeight+'px'}">
<Submenu v-for="item in menuData" :name="item.name">
<template slot="title">
<Icon type="ios-analytics"></Icon>{{item.label}}
</template>
<menu-item v-for="mi in item.menuitems" :name="mi.name">{{mi.label}}</menu-item>
</Submenu>
</i-menu>
</i-col>
<i-col span="19">
<div class="layout-content-main" >
<Tabs type="card" @on-tab-remove="removeTab" @on-click="clickTab" :animated="false" :value="activeTab">
<template v-for="(item,index) in mainTabs">
<tab-pane :label="item.label" closable :name="item.name" v-if="item.show">
<iframe frameborder="0" width="100%" :height="frameHeight" marginheight="0" scrolling="auto" marginwidth="0" :src="item.url"></iframe>
</tab-pane>
</template>
</Tabs>
</div>
</i-col>
</Row>
</div>
<div class="layout-copy">
2017-2018 © http://wallimn.iteye.com
</div>
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:function(){
return {
menuData:[
{ label:'菜单1',name:"m1",
menuitems:[
{name:'m1-1',label:'菜单1-1',url:'iview.html'},
{name:'m1-2',label:'菜单1-2',url:'grid.html'},
{name:'m1-3',label:'菜单1-3',url:'button.html'},
{name:'m1-4',label:'菜单1-4',url:'table.html'},
]
},
{ label:'菜单2',name:"m2",
menuitems:[
{name:'m2-1',label:'菜单2-1',url:'http://wallimn.iteye.com'},
{name:'m2-2',label:'菜单2-2',url:'m2-1.html'},
{name:'m2-3',label:'菜单2-3',url:'m2-1.html'},
{name:'m2-4',label:'菜单2-4',url:'m2-1.html'},
]
},
{ label:'菜单3',name:"m3",
menuitems:[
{name:'m3-1',label:'菜单3-1',url:'m3-1.html'},
{name:'m3-2',label:'菜单3-2',url:'m3-1.html'},
{name:'m3-3',label:'菜单3-3',url:'m3-1.html'},
{name:'m3-4',label:'菜单3-4',url:'m3-1.html'},
]
},
{ label:'菜单4',name:"m4",
menuitems:[
{name:'m4-1',label:'菜单4-1',url:'m4-1.html'},
{name:'m4-2',label:'菜单4-2',url:'m4-1.html'},
{name:'m4-3',label:'菜单4-3',url:'m4-1.html'},
{name:'m4-4',label:'菜单4-4',url:'m4-1.html'},
]
}
],
activeTab:null,
mainHeight: 0,
frameHeight: 0,
mainTabs:[]
};
},
mounted:function(){
this.setFrameHeight();
},
methods:{
clickTab:function(name){
var vm=this;
vm.frameHeight -= 1;
//解决chrome浏览器中tab切换滚动条消失的问题。
window.setTimeout(function(){
vm.frameHeight=vm.frameHeight+1;
},100);
},
//根据名称来查找对应的菜单条目
getMenuItem:function(name){
for(var sm=0; sm<this.menuData.length; sm++){
for(var mi=0; mi<this.menuData[sm].menuitems.length; mi++){
if(this.menuData[sm].menuitems[mi].name==name)return this.menuData[sm].menuitems[mi];
}
}
return {};//这个应该不可能发生
},
//根据名称查找对应的Tab页。
getTab:function(name){
for(var i=0; i<this.mainTabs.length; i++){
if(this.mainTabs[i].name==name)return this.mainTabs[i];
}
return null;//没有找到
},
//设置Tab页不可见。
removeTab:function (name) {
var tab = this.getTab(name);
if(tab!=null)tab.show=false;
console.log("mainTabRemove, name=",name,", label=",tab.label,", url=",tab.url);
},
setFrameHeight:function(){
//调整掉一些补白的值
this.mainHeight = (document.documentElement.scrollHeight || document.body.scrollHeight)-90-90;
this.frameHeight = this.mainHeight-90;
},
//菜单点击
menuSelect:function(name){
this.$Message.info(name);
var tab = this.getTab(name);
if(tab==null){
var mi = this.getMenuItem(name);
var mi = $.extend({},mi,{show:true});
this.mainTabs.push(mi);
}
else{
tab.show=true;
}
this.activeTab=name;
},
onAuthor:function(){
this.$Message.info("wallimn，http://wallimn.iteyey.com");
}
}
});
window.onresize=function(){
vue.setFrameHeight();
}
</script>
</body>
</html>
- 大小: 36.8 KB
分享到：
评论
2 楼
wallimn
2018-05-19
水淼火 写道
你好,我使用以后,图标不显示,应该怎么引用呢,谢谢
打开开发者工具，看看是不是有什么资源没有找到。再看看iviewui的代码有没有转化为正常的HTML代码。
1 楼
水淼火
2018-05-18
你好,我使用以后,图标不显示,应该怎么引用呢,谢谢
发表评论
-
gradle编译错误：Could not find method compile() for arguments
2020-09-19 10:50 18707编译（IDEA+Gradle）一个别人的工程，出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2530部分UDP通信场景中，需要客户端定期发送心跳信息，以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3547两个SpringBoot应用部署在一个Tomcat中，单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 18741.安装插件 Eclipse中，Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7713一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错： Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1295我MySQL数据库用的uft-8字符集，插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3282做了两个子组件，原理基本一样，一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1197写个基本完整、稍有借鉴意义的示例，防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 4026大过年的，联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2421一、环境搭建 略， ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7583我的机器：Windows10，64 ... -
SpringMVC 在controller层中注入成员变量request，是否线程安全
2018-12-17 21:17 2807@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2114转自：https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3100用了很长时间vue-resource，最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1784element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9815示例了如何在表格中显示按钮，如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6713申请到了阿里云的证书后，下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5372最近研究微信小程序开发，上阿里云申请了个证书，使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5310springboot2.0跨域配置： 一、代码 ... -
微信小程序使用code换openid的方法（JAVA、SpringBoot）
2018-07-01 21:52 10469微信小程序序的代码中提示，使用code换取openid，但 ...
相关推荐
SOH-SVM算法：斑点鬣狗优化技术对支持向量机的改进与解析,优化算法助力机器学习：SOH-SVM改进及源码解析与参考,SOH-SVM：斑点鬣狗优化算法改进支持向量机：SOH-SVM。 代码有注释，附源码和参考文献，便于新手理解，～ ,SOH-SVM; 斑点鬣狗优化算法; 代码注释; 源码; 参考文献,SOH-SVM算法优化：附详解代码与参考
美赛教程&建模&数据分析&案例分析
GESPC++3级大纲
电动汽车充电负荷预测：基于出行链分析与OD矩阵的蒙特卡洛模拟研究,电动汽车充电负荷预测：基于出行链分析与OD矩阵的蒙特卡洛模拟方法,电动汽车充电负荷预测，出行链，OD矩阵，蒙特卡洛模拟 ,电动汽车充电负荷预测; 出行链; OD矩阵; 蒙特卡洛模拟,基于出行链的电动汽车充电负荷预测研究：蒙特卡洛模拟与OD矩阵分析
柯尼卡美能达Konica Minolta bizhub 205i 驱动
内容概要：本文全面介绍使用示波器进行一系列电学实验和项目的内容。从基础实验，如示波器的操作入门和常见波形的测量，再到进阶部分，比如电路故障排除与复杂项目设计，旨在帮助学生掌握示波器的各项技能。文中不仅提供了详尽的操作流程指导，还包括针对每个阶段的学习目标设定、预期成果评估和所需注意事项。最终通过对示波器的深入理解和熟练运用，在实际应用场景（如构造简单设备或是进行音频处理）达到创新解决问题的目的。 适用人群：面向有志于深入理解电工仪器及其应用的学生或者技术人员，尤其是刚开始接触或正在强化自己这方面能力的学习者。 使用场景及目标：①作为培训材料支持初学者快速上手专业级电工测试设备—示波器;②用于教学环节辅助讲解电学概念以及实际操作技巧;③鼓励用户参与更高层次的DIY工程任务从而培养解决问题的能力.
标题中的“ntc热敏电阻 MF52AT 10K 3950精度1%STM32采集带数字滤波”表明我们要讨论的是一个使用STM32微控制器进行数据采集的系统，该系统中包含NTC热敏电阻MF52AT作为温度传感器。NTC热敏电阻是一种负温度系数的电阻器，其阻值随温度升高而降低。MF52AT型号的热敏电阻具有10K欧姆的标称电阻和3950的B值，表示在特定温度下（通常为25℃）的阻值和温度特性曲线。精度1%意味着该电阻的阻值有1%的允许误差，这对于温度测量应用来说是相当高的精度。 描述中提到的“MF52AT热敏电阻STM32数据采集2路”，暗示我们有两个这样的热敏电阻连接到STM32微控制器的模拟输入端口，用于采集温度数据。STM32是一款基于ARM Cortex-M内核的微控制器，广泛应用于各种嵌入式系统中，包括温度监测等应用。由于STM32内部集成了多个ADC（模拟数字转换器），因此它可以同时处理多路模拟输入信号。 "带滤波，项目中实际运用，温差范围在±0.5度"，这表明在实际应用中，数据采集系统采用了某种数字滤波技术来提高信号质量，可能是低通滤波、滑动平均滤波或更复杂的数字信号处理算法。
SSM框架整合是Java开发中常见的技术栈，包括Spring、SpringMVC和Mybatis三个核心组件。这个压缩包提供了一个已经验证过的整合示例，帮助开发者理解和实践这三大框架的协同工作。 Spring框架是Java企业级应用的基石，它提供了一种依赖注入（Dependency Injection，DI）的方式，使得对象之间的依赖关系得以解耦，便于管理和服务。Spring还提供了AOP（面向切面编程）功能，用于实现如日志记录、事务管理等跨切面关注点的处理。 SpringMVC是Spring框架的一部分，专门用于构建Web应用程序。它采用了模型-视图-控制器（Model-View-Controller，MVC）设计模式，将业务逻辑、数据展示和用户交互分离，提高了代码的可维护性和可扩展性。在SpringMVC中，请求被DispatcherServlet接收，然后分发到相应的处理器，处理器执行业务逻辑后返回结果，最后由视图解析并展示给用户。 Mybatis是一个优秀的持久层框架，它简化了JDBC的繁琐操作，支持SQL语句的动态编写，使得开发者可以直接使用SQL来操作数据库，同时还能保持数
分割资源UE5.3.z25
Matlab 2021及以上版本：电气工程与自动化仿真实践——电力电子变换器微网建模与仿真研究，涵盖Boost、Buck整流逆变器闭环控制及光伏蓄电池电路等多重电气仿真,基于Matlab 2021及以上的电气工程与自动化仿真研究：电力电子变换器微网建模与Boost、Buck整流逆变器闭环控制及光伏蓄电池电路等多电气仿真分析,电气工程及其自动化仿真 Matlab simulink 电力电子变器微网建模仿真 仅限matlab版本2021及以上 Boost，Buck，整流逆变器闭环控制 光伏蓄电池电路等多种电气仿真 ,电气工程; Matlab simulink; 电力电子变换器; 微网建模仿真; Boost; Buck; 整流逆变器; 闭环控制; 光伏蓄电池电路; 电气仿真,Matlab 2021版电气工程自动化仿真研究：微网建模与控制策略
移动机器人路径规划，python入门程序
《DeepSeek从入门到精通》是清华大学推出的一套深度学习学习资源，内容涵盖基础知识、实用技巧和前沿应用，适合不同水平的学习者。通过系统化的学习路径，帮助你在深度学习领域快速成长。无论你是初学者还是
考虑新能源消纳的火电机组深度调峰策略：建立成本模型与经济调度，实现风电全额消纳的优化方案,考虑新能源消纳的火电机组深度调峰策略与经济调度模型研究,考虑新能源消纳的火电机组深度调峰策略 摘要：本代码主要做的是考虑新能源消纳的火电机组深度调峰策略，以常规调峰、不投油深度调峰、投油深度调峰三个阶段，建立了火电机组深度调峰成本模型，并以风电全额消纳为前提，建立了经济调度模型。 约束条件主要考虑煤燃烧约束、系统旋转备用功率约束、启停、爬坡、储热约束等等。 复现结果非常良好，结果图展示如下： 1、代码非常精品，有注释方便理解； ,核心关键词：新能源消纳；火电机组深度调峰策略；常规调峰；不投油深度调峰；投油深度调峰；成本模型；经济调度模型；煤燃烧约束；系统旋转备用功率约束；启停约束；爬坡约束；储热约束。,新能源优化调度策略：火电机组深度调峰及经济调度研究
"数字设计原理与实践" 数字设计是计算机科学和电子工程两个领域的交叉点，涉及到数字电路的设计和实现。本书籍《数字设计-原理与实践》旨在为读者提供一个系统的数字设计指南，从基本原理到实际应用，涵盖了数字设计的方方面面。 1. 数字设计的定义和目标 数字设计是指使用数字电路和系统来实现特定的功能目标的设计过程。在这个过程中，设计师需要考虑到各种因素，如电路的可靠性、功耗、面积等，以确保设计的数字电路能够满足实际应用的需求。 2. 数字设计的基本原理 数字设计的基本原理包括数字电路的基本元件，如逻辑门、 Flip-Flop、计数器、加法器等，以及数字电路的设计方法，如Combinational Logic、Sequential Logic和 Finite State Machine等。 3. 数字设计的设计流程 数字设计的设计流程通常包括以下几个步骤： * 需求分析：确定设计的目标和约束条件。 *电路设计：根据需求设计数字电路。 * 仿真验证：使用软件工具对设计的数字电路进行仿真和验证。 * 实现和测试：将设计的数字电路实现并进行测试。 4. 数字设计在实际应用中的应用 数字设计在实际应用中
基于Simulink仿真的直流电机双闭环控制系统设计与分析：转速电流双闭环PWM控制策略及7天报告研究,基于Simulink仿真的直流电机双闭环控制系统分析与设计报告：转速电流双闭环PWM控制策略的7天实践,直流电机双闭环控制系统仿真 simulink仿真 7d 转速电流双闭环 PWM 含有报告哈 ,直流电机; 双闭环控制系统; Simulink仿真; 7d; 转速电流双闭环; PWM; 报告,7天完成双闭环控制系统仿真报告：直流电机转速电流PWM管理与Simulink仿真研究
三目标微电网能量调度优化：经济、环境友好与高效能分配的协同策略研究,微粒群算法在三目标微电网能量调度中的应用：经济、环境友好与优化调度的综合研究,微电网 能量调度 三目标微网调度， 经济调度 环境友好调度 优化调度 微电网能量调度问题的求解 问题描述： - 微电网：包含多个能量源，包括DG（分布式发电设备，如太阳能光伏板、微型燃气轮机等）、MT（燃油发电机）和FC（燃料电池）。 - 目标：通过合理分配各种能源的发电功率，满足负荷需求，同时使得微电网的发电成本最小化。 解决方法： 微粒群算法（Particle Swarm Optimization, PSO）： - 步骤： - 初始化微粒群：根据给定的微电网问题约束，随机生成一定数量的微粒（粒子），每个粒子代表一种发电方案，包含DG、MT和FC的发电功率分配情况。 - 适应度函数：对每个粒子，计算其对应的发电成本，作为其适应度值。 - 更新速度和位置：根据当前适应度值和历史最优适应度值，通过PSO算法的公式，更新每个粒子的速度和位置，以寻找更优的发电功率分配。 - 约束处理：根据问题约束条件，
《无感滑膜技术：Microchip1078代码移植至ST芯片的实践指南》——新手必备的反正切算法与电子资料整合方案,《无感滑膜技术：Microchip1078代码移植至ST芯片的实践指南》——新手必备的反正切算法与电子资料全解析,无感滑膜，反正切，microchip1078代码移植到st芯片上，新手学习必备。 可以提供提供相应文档和keil工程，电子资料， ,无感滑膜; 反正切; microchip1078代码移植; ST芯片; 新手学习; 文档; Keil工程; 电子资料,无感滑膜算法移植至ST芯片的Microchip1078代码迁移指南
风光柴储混合微电网系统中的储能电池与互补能量管理技术研究及MATLAB模拟实现,风光柴储混合微电网系统中的储能电池与互补能量管理技术：基于MATLAB的智能调控体系,风光柴储+混合微电网+储能电池系统+互补能量管理+MATLA ,核心关键词：风光柴储; 混合微电网; 储能电池系统; 互补能量管理; MATLA;,风光柴储混合微网能量管理系统及储能电池应用
永磁同步电机PMSM无感FOC驱动与位置估算源码分享：跨平台兼容、高速动态响应、无需初始角度辨识,永磁同步电机PMSM无感FOC驱动与位置估算源码分享：跨平台兼容、高速动态响应、无需初始角度辨识,永磁同步电机pmsm无感foc驱动代码 位置估算源码 无刷直流电机无感foc源码，无感foc算法源码 若需要，可提供硬件 速度位置估算部分代码所使用变量全部使用国际标准单位，使用不到60行代码实现完整的位置速度观测器。 提供完整的观测器文档，供需要的朋友参考 程序使用自研观测器，代码全部是源码，不含任何库文件 送simulink仿真 代码可读性极好，关键变量注明单位 模块间完全解耦 高级工程师磁链法位置估算代码 跨平台兼容，提供ti平台或at32平台工程 电流环pi参数自动计算 效果如图 实现0速闭环启动 2hz以内转速角度收敛 动态响应性能好 无需初始角度辨识 电阻电感允许一定误差 ,核心关键词： 1. 永磁同步电机 (PMSM) 无感 FOC 驱动代码 2. 位置估算源码 3. 无刷直流电机无感 FOC 源码 4. 无感 FOC 算法源码 5. 硬件支持（可选） 6. 速度位置估算部分
模型可以通过管理器下载，一个sdxlbase一个sdxl refiner。 refiner的作用是先刷小图，满意了再提高分辨率，兼顾速度和质量。 导入ComfyUI可立即使用。