【sgCreateQrcode】自定义组件：模仿草料二维码做了一个简单的二维码制作组件

sgCreateQrcode

<template>
  <div :class="$options.name" v-if="visible">
    <!-- 如果不加v-if="visible"弹窗中使用el-tabs组件就会死循环卡死，这个是elementUI的bug -->
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      :custom-class="`${$options.name}-el-dialog`"
      :destroy-on-close="true"
      :fullscreen="false"
      :show-close="true"
      :title="`生成二维码`"
      :width="`800px`"
      :visible.sync="visible"
      style="animation: none"
      center
    >
      <div
        style="
          margin: -20px 0 0px;
          max-height: 600px;
          overflow-y: hidden;
          display: flex;
          justify-content: flex-start;
        "
        v-loading="loading"
        :element-loading-text="elementLoadingText"
        radius-loading
      >
        <!-- 弹窗内容 -->

        <div class="col" style="width: 300px">
          <sgQrcode
            ref="sgQrcode"
            :data="{
              text: text,
              title: title,
              logoSrc: logoSrc,
              type: `image`,
              size: 300,
              titleStyle: { fontSize: `24px`, paddingBottom: title ? `10px` : 0 },
            }"
          />
        </div>
        <div class="col" style="margin-left: 10px">
          <el-form @submit.native.prevent :readonly="disabled" label-position="right">
            <el-form-item label="标题" :label-width="labelWidth">
              <el-input
                v-model="title"
                :placeholder="`输入内容`"
                :maxlength="20"
                clearable
              />
            </el-form-item>
            <el-form-item label="Logo" :label-width="labelWidth">
              <el-button type="" @click="(uploadBtn || {}).click()"
                >本地上传...</el-button
              >
            </el-form-item>
          </el-form>
          <div class="foot" style="margin-left: 10px; margin-top: 30px">
            <div>
              <el-button @click="cancel">取消</el-button>
              <el-button
                type="primary"
                @click="downloadQrcode"
                v-if="!disabled"
                :loading="loading"
                >下载</el-button
              >
              <el-button
                @click="go2CLEWM"
                style="background-color: #00a13b; color: white; border-color: #00a13b"
                type="default"
                >复制链接制作更好看的二维码</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-upload
      ref="upload"
      :accept="`*`"
      :action="`#`"
      :auto-upload="false"
      :multiple="true"
      :on-change="getUploadFiles"
      :show-file-list="false"
      :dragenter="isDragenter"
      :drag="false"
    />
    <!-- 如果drag=true，accept必须为具体的格式，否则无法监听on-change -->
  </div>
</template>
<script>
import sgQrcode from "@/vue/components/admin/sgQrcode";
export default {
  name: `sgCreateQrcode`,
  components: { sgQrcode },
  data() {
    return {
      loading: false, //加载状态
      elementLoadingText: ``, //加载提示文字

      visible: false,
      form: {},
      disabled: false, //是否只读
      labelWidth: `60px`,
      title: `微信扫一扫`,
      logoSrc: `static/favicon.png`,
      uploadBtn: null, //上传触发按钮
      isDragenter: false, //是否拖拽进入
    };
  },
  props: [`value`, `data`],

  watch: {
    loading(newValue, oldValue) {
      newValue || (this.elementLoadingText = ``);
    },

    value: {
      handler(d) {
        this.visible = d;
      },
      deep: true,
      immediate: true,
    },
    visible(d) {
      this.$emit(`input`, d);
    },

    data: {
      handler(newValue, oldValue) {
        //console.log(`深度监听${this.$options.name}：`, newValue, oldValue);
        if (Object.keys(newValue || {}).length) {
          this.form = this.$g.deepCopy(newValue);
          this.$g.cF2CP(`disabled`, this);
          this.$g.cF2CP(`text`, this);
        }
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  created() {},
  mounted() {
    this.uploadBtn = this.$refs.upload.$children[0].$refs.input;
    //this.uploadBtn.webkitdirectory = true;//让el-upload支持上传文件夹
  },

  beforeDestroy() {},
  methods: {
    // 获取上传文件----------------------------------------
    getUploadFiles(file) {
      file = file.raw;
      this.logoSrc = URL.createObjectURL(file);
      // console.log(`获取上传文件：`, file);
    },
    go2CLEWM(d) {
      this.$g.copy(this.text);
      this.$g.go2RouterPath(
        { path: `http://cli.im/url`, query: {}, target: `_blank` },
        this
      );
    },
    valid(d) {
      if (!this.form.NAME) return this.$message.error(this.$refs.NAME.$attrs.placeholder);
    },

    downloadQrcode(d) {
      this.$g.downloadImg({
        dom: this.$refs.sgQrcode.$refs[`vue-qr-container`],
        fileName: `分享二维码.png`,
      });
    },
    cancel() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.sgCreateQrcode {
}

>>> .sgCreateQrcode-el-dialog {
  .form-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow-y: hidden;
  }
}
</style>

demo

<template>
  <div :class="$options.name">
    <el-button
      type=""
      @click="
        rw_createQrcode({
          d: { text: `${$g.getWebURLBeforeHash()}/static/html/chooseSeat/` },
        })
      "
      >生成二维码</el-button
    >

    <sgCreateQrcode
      :data="data_createQrcode"
      v-model="show_createQrcode"
      v-if="show_createQrcode"
      @s="g()"
    />
  </div>
</template>
<script>
import sgCreateQrcode from "@/vue/components/admin/sgCreateQrcode";
export default {
  components: { sgCreateQrcode },
  data() {
    return {
      data_createQrcode: {},
      show_createQrcode: false,
    };
  },

  methods: {
    rw_createQrcode({ w = true, d = {} } = {}) {
      this.data_createQrcode = this.$g.deepCopy(d);
      this.data_createQrcode.disabled = !w;
      this.show_createQrcode = true;
    },
  },
};
</script>