From 95f6f3b8c9d347700e1cd3957346c436baea5970 Mon Sep 17 00:00:00 2001
From: RainSun <zhaoyingbo@live.cn>
Date: Sat, 7 Mar 2020 20:43:26 +0800
Subject: [PATCH] add copy feature

---
 src/utils/language.js |  24 +-
 src/views/Add/Add.vue | 711 ++++++++++++++++++++++--------------------
 2 files changed, 403 insertions(+), 332 deletions(-)

diff --git a/src/utils/language.js b/src/utils/language.js
index 6521db9..cbae240 100644
--- a/src/utils/language.js
+++ b/src/utils/language.js
@@ -128,8 +128,10 @@ export function lang() {
 						options:['6 位', '12 位', '18 位', '24 位', '32 位']
 					},
 					settings:['包含大写', '包含小写', '包含数字', '包含符号'],
-					actions: ['生成','关闭'],
+					actions: ['生成', '复制', '关闭'],
 					code_res_empty: '未生成',
+					copy_successful: '(复制成功)',
+					copy_failed: '(复制失败)',
 				}
 			},
 			EN: {
@@ -145,8 +147,10 @@ export function lang() {
 						options:['6 Digit', '12 Digit', '18 Digit', '24 Digit', '32 Digit']
 					},
 					settings:['Contain Uppercase', 'Contain Lowercase', 'Contain Number', 'Contain Symbol'],
-					actions: ['Generate','Close'],
+					actions: ['Generate', 'Copy','Close'],
 					code_res_empty: 'Not generated',
+					copy_successful: '(Copy successful)',
+					copy_failed: '(Failed to copy)',
 				}
 			}
 		},
@@ -278,6 +282,14 @@ export function lang() {
 			CHS:{
 				title: '更新日志',
 				timeline: [
+					{
+						label: '新建密码记录生成的密码支持复制',
+						tag:'功能更新',
+						content: [
+							'在新建密码页生成密码支持一键复制',
+							'2020-03-07'
+						]
+					},
 					{
 						label: '修复云端最后修改时间不更新的问题',
 						tag:'bug修复',
@@ -363,6 +375,14 @@ export function lang() {
 			EN:{
 				title: 'Update Log',
 				timeline: [
+					{
+						label: 'Generated passwords support replication',
+						tag:'Feature update',
+						content: [
+							'Generate a password on the new password page',
+							'2020-03-07'
+						]
+					},
 					{
 						label: 'Fix the problem that the last modification time of the cloud is not updated',
 						tag:'Bug fix',
diff --git a/src/views/Add/Add.vue b/src/views/Add/Add.vue
index 254f20e..53d9779 100644
--- a/src/views/Add/Add.vue
+++ b/src/views/Add/Add.vue
@@ -1,357 +1,408 @@
 <template>
-	<div class="add">
-		<md-app md-waterfall md-mode="fixed">
-			<md-app-toolbar class="md-primary toolbar">
-				<div class="md-toolbar-section-start">
-					<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
-					<h3 class="md-title" style="flex: 1">{{ id_cache ? lang.title[1] : lang.title[0] }}</h3>
-				</div>
-			</md-app-toolbar>
-			<md-app-content>
-				<v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
-					<div ref="list_placeholder" style="height: 54px;"></div>
-					<md-field :class="title_verify ? '' : 'md-invalid'">
-						<label>{{ lang.subheader[0] }}</label>
-						<md-input v-model="title" required></md-input>
-						<span class="md-error">{{ lang.empty_error[0] }}</span>
-					</md-field>
+  <div class="add">
+    <md-app md-waterfall md-mode="fixed">
+      <md-app-toolbar class="md-primary toolbar">
+        <div class="md-toolbar-section-start">
+          <md-button class="md-icon-button" @click="back()">
+            <md-icon>arrow_back</md-icon>
+          </md-button>
+          <h3 class="md-title" style="flex: 1">{{ id_cache ? lang.title[1] : lang.title[0] }}</h3>
+        </div>
+      </md-app-toolbar>
+      <md-app-content>
+        <v-touch @swiperight="back()" :swipe-options="{ direction: 'horizontal' }">
+          <div ref="list_placeholder" style="height: 54px;"></div>
+          <md-field :class="title_verify ? '' : 'md-invalid'">
+            <label>{{ lang.subheader[0] }}</label>
+            <md-input v-model="title" required></md-input>
+            <span class="md-error">{{ lang.empty_error[0] }}</span>
+          </md-field>
 
-					<md-field :class="user_name_verify ? '' : 'md-invalid'">
-						<label>{{ lang.subheader[1] }}</label>
-						<md-input v-model="user_name" required></md-input>
-						<span class="md-error">{{ lang.empty_error[1] }}</span>
-					</md-field>
+          <md-field :class="user_name_verify ? '' : 'md-invalid'">
+            <label>{{ lang.subheader[1] }}</label>
+            <md-input v-model="user_name" required></md-input>
+            <span class="md-error">{{ lang.empty_error[1] }}</span>
+          </md-field>
 
-					<md-field :class="password_verify ? '' : 'md-invalid'">
-						<label>{{ lang.subheader[2] }}</label>
-						<md-input v-model="password" required></md-input>
-						<span class="md-error">{{ lang.empty_error[2] }}</span>
-						<span class="md-caption" style="color:#448AFF;" @click="show_dialog = true">生成密码</span>
-					</md-field>
+          <md-field :class="password_verify ? '' : 'md-invalid'">
+            <label>{{ lang.subheader[2] }}</label>
+            <md-input v-model="password" required></md-input>
+            <span class="md-error">{{ lang.empty_error[2] }}</span>
+            <span class="md-caption" style="color:#448AFF;" @click="show_dialog = true">生成密码</span>
+          </md-field>
 
-					<md-field>
-						<label>{{ lang.subheader[3] }}</label>
-						<md-input v-model="web_address"></md-input>
-					</md-field>
+          <md-field>
+            <label>{{ lang.subheader[3] }}</label>
+            <md-input v-model="web_address"></md-input>
+          </md-field>
 
-					<md-field>
-						<label>{{ lang.subheader[4] }}</label>
-						<md-textarea v-model="node"></md-textarea>
-					</md-field>
+          <md-field>
+            <label>{{ lang.subheader[4] }}</label>
+            <md-textarea v-model="node"></md-textarea>
+          </md-field>
 
-					<md-button class="md-raised md-primary expand" @click="judgeContent()">{{ lang.enter }}</md-button>
+          <md-button class="md-raised md-primary expand" @click="judgeContent()">{{ lang.enter }}</md-button>
 
-					<md-dialog :md-active.sync="show_dialog" style="min-width: 50%;">
-						<md-dialog-title>生成密码</md-dialog-title>
-						<md-list>
-							<!-- 生成结果 -->
-							<md-subheader class="md-primary">{{ lang.generator.subheader[0] }}</md-subheader>
-							<md-list-item>
-								<p>{{ password ? password : lang.generator.code_res_empty }}</p>
-							</md-list-item>
-							<!-- settings -->
-							<md-subheader class="md-primary">{{ lang.generator.subheader[1] }}</md-subheader>
-							<!-- 长度设置 -->
-							<md-list-item>
-								<md-field>
-									<label for="expired_time">{{ lang.generator.length_setter.label }}</label>
-									<md-select v-model="code_length" name="code_length" id="code_length">
-										<md-option value="6">{{ lang.generator.length_setter.options[0] }}</md-option>
-										<md-option value="12">{{ lang.generator.length_setter.options[1] }}</md-option>
-										<md-option value="18">{{ lang.generator.length_setter.options[2] }}</md-option>
-										<md-option value="24">{{ lang.generator.length_setter.options[3] }}</md-option>
-										<md-option value="32">{{ lang.generator.length_setter.options[4] }}</md-option>
-									</md-select>
-								</md-field>
-							</md-list-item>
-							<!-- 大写字母 -->
-							<md-list-item>
-								<span class="md-list-item-text">{{ lang.generator.settings[0] }}</span>
-								<md-switch v-model="have_upper" class="md-primary"></md-switch>
-							</md-list-item>
-							<!-- 小写字母 -->
-							<md-list-item>
-								<span class="md-list-item-text">{{ lang.generator.settings[1] }}</span>
-								<md-switch v-model="have_lower" class="md-primary"></md-switch>
-							</md-list-item>
-							<!-- 数字 -->
-							<md-list-item>
-								<span class="md-list-item-text">{{ lang.generator.settings[2] }}</span>
-								<md-switch v-model="have_num" class="md-primary"></md-switch>
-							</md-list-item>
-							<!-- 符号 -->
-							<md-list-item>
-								<span class="md-list-item-text">{{ lang.generator.settings[3] }}</span>
-								<md-switch v-model="have_symbol" class="md-primary"></md-switch>
-							</md-list-item>
-						</md-list>
+          <md-dialog :md-active.sync="show_dialog" style="min-width: 50%;">
+            <md-dialog-title>生成密码{{copy_state}}</md-dialog-title>
+            <md-list>
+              <!-- 生成结果 -->
+              <md-subheader class="md-primary">{{ lang.generator.subheader[0] }}</md-subheader>
+              <md-list-item>
+                <p>{{ password ? password : lang.generator.code_res_empty }}</p>
+              </md-list-item>
+              <!-- settings -->
+              <md-subheader class="md-primary">{{ lang.generator.subheader[1] }}</md-subheader>
+              <!-- 长度设置 -->
+              <md-list-item>
+                <md-field>
+                  <label for="expired_time">{{ lang.generator.length_setter.label }}</label>
+                  <md-select v-model="code_length" name="code_length" id="code_length">
+                    <md-option value="6">{{ lang.generator.length_setter.options[0] }}</md-option>
+                    <md-option value="12">{{ lang.generator.length_setter.options[1] }}</md-option>
+                    <md-option value="18">{{ lang.generator.length_setter.options[2] }}</md-option>
+                    <md-option value="24">{{ lang.generator.length_setter.options[3] }}</md-option>
+                    <md-option value="32">{{ lang.generator.length_setter.options[4] }}</md-option>
+                  </md-select>
+                </md-field>
+              </md-list-item>
+              <!-- 大写字母 -->
+              <md-list-item>
+                <span class="md-list-item-text">{{ lang.generator.settings[0] }}</span>
+                <md-switch v-model="have_upper" class="md-primary"></md-switch>
+              </md-list-item>
+              <!-- 小写字母 -->
+              <md-list-item>
+                <span class="md-list-item-text">{{ lang.generator.settings[1] }}</span>
+                <md-switch v-model="have_lower" class="md-primary"></md-switch>
+              </md-list-item>
+              <!-- 数字 -->
+              <md-list-item>
+                <span class="md-list-item-text">{{ lang.generator.settings[2] }}</span>
+                <md-switch v-model="have_num" class="md-primary"></md-switch>
+              </md-list-item>
+              <!-- 符号 -->
+              <md-list-item>
+                <span class="md-list-item-text">{{ lang.generator.settings[3] }}</span>
+                <md-switch v-model="have_symbol" class="md-primary"></md-switch>
+              </md-list-item>
+            </md-list>
 
-						<md-dialog-actions>
-							<md-button class="md-primary" @click="generateStart()">{{ lang.generator.actions[0] }}</md-button>
-							<md-button class="md-primary" @click="show_dialog = false">{{ lang.generator.actions[1] }}</md-button>
-						</md-dialog-actions>
-					</md-dialog>
-				</v-touch>
-			</md-app-content>
-		</md-app>
-	</div>
+            <md-dialog-actions>
+              <md-button class="md-primary" @click="generateStart()">{{ lang.generator.actions[0] }}</md-button>
+              <md-button
+                class="md-primary"
+                v-clipboard:copy="password"
+                v-clipboard:success="onCopyCode"
+                v-clipboard:error="onErrorCode"
+              >{{ lang.generator.actions[1] }}</md-button>
+              <md-button
+                class="md-primary"
+                @click="show_dialog = false"
+              >{{ lang.generator.actions[2] }}</md-button>
+            </md-dialog-actions>
+          </md-dialog>
+        </v-touch>
+      </md-app-content>
+    </md-app>
+  </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import { mapState, mapActions } from 'vuex';
-import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
-import { lang } from '@/utils/language.js';
-import { setHtmlFontSize } from '@/utils/px2rem.js';
-import { generatePassword } from '@/utils/generator.js';
+import { mapState, mapActions } from "vuex";
+import {
+  encrypt,
+  decrypt,
+  encryptMainCode,
+  decryptMainCode
+} from "@/utils/aes.js";
+import { lang } from "@/utils/language.js";
+import { setHtmlFontSize } from "@/utils/px2rem.js";
+import { generatePassword } from "@/utils/generator.js";
 export default {
-	name: 'Add',
-	data() {
-		return {
-			clientHeight: '',
-			title: '',
-			user_name: '',
-			password: '',
-			node: '',
-			web_address: '',
-			id_cache: '',
-			open_count_cache: '',
-			title_verify: true,
-			user_name_verify: true,
-			password_verify: true,
-			lang: '',
-			show_dialog: false,
-			// 大写字母
-			have_upper: true,
-			// 小写字母
-			have_lower: true,
-			// 数字
-			have_num: true,
-			// 符号
-			have_symbol: false,
-			// 密码长度
-			code_length: 12
-		};
-	},
-	computed: {
-		...mapState(['row_data', 'row_pwd', 'settings'])
-	},
-	methods: {
-		...mapActions(['setRowData', 'setRowPwd']),
-		// 修改md-app的最小高度
-		changeFixed(clientHeight) {
-			//动态修改样式
-			// console.log(clientHeight);
-			// window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
-			this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px';
-			this.$refs.list_placeholder.parentNode.style.minHeight = clientHeight - 32 + 'px';
-			window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light');
-		},
-		// 初始化
-		init() {
-			// 刷新vuex
-			this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
-			// 判断有无用户密码
-			if (Object.keys(this.row_pwd).length != 0) {
-				// 有密码，已经输入过了
-				let now = new Date().getTime();
-				if (now - this.row_pwd.create_time < this.settings.expired_time) {
-					// 上次写入时间距离现在在（默认五分钟）之内
-					// 判断是否是更新
-					this.initLanguage();
-					if (this.$route.params.modify_content) {
-						// 刷新重置数据
-						let content = this.$route.params.modify_content;
-						this.title = content.title;
-						this.user_name = content.user_name;
-						this.password = content.password;
-						this.node = content.node;
-						this.web_address = content.web_address;
-						this.id_cache = content.id;
-						this.open_count_cache = content.open_count;
-					}
-					return;
-				} else {
-					// 密码超时
-					this.turnToHome('密码超时');
-				}
-			} else {
-				// 没有密码
-				this.turnToHome('无密码');
-			}
-		},
+  name: "Add",
+  data() {
+    return {
+      clientHeight: "",
+      title: "",
+      user_name: "",
+      password: "",
+      node: "",
+      web_address: "",
+      id_cache: "",
+      open_count_cache: "",
+      title_verify: true,
+      user_name_verify: true,
+      password_verify: true,
+      lang: "",
+      show_dialog: false,
+      // 大写字母
+      have_upper: true,
+      // 小写字母
+      have_lower: true,
+      // 数字
+      have_num: true,
+      // 符号
+      have_symbol: false,
+      // 密码长度
+      code_length: 12,
+      // 密码复制状态
+      copy_state: ""
+    };
+  },
+  computed: {
+    ...mapState(["row_data", "row_pwd", "settings"])
+  },
+  methods: {
+    ...mapActions(["setRowData", "setRowPwd"]),
+    // 修改md-app的最小高度
+    changeFixed(clientHeight) {
+      //动态修改样式
+      // console.log(clientHeight);
+      // window.document.getElementsByClassName('md-content')[0].style.minHeight = clientHeight + 'px';
+      this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
+        clientHeight + "px";
+      this.$refs.list_placeholder.parentNode.style.minHeight =
+        clientHeight - 32 + "px";
+      window.document.documentElement.setAttribute(
+        "data-theme",
+        this.settings.is_dark_mode ? "dark" : "light"
+      );
+    },
+    // 初始化
+    init() {
+      // 刷新vuex
+      this.$store.replaceState(
+        Object.assign(
+          this.$store.state,
+          JSON.parse(localStorage.getItem("storeState"))
+        )
+      );
+      // 判断有无用户密码
+      if (Object.keys(this.row_pwd).length != 0) {
+        // 有密码，已经输入过了
+        let now = new Date().getTime();
+        if (now - this.row_pwd.create_time < this.settings.expired_time) {
+          // 上次写入时间距离现在在（默认五分钟）之内
+          // 判断是否是更新
+          this.initLanguage();
+          if (this.$route.params.modify_content) {
+            // 刷新重置数据
+            let content = this.$route.params.modify_content;
+            this.title = content.title;
+            this.user_name = content.user_name;
+            this.password = content.password;
+            this.node = content.node;
+            this.web_address = content.web_address;
+            this.id_cache = content.id;
+            this.open_count_cache = content.open_count;
+          }
+          return;
+        } else {
+          // 密码超时
+          this.turnToHome("密码超时");
+        }
+      } else {
+        // 没有密码
+        this.turnToHome("无密码");
+      }
+    },
 
-		// 配置语言
-		initLanguage() {
-			if (this.settings.is_chinese) {
-				this.lang = lang().add.CHS;
-			} else {
-				this.lang = lang().add.EN;
-			}
-			console.log('语言配置完成');
-		},
+    // 配置语言
+    initLanguage() {
+      if (this.settings.is_chinese) {
+        this.lang = lang().add.CHS;
+      } else {
+        this.lang = lang().add.EN;
+      }
+      console.log("语言配置完成");
+    },
 
-		// 对输入框里边的内容进行判断
-		judgeContent() {
-			// 设置flag
-			let can_continue = true;
-			// 处理title
-			if (!(this.title = this.title.trim())) {
-				can_continue = false;
-				this.title_verify = false;
-			}
-			// 处理user_name
-			if (!(this.user_name = this.user_name.trim())) {
-				can_continue = false;
-				this.user_name_verify = false;
-			}
-			// 处理password
-			if (!(this.password = this.password.trim())) {
-				can_continue = false;
-				this.password_verify = false;
-			}
-			// 根据flag判断是否提交
-			if (can_continue) this.submit();
-		},
+    // 对输入框里边的内容进行判断
+    judgeContent() {
+      // 设置flag
+      let can_continue = true;
+      // 处理title
+      if (!(this.title = this.title.trim())) {
+        can_continue = false;
+        this.title_verify = false;
+      }
+      // 处理user_name
+      if (!(this.user_name = this.user_name.trim())) {
+        can_continue = false;
+        this.user_name_verify = false;
+      }
+      // 处理password
+      if (!(this.password = this.password.trim())) {
+        can_continue = false;
+        this.password_verify = false;
+      }
+      // 根据flag判断是否提交
+      if (can_continue) this.submit();
+    },
 
-		// 校验通过进行提交
-		submit() {
-			// 覆写拦截器
-			if (this.id_cache) {
-				console.log('覆写拦截器生效');
-				this.reWrite();
-				return;
-			}
-			// 正常提交
-			let data_list;
-			// 组织内容
-			let code = {
-				id: this.createId(),
-				open_count: 0,
-				title: this.title,
-				user_name: this.user_name,
-				password: this.password,
-				node: this.node,
-				web_address: this.web_address
-			};
-			// 解密主密码
-			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
-			// 判断是不是第一个
-			if (this.row_data) {
-				// 不是第一个需要进行加解密
-				// 解密密码本
-				let data_decrypt = decrypt(main_code_decrpt, this.row_data);
-				// json化
-				data_list = JSON.parse(data_decrypt);
-				data_list.push(code);
-			} else {
-				// 是第一个
-				data_list = [code];
-			}
-			let data_list_aes = encrypt(main_code_decrpt, data_list);
-			this.setRowData([data_list_aes, this]);
-			console.log('新加密信息保存成功,返回Home');
-			this.back();
-		},
+    // 校验通过进行提交
+    submit() {
+      // 覆写拦截器
+      if (this.id_cache) {
+        console.log("覆写拦截器生效");
+        this.reWrite();
+        return;
+      }
+      // 正常提交
+      let data_list;
+      // 组织内容
+      let code = {
+        id: this.createId(),
+        open_count: 0,
+        title: this.title,
+        user_name: this.user_name,
+        password: this.password,
+        node: this.node,
+        web_address: this.web_address
+      };
+      // 解密主密码
+      let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+      // 判断是不是第一个
+      if (this.row_data) {
+        // 不是第一个需要进行加解密
+        // 解密密码本
+        let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+        // json化
+        data_list = JSON.parse(data_decrypt);
+        data_list.push(code);
+      } else {
+        // 是第一个
+        data_list = [code];
+      }
+      let data_list_aes = encrypt(main_code_decrpt, data_list);
+      this.setRowData([data_list_aes, this]);
+      console.log("新加密信息保存成功,返回Home");
+      this.back();
+    },
 
-		reWrite() {
-			let data_list;
-			// 组织内容
-			let code = {
-				id: this.id_cache,
-				open_count: this.open_count_cache,
-				title: this.title,
-				user_name: this.user_name,
-				password: this.password,
-				node: this.node,
-				web_address: this.web_address
-			};
-			// 解密主密码
-			let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
-			// 解密密码本
-			let data_decrypt = decrypt(main_code_decrpt, this.row_data);
-			// json化
-			data_list = JSON.parse(data_decrypt);
-			// 遍历所有密码
-			for (let i in data_list) {
-				// 找到该密码
-				if (data_list[i].id == code.id) {
-					// 覆写
-					data_list[i] = code;
-				}
-			}
-			let data_list_aes = encrypt(main_code_decrpt, data_list);
-			this.setRowData([data_list_aes, this]);
-			console.log('新加密信息覆写成功,返回详情');
-			this.back();
-		},
-		//返回上一页
-		back() {
-			this.$router.go(-1);
-		},
+    reWrite() {
+      let data_list;
+      // 组织内容
+      let code = {
+        id: this.id_cache,
+        open_count: this.open_count_cache,
+        title: this.title,
+        user_name: this.user_name,
+        password: this.password,
+        node: this.node,
+        web_address: this.web_address
+      };
+      // 解密主密码
+      let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
+      // 解密密码本
+      let data_decrypt = decrypt(main_code_decrpt, this.row_data);
+      // json化
+      data_list = JSON.parse(data_decrypt);
+      // 遍历所有密码
+      for (let i in data_list) {
+        // 找到该密码
+        if (data_list[i].id == code.id) {
+          // 覆写
+          data_list[i] = code;
+        }
+      }
+      let data_list_aes = encrypt(main_code_decrpt, data_list);
+      this.setRowData([data_list_aes, this]);
+      console.log("新加密信息覆写成功,返回详情");
+      this.back();
+    },
+    //返回上一页
+    back() {
+      this.$router.go(-1);
+    },
 
-		// 强制返回Home
-		turnToHome(msg) {
-			console.log(msg);
-			this.$router.replace('/');
-		},
+    // 强制返回Home
+    turnToHome(msg) {
+      console.log(msg);
+      this.$router.replace("/");
+    },
 
-		// 创建唯一识别码
-		createId() {
-			// 获取时间戳
-			let time = new Date().getTime();
-			// 获取随机数
-			let random = Math.floor(Math.random() * 100);
-			// 小于10填0
-			random < 10 ? (random = '0' + random.toString()) : (random = random.toString());
-			// 拼接
-			let id = time.toString() + random;
-			return id;
-		},
+    // 创建唯一识别码
+    createId() {
+      // 获取时间戳
+      let time = new Date().getTime();
+      // 获取随机数
+      let random = Math.floor(Math.random() * 100);
+      // 小于10填0
+      random < 10
+        ? (random = "0" + random.toString())
+        : (random = random.toString());
+      // 拼接
+      let id = time.toString() + random;
+      return id;
+    },
 
-		// 开始生成
-		generateStart() {
-			this.password = generatePassword(this.code_length, this.have_lower, this.have_upper, this.have_num, this.have_symbol);
-		}
-	},
-	created() {
-		this.lang = lang().add.CHS;
-		console.log('临时语言系统加载完成');
-		this.init();
-	},
-	mounted() {
-		// 获取浏览器可视区域高度
-		this.clientHeight = `${document.documentElement.clientHeight}`;
-		//document.body.clientWidth;
-		window.onresize = function temp() {
-			this.clientHeight = `${document.documentElement.clientHeight}`;
-			setHtmlFontSize();
-		}.bind(this);
-	},
-	watch: {
-		// 如果 `clientHeight` 发生改变，这个函数就会运行
-		clientHeight: function() {
-			this.changeFixed(this.clientHeight);
-		}
-	},
-	beforeDestroy() {},
-	components: {}
+    // 开始生成
+    generateStart() {
+      this.password = generatePassword(
+        this.code_length,
+        this.have_lower,
+        this.have_upper,
+        this.have_num,
+        this.have_symbol
+      );
+    },
+
+    // 复制成功
+    onCopyCode() {
+      this.copy_state = this.lang.generator.copy_successful;
+      setTimeout(() => {
+        this.copy_state = "";
+      }, 2000);
+    },
+    // 复制失败
+    onErrorCode() {
+      this.copy_state = this.lang.generator.copy_failed;
+      setTimeout(() => {
+        this.copy_state = "";
+      }, 2000);
+    }
+  },
+  created() {
+    this.lang = lang().add.CHS;
+    console.log("临时语言系统加载完成");
+    this.init();
+  },
+  mounted() {
+    // 获取浏览器可视区域高度
+    this.clientHeight = `${document.documentElement.clientHeight}`;
+    //document.body.clientWidth;
+    window.onresize = function temp() {
+      this.clientHeight = `${document.documentElement.clientHeight}`;
+      setHtmlFontSize();
+    }.bind(this);
+  },
+  watch: {
+    // 如果 `clientHeight` 发生改变，这个函数就会运行
+    clientHeight: function() {
+      this.changeFixed(this.clientHeight);
+    }
+  },
+  beforeDestroy() {},
+  components: {}
 };
 </script>
 
 <style scoped lang="scss" type="text/scss">
-@import '../../style/main';
+@import "../../style/main";
 .add {
-	width: 100%;
-	min-height: 100%;
-	background: #fff;
-	.expand {
-		width: 100%;
-		margin: 0 !important;
-		min-height: 1.2rem !important;
-	}
-	.toolbar {
-		position: fixed !important;
-	}
+  width: 100%;
+  min-height: 100%;
+  background: #fff;
+  .expand {
+    width: 100%;
+    margin: 0 !important;
+    min-height: 1.2rem !important;
+  }
+  .toolbar {
+    position: fixed !important;
+  }
 }
 </style>