vue+element 中遇到的问题汇总

最新推荐文章于 2022-04-22 16:07:08 发布

向飞飞

最新推荐文章于 2022-04-22 16:07:08 发布

阅读量727

点赞数 1

分类专栏：随笔记录

本文链接：https://blog.csdn.net/weixin_44943270/article/details/99869551

版权

随笔记录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.事件绑定未生效

使用修饰.native;在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触  发的

2.vuex不会永久存储,在刷新的时候会消失

vuex-persistedstate插件
 plugins: [createPersistedState({
	storage: window.sessionStorage,
  })],
  ![没有描述](https://img-blog.csdnimg.cn/20190820182316314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI3MA==,size_16,color_FFFFFF,t_70)

3.判断手机的类型

iphon() {
    // 判断是否是移动设备
    var ua = navigator.userAgent;
    var UA = {
      Android: function () { //安卓
        return ua.match(/Android/i) ? true : false;
      },
      BlackBerry: function () { //黑莓
        return ua.match(/BlackBerry/i) ? true : false;
      },
      IOS: function () { //IOS
        return ua.match(/iPhone|iPad|iPod/i) ? true : false;
      },

      isMobile: function () { //移动设备
        return UA.Android() || UA.BlackBerry() || UA.IOS();
      }
    }

    if (UA.isMobile()) {

      this.$router.push({
        path: '/h5'
      });
      document.getElementById('cnzz_stat_icon_1277898053').style.display = 'none'


    } else {
      this.$router.push({
        path: '/'
      });
    }

  }

4.判断手机本地是否有安装app

if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  // 判断useragent，当前设备为ios设备
  window.location.href = "XXX://"; // iOS端URL Schema
  window.setTimeout(function() {
      window.location = "https://itunes.apple.com/cn/app/XXX/"; // appstore下载地址
  },  2000);
  } else if (navigator.userAgent.match(/(android|Android);?/i)) {
      window.location.href = "scheme://XXXX"; /***打开app的协议，有安卓同事提供***/
      window.setTimeout(function(){
          window.location = "http://XXXXX/android.apk"; /***打开app的协议，有安卓同事提供***/
      },2000);
  }
  ---------------------------------或者----------------------------------------
   if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
       var loadDateTime = new Date();
        window.location = "com.imlianka.lkapp"; //schema链接或者universal link
        window.setTimeout(function () { //如果没有安装app,便会执行setTimeout跳转下载页
            var timeOutDateTime = new Date();
            if (timeOutDateTime - loadDateTime < 5000) {
                window.location =
                    "https://itunes.apple.com/cn/app/脸咔/id1469555142?mt=8"; //ios下载地址  
            } else {
                window.close();
            }
        }, 500);

    } else if (navigator.userAgent.match(/android/i)) {
        var state = null;
        try {
            window.location = 'android://lianka.h5/open'; //schema链接或者universal link
            window.setTimeout(function () {
                window.location = "http://www.baidu.com"; //android下载地址  
            }, 500);
        } catch (e) {}
    }

5.路由跳转的时候不存历史记录,解决页面重定向后能退回定向前的页面

<router-link to="路由地址" replace//不添加历史记录>

this.$router.push({
	path:"路由地址",
	replace:true//路由跳转不产生历史记录
})

this.$router.replace({
	path:"路由地址"
})

---------原生---------------
window.location.replace("地址")

6.动态样式和class

:class="{'class-a':isA,'class-b':isB}"
:style="{ color: activeColor, fontSize: fontSize + 'px' }"

7.h5不兼容position:fixed达到滑动时切换浮动位置

	使用'fixed'和'static'做兼容

8.地址栏参数获取

第一种：参数只能是英文的。
	//获取地址栏参数//只能是英文参数
	function GetQueryString(name) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	    var r = window.location.search.substr(1).match(reg);
	    if (r != null) return unescape(r[2]); return null;
	}
	
第二种：参数可以是中文也可以是英文
	//获取地址栏参数//可以是中文参数
	function getUrlParam(key) {
	    // 获取参数
	    var url = window.location.search;
	    // 正则筛选地址栏
	    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
	    // 匹配目标参数
	    var result = url.substr(1).match(reg);
	    //返回参数值
	    return result ? decodeURIComponent(result[2]) : null;
	}

9.图片百分比宽高相等设置

<div class="image-header">
<img src="demo.jpg">
</div>
.image-header{
	position:relative
	width:100%
	height:0
	padding-top:100%
}

.image-header img{
	position:absolute
	top:0
	left:0
	width:100%
	height:100%
}

10.页面滚动监听

//监听页面滚动事件
window.addEventListener('scroll', this.appScroll)
//注意：如果由于自己的vue中的样式导致监听不到，可以尝试监听body或者'#app-root'的滚动事件
--------------------------------------------------------------------------------
//获取元素到顶部的距离
//浏览器兼容
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

11.oss后端签名直传

upload(e){
   // 先准备好 oss 服务器需要的内容
   const photo = window.URL.createObjectURL(e.target.files[0])  // 获取图片对象
   const photoName = photo.name  // 原图片的名称
   const key = "photoNameOss"  // 存储到oss的图片名称 自己定，必须确保唯一性，不然会覆盖oss中原有的文件
   const policy = "policy"  // 服务器端同事调oss的API，通过接口返回给前端的 policy
   const policy = "OSSAccessKeyId"  // 服务器端同事调oss的API，通过接口返回给前端的 OSSAccessKeyId
   const policy = "callback"  // 服务器端同事调oss的API，通过接口返回给前端的 callback。这个是需要 oss 触发这个回调来通知服务器操作结果。
   const policy = "signature"  // 服务器端同事调oss的API，通过接口返回给前端的 signature。这个就是签名，最关键的。
   const url = `http://${自己的域名}.oss-cn-beijing.aliyuncs.com`
   
   // biu一下，提交给oss
   let param = new FormData(); 
   param.append('name', `${photoName}`)
   param.append('key', `${key}`)
   param.append('policy', `${policy}`)
   param.append('OSSAccessKeyId', `${OSSAccessKeyId}`)
   param.append('success_action_status', 200)  // 不要问为什么，照做
   param.append('callback', `${callback}`)
   param.append('signature', `${signature}`) 
   param.append('file', photo, photoName); // 这个**切记**一定要放到最后去 append ，不然阿里云会一直报 key 的错误
   axios.post(url, param)
       .then(response => {
           console.log("response == ", response)
       })
       .catch((err) => {
           console.log("err == ", err)
       })
 }

12.git公钥生成

ssh-keygen -t rsa -C “your_email@example.com”
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190907130252242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI3MA==,size_16,color_FFFFFF,t_70)

13.图片与base64相互转换

将图片转换为Base64
function getImgToBase64(url,callback){
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;

将base64转换为file类型
 function dataURLtoFile(dataurl, filename) {
        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 File([u8arr], filename, {type:mime});
    }
    
可以将图片转换为base64
getImgToBase64('img/test.png',function(data){
　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
　　　console.log(myFile);
});

向飞飞

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue+element 中遇到的问题汇总

1.事件绑定未生效使用修饰.native;在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的2.vuex不会永久存储,在刷新的时候会消失vuex-persistedstate插件 plugins: [createPersistedState({ storage: window.sessionStorage, })]...
复制链接

扫一扫