vue+iview的分页组件封装
1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件
2.index.less文件
//需要修改的样式
.ivu-page-options {
margin-left: 10px;
.ivu-page-options-sizer {
margin-right: 0;
}
}3.index.js文件
import "./index.less";
import component from "./src/main";
/* istanbul ignore next */
component.install = function (Vue) {
Vue.component(component.name, component);
};
export default component;4.src文件夹中的main.vue
5.在components中创建index.js,用于全局引入
import GlobalPage from "@/components/pagination/index.js";
export default (Vue) => {
Vue.component("GlobalPage ", GlobalPage );
}6然后在全局的main.js引入,可全局使用
import components from "@/components/index.js"; Vue.use(components)
7.组件的使用