weex手机端安全键盘

其他 2018-11-13 13:51:13 阅读次数: 0

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

猜你喜欢

转载自www.cnblogs.com/lalalagq/p/9951692.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022