import React, { Component } from 'react'
|
import { Modal, Button, Input, message } from 'antd'
|
import { CopyOutlined } from '@ant-design/icons'
|
|
import './index.scss'
|
|
const { TextArea } = Input
|
|
class LowerText extends Component {
|
state = {
|
visible: false,
|
content: ''
|
}
|
|
trigger = () => {
|
this.setState({
|
visible: true,
|
content: ''
|
})
|
}
|
|
changeValue = (e) => {
|
this.setState({content: e.target.value.toLowerCase()})
|
}
|
|
copy = () => {
|
const { content } = this.state
|
|
if (navigator.clipboard) {
|
navigator.clipboard.writeText(content)
|
} else {
|
let oInput = document.createElement('input')
|
oInput.value = content
|
document.body.appendChild(oInput)
|
oInput.select()
|
document.execCommand('Copy')
|
document.body.removeChild(oInput)
|
}
|
|
message.success('复制成功。')
|
}
|
|
render() {
|
const { visible, content } = this.state
|
|
return (
|
<>
|
<Button className="mk-border-yellow" onClick={this.trigger}>文本转小写</Button>
|
<Modal
|
title="文本转小写"
|
wrapClassName="lower-text-modal"
|
visible={visible}
|
width={850}
|
maskClosable={false}
|
centered={true}
|
onCancel={() => { this.setState({ visible: false })}}
|
footer={[
|
<Button key="cancel" onClick={() => { this.setState({ visible: false })}}>关闭</Button>
|
]}
|
destroyOnClose
|
>
|
<TextArea defaultValue="" autoFocus rows={7} onChange={this.changeValue}/>
|
<CopyOutlined onClick={this.copy}/>
|
<div className="lower-value">{content}</div>
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default LowerText
|
