内容简介:只需要将绑定的这段js引入到main.js即可。绑定方法十分简单,这里不再详细说明下面列举几个常用的工具函数numberPad用于按照位数补0,默认为2
import Vue from 'vue' Vue.prototype.$tools = function (){} 复制代码
只需要将绑定的这段js引入到main.js即可。绑定方法十分简单,这里不再详细说明
下面列举几个常用的 工具 函数
$dateFormat 事件格式化函数,相对于moment轻很多
Vue.prototype.$dateFormat = function (date, fmt = 'YYYY-MM-DD HH:mm:ss') { if (!date) { return '' } if (typeof date === 'string') { date = new Date(date.replace(/-/g, '/')) } if (typeof date === 'number') { date = new Date(date) } var o = { 'M+': date.getMonth() + 1, 'D+': date.getDate(), 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, 'H+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds(), 'q+': Math.floor((date.getMonth() + 3) / 3), 'S': date.getMilliseconds() } var week = { '0': '\u65e5', '1': '\u4e00', '2': '\u4e8c', '3': '\u4e09', '4': '\u56db', '5': '\u4e94', '6': '\u516d' } if (/(Y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } if (/(E+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + '']) } for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) } } return fmt } 复制代码
$ajax
import axios from 'axios' // 跨域请求,允许保存cookieaxios.defaults.withCredentials = true // HTTPrequest拦截,对发出的请求数据进行统一操作 axios.interceptors.request.use(config => { // 对请求参数做些什么 return config }, error => { // 对请求错误做些什么 console.log('err' + error) // for debug return Promise.reject(error) }) // HTTPresponse拦截,对收到的数据进行统一操作 axios.interceptors.response.use(data => { // 对返回数据进行操作 return data }, error => { return Promise.reject(new Error(error)) }) Vue.prototype.$ajax = function ajax (url = '', data = {}, type = 'GET') { type = type.toUpperCase() return new Promise(function (resolve, reject) { let promise if (type === 'GET') { let dataStr = '' // 数据拼接字符串 Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' }) if (dataStr !== '') { dataStr = dataStr.substr(0, dataStr.lastIndexOf('&')) url = url + '?' + dataStr } // 发送get请求 promise = axios.get(url) } else { // 发送post promise = axios.post(url, data) } promise.then(response => { resolve(response.data) }).catch(error => { reject(error) }) }) } 复制代码
数字格式化
numberComma用于分割数字,默认为3位分割,一般用于格式化金额。 复制代码
Vue.prototype.$numberComma = function (source, length = 3) { source = String(source).split('.') source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{' + length + '})+$)', 'ig'), '$1,') return source.join('.') } 复制代码
数字补位
numberPad用于按照位数补0,默认为2
Vue.prototype.$numberPad = function (source, length = 2) { let pre = '' const negative = source < 0 const string = String(Math.abs(source)) if (string.length < length) { pre = (new Array(length - string.length + 1)).join('0') } return (negative ? '-' : '') + pre + string } 复制代码
取随机数字
Vue.prototype.$numberRandom = function (min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } 复制代码
cookie操作
1.$cookie.get(name, [options])
获取 cookie 值。options 参数可选,取值如下: converter 转换函数。如果所获取的 cookie 有值,会在返回前传给 converter 函数进行转换。 选项对象。对象中可以有两个属性:converter 和 raw. raw 是布尔值,为真时,不会对获取到的 cookie 值进行 URI 解码。 注:如果要获取的 cookie 键值不存在,则返回 undefined. 2. cookie.remove(name, [options]) 移除指定的 cookie.
const Cookie = {} var decode = decodeURIComponent var encode = encodeURIComponent Cookie.get = function (name, options) { validateCookieName(name) if (typeof options === 'function') { options = { converter: options } } else { options = options || {} } var cookies = parseCookieString(document.cookie, !options['raw']) return (options.converter || same)(cookies[name]) } Cookie.set = function (name, value, options) { validateCookieName(name) options = options || {} var expires = options['expires'] var domain = options['domain'] var path = options['path'] if (!options['raw']) { value = encode(String(value)) } var text = name + '=' + value // expires var date = expires if (typeof date === 'number') { date = new Date() date.setDate(date.getDate() + expires) } if (date instanceof Date) { text += ' expires=' + date.toUTCString() } // domain if (isNonEmptyString(domain)) { text += ' domain=' + domain } // path if (isNonEmptyString(path)) { text += ' path=' + path } // secure if (options['secure']) { text += ' secure' } document.cookie = text return text } Cookie.remove = function (name, options) { options = options || {} options['expires'] = new Date(0) return this.set(name, '', options) } function parseCookieString (text, shouldDecode) { var cookies = {} if (isString(text) && text.length > 0) { var decodeValue = shouldDecode ? decode : same var cookieParts = text.split(/\s/g) var cookieName var cookieValue var cookieNameValue for (var i = 0, len = cookieParts.length; i < len; i++) { cookieNameValue = cookieParts[i].match(/([^=]+)=/i) if (cookieNameValue instanceof Array) { try { cookieName = decode(cookieNameValue[1]) cookieValue = decodeValue(cookieParts[i] .substring(cookieNameValue[1].length + 1)) } catch (ex) { console.log(ex) } } else { cookieName = decode(cookieParts[i]) cookieValue = '' } if (cookieName) { cookies[cookieName] = cookieValue } } } return cookies } function isString (o) { return typeof o === 'string' } function isNonEmptyString (s) { return isString(s) && s !== '' } function validateCookieName (name) { if (!isNonEmptyString(name)) { throw new TypeError('Cookie name must be a non-empty string') } } function same (s) { return s } Vue.prototype.$cookie = Cookie 复制代码
获取URL中的请求参数
`` $dateFormat(url) 返回搜索参数的键值对对象 例: getsearch('http://www.longfor.com?usercode=shen&token=TKpRmNelonghu') // { usercode: 'shen', token: 'TKpRmNelonghu' } 复制代码
复制代码
Vue.prototype.$getsearch = function (url) { 复制代码
var obj = {} url.replace(/([^?&=]+)=([^&#]+)/g, (_, k, v) => { obj[k] = v }) return obj }
#小数截取固定位数 // 默认保留一位小数,并下舍入 $decimalNum 截取固定位数的小数 /**@param number 处理的小数 number 保留的小数位数 number 0 对小数进行下舍入;1 四舍五入;2 上舍入 */ 例: $decimalNum(2.376186679,3,) // 2.376 复制代码
Vue.prototype.$decimalNum = function (source, length = 1, type = 0) { length = Math.pow(10, length) if (type === 2) { return Math.ceil(source * length) / length } else if (type === 1) { return Math.round(source * length) / length } else { return Math.floor(source * length) / length } } 复制代码
。。。持续更新
参考:vux工具函数
以上所述就是小编给大家介绍的《vue 工具函数封装,持续更新。。。》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 封装函数到实现简化版jQuery
- JS实现运动缓冲效果的封装函数示例
- Node.js 如何优雅的封装一个实用函数的 npm 包
- 封装JDBC—非框架开发必备的封装类
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
- SpringBlade 2.3.2 发布,增加 OSS 封装及单元测试封装
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Head First HTML and CSS
Elisabeth Robson、Eric Freeman / O'Reilly Media / 2012-9-8 / USD 39.99
Tired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML and really learned HTML. You want to learn HTML so you can finally create th......一起来看看 《Head First HTML and CSS》 这本书的介绍吧!