前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前设定哪些参数需要暴露出来给父组件传递 <Paging :name="name" @change="onPageChange" :page-size="size" :total="total" layout="jum…

前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的bootstrap框架,所以需要使用到vue来实现前端的分页效果. 先看实现效果图 代码实现 分析一下,我们想要的效果是什么样的 1.每页只显示10个可见分页数 2.当点击到第7页的时候,左边显示从2开始,第一页不可见,右边显示到11页 对于的算法如下: left = curPage - pageGroup/…

之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd2017/p/9714633.html).由于工作上的需要,写了很多表格,因此对于分页有了新的理解,在这里重新总结一下,用 element ui 自带的分页组件实现前端分页和后端分页. 首先我们将分页功能的代码封装成一个组件,这样以后要用的时候可以直接拿,这里需要一个预备知识就是父子组件的交互,不清楚的…

今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组件传哪些必要的参数,即子组件需要提供什么接口 组件需要去实现哪些功能 我们要返回哪些参数给用户 针对这几点,做如下分析: 先上简单的模板: <template lang="html"><div class="page"> <ul> &…

eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未定义. 原因: 1:要验证的DOM,还没有加载出来. 2:有可能this.$refs[ruleForm].validate() 方式不识别.需要使用: this.$refs.ruleForm.validate(); 解决方法 1: 要验证的DOM,还没有加载出来. this.ticketDialog…

1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie 然后一路回车 接着 进入项目目录 cd vue-movie 然后安装项目依赖包 cnpm install 没安装cnpm的先执行这个命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 接着 npm run dev 看到…

vue-swiper 基于 Vue2.0 开发,基本满足大部分功能 轻量.高性能轮播插件.目前支持 无缝衔接自动轮播.无限轮播.手势轮播 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB 大小 性能还是杠杠滴 demo…

前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_eleme,欢迎Star. ratings seller 一.评论组件-ratings 评论组件主要分为三块 评分信息-overview 评论选择-ratingselect 评论详细信息 评分信息部分 左侧评分 布局Dom <div class="ratings-content">…

基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/article/129158.html 基于Vue.Vuex.Vue-router实现的购物商城(原生切换动画)效果 地址:http://www.jb51.net/article/132515.html 一个vue2.0+vuex+vue-router搭建的单页潮流购物网站 地址:https://segm…

基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova 打包成APP 从零开始搭建,适合新手练手参考.GitHub地址,api来源于网上,仅供开发参考之用,禁用于商业,否则后果自负. 在线demo apk安装包后续再放出吧 O(∩_∩)O 屏幕截图,该项目使用了响应式布局,适配全分辨率的屏幕 移动端效果 启用侧边栏模式 PC端效果 主要特色: 组件化开…