解决keepalive包裹问题

由于框架很多被keepalive包裹 所以mouted之类的钩子不再监听变化，激活钩子也不生效，所以在页面跳转路由时给路径加一个值，跳回的时候监听路由的变化，再将路径该会，然后调用框架里的刷新的方法

• 跳转路由时的标识

this.$router.push('/coupon/manage/list?upData=true')

• 跳转后的监听

   watch: {
      '$route.query': {
        handler(newVal) {
          if (newVal.upData) {
            this.$router.replace('/coupon/manage/list')
            this.$baseEventBus.$emit('reload-router-view')
          }
        },
        deep: true,
      },
    },

使用vuedraggable插件以及wangeditor富文本插件心得

• 实现功能：点击图片上传会出现在下方内容框中，点击文本会跳出富文本编辑框，并且下方出现文本信息内容，点击文本信息需要实现内容的回填并且可以修改，并且下面图片和文字可以随意拖动换位置，对应的数据要需要发生改变
• 拖拽功能实现：使用了vuedraggable插件，这里我插入时候用div标签包裹了文本，所以可以用startwith判断第一个字符，如果是文本就展示文本，否则就直接插入图片，这里也是定义了一个数组curImgArr，把图片和文本信息都插入到数组当中

<vuedraggable v-model="rForm.curImgArr">
                <transition-group>
                  <div
                    v-for="(item, index) in rForm.curImgArr"
                    :key="index + 1"
                    class="part-sort-item"
                  >
                    <!-- 文本 -->
                    <div v-if="item.startsWith('<div>')">
                      <vab-icon class="sort-item-bg" icon="text" />
                      <div class="sort-item-text">文本</div>
                      <div class="modify" @click="upText(index)">修改</div>
                      <i class="el-icon-error del" @click="deleText(index)"></i>
                    </div>
                    <div v-else ref="upImg" v-html="item"></div>
                  </div>
                </transition-group>
              </vuedraggable>

• 点击修改回填信息实现，点击时候获取到数组index下标找到对应的数据，因为使用了wangeditor富文本插件，所以需要调用里面的editor.txt.html（msg）才可以插入成功，但是当我获取创建过的详情信息的时候，出现了找不到editor.txt.html（msg）的报错，使用了延时器包裹，就解决了这个问题，我看了一下是因为在走的时候第一次获取时数组里的数据就是空的

upText(i) {
        if (this.$route.query.pageType == 'edit') {
          this.dialogFormVisible = true
          setTimeout(() => {
            this.$refs.editor.editor.txt.html(this.rForm.curImgArr[i])
          }, 50)
        } else {
          this.upDataIndex = i
          this.updataText = 1
          this.dialogFormVisible = true
          let str = this.rForm.curImgArr[i]
          console.log(this.rForm.curImgArr, str)
          this.rForm.richDescription = str
          this.$refs.editor.editor.txt.html(this.rForm.curImgArr[i])
        }

如果几个组件之间相互关联，嵌套，有父子，兄弟等关系并且经常需要调用同样的数据，且数据量比较庞大，可以把数据定义在对象当中，几个组件都可以实时同步到数据，还是很好用的

vue监听浏览器高度，来让盒子达到高度的自适应

• 定义一个数据获取浏览器高度

clientHeight: document.documentElement.clientHeight,

• 使用watch监听这个数据的变化，并且在其中使用getBoundingClientRect().top方法获取盒子距离当前屏幕顶部的距离

 watch: {
      clientHeight(newValue) {
        if (newValue) {
          let phoneHeight =
            newValue - this.$refs.phoneView.getBoundingClientRect().top
          this.$refs.phoneView.style.height = phoneHeight + 'px'
        }
      },
    },

• 在组件刚挂载的时候再使用window.onrise方法监听屏幕变化

 mounted() {
      window.onresize = () => {
        this.clientHeight = document.documentElement.clientHeight
      }
      let phoneHeight =
        this.clientHeight - this.$refs.phoneView.getBoundingClientRect().top
      this.$refs.phoneView.style.height = phoneHeight + 'px'
    },

生成唯一值id并传给后端

• 在调用一个接口的时候是需要批量传递消息的，但是又没有办法确定具体要传递多少，所以后端定义了一个唯一值字段字节不超过四十 要求传递过去才可以生效，就是下图的orderNo参数，这个时候传递参数是不对的

• 使用了一个函数方法来生成唯一值，把生成的唯一值作为参数传递，接口就可以正常生效了

   uuid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
          /[xy]/g,
          function (c) {
            var r = (Math.random() * 16) | 0,
              v = c == 'x' ? r : (r & 0x3) | 0x8
            return v.toString(16)
          }
        )
      },

遇到npm下载依赖发生版本号不一致导致报错的问题

解决方案： npm 配置集旧版-对等-对等值设置为 true

• npm config set legacy-peer-deps true