摘要：地址效果图技术依赖框架弹出层图标说明如果不想用到，可以把文件里的组件去掉，按自己的弹窗实现即可删除大小写空格图标用的是如不想用请自行替换本项目是放在本地，以安卓为例密码可见不可见图标按钮用的是里的方法获取的路径，请自行替换声明如有需要
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 代码如下：
密码
组件：components/inputkey.vue 代码如下：
//placeholder内容
{{placeholder}}
//把输入内容显示为*
{{passwordInput}}
{{input}}
//光标“|”
|
//可不可见图标
Abc
符
123
安全键盘
完成
//abc界面
//特殊符号界面
//数字界面
公用方法：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://www.ucloud.cn/yun/107186.html
摘要：什么是动态性今天在移动端，尤其是像手机淘宝这样的中，动态性问题逐渐成为一个比较棘手的问题。在云端实现了天猫前端运营发布系统斑马的对接，在前端开发实现了主会场的界面模块和业务逻辑处理，同时在客户端上对接了手机天猫手机淘宝。 什么是动态性 今天在移动端，尤其是像手机淘宝这样的 App 中，动态性问题逐渐成为一个比较棘手的问题。所谓动态性，就是把移动应用本身的灵活性、迭代更新的周期和成本优化...
摘要：中国互联网络信息中心发布的中国互联网络发展状况统计报告显示，截至年月，我国网民规模达亿人，微信月活亿支付宝月活亿百度月活亿另一方面，中国手机占智能手机整体的比例超过，月活约亿。在年末正式发布了面向未来的跨端的。 开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？ 原创： 嘉宾-张楠 开源中国 以往我们说某一功能跨多端，往往是指在诸如 PC、移动等不同类型的设备之...
阅读 1846·2021-11-22 15:25
阅读 3911·2021-11-17 09:33
阅读 2506·2021-10-12 10:12
阅读 1801·2021-10-09 09:44
阅读 3234·2021-10-08 10:04
阅读 1312·2021-09-29 09:35
阅读 1946·2019-08-30 12:57
阅读 1301·2019-08-29 16:22
