效果图：

技术依赖：

框架：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 代码如下：

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

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;

}

}

}

组件：components/inputkey.vue 代码如下：

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

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

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;

}

}

}

公用方法：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;

}