一, vue
效果:
代码:
- <template>
- <div>
- <el-row style="height:40px" type="flex">
- <el-col :span="6">
- <p>{{res}}</p></el-col>
- <el-col :span="2">
- <el-button type="button" @click="copy()"> 复制 </el-button>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- res: '要复制的内容',
- }
- },
- methods: {
- copy() {
- this.$copyText(this.res).then(function (e) {
- alert('已复制')
- }, function (e) {
- alert('复制失败')
- })
- },
- }
- }
- </script>
二, html
效果:
代码:
- <!DOCTYPE HTML>
- <HTML lang="zh">
- <head>
- </head>
- <body>
- <div>
- <span id="copy">
- 复制的内容
- </span>
- <button type="button" onclick="copy()">
- 复制
- </button>
- </div>
- </body>
- <script type="text/javascript" src="static/js/jquery.min.js">
- </script>
- <script type="text/javascript" src="static/js/main.min.js">
- </script>
- <script type="text/javascript">
- function copy() {
- var copyTest = document.getElementById("copy").innerText;
- var inputTest = document.createElement('input');
- inputTest.value = copyTest;
- document.body.appendChild(inputTest);
- inputTest.select();
- document.execCommand("Copy");
- inputTest.className = 'oInput';
- inputTest.style.display = 'none';
- alert('复制成功');
- }
- </script>
- </HTML>
来源: http://www.bubuko.com/infodetail-3344908.html