vue开发小技巧合集
移动端适配方案
- viewport
- 插件选择 postcss-px-to-viewport
配置
//安装插件
npm i postcss-px-to-viewport -D
//根目录新建
.postcssrc.js
// 文件内容
const path = require('path')
module.exports = ({
file }) => {
// 记住这里：设计搞多大就给多大，然后剩下的就按照设计稿实际宽高，写就好了
let designWidth = 750
return {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: designWidth, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ['usepx'], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
landscape: false // 是否处理横屏情况
}
}
}
}
标题vue-cil3 全局引入 公共样式变量
解决什么问题？ 在每个文件都引入一个公共文件不烦吗？这就是一劳永逸饿方式
-
安装依赖 npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
-
在vue.config.js 中添加以下配置
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 这个里面就是公共css的地址
path.resolve(__dirname, "src/common/less/variable.less")]
}
}
校验只能输入文字，英文，数字并限制长度
function checkStr(str) {
var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
if (!reg.test(str)) {
alert('文案中不能含有特殊字符');
return false;
}
else {
var cnLen = Math.ceil(str.replace(/[^\u4e00-\u9fa5]/gi, "").length * 2);
var enLen = str.replace(/[^a-zA-Z]/gi, "").length;
var numLen = str.replace(/[^0-9]/gi, "").length;
if ((cnLen + enLen + numLen) > 30) {
alert('已超出文案长度限制');
return false;
} else {
return str;
}
}
}
数字切割千分位写法
function convertTodecimal(s) {
parseInt(s);
s = s.replace(/^(\d*)$/, "$1.");
s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
s = s.replace(".", ",");
var re = /(\d)(\d{3},)/;
while (re.test(s))
s = s.replace(re, "$1,$2");
s = s.replace(/,(\d\d)$/, ".$1");
return s.replace(/^\./, "0.")
}
获取触摸移动距离
(function () {
var el = document.querySelector('.test');
var startPosition, endPosition, deltaX, deltaY, moveLength;
el.addEventListener('touchstart', function (e) {
var touch = e.touches[0];
startPosition = {
x: touch.pageX,
y: touch.pageY
}
});
el.addEventListener('touchmove', function (e) {
var touch = e.touches[0];
endPosition = {
x: touch.pageX,
y: touch.pageY
}
deltaX = endPosition.x - startPosition.x;
deltaY = endPosition.y - startPosition.y;
moveLength = Math.sqrt(Math.pow(Math.abs(deltaX), 2) + Math.pow(Math.abs(deltaY), 2));
console.log(moveLength);
});
})();
毫秒级时间格式转换
//毫秒时间格式转换
function MillisecondToDate(msd) {
var time = parseFloat(msd) / 1000;
if (null != time && "" != time) {
if (time > 60 && time < 60 * 60) {
time = (parseInt(time / 60.0) < 10 ? '0' + parseInt(time / 60.0) : parseInt(time / 60.0)) + "m" + ((parseInt((parseFloat(time / 60.0) -
parseInt(time / 60.0)) * 60)) < 10 ? '0' + (parseInt((parseFloat(time / 60.0) -
parseInt(time / 60.0)) * 60)) : (parseInt((parseFloat(time / 60.0) -
parseInt(time / 60.0)) * 60))) + "s";
} else if (time >= 60 * 60 && time < 60 * 60 * 24) {
time = (parseInt(time / 3600.0) < 10 ? '0' + parseInt(time / 3600.0) : parseInt(time / 3600.0)) + "h" + ((parseInt((parseFloat(time / 3600.0) -
parseInt(time / 3600.0)) * 60)) < 10 ? '0' + (parseInt((parseFloat(time / 3600.0) -
parseInt(time / 3600.0)) * 60)) : (parseInt((parseFloat(time / 3600.0) -
parseInt(time / 3600.0)) * 60))) + "m" +
((parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60)) < 10 ? '0' + (parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60)) : (parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60)) ) + "s";
} else {
time = (parseInt(time) < 10 ? '0' + parseInt(time) : parseInt(time)) + "s";
}
} else {
time = "00h:00m:00s";
}
return time;
}
IE下时间戳转换
//判断IE 时间戳转化
//判断当前浏览器
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
if(isIE()){
var date=$scope.maintenances[i].date;
lastTime=Date.parse(date.replace(/-/g,"/"))
}else{
lastTime = new Date($scope.maintenances[i].date).getTime();
}
FILE转换BASE64
input=file选择文件转化成base64
function readFile(img) {
var file = img.files[0];
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result)
}
}
blob和base64相互转化
// Base64转blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime});
}
// blob转Base64
function blobToDataURL(blob, callback) {
var a = new FileReader();
a.onload = function (e) {
callback(e.target.result);
}
a.readAsDataURL(blob);
}
项目引入字体
vue-cli3.0 引入外部字体并使用
- 去下载想要引入的字体的字体包，找ui要或者网上自己去搜
- 将要的字体放在资源目录下，看自己项目需求要放哪里，创建一个css文件
- 在fonts.css文件中引入想要的字体
@font-face {
font-family: 'Medium';
src: url('./SourceHanSansSC-Medium.otf');
}
@font-face {
font-family: 'Regular';
src: url('./SourceHanSansSC-Regular.otf');
}
- 在项目的main.js文件中引入刚写好的css文件
import './assets/fonts/fonts.css'
- 直接在vue文件中的样式添加字体样式
.text {
font-family: 'Regular'; // 这里的Regular是引入时的自定义名字
}