e-web-basic
Project setup
npm install
项目示例启动
npm run serve
项目打包并发布到到npm
npm run pub
使用示例 Install
npm install e-web-basic --save || yarn add e-web-basic
//main.js引入
import Vue from 'vue';
import eWebBasic from 'e-web-basic';
import App from './App.vue';
Vue.use(eWebBasic);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount('#app');
基础包说明
此基础包含:`公共组件` `公共方法` `自定义指令` `过滤器` `公共css` `以及axios的封装`
公共组件
e-table //表格
使用方式:
<e-table ref="table" api="getDataUrl" params="{name:'wang'}"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> </e-table> //重新加载表格 this.$refs.table.reload(1)Table Attributes:
参数 说明 类型 默认值 api 获取数据接口 string - params 接口请求参数 object,tring,number {page:1,limit:15} page 是否需要分页 boolean true init 是否自动初始化 boolean true 其余属性以及方法el-table保持一致 e-views //图片查看
使用方式:
//支持混合插入 只识别img标签 缺点:如果当前页出img格式的表情也会当前图片查看 <e-views> <div><img src="/1.png"/><img src="/1.png"/></div> </e-views>
公共方法
使用方式:
let obj = {a:{b:2}} //深度拷贝对象 let newObj = this.$util.deepCopy(obj)
方法名称 说明 $util.deepCopy 对象深拷贝 $util.isElement 判断是不是dom元素 $util.isWindow 判断是否是window $util.isEmptyObject 判断是否是空对象 $util.type 数据类型判断 $local.save 针对localStrong的操作 保存到localStrong里 this.$local.save('name','张三') $local.fetch 获取localStrong里的内容 this.$local.fetch('name') $local.clear 清空token $local.key 获取localStrong里所有keys
过滤器
使用方式:
<div>{{time | timeToStr}}</div>
名称 说明 默认参数 timeToStr 时间戳转字符串 详细参数参考moment 'YYYY-MM-DD' toThousand 千分位分隔符 10000 => "10,000" -
自定义指令
使用方式:
//弹出框增加拖动指令 <el-dialog v-dialogDrag></el-dialog>
名称 说明 v-dialogDrag 弹出框增加拖动功能 v-clipboard 复制当前内容到剪贴板 v-focus 输入框获得焦点
elementUi表单自定义验证
使用方式:
//验证 输入内容必须是邮箱 <el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ]"> <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item>
名称 说明 age 年龄,只能是0到120的正整数 phone 手机号验证 name 姓名,只能是中文或者英文 IDCard 身份证验证 number 只能是数字 price 金额验证,小数不能超过两位 zipCode 邮编验证
axios 封装后的使用方法
使用方式:
//请求数据 getData(){ this.loading = true this.$api.getDataApiUrl() .then(res=>{ let data = res.data || {} }).finally(res=>{ this.loading = false }) }
基础包css
使用方式:
//元素距上10px 子元素左浮动 文字居中 <ui class="mt10 ac" <li class="fl">1</li> <li class="fl">2</li> <li class="fl">3</li> <li class="fl">4</li> </ui>
body{ background: #fff }
/*字体*/
.b{font-weight: bold;}
.n{font-weight: normal;}
.f12{ font-size: 12px;}
.f13{ font-size: 13px;}
.f14{ font-size: 14px;}
.f15{ font-size: 15px;}
.f16{ font-size: 16px;}
.f18{ font-size: 18px;}
.f20{ font-size: 20px;}
.f22{ font-size: 22px;}
.f24{ font-size: 24px;}
.f26{ font-size: 26px;}
.f28{ font-size: 28px;}
.f30{ font-size: 30px;}
.f35{ font-size: 35px;}
/*边距*/
.m0{margin:0;}
.m5{margin:5px;}
.m10{margin:10px;}
.m15{margin:15px;}
.m20{margin:20px;}
.m25{margin:25px;}
.m30{margin:30px;}
.m35{margin:35px;}
.mt0{margin-top: 0px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mb0{margin-bottom: 0px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb35{margin-bottom: 35px;}
.ml0{margin-left:0;}
.ml5{ margin-left: 5px;}
.ml10{ margin-left: 10px;}
.ml15{ margin-left: 15px;}
.ml20{ margin-left: 20px;}
.ml30{ margin-left: 30px;}
.ml35{ margin-left: 35px;}
.ml40{ margin-left: 40px;}
.ml45{ margin-left: 45px;}
.mr0{margin-right: 0px;}
.mr5{ margin-right: 5px;}
.mr10{ margin-right: 10px;}
.mr15{ margin-right: 15px;}
.mr20{ margin-right: 20px;}
.mr25{ margin-right: 25px;}
.mr30{ margin-right: 30px;}
.mr35{ margin-right: 35px;}
/*内边距*/
.p0{padding:0px;}
.p5{padding:5px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p20{padding: 20px;}
.p25{padding: 25px;}
.p30{padding: 30px;}
.pt0{padding-top:0px;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt25{padding-top: 25px;}
.pt30{padding-top: 30px;}
.pt35{padding-top: 35px;}
.pb0{padding-bottom:0px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb25{padding-bottom:25px;}
.pb30{padding-bottom:30px;}
.pb35{padding-bottom:35px;}
.pl0{padding-left:0px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl25{padding-left: 25px;}
.pl30{ padding-left: 30px}
.pl35{padding-left:35px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{ padding-right: 20px}
.pr25{padding-right: 25px;}
.pr30{ padding-right: 30px}
.ptb5{ padding-top:5px; padding-bottom: 5px; }
.ptb10{ padding-top:10px; padding-bottom: 10px; }
.plr5{padding:0px 5px;}
.plr10{padding:0px 10px;}
.plr20{padding:0px 20px;}
/*布局*/
e-main{ min-width:1200px;}
e-content{
padding: 10px;
background: #fff;
box-shadow: 0 0 5px rgba(0,0,0,.1);
border-radius: 3px ;
box-sizing: border-box;
}
e-relative{ position: relative; }
e-absolute{ position: absolute;}
e-fixed{position: fixed;}
/*浮动*/
.fl{float: left;}
.fr{float: right}
/*对齐*/
.al{text-align: left;}
.ac{text-align: center;}
.ar{text-align: right;}
/*辅助*/
.e-nowrap{white-space: nowrap;}
.e-elip{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.e-disabled{background: #e8e8e8; color: #999; cursor: not-allowed}
.e-pointer{cursor:pointer;}
.e-show{display: block;}
.e-hide{display: none;}
.e-hidden{overflow: hidden;}
.e-auto-x{overflow-x: auto;}
.e-auto-y{overflow-y: auto;}
.e-fieldset{border:1px solid #d3dce6;border-radius: 2px; }
.e-block{display: block;}
.e-inline{display: inline-block;}
.e-middle{ vertical-align: middle;}
.e-box{box-sizing: border-box;}
.e-clear{clear: both;}
/*高度*/
.hfull{ height: 100%; }
/*宽度*/
.wfull{ width: 100% }
/* 边框 */
.bt{border-top:1px solid #dcdfe6;}
.bb{border-bottom:1px solid #dcdfe6;}
.bl{border-left:1px solid #dcdfe6; }
.br{border-right:1px solid #dcdfe6; }
.ba{border:1px solid #dcdfe6;}
.bn{border:none;}
/*背景色*/
.e-bg-gray{ background:#f2f2f2;} /*灰色*/
.e-bg-qgray{background: #999; }/*灰色*/
.e-bg-white{ background:#fff;} /*白色*/
.e-bg-black{ background:#aaa; color: #fff} /*黑色*/
.e-bg-red{ background:#ff0000;color: #fff } /*h*/
.e-bg-pink{ background: #ff6969; color: #fff;}/*粉红主色*/
.e-bg-violet{ background: #9965cc; color: #fff;} /*紫色*/
.e-bg-brown{ background: #f1a85f; color: #fff; }/*棕色*/
.e-bg-crimson{ background: #ac0222; color: #fff; }/*赤红*/
.e-bg-cyan{ background: #33ba9b; color: #fff; }/*青色*/
.e-bg-blue{ background: #189eff; color: #fff; }/*蓝色*/
.e-bg-green{ background: #67c23a; color: #fff; }/*绿色*/
.e-bg-orange{ background: #ff9906; color: #fff; }/*橙色*/
.e-bg-yellow{ background: #E6A23C; color: #fff; }/*橙色*/
/*字体颜色*/
.e-text-pink{color: #ff6969; } /*粉红主色*/
.e-text-red{color: #ff0000!important; } /*红色*/
.e-text-tred{color: #F56C6C;} /*A/特级红*/
.e-text-violet{color: #9965cc; } /*紫色*/
.e-text-brown{color: #f1a85f; }/*棕色*/
.e-text-gold{color: #ecda42}
.e-text-crimson{color: #ac0222; }/*赤红*/
.e-text-cyan{color: #33ba9b; }/*青色*/
.e-text-blue{color: #189eff; }/*蓝色*/
.e-text-green{color: #67c23a; }/*绿色*/
.e-text-orange{color: #ff9906; }/*橙色*/
.e-text-gray{color: #666; }/*灰色*/
.e-text-qgray{color: #999; }/*灰色*/
.e-text-white{color: #fff; }/*白色*/
.e-text-black{color: #333; }/*黑色*/
/*布局*/
.e-flex{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex;
}
.e-flex-center{display: flex; flex-flow: wrap; align-items: center; justify-content:center}
/* 从左到右垂直居中 */
.e-flex-lr{
display: flex;
align-items: center;
}
/* 分布两边 */
.e-flex-level{
display: flex;
justify-content: space-between;
align-items: center;
}
/* 上中下分布 */
.e-flex-tcb{
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.e-cell{flex: 1}
.e-shrink{flex-shrink:1;}
/* 水平垂直居中 */
项目文件夹说明
│ README.md
│ vue.config.js //vuecli 配置文件
│ yarn.lock
│
├─bin //基础包构建并且发布的目录,文件夹内容会上传到npm npm run pub
│ demo.html
│ e-web-basic.common.js
│ e-web-basic.common.js.map
│ e-web-basic.umd.js
│ e-web-basic.umd.js.map
│ e-web-basic.umd.min.js
│ e-web-basic.umd.min.js.map
│
├─dist //基础包示例打构建后的目录 npm run build
│ demo.html
│ e-web-basic.common.js
│ e-web-basic.common.js.map
│ e-web-basic.umd.js
│ e-web-basic.umd.js.map
│ e-web-basic.umd.min.js
│ e-web-basic.umd.min.js.map
│
├─examples //基础包 示例目录 方便调试公共包的内容
│ │ App.vue
│ │ main.js
│ │
│ ├─assets
│ │ logo.png
│ │
│ └─components
│ HelloWorld.vue
│
├─packages //基础包源文件
│ │ index.js
│ │
│ ├─components //基础包组件
│ │ HelloWorld.vue
│ │ index.js
│ │ text-button.vue
│ │
│ └─utils //基础包工具
│ element-extend.js //公共过滤器
│ filters.js
│ utils.js //工具
│ verify.js //公共验证
│
└─public 示例模板
favicon.ico
index.html