vue 封装 Adminlte3组件的实现


Posted in Javascript onMarch 18, 2020

之前找了一下vue关于adminlte3的组件库,github大部分都是2的。比较老了,都是几年前更新的。有adminlte3的,但是都只封装了一两个组件,而且居然还引入jq,然后一股脑把adminlte3的html代码复制进去,这样就成了一个组件。感觉没啥用。感觉是那些作者在练手。

vue引入jq我觉得真的没必要,会产生很多bug,可能可以解决,但是我之前遇到过引入jq出现单页面进入之后jq没法挂载,要刷新才能挂载的情况,蛋疼,一直没解决。所有我打算自己封装一个vue版本的adminlte3.
目前已经封装了快30个组件了。npm版本到0.1.8了。

github 地址nly-adminlte-vue

vue 封装 Adminlte3组件的实现

vue 封装 Adminlte3组件的实现

vue 封装 Adminlte3组件的实现

目前完成事情

组件

  • 皮肤 theme
  • 折叠板 collapse
  • 导航栏 navbar
  • 导航 nav
  • 栅格布局 grid row col
  • 容器 container
  • 正文容器 content
  • 包装容器 wrapper
  • 文字路由 link
  • 按钮 button
  • 开关 switch
  • 卡片 card
  • 小标签 badge
  • 下拉菜单 dropdown
  • 图标 icon
  • 右侧收缩板 control-sidebar
  • 罩层 overlay
  • 弹框消息 toast
  • 旋转loading spinner
  • 进度条 progress
  • 时间轴 timeline
  • 面包屑导航 breadcrumb

指令

  • 左侧导航栏收起指令 v-nly-sidebar-collapse
  • 右侧收缩版收起指令 v-nly-control-sidebar-collapse
  • 卡片最大化指令 v-nly-card-maximized
  • 折叠版收起展开指令 v-nly-toggle

使用github下载项目

git clone https://github.com/nejinn/nly-adminlte-vue.git

npm install 

npm run server

// 查看example,所有组件demo都在这里
http://localhost:8080

npm下载

npm install nly-adminlte-vue

main.js

import "nly-adminlte-vue/dist/adminlte/css/adminlte.css";
import "nly-adminlte-vue/dist/adminlte/fontawesome-free/css/all.css";
import "nly-adminlte-vue/dist/adminlte/icon/iconfont.css";
import "nly-adminlte-vue/dist/nly-adminlte-vue.css";
import { NlyAdminlteVue } from "nly-adminlte-vue";
Vue.use(NlyAdminlteVue);

到此这篇关于vue 封装 Adminlte3组件的实现的文章就介绍到这了,更多相关vue 封装Adminlte3 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
jquery自定义表格样式
Nov 23 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
利用PM2部署node.js项目的方法教程
May 10 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 #Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 #Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 #Javascript
js实现简单点赞操作
Mar 17 #Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 #Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 #Javascript
JavaScript实现横版菜单栏
Mar 17 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
Ext 今日学习总结
2010/09/19 Javascript
再论Javascript的类继承
2011/03/05 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
vue实现拖拽效果
2019/12/23 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
深入浅析python 中的匿名函数
2018/05/21 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
教师读书笔记
2015/06/29 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python