github地址:weexSafeKeyboardvue
效果圖:
android
技術依賴:
框架:weex+vue
彈出層:weex-ui
圖標:iconfont ios
說明:
一、若是不想用到weex-ui,能夠把inputkey.vue文件裏的wxc-popup組件去掉,按本身的彈窗實現便可;
二、刪除、大小寫、空格圖標用的是iconfont;如不想用請自行替換;
本項目是放在本地,以安卓爲例:android/app/src/main/assets/iconfont
三、密碼可見、不可見圖標按鈕用的是common.js裏的getImageUrl方法獲取的路徑,請自行替換 git
聲明:
若有須要,請參考實現的思路,消化成本身的東西,勿直接複製,會消化不良。github
實際調用頁面:index.vue 代碼以下:web
<template> <div> <div class="cell"> <div class="cell_label"> <text class="label">密碼</text> </div> <div class="cell_input"> <inputkey @inputVal="inputVal" :inputstyle="inputstyle" :textstyle="textstyle" type=true placeholder="請輸入登陸密碼"></inputkey> </div> </div> </div> </template> <style> .cell {width: 750px;height: 120px;border-bottom-width: 2px;border-bottom-color: #C9C5C4;flex-direction: row;align-items: center;justify-content: center;} .cell_label {justify-content: center;align-items: center;} .label{font-size: 34px;font-weight: 600px;color:#000;} .cell_input {justify-content: center;align-items: center;margin-left: 30px;} </style> <script> import inputkey from './components/inputkey.vue'; export default { data: { inputstyle:{width:'550px',height:'50px',margin:'5px',fontSize:'36px'}, textstyle:{fontSize:'34px',fontWeight:'600',color:'#999'}, password:'', }, components: { inputkey }, created: function () { }, methods:{ inputVal(e){ this.password = e.inputVal; } } } </script>
組件:components/inputkey.vue 代碼以下:數組
<template> <div> <div> <div style="flex-direction:row;position:relative;" :style="inputstyle" @click="onfocus"> //placeholder內容 <text class="placeholder" v-if="blank">{{placeholder}}</text> //把輸入內容顯示爲* <text v-if="type" :style="textstyle">{{passwordInput}}</text> <text v-if="!type" :style="textstyle">{{input}}</text> //光標「|」 <text v-if="cursor=='true'" :style="mrTextstyle" style="color:blue;">|</text> //可不可見圖標 <div class="imagearea" @click="lookPwd"> <image :src="imageUrl" class="image"></image> </div> </div> </div> //weex-ui 裏的 wxc-popup 彈窗,可改成本身的 <wxc-popup popup-color="#fff" :show="isBottomShow" @wxcPopupOverlayClicked="popupMenu" pos="bottom" :height="popupHeight"> <div class="title"> <div class="btn" @click="changeState('abc')"> <text>Abc</text> </div> <div class="btn" @click="changeState('symbol')"> <text>符</text> </div> <div class="btn" @click="changeState('num')"> <text>123</text> </div> <div class="btn2" @click="randomAbc"> <text>安全鍵盤</text> </div> <div class="btn" @click="popupMenu"> <text>完成</text> </div> </div> <div class="content"> //abc界面 <div class="row" v-for="item in charList" v-if="state == 'abc'"> <div class="button" v-for="ite in item" @click="ite=='top'?lowerToUpper(): btnClick(ite)"> <text v-if="ite === 'top'" style="fontFamily:iconfont;color:red;" v-bind:style="{backgroundColor:charState=='lower'?'':'#999999'}"></text> <text v-else-if="ite === 'blank'" style="fontFamily:iconfont;color:red;"></text> <text v-else-if="ite === 'del'" style="fontFamily:iconfont;color:red;"></text> <text v-else>{{ite}}</text> </div> </div> //特殊符號界面 <div class="row" v-for="item in symbolList" v-if="state == 'symbol'"> <div class="button" v-for="ite in item" v-bind:style="{flex:ite==='blank'?6:1}" @click="btnClick(ite)"> <text v-if="ite === 'blank'" style="fontFamily:iconfont;color:red;"></text> <text v-else-if="ite === 'del'" style="fontFamily:iconfont;color:red;"></text> <text v-else>{{ite}}</text> </div> </div> //數字界面 <div class="row" v-for="item in numList" v-if="state == 'num'"> <div class="button" v-for="ite in item" v-bind:style="{flex:ite==='blank'?6:1}" @click="btnClick(ite)"> <text v-if="ite === 'blank'" style="fontFamily:iconfont;color:red;"></text> <text v-else-if="ite === 'del'" style="fontFamily:iconfont;color:red;"></text> <text v-else>{{ite}}</text> </div> </div> </div> </wxc-popup> </div> </template> <style> .placeholder{color:#999999;font-size:36px;} .title{flex-direction:row;justify-content:space-between;align-items:center;padding:10px;border-bottom-width:1px;} .btn{height:70px;flex:1;align-items:center;justify-content:center;} .btn2{height:70px;flex:4;align-items:center;justify-content:center;} .content{padding-top:10px;padding-left:10px;} .row{flex-direction:row;} .button{height:65px;border-width:1px;flex:1;justify-content:center;align-items:center;margin-right:10px;margin-bottom:10px;padding-top:10px;padding-bottom:10px;} .button:active{background-color: #999999;} .image{width:48px;height:32px;} .imagearea{width:48px;height:32px;position:absolute;top:9px;right:0;} </style> <script> import common from '../common/common'; import { WxcPopup } from 'weex-ui'; var domModule = weex.requireModule('dom'); export default { props: { inputstyle:Object, textstyle:Object, type:{ type: Boolean, default: true }, placeholder:{ type: String, default: '請輸入密碼' } }, components: {WxcPopup}, data: function(){ return { input:'', //實際輸入值 passwordInput:'', //實際輸入值轉爲* char: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p','a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'z', 'x', 'c', 'v', 'b', 'n', 'm'], charInit: [], symbolList: [ ['&','"',';','^',',','|','$','*',':','\''], ['?','{','[','~','#','}','.',']','\\','!'], ['(','%','-','_','+','/',')','=','<','`'], ['>','@','blank','del'] ], num:['1','2','3','4','5','6','7','8','9','0'], numInit:[], charRandom:'0', //字母隨機標記 numRandom:'0', //數字隨機標記 state:'abc', charState:'lower', isBottomShow:false, popupHeight:'400', cursor:'', interval:'', blank:true, imageUrl:'' } }, created: function () { var self = this; //字母初始值深拷貝 self.charInit = common.copy(self.char,'deep'); //數字初始值深拷貝 self.numInit = common.copy(self.num,'deep'); //iconfont引入 domModule.addRule('fontFace',{ 'fontFamily':'iconfont', //調用本地ttf 'src':"url('local:///iconfont/iconfont.ttf')" }); //可不可見圖片,可改變本身的 self.imageUrl=common.getImageUrl(self)+'login/bukejian.png'; }, methods:{ //聚焦事件,控制光標閃爍 onfocus(){ var self = this; self.blank = false; this.interval = setInterval(function() { if(self.cursor == 'true'){ self.cursor = '' }else{ self.cursor = 'true' } },500); this.isBottomShow = true; }, //關閉彈窗,取消閃爍 popupMenu(){ clearInterval(this.interval); this.cursor = ''; this.isBottomShow = false; this.$emit('inputVal', { inputVal: this.input }); if(!this.input){ this.blank = true; } }, //數組數據隨機,恢復 randomArr(arr, name, init){ var self = this; if(Array.isArray(arr)){ if(self[name] == '0'){ self[name] = '1'; return arr.sort(function() { return (0.5-Math.random()); }); }else{ self[name] = '0'; self.charState = 'lower'; return common.copy(self[init],'deep'); } }else{ return arr; } }, //安全鍵盤點擊事件 randomAbc(){ var self = this; if(this.state == 'abc'){ this.char = this.randomArr(this.char, 'charRandom', 'charInit'); }else if(this.state == 'num'){ this.num = this.randomArr(this.num, 'numRandom', 'numInit'); } }, //大小寫轉換 lowerToUpper(){ var self = this; var arr = []; for(var i=0;i<self.char.length;i++){ if(self.char[i] >= 'a' && self.char[i] <= 'z'){ arr[i] = self.char[i].toUpperCase(); self.charState = 'upper'; }else{ arr[i] = self.char[i].toLowerCase(); self.charState = 'lower'; } } self.char = arr; }, //字母、符號、數字切換事件 btnClick(ite){ if(ite == 'blank'){ this.input += ' ' this.passwordInput += '*' }else if(ite == 'del'){ this.input = this.input.slice(0,this.input.length -1); this.passwordInput = this.passwordInput.slice(0,this.passwordInput.length -1) }else{ this.input += ite; this.passwordInput += '*' } }, changeState(state){ this.state = state; }, //密碼可不可見切換 lookPwd(){ var self = this; this.isBottomShow=false; this.type=!(this.type); self.imageUrl=common.getImageUrl(self)+(self.type?'login/bukejian.png':'login/kejian.png'); } }, computed: { //字母頁面動態數據 charList () { var self = this; var arr = []; arr[0] = ['1','2','3','4','5','6','7','8','9','0',]; arr[1] = self.char.slice(0,10); arr[2] = ['top'].concat(self.char.slice(10,19)); arr[3] = ['blank'].concat(self.char.slice(19,26)).concat(['del']); return arr; }, //數字頁面動態數據 numList(){ var self = this; var arr = []; arr[0] = self.num.slice(0,3); arr[1] = self.num.slice(3,6); arr[2] = self.num.slice(6,9); arr[3] = ['.'].concat(self.num.slice(9,10)).concat(['del']); return arr; }, //光標的樣式同輸入字體樣式相同,顏色爲藍色 mrTextstyle(){ const {textstyle} =this; const mrBtnStyle = { ...textstyle, color: "blue" }; return mrBtnStyle; } } } </script>
公用方法:common/common.js 代碼以下:安全
exports.bundleUrl = function (self) { var bundleUrl = self.$getConfig().bundleUrl; return bundleUrl; }; //判斷系統,安卓返回'android',ios返回'iOS',h5返回'web' exports.androidOrIos = function (self) { return self.$getConfig().env.platform; }; //獲取圖片完整路徑前綴 exports.getImageUrl = function (self) { var androidOrIos = this.androidOrIos(self); var bundleUrl = this.bundleUrl(self); var isHttp = bundleUrl.indexOf('http://') >= 0; var imageUrl; if (isHttp) { var i = bundleUrl.indexOf('/dist/'); if (androidOrIos == "android") { imageUrl = bundleUrl.slice(0, i) + '/images/'; } else if (androidOrIos == "iOS") { imageUrl = bundleUrl.slice(0, i) + '/images.bundle/'; } } else { if (androidOrIos == "android") { imageUrl = 'assets:'; } else if (androidOrIos == "iOS") { var i = bundleUrl.indexOf('XDPT.app'); //vue語法中讀取圖片資源放在.bundle文件中 //否則會出現The requested URL was not found on this server. imageUrl = bundleUrl.slice(0, i + 8) + '/images.bundle/'; } } return imageUrl; } //對象類型判斷,下面深,淺拷貝用 //深淺拷貝來源百度,太懶沒本身寫 exports.util = (function () { var class2type = {}; ["Null", "Undefined", "Number", "Boolean", "String", "Object", "Function", "Array", "RegExp", "Date"].forEach(function (item) { class2type["[object " + item + "]"] = item.toLowerCase(); }) function isType(obj, type) { return getType(obj) === type; } function getType(obj) { return class2type[Object.prototype.toString.call(obj)] || "object"; } return { isType: isType, getType: getType } })(); //對象深,淺拷貝 exports.copy = function (obj, deep) { if (obj === null || typeof obj !== "object") { return obj; } var i, target = this.util.isType(obj, "array") ? [] : {}, value, valueType; for (i in obj) { value = obj[i]; valueType = this.util.getType(value); if (deep && (valueType === "array" || valueType === "object")) { target[i] = this.copy(value); } else { target[i] = value; } } return target; }