uview 封装u-popup 支持v-model

如果直接使用:value与@input的语法糖解构，还是会有问题，具体表现为：

• 关闭时popup会上下横跳、抖动一下，再关闭
• 关闭后，popup可能不会再展现，即使v-model的值再次被设为true
  注意：uview的版本为1.x

• 直接上代码：

<template>
  <u-popup :value="value" mode="bottom" @close="closeHandler">
    <view style="height: 40vh">我是popUp的内容</view>
  </u-popup>
</template>

<script>
  export default {
    props: {
      value: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {}
    },
    methods: {
      inputHandler(val) {
        this.$emit('input', val)
      },
      confirmHandler(item = null) {
        this.$emit('confirm', item )
        this.inputHandler(false)
      },
      closeHandler() {
        this.$emit('close')
        this.inputHandler(false)
      },
    },
  }
</script>

注意：这里的confirmHandler是用来处理业务的，比如在这个popup里面展示里面，点击列表中的一项，需要关闭popup，甚至返回所点击项对应的数据

• 父级调用:

<template>
  <view>
    <u-button @click="show = true">展示popup</u-button>
    <MyPopUp v-model="show"></MyPopUp>
  </view>
</template>

<script>
  import MyPopUp from './MyPopUp.vue'
  export default {
    components: { MyPopUp },
    data() {
      return {
        show: false,
      }
    },
    methods: {},
  }
</script>

MyPopUp就是第一点的代码，最后简单说明下思路，不使用@input是因为close的逻辑会执行两遍，有兴趣的可以自己去尝试，写一个@close打印的方法。