dvcp_v2_wxcp_app/components/AiDrawer/AiDrawer.vue

<template>
  <section class="AiDrawer">
    <AiPagePicker type="custom" :ops="ops" @select="getSeal">
      <img class="sealImage" v-if="seal" :src="seal"/>
      <div v-else class="placeholder">{{ placeholder }}</div>
    </AiPagePicker>
  </section>
</template>

<script>
import AiPagePicker from "./AiPagePicker";

export default {
  name: "AiDrawer",
  components: {AiPagePicker},
  model: {
    prop: "seal",
    event: "input"
  },
  props: {
    seal: {default: null},
    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
  },
  data() {
    return {
      ops: {
        url: "/components/pages/sealDrawer"
      }
    }
  },
  methods: {
    getSeal(image) {
      this.$emit("input", image)
    }
  }
}
</script>

<style lang="scss" scoped>
.AiDrawer {
  background: #F7F7F7;
  border: 1px solid #CCCCCC;
  position: relative;

  ::v-deep.AiPagePicker {
    height: 200px;

    & > div {
      height: 100%;
    }

    .sealImage {
      width: 100%;
      height: 100%;
    }
  }

  .placeholder {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 407px;
    text-align: center;
    font-size: 64px;
    color: #DDDDDD;
  }
}
</style>