江西网站建设网络公司,用阿里云搭建WordPress,用python做美食网站,游戏运营备案官方网站前言: 有个小需求,需要写成组件,在当前页面多次重复写的一个icon,点击复制当前内容到粘贴板,为了方便封装成组件了,具体就不在这赘述了 注意: 原生的粘贴方法里面不能去放异步操作,会失效 最好在父组件确定字段,直接一次性拿到所有内容 啰啰嗦嗦的独白: 可看可不看(因为我是详情…前言: 有个小需求,需要写成组件,在当前页面多次重复写的一个icon,点击复制当前内容到粘贴板,为了方便封装成组件了,具体就不在这赘述了 注意: 原生的粘贴方法里面不能去放异步操作,会失效 最好在父组件确定字段,直接一次性拿到所有内容 啰啰嗦嗦的独白: 可看可不看(因为我是详情页有默认反显值,默认值有外网有需要脱敏值,还好跟后端商量了下,一次性接口返回给我就行了,我再塞给子组件里面的变量,点击的时候根据点击按钮的不同去获取接口返回的不同的脱敏值)
// HTML
templatedivIcon typeios-copy size23 clickcopyTheClipboard classios_copy//div
/template
scriptexport default ({name:,prop: {pasteBoard: Object}data () {return {}},},created () {},methods: {copyTheClipboard () {let val let that this// 不同的位置点击传不同的值区分if (this.differentiate name ) {// 父组件传过来的默认脱敏值val that.pasteBoard.customName}const save function (e) {e.clipboardData.setData(text/plain, val) // 塞数据到剪贴板e.preventDefault(); // 阻止默认事件}document.addEventListener(copy, save);document.execCommand(copy); // 复制that.$Message.success(复制成功)document.removeEventListener(copy, save); // **复制ok之后记得要移除绑定事件}}})
/script
style langless scoped
/style
