[完善]复制到剪切板

src/app/service/pattern.service.ts

@@ -4,10 +4,10 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class PatternService {
-  static isProd: any = true;
+  static isProd: any = false;
 
   constructor() { }
 
-  public isProd: boolean = true //是否是生产环境
+  public isProd: boolean = false //是否是生产环境
 
 }

src/app/system-management/system-management.module.ts

@@ -48,6 +48,7 @@ import { PagesModule } from '../pages/pages.module';
 import { WarningEventsComponent } from './organization/warning-events/warning-events.component';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 @NgModule({
   declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, PushComponent, EditPushItemComponent, FileOfLicenseComponent, UpdateOfLicenseComponent, AddFileOfLicenseComponent, EditFileOfLicenseComponent, AddUpdateOfLicenseComponent, EditUpdateOfLicenseComponent, MenuComponent, AddmenuComponent, EditmenuComponent, MenusComponent, WarningEventsComponent],
   imports: [
@@ -72,7 +73,8 @@ import { NzNotificationModule } from 'ng-zorro-antd/notification';
     NzCheckboxModule,
     PagesModule,
     NzSwitchModule,
-    NzNotificationModule
+    NzNotificationModule,
+    DragDropModule
   ],
   entryComponents: [AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, EditPushItemComponent, AddFileOfLicenseComponent, EditFileOfLicenseComponent, AddUpdateOfLicenseComponent, EditUpdateOfLicenseComponent, AddmenuComponent, EditmenuComponent, MenusComponent, WarningEventsComponent]
 

src/app/system-management/user/user.component.html

@@ -108,7 +108,7 @@
                   </div>
                   <div class="message">
                     当前密码为: {{fruit.newPassword}}
-                    <i (click)="copy()" nz-icon nzType="copy" nzTheme="outline"></i>
+                    <i title="复制密码" (click)="copy()" nz-icon nzType="copy" nzTheme="outline"></i>
                   </div>
                 </div>
               </ng-template>

src/app/system-management/user/user.component.ts

@@ -298,12 +298,42 @@ export class UserComponent implements OnInit {
   openNewPassword(data) {
     this.notificationService.template(this.newPasswordtemplate, { nzData: data, nzDuration: 0, nzPlacement: 'top', nzClass: 'resetPassword' });
   }
+
+  handleCopyValue(text) {
+    //浏览器禁用了非安全域的 navigator.clipboard 对象
+    //在线上环境会报错 TypeError: Cannot read properties of undefined (reading 'writeText')
+    if (!navigator.clipboard && window.isSecureContext) {
+      return navigator.clipboard.writeText(text)
+    } else {
+      // 判断是否支持拷贝
+      if (!document.execCommand('copy')) return Promise.reject()
+      // 创建标签，并隐藏
+      const textArea = document.createElement('textarea')
+      textArea.style.position = 'fixed'
+      textArea.style.top = textArea.style.left = '-100vh'
+      textArea.style.opacity = '0'
+      textArea.value = text
+      document.body.appendChild(textArea)
+      // 聚焦、复制
+      textArea.focus()
+      textArea.select()
+      return new Promise((resolve, reject) => {
+        // 不知为何，必须写这个三目，不然copy不上
+        document.execCommand('copy') ? resolve(0) : reject()
+        textArea.remove()
+      })
+    }
+  }
+
+
   copy() {
-    navigator.clipboard.writeText(this.newPassword).then(() => {
-      this.message.create('success', '复制成功!');
-    }, () => {
-      this.message.create('success', '复制失败!');
-    });
+    this.handleCopyValue(this.newPassword)
+      .then(() => {
+        this.message.create('success', '复制成功!');
+      })
+      .catch(() => {
+        this.message.create('success', '自动复制失败，请手动复制!');
+      })
   }