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引入;;;Vue; VueconfigproductionTip = false; ;
基础包说明
此基础包含:`公共组件` `公共方法` `自定义指令` `过滤器` `公共css` `以及axios的封装`
公共组件
e-table //表格
使用方式:
<e-table ref="table" api="getDataUrl" params="{name:'wang'}"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column></e-table>//重新加载表格this$refstableTable 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
方法名称 说明 $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
过滤器
使用方式:
{{time | timeToStr}}
名称 说明 默认参数 timeToStr 时间戳转字符串 详细参数参考dayjs 'YYYY-MM-DD' toThousand 千分位分隔符 10000 => "10,000" -
自定义指令
使用方式:
//弹出框增加拖动指令
名称 说明 v-dialogDrag 弹出框增加拖动功能 v-clipboard 复制当前内容到剪贴板 v-focus 输入框获得焦点
elementUi表单自定义验证
使用方式:
//验证 输入内容必须是邮箱
名称 说明 age 年龄,只能是0到120的正整数 phone 手机号验证 name 姓名,只能是中文或者英文 IDCard 身份证验证 number 只能是数字 price 金额验证,小数不能超过两位 zipCode 邮编验证
axios 封装后的使用方法
使用方式:
//请求数据{thisloading = truethis$api}
基础包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>
/*字体*/ /*边距*/ /*内边距*/ /*布局*/ /*浮动*/ /*对齐*/ /*辅助*/ /*高度*/ /*宽度*/ /* 边框 */ /*背景色*/ /*灰色*//*灰色*/ /*白色*/ /*黑色*/ /*h*//*粉红主色*/ /*紫色*//*棕色*//*赤红*//*青色*//*蓝色*//*绿色*//*橙色*//*橙色*/ /*字体颜色*/ /*粉红主色*/ /*红色*/ /*A/特级红*/ /*紫色*//*棕色*//*赤红*//*青色*//*蓝色*//*绿色*//*橙色*//*灰色*//*灰色*//*白色*//*黑色*/ /*布局*//* 从左到右垂直居中 */ /* 分布两边 *//* 上中下分布 *//* 水平垂直居中 */
项目文件夹说明
│ 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