标签：rand targe 思路 oms rect fun bind fonts 可见
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'}">&#xe685;</text>
<text v-else-if="ite === 'blank'" style="fontFamily:iconfont;color:red;">&#xe66e;</text>
<text v-else-if="ite === 'del'" style="fontFamily:iconfont;color:red;">&#xe629;</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;">&#xe66e;</text>
<text v-else-if="ite === 'del'" style="fontFamily:iconfont;color:red;">&#xe629;</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;">&#xe66e;</text>
<text v-else-if="ite === 'del'" style="fontFamily:iconfont;color:red;">&#xe629;</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
标签：rand targe 思路 oms rect fun bind fonts 可见
原文地址：https://www.cnblogs.com/lalalagq/p/9951692.html
