vue实现分享功能

原创于 2024-12-18 20:20:27 发布 · 423 阅读

CC 4.0 BY-SA版权

文章标签：

分享复制路径到剪贴板

最近项目中需要做文件分享的功能，特在此做一下记录，希望给相同需求的码友一个参考

项目整体代码

<div @click="controlsBtn()" >
  <span>分享</span>	
</div>
<el-dialog :title="title" :visible.sync="dialogShareVisible">
  <div class="breadcrumb">
    <span>分享地址：{{ shareData }}</span>
    <el-button @click="copyText(shareData)">复制地址</el-button>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancelShare" >关 闭</el-button>
  </div>
</el-dialog>
// 接口 根据项目
import { shareSubmit } from '@/modules/ossClient/api/ossWebApi'
export default {
  data () {
    return {
    	title: '分享',
    	dialogShareVisible: false,
    	controlsList: [], // 多选批量分享的时候会用到
		shareData: '',
	}
  },
  methods: {
	async controlsBtn () {
	   this.dialogShareVisible = true
	    const ids = []
	    if (item?.id) {
	      ids.push(item?.id)
	    } else if (this.controlsList.length) {
	      this.controlsList.forEach((item) => {
	        ids.push(item.id)
	      })
	    }
	    const res = await shareSubmit(ids.join(','))
	    const urlWithoutParams = window.location.origin
	    this.shareData = urlWithoutParams + res.data.data
	},
	copyText(text){
	   const isClipboardApiSupported = window.navigator && window.navigator.clipboard
	   if (isClipboardApiSupported) {
	     window.navigator.clipboard.writeText(text)
	   } else {
	     const textarea = document.createElement('textarea')
	     textarea.readOnly = true
	     textarea.value = text
	     textarea.style.position = 'absolute'
	     textarea.style.top = '-9999px'
	     textarea.style.left = '-9999px'
	     document.body.appendChild(textarea)
	     textarea.select()
	     document.execCommand('copy')
	     textarea.remove()
	   }
	}
  }
}

复制文本到剪贴板的核心方法

copyText(text){
   // Whether to support navigator.clipboard attribute
   const isClipboardApiSupported = window.navigator && window.navigator.clipboard
   if (isClipboardApiSupported) {
     window.navigator.clipboard.writeText(text)
   } else {
     const textarea = document.createElement('textarea')
     textarea.readOnly = true
     textarea.value = text
     textarea.style.position = 'absolute'
     textarea.style.top = '-9999px'
     textarea.style.left = '-9999px'
     document.body.appendChild(textarea)
     textarea.select()
     document.execCommand('copy')
     textarea.remove()
   }
}