vue中项目的问题

一:
  在用element-ui的轮播图插件的过程中如何遍历本地的图片
  解决方法:require("你的路径")
  imgUrl: require("你的路径")

  二:
  在用element-ui的轮播图插件的过程中图片高度无法自适应
  解决方法:动态给父级设置高度
  1.首先需要获取图片的高度
  this.bannerHeight = this.$refs.bannerHeight[0].height
  2.window窗口监测
window.addEventListener("resize",() => {
    
    
    this.bannerHeight = this.$refs.bannerHeight[0].height;
    this.imgLoad();
  },false);

  三:
  用element-ui轮播图插件之后,点击其他页面会报错height属性为undefined
  解决方法:可以用keep-alive标签包裹起来
  
  四:
  使用better-scroll插件实现滚动时点击失效
  this.scroll = new Bscroll(this.$refs.wrapper,{
    
    click:true})
  使用该插件,默认点击事件失效,加入以上代码将初始化设置为true
  
  五:
  微信二次分享,url自动拼接?from=message,导致出现两个问号,参数获取失败
  解决方案:通过获取最后一个问号后面的参数
            this.GetQueryString('type');
			Methods:{
    
    
			            GetQueryString(name){
    
    
			                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
			                var r = window.location.href.split('?')[window.location.href.split('?').length-1].match(reg); 
			                if (r != null) return unescape(r[2]); 
			                return null; 
			            },
			}
	六:
	微信缓存导致调整内容不生效
	解决方案:Last-Modified是页面的最后生成时间,GMT格式;设置永远是最新的
	这个问题首先要搞清楚微信的缓存机制。据我观察,开发中频繁更新html文件,并不会缓存。猜测和服务器返回的Last-Modified有关。并且抓包发现,缓存时,微信没有向服务器请求html文件,改变服务器过期时间并没有用。
	touch -m -t 11151101 abcd.html
	修改文件的修改时间到一个比较旧的时间点,访问网页立即触发了缓存。
	这就比较简单了,Last-Modified永远是最新的不就解决了。
	立即动手,改变一下nginx设置,比如我们用Vue框架,入口页/mall/index.html.
	location = /mall/index.html {
    
    
	add_header Last-Modified $date_gmt;
	}	

	七:
	element UI表格排序sortable最简单的按大小排序,需要添加prop,不然无法使用
	表格后面增加的sortable没有作用
	解决办法:没有给表格添加prop属性
	
	<el-table-column align="center" label="闸门名称"  prop='gatename' sortable>                                    
	  <template slot-scope="scope">
	      <span>{
    
    {
    
    scope.row.gatename}}</span>
	  </template>
	</el-table-column>

	八:
	表单清空没有效果,也不是提示报错的原因
	解决方法:model中绑定的数据字段和Dom里prop的数据字段是不是完全一致

	九:
	tagview 下拉关闭菜单窗口对不上
	侧边栏 顶部固定定位 偏移距离引起的  
	解决办法:下拉关闭菜单事件x要减去想对应的距离
	
	1.更换主题颜色后 el覆盖样式不起作用了
		解决办法:更改element默认的样式 
		
	2.deep深度选择器ie不支持 首页图标三条横线颜色更改不了 
		解决办法:用fill属性控制svg图标的颜色

		<style scoped>
		.el-dialog__wrapper /deep/ .el-dialog {
    
    
		  width: 60% !important;
		}
		</style>
	
	3.Dialog 对话框  Vue开发中出现对话框被遮罩层挡住问题解决方案
		解决办法:在el-dialog 标签上增加这个属性  :modal-append-to-body="false"

	4.A complete log of this run can be found in:debug.log

		npm版本太低的原因
		全局更新 npm
		npm install npm -g 
		一、npm 的更新:
			查看自己的 npm 版本:npm -v 
			查看官方文档可知,使用命令  npm install npm@latest -g 
			注意:一定要全局安装,不然node-v还是得到没更新之前的版本
		二、node 的更新:
			去官网下载需要的版本
			我们在覆盖的时候要检查之前安装 node 的路径,使用命令  where node 
			也就是说我之前安装在 C:\Program Files\nodejs 文件夹下。覆盖安装和前面讲到的第一次安装方法相同,只是安装路径选择为同之
			前一样的路径。
			安装完后检查是否安装成功 node -v  npm -v

猜你喜欢

转载自blog.csdn.net/qq_45271323/article/details/105815616