Clipboard 复制剪切板

TIP

1.0.6+

Clipboard 复制到剪切板 - 图1

  1. <div style="width:400px">
  2. <div style="margin-bottom:10px">
  3. <el-button @click="copy">直接复制</el-button>
  4. <el-button @click="textarea=''">清 空</el-button>
  5. </div>
  6. <el-input placeholder="内容" v-model="text">
  7. <template slot="append">
  8. <el-button @click="copyText" color="primary">复制</el-button>
  9. </template>
  10. </el-input>
  11. <div style="margin-top:10px">
  12. <el-input type="textarea" v-model="textarea" cols="40" rows="3"></el-input>
  13. </div>
  14. </div>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. text: '',
  20. textarea: ''
  21. }
  22. },
  23. methods: {
  24. copyText() {
  25. this.$Clipboard({
  26. text: this.text
  27. }).then(() => {
  28. this.$message.success('复制成功')
  29. }).catch(() => {
  30. this.$message.error('复制失败')
  31. });
  32. },
  33. copy() {
  34. this.$Clipboard({
  35. text: '测试==复制至剪切板的文本==测试'
  36. }).then(() => {
  37. this.$message.success('复制成功')
  38. }).catch(() => {
  39. this.$message.error('复制失败')
  40. });
  41. }
  42. }
  43. }
  44. </script>

Variables

参数说明类型可选值默认值
text复制的文本String--