修改密码输入框

influx-code · Nov 2, 2018 · ce43942 · ce43942
1 parent 1b188e9
commit ce43942
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/iysql/app/public/include/css/index.css b/iysql/app/public/include/css/index.css
@@ -2,7 +2,7 @@
 * @Author: Jeffery
 * @Date:   2018-10-24 12:07:46
 * @Last Modified by:   Jeffery
-* @Last Modified time: 2018-10-24 17:22:39
+* @Last Modified time: 2018-11-02 10:45:25
 */
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, textarea, select, optgroup, option, fieldset, legend, p, blockquote, th, td {
 	font-family: Arial, "Helvetica Neue", sans-serif, 宋体;
@@ -77,6 +77,9 @@ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, text
 .configs .el-select {
 	width: 100%;
 }
+.configs .el-icon-view{
+	cursor: pointer;
+}
 
 /*result*/
 .logs {

diff --git a/iysql/app/public/include/js/index.js b/iysql/app/public/include/js/index.js
@@ -22,6 +22,7 @@ var vm = new Vue({
 		querystring: 'SELECT * FROM tables WHERE id=1',
 		is_connect: false, //是否已经连接DB
 		is_remember: storage.get('configs') === null ? false : true, //是否记住连接信息
+		password_mode: 'password', //密码输入框模式
 		configs: {
 			host: "127.0.0.1",
 			port: 3306,
@@ -76,6 +77,13 @@ var vm = new Vue({
 				self.checked_plugin = res['types'];
 			});
 		},
+		/**
+		 * 切换密码输入框模式
+		 * @return {[type]} [description]
+		 */
+		togglePasswordMode() {
+			this.password_mode = this.password_mode == 'password' ? 'text' : 'password';
+		},
 		/**
 		 * 选择所有插件
 		 * @return {[type]} [description]
@@ -200,7 +208,7 @@ var vm = new Vue({
 				return true;
 			};
 			this.configs = configs;
-			
+
 		},
 		initApp() {
 			this.initSocket();

diff --git a/iysql/app/public/index.html b/iysql/app/public/index.html
@@ -47,7 +47,8 @@
                         </div>
                         <div class="input-wrapper">
                             <label class="label">密码:</label>
-                            <el-input placeholder="密码" v-model="configs['password']" clearable>
+                            <el-input placeholder="密码" v-model="configs['password']" :type="password_mode">
+                                <i slot="suffix" class="el-input__icon el-icon-view" @click="togglePasswordMode"></i>
                             </el-input>
                         </div>
                         <div class="input-wrapper">