一、vue-cli 生成项目,安装element-ui
vue create projectName cd projectName npm install element
二、在src 目录下,新建lib目录及相关文件,且修改配置文件
1、./lib/index.js 文件
import SzrTable from './szr-table/index.js' // 存储组件列表 const components = [ SzrTable ] const install = function (Vue) { if (install.installed) return components.map(component => Vue.component(component.name, component)) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { install, SzrTable }
2、./lib/szr-table/index.js
import SzrTable from './SzrTable.vue' SzrTable.install = function (Vue) { console.log(SzrTable.name) Vue.component(SzrTable.name, SzrTable) } export default SzrTable
3、./lib/szr-table/SzrTable.vue
<!-- * @Description: * @Author: xihong * @Date: 2019-09-17 09:55:12 * @LastEditors: xihong * @LastEditTime: 2019-10-28 15:05:54 --> <template> <div> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column v-if="isShowCheckbox" type="selection" width="50" align="center" > </el-table-column> <el-table-column type="index" label="序号" width="50" align="center" v-if="isShowOrder" > </el-table-column> <el-table-column v-for="(type,index) in tableType" :prop="type.prop" :label="type.label" :min-width="type.width" align="center" > </el-table-column> <el-table-column label="操作" width="150" fixed="right" align="center" v-if="btnType" > <template slot-scope="scope"> <el-button type="success" plain size="small" @click="editTable(scope.row)" >编辑</el-button> <el-button type="danger" plain size="small" @click="deleteTable(scope.row)" >删除</el-button> </template> </el-table-column> </el-table> </template> <script lang="ts"> export default { name: "szr-table", props: ['btnType', 'tableType','isShowCheckbox','tableData','isShowOrder'], methods:{ handleSelectionChange(val){ this.$emit("handle-selection-change",val) }, editTable(val){ this.$emit("edit-table",val) }, deleteTable(val){ this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$emit("delete-table", val); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); return; }); } } } </script> <style scoped lang="stylus"> .pageContainer { margin: 10px; display: flex; justify-content: flex-end; } </style>
4、package.json 文件
{ "name": "szrpubliccomponent", "version": "0.6.0", "private": false,
// 引用的文件名称 "main": "lib/index.umd.js", "directories": { "dist": "dist" }, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build",
// 打包的文件 --name打包后的文件名称 --dest 打包文件所在的文件夹名称 "build-bundle": "vue-cli-service build --target lib --name index --dest lib ./src/lib/index.js" }, "dependencies": { "core-js": "^3.3.2", "element-ui": "^2.12.0", "vue": "^2.6.10", "vue-router": "^3.1.3" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.0.0", "@vue/cli-service": "^4.0.0", "stylus": "^0.54.7", "stylus-loader": "^3.0.2", "vue-template-compiler": "^2.6.10" } }
5、生成文件,打包上线
npm run build-bundle // 没有npm ,在官网上注册一个 npm login // 根据提示输入相关信息 npm publish // 每次发布的版本号需要不一致
6、npm install szrpublliccomponent,再如下面的方式使用
<template> <div id="app"> <szr-table :tableData="tableData" :tableType="tableType" :isShowCheckbox="true" :isShowPagination="true" btnType="jsj" ></szr-table> </div> </template> <style lang="stylus"></style> <script lang="ts"> export default { name: "App", data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄" } ], tableType: [ { prop: "date", label: "日期", width: "150" }, { prop: "name", label: "姓名", width: "100" }, { prop: "address", label: "地址", width: "300" } ] }; } }; </script> <style lang="stylus"> $colorGray = rgb(84, 92, 100); $colorWhite = #FFF; $colorLightGray = #dadada; * { margin: 0; padding: 0; font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } html, body { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: #FFF; overflow: scroll; -webkit-overflow-scrolling: touch; } .active { color: #FFF !important; background-color: #409EFF !important; border-color: #409EFF !important; .el-icon-close { color: #FFF !important; } } li { list-style: none; } a { text-decoration: none; cursor: pointer; } .el-header { background-color: $colorGray; color: $colorWhite; text-align: center; line-height: 60px; width: 100%; z-index: 7; position: fixed; left: 0; top: 0; } .el-aside { background-color: $colorGray; color: $colorWhite; text-align: center; } .el-menu { border-right-width: 0 !important; } .el-tag { margin-right: 10px; margin-bottom: 10px; cursor: pointer; } .input-new-tag { width: 90px; margin-left: 10px; vertical-align: bottom; } .fontsize26 { font-size: 26px; color: $colorLightGray; } .fontsize22 { font-size: 22px; color: $colorLightGray; margin-right: 8px; } .header { display: flex; justify-content: flex-end; text-align: right; .menuBtn { width: 180px; } .userBtn { flex: 1; } } .menuMarginTop { margin-top: 60px !important; } @media (max-width: 768px) { .el-container { display: block !important; } .mainMarginTop { margin-top: 0px !important; } .navMenu { width: 100% !important; } .header { .menuBtn { width: auto; } } .el-message-box { width: 70% !important; } } @media (min-width: 768px) { .el-container { height: 100vh; display: flex !important; } .mainMarginTop { margin-top: 60px !important; } .navMenu { width: 200px !important; min-height: 100vh; } .el-message-box { width: 45% !important; } } </style>
7、script 引用方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link rel="stylesheet" href="https://unpkg.com/szrpubliccomponent@0.6.0/lib/index.css"> </head> <body> <div id="app"> <szr-table :table-data="tableData" // 属性大写的字符需要改成小写,且用‘-’连接(例如 : tableData 写为 table-data) :table-type="tableType" :is-show-checkbox="true" :is-show-pagination="true" :btn-type="true" @handle-selection-change="handleSelectionChange($event)" @edit-table="editTable($event)" @delete-table="deleteTable($event)" ></szr-table> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/szrpubliccomponent@0.6.0/lib/index.umd.js"></script> <script> new Vue({ el: '#app', data: function() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄" } ], tableType: [ { prop: "date", label: "日期", width: "150" }, { prop: "name", label: "姓名", width: "100" }, { prop: "address", label: "地址", width: "300" } ], multipleSelection:[] } }, created(){ console.log(this.tableData) }, methods:{ handleSelectionChange(val){ console.log(val) }, editTable(row){ console.log(row) }, deleteTable(row){ console.log(row) } } }) </script> </html>