cube-ui点击从下往上弹出框 类似加入购物车的动画效果

在这里插入图片描述
解析:
参考: https://didi.github.io/cube-ui/#/zh-CN/docs/popup
在这里插入图片描述

<cube-popup type="my-popup" :position="position" :mask-closable="true" ref="myPopup4">
      <p  @click="hidePopup1"><i class="iconfont icon-chahao"></i></p>

    </cube-popup>

注意:是个字体图标,导入icon,不会的参考 https://blog.csdn.net/fengtingYan/article/details/88319344
script
在这里插入图片描述

const positions = ['bottom']
let cur = 0

data() {
    return {
      position: ''
    }
  },

showPopup1() {
       this.position = positions[cur++]
      if (cur === positions.length) {
        cur = 0
      }
      const component = this.$refs.myPopup4
      component.show()
    },
    hidePopup1() {
      const component = this.$refs.myPopup4
      component.hide()
    },

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/88367017