BomApp/components/search-drawer/search-drawer.vue

<template>
  <view>
    <view v-show="showSearch" class="search" @click="showDrawer"></view>
    <uni-drawer ref="showRight" mode="right" :width="300">
      <scroll-view class="drawer" style="height: 100%" scroll-y="true">
        <div class="title">{{ title }}</div>
        <slot></slot>
        <view class="btn-group">
          <view class="btn" @click="onOk">确定</view>
          <view class="btn btn-white" @click="closeDrawer">取消</view>
        </view>
      </scroll-view>
    </uni-drawer>
  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "search-drawer",
  props: ["title", "visible"],
  watch: {
    visible(val) {
      if (val) {
        this.$refs.showRight.open();
      } else {
        this.$refs.showRight.close();
      }
    },
  },
  computed: {
    ...mapState(["showSearch"]),
  },
  methods: {
    onOk() {
      this.$emit("onOk");
    },
    closeDrawer() {
      this.$emit("update:visible", false);
      this.$refs.showRight.close();
    },
    showDrawer() {
      this.$emit("update:visible", true);
      this.$refs.showRight.open();
    },
  },
};
</script>
<style lang="less" scoped>
.search {
  position: fixed;
  right: 0;
  top: 300rpx;
  width: 100rpx;
  height: 100rpx;
  z-index: 999;
  background: url("@/static/drawer-bar.png") no-repeat center;
  background-size: cover;
	background-attachment: fixed;
}
.drawer {
  .title {
    font-size: 34rpx;
    font-family: Microsoft YaHei UI;
    font-weight: bold;
    color: #666666;
    line-height: 1;
    border-bottom: 1px solid #666666;
    margin: 44rpx 30rpx 20rpx;
    padding-bottom: 34rpx;
  }
  .btn-group {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
  }

  .btn {
    height: 70rpx;
    width: 210rpx;
    line-height: 70rpx;
    text-align: center;
    background: #5b78bf;
    color: #fff;
    font-size: 30rpx;
    &.btn-white {
      background: #fff;
      color: #333;
      border: 1px solid #666;
    }
  }
  ::v-deep {
    .select {
      width: 100%;
      height: 72rpx;
      line-height: 70rpx;
      border: 1px solid #666;
      padding-left: 20rpx;
    }
    .input {
      border: 1px solid #666;
    }
    .uni-forms-item__label {
      font-size: 34rpx;
      color: #666;
      width: 100% !important;
    }
  }
}
</style>