更新记录

1.0.0（2020-12-06） 下载此版本

支持nvue，可根据手指位置定位弹层，可从左侧，右侧，底部弹出。

平台兼容性

使用文档

属性

事件

• list格式为[{icon: '\ue123',id: 0,text: '选项一哎呦不'}]
• itemBorder只有在传入list时才有效

list格式

• icon在传入时要改成这样的  => \uedd2 目前是因为什么不知道，总之要这么传



使用示例

<icon-btn @handleLong="longTap" title="长按列表" styleText="height: 150rpx; width: 150rpx;"></icon-btn>
<view style="position: fixed;">
            <popup type="default" @tapListItem="tapListItem" contentSize="260,320" :list="list" itemBorder ref="popup"></popup>
</view>

<script>
  import iconBtn from '@/components/qdxns_icon/icon_btn.nvue'
    import popup from '@/components/qdxns-qdxns-popup/popup.nvue'
export default {
    components: {
            iconBtn,
            popup
        },
data() {
  return {
    list: [{
                        id: 0,
                        text: '图标选项1',
                        icon: '\ue60e',
                        event: 'ev1',
                        style: 'color: rgb(50, 50, 50); font-size: 60rpx;'
                    },
                    {
                        id: 1,
                        text: '图标选项2',
                        icon: '\uedbc',
                        event: 'ev2',
                        style: 'color: rgb(100, 100, 100); font-size: 60rpx;'
                    },
                    {
                        id: 2,
                        text: '图标选项3',
                        icon: '\ue6ea',
                        event: 'ev3',
                        style: 'color: rgb(200, 100, 150); font-size: 60rpx;'
                    },
                    {
                        id: 3,
                        text: '图标选项4',
                        icon: '\ue670',
                        event: 'ev4',
                        style: 'color: rgb(100, 100, 150); font-size: 60rpx;'
                    }
                ]
  }
},
  methods: {
      longTap(e) {
          this.$nextTick(() => {
            this.$refs.popup.show(e)
          })
        },
        tapListItem({text,event}) {
          this.$refs.popup.hide()
          switch (event) {
            case 'ev1':
              uni.showToast({
                title: text
              })
              break
            case 'ev2':
              uni.showToast({
                icon: 'none',
                title: text
              })
              break
            case 'ev3':
              uni.showModal({
                title: '提示',
                content: text,
                showCancel: false
              })
              break
            case 'ev4':
              uni.showModal({
                title: '提示',
                content: text
              })
              break
          }
        },
  }

}
  </script> 

• 组件通过ref方式调用以组件绑定popup为ref为例
• this.$refs.popup.show 可是调用组件当长按调用组件时可以根据传入的e 来给组件定位， 注意 点击调用时不要用 e 来定位有些平台会出现问题
• this.$refs.popup.hide() 可以隐藏弹窗