61阅读

vue.js-Vue.js仿Metronic高级表格(一)静态设计

发布时间:2017-08-11 所属栏目:表格设计

一 : Vue.js仿Metronic高级表格(一)静态设计

Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables,本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库,jQuery做部分用户交互(弹窗)。

使用到的库:Vue 2.0,Bootstrap3、jQuery2、font-awesome4,均可在CDN下载

需要注意的是,Vue最好使用开发版本

一、需求和原型设计

产品目标是一个图书管理表格,书籍字段:书籍名称、分类、价格、更新时间。

需求:

① 书籍信息的增删改

② 分页功能,并且能自行选择页容量

③ 能展示 根据任一字段进行关键字匹配后的条目

④ 能自动保存本次操作的数据

原型:


原型说明:

① 页码区提供 上一页、页码列表、下一页 按钮

② 点击修改时,上部表单内容为原始数据,“添加”按钮变为“修改”,此时点击修改,才将数据保存生效;如果此时点击重新填写则是放弃修改。

③ 点击删除时弹框提示是否删除

二、准备工作

① 搭建运行环境

不建议使用浏览器直接打开网页,建议搭建一个Web环境来进行测试。

建议使用WAMP、XAMPP等集成环境,安装简便易于操作

② 引入各类库

 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="/static/vue.js"></script> 

注意vue.js的路径,下载到本地进行引入(此处使用的是web绝对路径'/static/vue.js')

③ 进行最简单的Vue测试

 <div id="content"> {{msg}} </div> 

 <script> window.onload = function () { var vm = new Vue({ el:'#content', data: { msg:'hello vue' } }); } </script> 

值得注意的是,el选项不能为‘body'或‘html',否则会提示警告信息并且不能正常渲染。

生产版本的vue则不会产生警告信息,并且不能正常渲染

三、数据输入(添加、修改)

按照原型图:

写出表单:

 <form action="" class="col-md-4 col-md-offset-4 form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label" >书名: </label> <div class="col-md-9"> <input type="text" class="form-control" placeholder="请输入书名"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" >类别: </label> <div class="col-md-9" > <select class="form-control"> <option value="0">科技</option> <option value="1">文化</option> <option value="2">经济</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" >价格: </label> <div class="col-md-9"> <input type="text" class="form-control" placeholder="请输入价格"> </div> </div> <div class="form-group text-right"> <input type="button" class="btn btn-primary" value="添加"> <input type="reset" class="btn btn-default" value="重新填写"> </div> </form> 

值得关注的是:

① 'form-control' 这个class样式会独占一行。要使label和input在一行,利用bootstrap的栅格化布局即可,经过调整得出3:9的布局是比较合适的。

② 'form-horizontal' 样式作用于form元素可以美化表格。它可以让每个form-group之间留出间隙,变得不那么紧凑;还可以使label的内容居中。

③ ‘col-md-4 col-md-offset-4' 可以使一个元素居中,并且宽度是‘col-md-4'

四、展示

① 表头


 <div class="form-horizontal"> <div class="form-group col-md-6 "> <label class="col-md-2 control-label" >每页</label> <div class="col-md-3"> <select class="form-control"> <option value="5">5条</option> <option value="10">10条</option> <option value="15">15条</option> <option value="20">20条</option> </select> </div> </div> <div class="form-group col-md-6"> <label class="col-md-3 col-md-offset-3 control-label" >搜索: </label> <div class="col-md-6"> <input type="text" class="form-control" placeholder="请输入关键字"> </div> </div> </div> 

这部分较简单,这里依然使用到了‘form-horizontal'来调整布局

② 主体


 <table class="table table-bordered table-hover table-striped"> <thead> <tr> <td width="50">序号</td> <td>书名</td> <td>类别</td> <td>价格(元)</td> <td>更新时间</td> <td width="140">操作</td> </tr> </thead> <tbody > <tr> <td>1</td> <td>标准日本语</td> <td>文化</td> <td>¥ 31.00</td> <td>2017年04月16日14:26:43</td> <td> <button class="btn btn-info btn-xs"> <i class="fa fa-pencil"></i> 修改 </button> <button class="btn btn-danger btn-xs"> <i class="fa fa-trash"></i> 删除 </button> </td> </tr> </tbody> </table> 

① ‘table-bordered‘ 添加单元格的边框

② 'table-hover‘ 鼠标悬停一行有样式

③ 'table-striped' 斑马线效果

五、删除

删除弹窗,原型图没给出,所以自行发挥想象力。


模态框:

 <div id="general_dialog" class="modal fade bs-example-modal-sm" role="dialog"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal" >×</button> <h4 class="modal-title">提示</h4> </div> <div class="modal-body"> 您确认要删除xxx吗? </div> <div class="modal-footer text-right"> <button class="btn btn-default" data-dismiss="modal">取消</button> <button class="btn btn-danger" data-dismiss="modal">删除</button> </div> </div> </div> </div> 

这样写,初始是不会出来的,在删除按钮元素上添加:

data-toggle="modal" data-target="#general_dialog" 

那么点击按钮的时候,就会弹出来(此处需要引入bootstrap.js哦)

① ‘fade‘ 表示模态框是淡入淡出的

② 'bs-example-modal-sm' 是指模态框的大小是'sm‘

③ 'ב是一个实体标记,代表是 ×

五步完成后,样子是:


(额这个录屏的工具貌似吧table-striped的效果抹去了。。。)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持61阅读。

二 : Vue.js之slot深度复制详解

前言

在Vue中,slot是一个很有用的特性,可以用来向组件内部插入一些内容。slot就是“插槽”的意思,用大白话说就是:定义组件的时候留几个口子,由用户来决定插入的内容。

例如我们定义一个组件MyComponent,其包含一个slot:

 Vue.component('MyComponent', {  template: `  <div>  <slot></slot>  </div>  ` })

当调用<MyComponent>123</MyComponent>时,会渲染为如下DOM结构:

 <div>  123 </div>

现在又有新需求了,我们希望调用<MyComponent>123</MyComponent>时,渲染出这样的DOM结构:

 <div>  123  123 </div>

看起来很容易实现,即再为MyComponent添加一个slot:

 Vue.component('MyComponent', {  template: `  <div>  <slot></slot>  <slot></slot>  </div>  ` })

渲染出的结构也确实如你所愿,唯一美中不足的是控制台有一个小小的Warning:

 Duplicate presence of slot "default" found in the same render tree

如果你不是强迫症患者,这时候你可以收工安心回家睡觉了。直到有一天你的同事向你抱怨,为什么向MyComponent插入一个自定义组件会渲染不出来?

例如有一自定义组件MyComponent2:

 Vue.component('MyComponent2', {  template: `  <div>456</div>  ` })

当调用<MyComponent><MyComponent2></MyComponent2></MyComponent>时,预期渲染为如下DOM结构:

 <div>  <div>456</div>  <div>456</div> </div>

为什么不能正常工作呢?估计是前面的那个Warning搞得鬼,通过查询发现在Vue 2.0中不允许有重名的slot:

重名的 Slots 移除

同一模板中的重名 已经弃用。当一个 slot 已经被渲染过了,那么就不能在同一模板其它地方被再次渲染了。如果要在不同位置渲染同一内容,可一用 prop 来传递。

文档中提示可以用props来实现,然而在我的用例中显然是不合适的。经过搜索后,最靠谱的方法是手写render函数,将slot中的内容复制到其他的位置。

将之前的MyComponent改为render函数的方式定义:

 Vue.component('MyComponent', {  render (createElement) {  return createElement('div', [  ...this.$slots.default,  ...this.$slots.default  ])  } })

在上面的定义中我们插入了两个this.$slots.default,测试下能不能正常工作。然而并没有什么卵用,Vue文档在render函数这一章有以下说明:

VNodes 必须唯一

所有组件树中的 VNodes 必须唯一

这意味着我们不能简单地在不同位置引用this.$slots.default,必须对slot进行深度复制。深度复制的函数如下:

 function deepClone(vnodes, createElement) {  function cloneVNode (vnode) {  const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode));  const cloned = createElement(vnode.tag, vnode.data, clonedChildren);  cloned.text = vnode.text;  cloned.isComment = vnode.isComment;  cloned.componentOptions = vnode.componentOptions;  cloned.elm = vnode.elm;  cloned.context = vnode.context;  cloned.ns = vnode.ns;  cloned.isStatic = vnode.isStatic;  cloned.key = vnode.key;  return cloned;  }  const clonedVNodes = vnodes.map(vnode => cloneVNode(vnode))  return clonedVNodes; }

上面的核心函数就是cloneVNode() ,它递归地创建VNode,实现深度复制。VNode的属性很多,我并不了解哪些是关键属性,只是参照着Vue的源码一并地复制过来。

基于以上函数,我们更改MyComponent的定义:

 Vue.component('MyComponent', {  render (createElement) {  return createElement('div', [  ...this.$slots.default,  ...deepClone(this.$slots.default, createElement)  ])  } })

经测试,一切正常。

总结

在Vue 1.0中重名的slots并不会出现什么问题,不知道为什么在2.0中取消了这个功能。我听说React提供了复制Element的标准函数,希望Vue也能提供这个函数,免得大家踩坑。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

三 : vue如何引用其他组件(css和js)

1.vuejs组件之间的调用components

注意:报错Do not use built-in or reserved HTML elements as component id:

修改组件的名字,例如不能使用address为组件名字

组件名字不要使用内置的或保留HTML元素为组件id,

App.vue是一个入口,vue必须注册才能使用

2.vue引入外部的css,放在和引入vue的位置一样

./代表当前项目,../代表上一级项目

 import '../static/style/reset.css' 

如果引用的css,js不起作用,在index.html里面引用,还是不起作用,注意引用顺序

3.关于购物车,Cannot read property 'get' of undefined(…)

解决办法:

在app.vue里面引入js不起作用,引用node_modules里面的也不起作用,在index.html里面引入文件,这个文件是放在style里面的,记得url里面的路径

解决方案:

1.在index里面引入axios.js,vue里面用axios;如果vue里面用vue-resource的$http会报错get“”

 axios({  method: 'get',  url: '/static/style/cart.json',  data: {  }  }) 

第二种:使用vue-source,引入外部的js

注意引入顺序

  <script type="text/javascript" src="static/style/vue.min.js"></script>  <script type="text/javascript" src="static/style/vue-resource.min.js"></script>  <script type="text/javascript" src="static/style/cart.js"></script>

这是cart.js里面的内容

 cartView:function(){  var _this=this //记得写在get上面,不然取不到值  this.$http.get('/static/style/cart.json',{'id':123}).then(function(res){  this.pro=res.body.name;  //_this.produceList=res.body.result.list;  console.log(res.body.name)  }) }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持61阅读。

本文标题:vue.js-Vue.js仿Metronic高级表格(一)静态设计
本文地址: http://www.61k.com/1084892.html

61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1