ios vant 底部弹窗组件 vant弹出层

转载

AI智行者 2024-06-05 14:06:03

文章标签 ios vant 底部弹窗组件前端 javascript vue.js 弹出层 文章分类 iOS 移动开发

弹出层的特性

1 如果初始v-modle 绑定的的值是false，则组件不会渲染

2 当v-modle绑定的值转变为true时，组件会被渲染出来

3 之后再改吧v-model的值只是用CSS进行显示和隐藏罢了

造成的问题

当在弹出层内使用其他组件时，一般绑定的属性值不会进行改变，即使传进去的值发生改变了，相关代码如下:

<van-popup v-model="showReplyComment" position="bottom" style="height: 95%">
      <comment-reply
        :comment="comment"
        :art_id="thearticle.art_id || {}"
        @click-close="showReplyComment = false"
      ></comment-reply>
    </van-popup>

props: {
    comment: {
      type: Object,
      required: true
    },
    art_id: {
      type: [Number, String, Object],
      required: true
    }
  },
  data() {
    return {
      // 获取回复评论的请求参数
      getReplyParams: {
        type: 'c',
        source: this.comment.art_id,
        offset: undefined,
        limit: undefined
      },

结论,当使用props接受父组件的传值时,如果直接在data() {return {}} 内直接将值赋值给里面的属性时 source: this.comment.art_id, 只会赋值一次，当props在次改变时就不会再次赋值了，导致了页的刷新错误。

一劳永逸的解决办法

在给popup绑定v-model时直接在绑定上v-if 如下:

<van-popup v-model="showReplyComment" v-if="showReplyComment" position="bottom" style="height: 95%">
      <comment-reply
        :comment="comment"
        :art_id="thearticle.art_id || {}"
        @click-close="showReplyComment = false"
      ></comment-reply>
    </van-popup>

或者：

<van-popup v-model="showReplyComment" position="bottom" style="height: 95%">
      <comment-reply
        :comment="comment"
        :art_id="thearticle.art_id || {}"
        @click-close="showReplyComment = false"
        v-if="showReplyComment"
      ></comment-reply>
    </van-popup>

两着在此处没有本质区别: 本质上就是展示弹出层时进行组件的重新渲染，但是如果有其他的内容的情况下，推荐第二种，不用全部重新渲染，渲染一部分就行

缺点：

如果该组件非常的大多重组件嵌套，多种请求的情况下，该方法在网络慢的情况下会导致渲染页面巨慢，用户体验及其不好,第二种要较第一种好一些，但也是不可以接受的

麻烦一点的解决方法

利用vue的watch侦听器，进行监听，传入的comment值改变时，进行对数据的再赋值，代码：

props: {
    comment: {
      type: Object,
      required: true
    },
    art_id: {
      type: [Number, String, Object],
      required: true
    }
  },
data() {
    return {
      // 获取回复评论的请求参数
      getReplyParams: {
        type: 'c',
        source: '',
        offset: undefined,
        limit: undefined
      },
      // 列表配置项
      list: [],
      loading: false,
      finished: false,
      // 评论弹出层
      showComment: true
    }
  },
  computed: {},
  watch: {
    comment(val) {
      this.list = []
      this.finished = false
      this.source = this.comment.art_id
    }
  },

可以看到这里面逃离很多的其他组件，列表list,又一层弹出层，如果在watch中不重置list，会导致新值直接push到老值后面，不重置this.finished，则导致列表一直出去无法加载的状态