u-popup弹出层使用讲解

1.控制是否显示的使用:show

 <!-- 搜索栏 -->
    <u-popup class="searchColumn" :show="show" mode="top" @close="show = false">
      <div class="searchContent">
        <u-form :model="searchForm">
          <u-form-item label="发现人：" label-width="125" borderBottom>
            <u--input v-model="searchForm.discovererUserName" border="none"></u--input>
          </u-form-item>
          <u-form-item label="巡查事项：" label-width="125" borderBottom @click='handleMatterEnum'>
            <u-input disabled disabledColor="#ffffff" placeholder="请选择" border="none" v-model="searchForm.searchMatterEnumName"></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="发现开始时间：" label-width="110" borderBottom>
            <udate-picker placeholder="请选择" :hide-second="true" :clear-icon="false" :border="false" type="datetime" v-model="searchForm.discoverStartTime">
            </udate-picker>
          </u-form-item>
          <u-form-item label="发现截止时间：" label-width="110" borderBottom>
            <udate-picker placeholder="请选择" :hide-second="true" :clear-icon="false" :border="false" type="datetime" v-model="searchForm.discoverEndTime">
            </udate-picker>
          </u-form-item>

        </u-form>
        <div class="btn-box">
          <u-button type="error" text=" 重置" @click="reset"></u-button>
          <u-button type="primary" text="确定" @click="handleSearch"></u-button>
        </div>
      </div>
    </u-popup>

    // 点击搜索确定
    handleSearch() {
      this.show = false;
      this.getList();
    },

样式：

 .searchColumn {
    .searchContent {
      padding: 50 * @toVw 20 * @toVw 10 * @toVw;
      .btn-box {
        padding: 10 * @toVw 0;
        background: #ffffff;
        display: flex;
        justify-content: space-around;
        /deep/ .u-button {
          width: 45%;
        }
      }
    }
  }