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 相关文章推荐
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
使用angular写一个hello world
Jan 23 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 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 cdata 处理(详细介绍)
2013/07/05 PHP
php写的AES加密解密类分享
2014/06/20 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
用javascript实现自定义标签
2007/05/08 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python应用文件读取与登录注册功能
2019/09/23 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书