想要的效果是,点击复制链接的按钮,然后就把事先准备好的链接复制上,然后crtr+v就能黏贴出来

 

我实在react的项目中使用的

// 复制链接方法
copyUrl() {
  let inputText = document.getElementById('inputText');
  let currentFocus = document.activeElement;
  inputText.focus();
  inputText.setSelectionRange(0, inputText.value.length);
  document.execCommand('copy', true);
  currentFocus.focus();
  if (document.execCommand('copy', true)) {
    Toaster.show({
      type: 'success',
      content: '复制链接地址成功'
    });
  }
}

 

//在进入页面的时候,就把链接准备好了

let copyUrl = 'http://f.xxx.com/priceList/detail/15?bpmCode='+self.state.bpmCode
self.setState({ copyBtnCuipiUrl: copyUrl }, () => {});
<input className="copyUrlInput" type="text" id="inputText" value={this.state.copyBtnCuipiUrl}/>
<Button className="copyUrlBtn" size="small" type="primary" onClick={this.copyUrl}>复制催批链接</Button>

 

//css 使得最开始的时候input框可以被button按钮给盖住

.copyUrl{
  float: right;
  .copyUrlInput{
    width: 20px;
    float: right;
    margin-right: 20px;
  }
  .copyUrlBtn{
    position: absolute;
    right: 20px;
  }
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐