v-page for Vue2.x
一个基于 Vue2.x 开发的，简洁易用的独立分页插件，支持分页菜单，i18n 多语言支持
插件预览
使用入门、文档、实例
更多文档和实例请访问：
项目 Github 地址：https://github.com/TerryZ/v-page
插件安装
# install dependencies npm install v-page --save
在你的 main.js 文件中引入插件
import Vue from 'vue' import vPage from 'v-page'; ... Vue.use(vPage);
在你的 component 中使用
template code
< template >
< ! -- v-bind 'setting' data to config page bar -- >
< ! -- bind event 'page-change' to receive page info change -- >
< v-page :setting="pageSet" @page-change="pageChange" >< /v-page >
< /template >script code
export default {
name: 'myComponent',
data(){
return {
pageSet: {
totalRow: 0,//required option
language: 'en',//default: 'cn'
pageSizeMenu: [20,100]//default: [10, 20, 50, 100]
}
}
},
methods:{
//receive page info change callback
pageChange(pInfo){
console.log(pInfo);//{pageNumber: 1, pageSize: 10}
}
}
};-
vue 搭建的前端项目，需要用到分页插件，在github 上搜索，样式都比较简单，不太符合要求，终于找到一个整体不错的插件 地址：https://terryz.gitee.io/vue/#/page/demo 文档也蛮详细，但入参除了语言，样式，总条数，每页显示条数外没有其他入参，这个比较头大（语言啥这些自己也不需要）； 因为我的列表页有很多筛选条件，点击其他筛选条件，当前页应该回到第一页，而不是
-
v-for 循环 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=devi
-
关于v-slot指令的详细了解 相对于v-slot指令，对大家来说都应该不是很陌生，在 2.6.0 中，vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 在新版中的应用，当然vue官方暂时还木有删除老版本中具名插槽和作用域插槽的和 slot-scope，也就是说，还可以用，但是不推荐，在vue-cli 3.0将不能使用
-
插槽 在2.6.0中，我们为具名插槽和作用域插槽引入了一个新的统一的语法，即v-slot。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute中。 1、插槽内容 Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。 它允许你像这样合成组件： import Butto
-
首先，我们来介绍一下，v-for官方文档上的基本用法 官网上：v-for的基本用法 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名： <div v-for="item in items"> {{ item.text }} </div> 另外也可以为数组索引指定别名 (或者用于对象的键)： <div v-for="
-
//只是截取了部分代码 { label: "时间", prop: "date", fixed: true, width: 150, textAlign: "center", renderCell(h, scope) { const {column,row}=scope;
-
v-model 三元运算符 I started using ternary operator logic about six months ago and notice myself using shorthand if/else logic all the time. It shortens my code, the time to write it, and makes me look sma
-
1.通过请求获取权限，放入localStorage： （这里是多个权限，保存为字符串，用逗号隔开） window.localStorage.setItem("permissionPage", "editPage,detailPage"); window.localStorage.setItem("permissionButton", "canEdit,canDelete"); 2.在main.t
-
原文链接:https://blog.csdn.net/sunhuaqiang1/article/details/95474410 使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。 //全局loading <template> <div v-loading="loading"> </div> </template> 在data 中定义初始化， loading
-
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target
-
2021-02-22更新 小程序增加了一个简易双向绑定 用法 <input model:value="{{value}}" /> 输入时，data中的value也会被相应的改变， 但是用于双向绑定的表达式有如下限制： 只能是一个单一字段的绑定，如 <input model:value="值为 {{value}}" /> <input model:value="{{ a + b }}" />
-
<vxe-table-column v-if="pageInfo.id === 4 ||pageInfo.id === 8" title="上报类型" width="100" key='1'> <template v-slot="{row}"> <span v-if="row.reportType == 1
-
创建一个loading文件夹。包含loading.vue、loading.js、index.js loading.vue 写布局及css样式 实例代码 <template> <div class="loading-container" v-show="loadingShow"> <div class="pageloading"> <span></sp
-
本文向大家介绍详解基于webpack2.x的vue2.x的多页面站点，包括了详解基于webpack2.x的vue2.x的多页面站点的使用技巧和注意事项，需要的朋友参考一下 本文介绍了基于webpack2.x的vue2.x的多页面站点，分享给大家，具体如下： vue的多页面 依旧使用vue-cli来初始化我们的项目 然后修改主要目录结构如下： 编写每个页面 可以看到这里我们有4个单独的页面，分别是b
-
本文向大家介绍基于vue.js的分页插件详解，包括了基于vue.js的分页插件详解的使用技巧和注意事项，需要的朋友参考一下 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。想了解更多，请戳http://cn.vuejs.org/ html代码： css部分，可根据自己的实际需要进行调整： js部分： 首先要创建一个基本组件 继而要利用computed计算页码，
-
在本章节中，我们将学习如何为 Docusaurus 创建独立页面（pages）。 这对于创建类似展示页面、练习页面或支持页面等 非经常修改的独立页面 非常有用。 独立页面的功能由 @docusaurus/plugin-content-pages 插件提供。 你可以使用 React 组件或 Markdown 来创建独立页面。 note 独立页面是没有侧边栏的，只有 文档（即 docs 目录下的文件）
-
我们正在使用Swagger、AWS API网关和Lambda函数与NodeJS构建API。API网关将进行请求验证，但是根据设计，lambda函数需要将请求对象重新验证为API网关代理请求事件。这是有意义的，因为理论上我们可以通过其他事件源（例如SNS）调用lambda函数来重用它们。 因此，我们需要一个NodeJS工具，它可以根据swagger规范验证请求（不仅是正文，还有参数等）-正是swag
-
独立于window的按钮，类似于屏幕 Assistive Touch 键（小圆点）。效果就是，无论如何切换视图，或者弹出键盘，这个按钮都始终位于屏幕最前面，也就是说，这是一个地球人无法遮挡的按钮：）具体请看视频。 作者说：目前网上类似的按钮工具条有很多，但是能够独立于window并且随意拖动的好像没有。写这个工具的目的在于方便通过始终在屏幕上的按钮对全局的控制。 [Code4App.com]
-
本文向大家介绍基于Bootstrap3表格插件和分页插件实例详解，包括了基于Bootstrap3表格插件和分页插件实例详解的使用技巧和注意事项，需要的朋友参考一下 首先看下实现效果图，如果觉得还不错，请参考实现代码。 上面数据 下面分页 使用方法 1 导入bootstrap的css 2 导入jquery 3 导入表格分页插件 lTable.js 4 添加html标签 并对id 赋值 5 获取数据