1.0.0 • Published 5 years ago
zhantong-commons v1.0.0
zhantong-commons
基于vue、element-ui工作项目中经常使用的公共方法
em……湛瞳千呼万唤终于始出来。本以为这npm包还挺好弄的,真正一上手发现确实低估人家高估自己了,要考虑的确实还不少。不管怎样一个最low版公共方法npm包还是面世了,更新是一定会更新的,首先目录结构还没有很规范,另外现列入的外方法也没有很全,大家有建议或者是希望加入哪些方法请尽情提出来~~邮箱地址958150192@qq.com。
文档说明
安装
$ npm install zhantong-commons
使用
- import email(方法名) from 'zhantong-commons'
该方式会将包内所有的方法在build的过程中打包在内,不推荐。 - import email(方法名) from 'zhantong-commons/email(方法名)'
该方式在build的过程中只会打包在项目中使用的方法,相对方法1来说能够缩小项目编译后的体积,推荐使用。
API
- 一、基于el-form的表单校验方法
template:
<el-form :model="formData" ref="formData" :rules="rules">
<el-form-item>
<el-input v-model="formData.email" placeholder="请输入邮箱""></el-input>
</el-form-item>
</el-form>
javascript:
<script>
import email from 'zhantong-commons/email'
export default {
data () {
return {
formData: {
email: null
},
rules: {
email: [
{ required: true, message: '请输入邮箱' },
{ validator: email } // 默认使用框架中的提示语
]
},
}
}
}
</script>
更改校验提示语
javascript:
<script>
import email from 'zhantong-commons/email'
export default {
data () {
let checkEmailWithNewTip = (...params) => {
return email(...params, '我是新的提示语')
}
return {
formData: {
email: null
},
rules: {
email: [
{ required: true, message: '请输入邮箱' },
{ validator: checkEmailWithNewTip } // 使用自定义提示语
]
},
}
}
}
</script>
- mobilePhone 校验手机号
默认提示语:请输入正确的手机号码 - telephone 校验电话号
默认提示语:请输入正确的电话号码 - idCard 校验身份证号
默认提示语:请输入正确的身份证号码 - email 校验邮箱
默认提示语:请输入正确的电子邮箱 - bankCard 校验银行卡号
默认提示语:请输入正确的银行卡号码 - zeroTo100Decimal2Atmost 校验大于0并且小于100,最多支持两位小数
使用场景:折扣
默认提示语:请输入0-100之间的数,最多支持两位小数 - moreThan0Decimal2Atmost 校验大于或者等于0,最多支持两位小数
使用场景:套内资费
默认提示语:请输入大于等于0的数字,最多支持两位小数 - moreThan0Integer 校验大于0的整数
默认提示语:请输入大于0的整数 - moreThan1Integer 校验大于1的整数
使用场景:卡片数量
默认提示语:请输入大于1的整数
- 二、方法(filter方法)
- throttle节流
防止某函数调用次数过多阻塞渲染进程,采取的每间隔一段时间再次执行的机制。
参数:
- fun 用于节流的函数
- wait 间隔的时间 使用场景:窗口resize监听事件……等
<script>
import throttle from 'zhantong-commons/throttle'
export default {
data () {
return {
maxHeight: ' ' // 防止浏览器渲染异常要给el-table表单上绑定的max-height一个默认值,此处为空格符
}
},
methods: {
onResize () {
this.maxHeight = this.$refs.outer.offsetHeight - 75
}
},
mounted () {
this.onResize()
window.addEventListener('resize', throttle(this.onResize, 500))
},
beforeDestroy () {
window.removeEventListener('resize', throttle(this.onResize, 500))
}
}
</script>
- toNumber
完成Boolean、Null、String转换为Number类型,并支持以向上取整、向下取整、四舍五入的方式保留指定数位。
参数:
- val 转换目标
- precision 精确数位,默认保留两位小数,暂定最多支持9位小数
- type 转换方式,默认round四舍五入,同时支持ceil向上取整、floor向下取整 返回值:返回转换后的数字所对应的字符串。 使用场景:数字、流量转换
filters方式
template:
<el-table-column label="套内资费/元" width="90">
<template slot-scope="scope">
{{ scope.row.lastshelvesStandardmealgoods ? (scope.row.lastshelvesStandardmealgoods.price | toNumber) : '--' }}
</template>
</el-table-column>
script:
<script>
import toNumber from 'zhantong-commons/toNumber'
export default {
filters: {
toNumber
}
}
</script>
methods方式
template:
<el-table-column label="套内资费/元" width="90">
<template slot-scope="scope">
{{ scope.row.lastshelvesStandardmealgoods ? toNumber(scope.row.lastshelvesStandardmealgoods.price, 1, 'ceil') : '--' }}
</template>
</el-table-column>
script:
<script>
import toNumber from 'zhantong-commons/toNumber'
export default {
methods: {
toNumber
}
}
</script>
未完待续(返回字符所占宽度)……
1.0.0
5 years ago