clipboard 剪切板

v0.8+

我们可以通过 clipboard 模块的 getString()setString() 接口从系统的粘贴板获取内容或者设置内容。

以前当我们收到一条短信验证码信息时,除了人肉拷贝,我们无法获取拷贝短信的内容。这是非常苦恼的。但是现在我们可以通过简单的调用 clipboard.getString() 接口来获取短信内容了。

注意

  • 仅支持文本拷贝
  • 出于安全考虑和平台限制,只支持 Android 和 iOS,不支持 html5。

API

getString(callback)

从系统粘贴板读取内容。

参数

  • callback {function (ret)}:执行完读取操作后的回调函数。ret {Object}callback 函数的参数,有两个属性:
    • ret.data:获取到的文本内容;
    • ret.result:返回状态,可能为 successfail

setString(text)

将一段文本复制到剪切板,相当于手动复制文本。

参数

  • text {string}:要复制到剪切板的字符串。

Example

  1. <template>
  2. <div>
  3. <div class="div">
  4. <text class="text" @click="onItemClick">{{message}}</text>
  5. </div>
  6. <div class="div">
  7. <text class="text" @click="setContent">Click to copy: {{tobecopied}}</text>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. const clipboard = weex.requireModule('clipboard')
  13. export default {
  14. data () {
  15. return {
  16. tobecopied: 'yay!',
  17. message: 'nothing.'
  18. }
  19. },
  20. methods: {
  21. setContent () {
  22. clipboard.setString(this.tobecopied)
  23. },
  24. onItemClick () {
  25. this.message = 'clicked! '
  26. clipboard.getString(ret => {
  27. this.message = 'text from clipboard:' + ret.data
  28. })
  29. }
  30. }
  31. }
  32. </script>
  33. <style scoped>
  34. .div {
  35. flex-direction: row;
  36. justify-content: space-between;
  37. align-items: center;
  38. width: 750px;
  39. height: 90px;
  40. padding-left: 30px;
  41. padding-right: 30px;
  42. border-bottom-width: 1px;
  43. border-style: solid;
  44. border-color: #DDDDDD;
  45. }
  46. .text {
  47. width: 750px;
  48. height: 90px;
  49. }
  50. </style>

try it