1. 程式人生 > >weex手機端安全鍵盤

weex手機端安全鍵盤

github地址:weexSafeKeyboard

效果圖:

技術依賴:
框架:weex+vue
彈出層:weex-ui
圖示:iconfont

說明:
1、如果不想用到weex-ui,可以把inputkey.vue檔案裡的wxc-popup元件去掉,按自己的彈窗實現即可;
2、刪除、大小寫、空格圖示用的是iconfont;如不想用請自行替換;
本專案是放在本地,以安卓為例:android/app/src/main/assets/iconfont
3、密碼可見、不可見圖示按鈕用的是common.js裡的getImageUrl方法獲取的路徑,請自行替換

宣告:
如有需要,請參考實現的思路,消化成自己的東西,勿直接複製,會消化不良。

實際呼叫頁面:index.vue 程式碼如下:


<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;
}

原文地址:https://segmentfault.com/a/1190000013109794