一笑·科奉

vue分页插件制作并提交到github

作者: 一笑, 写于: 2017-10-07 10:38:41

一、在github上新增项目

image.png

二、在本地新建文件夹并克隆项目

image.png

image.png3、初始化插件

三、设计组件样式

image.png

四、编写组件插件骨架

新建两个文件:index.js (插件入口与组件声明) 和 view.vue(分页组件)

index.js

import view from './view'
var Page = {
		
}
Page.install = function(Vue, options){
	// 注册组件
	Vue.component('page-view', view);
}
export default Page;

view.vue

<script>
export default {
	name: 'page-view',
	render: function(h){
		return h('div', 'vue-page lalalalalalla!')
	},
	props: ['total','per_page','current_page','last_page'],
	data: function(){
		return {}
	},
	methods: {
	},
	created: function(){
		console.log('test');
	}
}
</script>

OK,一个vue分页插件完成鸟。可以直接在vue入口文件main.js中调用了(插件路径以实际情况而定,这里是:./assets/plugins/vue-page)

image.png

在随便一个组件模板中调用:

image.png

显示效果:

image.png

五、实际功能实现



分类: Vue.js, 浏览: 377, 评论: 0
原创文章转载请注明:转自《一笑·科奉》 原文地址:https://www.kefong.com/post/55.html