h5,vue ,elementui,vant组件项目踩坑

最新推荐文章于 2024-10-06 20:22:50 发布

爱上彗星的尾巴

最新推荐文章于 2024-10-06 20:22:50 发布

阅读量3k

点赞数 1

分类专栏：前端文章标签： vant vue

本文链接：https://blog.csdn.net/qq_38698753/article/details/103343996

版权

前端专栏收录该内容

140 篇文章 0 订阅

订阅专栏

1 改变富文本样式和vant组件样式需要注意的地方

使用vue的v-html属性后.想改变富文本里面的样式,不能把样式写在scope里面

想改变vant组件的样式只能用css语法去更改样式,同时注意层级关系

2 阻止页面滚动

@touchmove.prevent

3 DropDown组件使用时，子选项无法绑定事件的处理

 	<el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-check" @click.native='func'>双皮奶</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check" @click.native='choose'>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>

4 限制结束日期不能大于开始日期 -element-ui

data(){
        return {
            pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2 != "") {
                        return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.value1 || time.getTime() > Date.now();
                }
            },
        }
 }

5 使用element-ui之后无法回车问题

<input v-model="form.name" placehoder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placehoder="昵称" @keyup.enter.native="submit"></el-input>

6子组件不可用修改父组件传过来的值,解决方法是可以emit一个方法到父组件中,通过父组件传参重新赋值给子组件

7添加滚动事件后一定要记得remove

8使用v-lazy实现图片懒加载

<ul>
  <li v-for="(item,index) in demoArr" :key = "index">
  	<!-- 循环一定不能放图片上！！！！ -->
	<!-- 使用v-lazy代替src -->
  	<img  v-lazy = "item"/>
  </li>
</ul>

9一：Vue的双向绑定原理答：利用数据劫持和发布者-订阅者模式监听数据值的变化，并且利用Object.defineproperty来重新定义对象的Get和Set方法。二：那Vue能不能监听到数组或者对象值的变化。答：不能.

10Vue不能监听到数组变化有两种情况，

一：直接改变arr的值如我在button事件中写的（arr[0]=1000）
解决方法将this.arr[0]=1000改写为Vue可以监听的形式 this. $s e t (t h i s . a r r, 0, 1000) t h i s .$ set接受三个参数，第一个是需要操作的数组对象，第二个是需要修改的数据的数组下标，第三个是修改后的值。
二：直接修改数组的长度如this.arr.length=3
解决方法使用js中数组方法arr.splice操作数组达到修改长度的目的。
Vue中无法监听对象属性的改变
解决方法：this.$set（obj，name，‘xxx’）对对象进行操作时，set接受三个参数，第一个为对象的名称，第二个为对象的key值，第三个为key对应的value值。
如果需要同时插入多个值。

this.obj=Object.assign（{}，this.arr，{
age：21，
major：'soft'
}）

11vue中的事件委托

vue提供的特殊变量$event相当于js中addEventListenr()方法回调函数中的event参数

<div @click="change($events)">
	<span id="a">one</span>
    <span id='b'>two</span>
</div>
methods:{
	change(e){
		if(e.target.id === 'a'){e.target.innerHTML = 'c'}
		if(e.target.id === 'b'){e.target.innerHTML = 'd'}
	}
}

12自定义组件触发原生事件

Dom元素中自身支持的事件如:click,keyup,这些事件直接绑定在元素上就可以生效,但是在vue中，如果你往自己写的组件中绑定如@click等原生事件，是不会触发的。
解决的办法就是，利用native修饰符来触发事件：

<self-item  @click.native="changeSize" />

13主动触发视图更新

在使用Element的table时，遇到一个问题，动态改变table内的数据，但table并不会马上更新。后来经查阅，发现其实是ES5的Object.defineproperty方法缺陷，Vue在初始化实例时会将属性转为getter/setter，所以属性必须在 data 对象上才能让 Vue 转换它，才能让它是响应的。
数据改变后，重新定义data中的数据：（比如我的tableData经过一连串的逻辑后，它里面的数据是有改变的，但是视图没触发变化）
解决方法如下

method:{
	reloadData(){
		this.$set(this.tableData,'name',username)
	}

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

举个栗子

<template>
  <div>
    <p ref="p_1">{{msg}}</p>
    <button @click="fn">change</button>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: 1
            }
        },
        methods: {
            fn: function () {
                this.msg = 33
                console.log(this.$refs.p_1.innerHTML) //输出为1
                this.$nextTick(function () {
                        console.log(this.$refs.p_1.innerHTML) //输出为33
                    }
                )
            }
        }
    }
</script>

14,h5 border 1px 和 1rem 在移动端显示问题

问题:把 border 值设置为 1px solid #ccc，在苹果手机上不显示边框但在安卓手机上能显示，把单位换成 rem 能正常在苹果手机显示，但是在安卓手机上就不显示了，有什么解决方案能让其在两种设备都正常显示吗？
有!,

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
this.$toast('是否是Android：'+isAndroid);
this.$toast('是否是iOS：'+isiOS);

15,h5中android机document.documentElement.scrollTop不生效,尽量使用scrollintoview实现锚点跳转

16，vue h5通过input上传文件，重复上传同一文件无反应可以通过修改input的显示隐藏来达到清除input的value

17,vue css3实现页面平滑过渡效果

	//js
	this.scrollTo(offsetTop, 1000
 	scrollTo (top, duration) {
      if (top) {
        window.scrollTo(0, top)
        return false
      }
    },
 //css
 	html,
	body {
	  scroll-behavior: auto;
	  scroll-behavior: smooth;
	}

18 ，微信jsdk分享文案获取本地资源图片

NUtil.getShareImg = function () {
  let url = location.href.split('#')[0].replace('index.html', '')
  let img = require('../../src//assets/img/share.jpg').replace('./static', 'static')
  console.log(url + img)
  return url + img
}