uk_front/components/ExportDialog.vue

<template>
  <el-dialog :lock-scroll="false" :title="title" :visible.sync="visible" width="700px"  :before-close="handleClose" :close-on-click-modal="false" top="0">
      <el-form :model="emailForm" :rules="rules" ref="ruleForm">
        <el-form-item v-for="val,key in emailForm" :key="key" :label="labelShow ? key : ''" :label-width="labelWidth+'px'" :prop="key">
          <el-input v-model="emailForm[key]"  readonly  ></el-input><el-button :class="key" :data-clipboard-text="emailForm[key]" type="primary"  @click.prevent="copyUrl(key)">copy link</el-button>
        </el-form-item>
      </el-form>
   </el-dialog>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  props: {
    title:{
      type:String,
      default: 'Send Email'
    },
    sendbtnCext:{
      type:String,
      default: 'SUBMIT REQUEST'
    },
    isSendPdf:{
      type:Boolean,
      default: false
    },
    labelShow:{
      type:Boolean,
      default: true
    },
    emailForm: {},
    rules: {},
    labelWidth: Number,
    visible: {
      type: Boolean,
      default: false
    },
  },
  methods:{
    copyUrl(key){
      let clipboard = new Clipboard(`.${key}`)
      clipboard.on('success', e => {
        this.$message.success("link copied to clipboard") // 利用Element组件给予成功提示
        clipboard.destroy() // 释放内存 
      })
      clipboard.on('error', e => {
        this.$message.error('The browser does not support automatic replication') // 给予错误提示信息
        clipboard.destroy() // 释放内存
      })
    },
    handleClose(){
      this.$emit('update:visible', false)
    },
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.el-form-item__content){
  display: flex;
}
:deep(.el-input__inner){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
:deep(.el-button){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #004a97;
  border-color:#004a97;
}
:deep(.el-dialog__header){
    padding: 20px;
    border-bottom:1px solid #eee;
}
</style>