浅谈ng-zorro使用心得


Posted in Javascript onDecember 03, 2018

前言

本周使用ng-zorro做了项目的原型,对它也有了一定的了解,总的来说不难,可以用强化版boostrap来理解它,由于黄庭祥初始化工作做得很好,在写的过程遇到的问题不是很麻烦,感谢祥哥。

问题一、button不起作用

问题描述:button按钮按下无响应,如下图:

代码如下:

浅谈ng-zorro使用心得

解决思路:

首先删除button中所有的样式,保留最基本的html,发现依然无响应,说明问题不在button身上

排查栅格布局,发现table标签被我放在了button同一行新建了一个row,col放置table,问题解决

浅谈ng-zorro使用心得

总结:看来ng-zorro的栅格要比bootstrp严格,不允许随便嵌套内容

问题二、routerLink不起作用

问题描述:在button中使用routerLink无法进行页面跳转

代码如下

<button nz-button routerLink="/main/grade/add"><i nz-icon type="plus"></i>增加</button>

解决思路:

  • 打开控制台,点击button,发现无报错信息
  • 将跳转方式改成a标签的herf,发现可以跳转,说明url定义无误
  • 询问黄庭祥,检查,发现我没有在父组件中写<router-outlet></router-outlet>缺少路由出口,将其添加,问题解决

浅谈ng-zorro使用心得

搜索栏button不对齐

问题描述:在使用官方文档的一个搜索框时,样式与官方文档不一致

官方的样式:

浅谈ng-zorro使用心得

复制过来以后的样式:

浅谈ng-zorro使用心得

可以看到button没有附着在input上

解决思路:

  • 打开检查,寻找该控件的css样式
  • 发现去除该处样式,button的位置恢复正常

浅谈ng-zorro使用心得

原因:该样式是我自己添加的,为了能让多个button间有空隙,但却覆盖了搜索框button的样式,最后去除该样式,用 来实现button间的空隙

问题四、 左侧导航栏无法向下滚动

问题描述:当左侧导航栏内容超出页面时,无法滚动下滑,如下图:

浅谈ng-zorro使用心得

解决思路:

  • 查看官方文档的示例代码,对比参考,看不出异常
  • 谷歌搜索"ng-zorro submenu overflowed",结果太少
  • 将我们的导航栏的代码全部注释,换成官方的示例代码,发现问题依然存在,说明我们侧导航栏的样式写得有问题
  • 打开检查,排查css样式,发现是position fix惹的祸,将其去除后,导航可以滚动

浅谈ng-zorro使用心得

总结

本周写原型的工作并不复杂,主要是在看文档理解需求上遇到一些问题,经常返工重做,另外,感觉ng-zorro的官方文档写得不是很全,在写一些功能时经常需要猜,而且一旦改动样式就会出现一些不可预料的错误。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
中止javascript执行的方法
Feb 14 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
写一个Vue loading 插件
Nov 09 Javascript
JS跨域请求的问题解析
Dec 03 #Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 #Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
You might like
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
js比较日期大小的方法
2015/05/12 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
vue跨域解决方法
2017/10/15 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python字符串的修改方法实例
2019/12/19 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
国企干部对照检查材料
2014/08/22 职场文书
学习保证书怎么写
2015/02/26 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android