全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

Ionic访问手机剪切板实现复制粘贴功能

2021年2月4日 476点热度 1人点赞 0条评论

要在Ionic项目里面实现一些复制或者粘贴的功能,比如点击“复制”按钮,就复制订单号这样的功能,是非常常见的,我们可以使用cordova的插件来实现。首先安装插件。

 

操作步骤

 

一、安装

分别执行下面的命令两行命令安装插件。

ionic cordova plugin add cordova-clipboard
npm install @ionic-native/clipboard

安装好以后,找到app.module.ts文件,在文件头部区域引入Clipboard:

import { Clipboard } from '@ionic-native/clipboard/ngx';

然后在providers数组里也加上Clipboard:

providers: [
		...
    Clipboard,
    ...
  ]

 

二、使用

接着在使用的地方也要先引入,然后在构造器里声明就可以使用了。

...
import { Clipboard } from '@ionic-native/clipboard/ngx';
...

export class DemoPage implements OnInit {

  // 微信号
  weChatNum: any;

  constructor(private clipboard: Clipboard) { }

	// 复制微信号
  copyWechat() {
    this.clipboard.copy(this.weChatNum);
  }
  
  // 粘贴
  this.clipboard.paste().then(
   (resolve: string) => {
      alert(resolve);
    },
    (reject: string) => {
      alert('Error: ' + reject);
    }
  );

  // 清空剪切板 
	this.clipboard.clear();

}

 

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小技巧
最后更新:2021年2月4日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号