<template> <el-dialog :title="linkObj.title" :visible.sync="linkObj.show" center width="800px"> <el-form :model="form" ref="form" label-width="100px"> <el-form-item label="输入链接" prop="link" :rules="[ { required: true, message: '内容不能为空'} ]" > <el-input v-model="form.link" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">获取</el-button> </el-form-item> </el-form> <div class="link_content" v-if="content.show"> <div class="content"> <el-input v-model="content.text" readonly="readonly" id="text"></el-input> <textarea id="input" style="opacity:0;z-index=-10;position:absolute;top:0;left:0;"></textarea> </div> <el-button type="primary" @click="copyUrl(content.text)">复制链接</el-button> </div> </el-dialog> </template> <script> import {getLinkApi} from "../../../service/api"; export default { name: "getLink", props: ["linkObj"], data() { return { form: { link: "" }, content:{ show:false, text:"" } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { let json={} json.url=this.form.link; getLinkApi(json).then((res)=>{ this.content.show=true; this.content.text=res.url; }) } else { console.log("error submit!!"); return false; } }); }, copyUrl(data){ let url =data; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 this.$message({ message: '已成功复制到剪切板', type: 'success' }); oInput.remove() }, }, watch:{ 'linkObj.show':function(a){ if(!a){ this.form.link=""; this.content.show=false; } } } }; </script> <style scoped lang="less"> .content{ height: 100px; } </style>