uiwjs / react-code-preview-layout

A react component showing the layout of `code` and `code preview example`.
https://uiwjs.github.io/react-code-preview-layout/
MIT License
7 stars 0 forks source link

点击复制按钮有时候会失效 #21

Closed pythoner-Alan-lee closed 1 year ago

pythoner-Alan-lee commented 1 year ago
import logo from "./logo.svg";
import "./App.css";
import CodeLayout from "react-code-preview-layout";

function App() {
  const Preview = CodeLayout.Preview;
  const Code = CodeLayout.Code;
  const Toolbar = CodeLayout.Toolbar;
  const code = `import React from "react";\nimport { Button } from "uiw";\nconst Demo = ()=>{\n  return<div><Button>按钮</Button></div>\n};\nexport default Demo;`;

  return (
    <div className="App">
      <header className="App-header">
        <CodeLayout style={{ border: "1px dashed #333" }}>
          <Preview style={{ background: "#fff" }}>
            <div style={{ color: "#333" }}>这里是示例展示</div>
          </Preview>
          <Toolbar style={{ color: "#333" }}>Code Example</Toolbar>
          <Code style={{ background: "#282c34" }}>
            <pre>{code}</pre>
          </Code>
        </CodeLayout>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
jaywcjlove commented 1 year ago

https://github.com/uiwjs/react-code-preview-layout/blob/9999801c7bae3f208482d0904d9de1876f9f693e/core/src/Toolbar.tsx#L29-L30

<Toolbar  text="传入需要复制的文本" />
pythoner-Alan-lee commented 1 year ago

解决了 感谢