vue 自定义popup组件并支持scroll组件

本来是使用第三方库 vant的vue 组件库 的popup，后来在popup中使用better-scroll插件的时候，出现并不兼容的情况，也就自己搭建一个popu插件，中间遇到很多问题，都会记录一下，给自己一些总结！

popup组件实现思路

首先是模仿vant的popup组件的功能：vant-popup

1.popup组件开发与样式编写（一个遮罩层，一个显示层）。

2.组件引用（目前是选择的组件导入的方法，没有选择使用插件this.$popup(),主要是用户可以通过组件自定义传参，插件的方式不好实现）。

代码

popup.vue

组件导入

//导入popup组件
  import Popup from "Popup";

//在components中注册组件
    components:{
      Popup,
    },

       //组件的使用
    
    

组件设计到的功能点：

1.v-model 组件之间参数双向绑定

    watch: {
      //  监听value的值更新
      value(val) {
          this.isShow = val;
      }
    },

    
methods:{
//使用$emit对父组件的v-model，通过input进行数据绑定
      changShowStat(val){
          this.$emit('input',false)
      },

    },

2.组件自定义挂载（我这里是挂载到了body下）

使用$nextTick函数，在组件更新时对组件进行自定义挂载，我看iview你们也有全局挂载，但实现思路不一样，还在研究中。。

    mounted(){
        this.$nextTick(() => {
            const body = document.querySelector("body");
            if (body.append) {
                body.append(this.$el);
            } else {
                body.appendChild(this.$el);
            }
        });
    },

3.vue组件过渡动画，因为开始学vue没多久，刚开始使用的js动态挂载css动画，来实现，逻辑代码写了一大堆，中间遇到很多问题，比如在watch钩子函数中，dom元素获取不到问题，还为此仔细学习了vue生命周期，最后实现了，还是出现点击频率过快，出现组件加载问题，说了很多废话，最后学习了vue的过渡动画 transition组件，来实现的。

样式写在vue组件的样式里面

参数props

参数	说明	类型	默认值
v-model	当前组件是否显示	boolean	false
overlay	是否显示遮罩层	boolean	true
position	弹出位置，可选值为 top bottom right left	string	center
overlay-style	自定义遮罩层样式	object	-
round	是否显示圆角	boolean	false
styles	内容层样式	boolean	true
closeable	是否显示关闭图标	boolean	false
close-icon	关闭图标名称或图片链接	string	cross

 

虽然花了3天时间学了不少东西：

1.v-model 组件间的参数双向绑定

2.vue生命周期

3.vue $$nextTick函数

4.css3动画

5.vue 过渡组件

6.vue插件开发

7.第三方ui库组件的引入

遇到的bug

1.props中数据只能单向传输，无法双向绑定，不要在子组件中改变props参数

2.css加载顺序问题，导致页面效果出不来，加载顺序是自上而下，渲染优先级是自下而上（类似java栈）

3.vantUI组件的popup不兼容better-scroll，所以才自己做了一个

4.页面按钮点击无效，因为使用了定位布局，父组件没有设置高度，导致无法点击

5.当自定义动画，使用js动态加载动画时，因为需要退出效果，往往在修改是否显示的参数(value)的时候,需要延时0.5秒，等动画显示完成后，再修改value的值；这时候点击过快会出现组件加载问题，考虑过使用防抖来优化，但是感觉治标不治本，后面采用了vue 过渡组件。

    methods:{
      changShowStat(val){
          if(val){
              this.$emit('input',val)
          }else{
              setTimeout(() => {
                  this.$emit('input',val)
              }, 500)
          }
      },

6.dom获取不到问题，你会发现能打印this.$refs 能够找到dom，但是就是去获取this.$refs.xxx的时候，显示undefined ，主要是　DOM结构已经出来了，但是如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的。参考资料，主要是dom没用挂载 最后自己也详细回顾了一下生命周期，觉得这个搞不懂，vue就算没入门；

继续学习！