微信小程序 view失去焦点实现方式

微信小程序点击其他元素，当前view隐藏实现方法（自测有用）

需求：点击设备的三个小点点，展示删除按钮。点击其他任意处时，让这个按钮隐藏。

实现思路：用一个模拟元素，接收点击“任意处位置”的tap事件。
先看架构：

<view class="item" bindtap="_clickItem">
  <view class="title">
    <view class="name">{{name}}</view>
    <view class="function">
      <view class="dot" hover-class="tap" hover-start-time="0" hover-stay-time="0" catchtap="_operation">
        <view>.</view>
        <view>.</view>
        <view>.</view>
      </view>
      <view wx:if="{{show}}" class="bg" catchtap="_hide"></view>
      <view wx:if="{{show}}" class="show">
        <view class="delete" catchtap="_deleteItem">
          <image src="/public/icon/delete.png" mode="widthFix" />
          <view>解除</view>
        </view>
      </view>
    </view>
  </view>
  <view class="_wrapper">
    <image class="eq_icon" src="/public/icon/electronic_balance.png" mode="widthFix" />
    <view class="status">已绑定</view>
  </view>
</view>

css样式把.bg设置成固定定位，横向和竖向沾满屏幕
部分代码：

.tap {
  opacity: 0.6;
}

.item .title {
  display: flex;
  justify-content: space-between;
}

.item .title .function {
  position: relative;
}

.item .title .function>.dot {
  padding: 0 10rpx;
}

.item .title .function>.dot>view {
  height: 12rpx;
  line-height: 4rpx;
  font-weight: bold;
  color: #c2c2c2;
}

.item ._wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 70rpx;
}

.item ._wrapper .eq_icon {
  width: 89rpx;
  height: 89rpx;
}

.item ._wrapper .status {
  font-size: 32rpx;
  color: #c2c2c2;
}

.item .title .function .show {
  position: absolute;
  bottom: -100rpx;
  right: -30rpx;
  width: 100rpx;
  background: #ffffff;
  box-shadow: 0px 0px 9rpx 0px rgba(0, 0, 0, 0.5);
  border-radius: 10rpx;
  padding: 20rpx 30rpx;
  z-index: 1001;//层级高于辅助元素
}

.item .title .function .show::after {
  position: absolute;
  content: "";
  top: -15rpx;
  right: 20%;
  display: block;
  width: 0;
  height: 0;
  border-radius: 4px;
  border: 16rpx solid transparent;
  border-left-color: #fff;
  border-top-color: #fff;
  transform: scaleX(0.8) rotate(45deg);
  box-shadow: 0px 0px 9rpx 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.item .title .function .show::before {
  position: absolute;
  content: "";
  width: 40rpx;
  height: 24rpx;
  top: -0rpx;
  right: 16%;
  background-color: rgb(255, 255, 255);
  z-index: 2;
}

.item .title .function .show>view {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #252525;
  font-size: 28rpx;
}

.item .title .function .show .delete>image {
  width: 28rpx;
  height: 28rpx;
  margin-right: 14rpx;
}

.item .title .function .bg{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1000;//层级高点，但是不能超过那个删除按钮的层级
}

js代码：

Component({
  data: {
    show: false
  },
  properties: {
    name: String
  },
  methods: {
    _operation() {
      this.setData({
        show: !this.data.show
      })
    },
    _clickItem() {
      this.triggerEvent('clickItem')
    },
    _hide() {
      this.setData({
        show: false
      })
    },
    _deleteItem() {
      let _this = this;
      wx.showModal({
        title: "是否解除当前设备?",
        success() {
          _this.triggerEvent('deleteItem')
        },
        complete() {
          _this.setData({
            show: false
          })
        }
      })

    }
  }
})