uni-app自定义验证码、密码输入框

10次阅读

共计 584 个字符,预计需要花费 2 分钟才能阅读完成。

Getting started
插件预览图

使用教程
1. 插件代码拷贝
下载后把 components 目录下 validCode.vue 文件拷贝到自己项目目录下
2. 插件全局配置
在项目里 main.js 中配置如下代码
import validCode from ‘./components/validCode.vue’

Vue.component(‘validcode’,validCode)

3. 插件使用
vue 页面使用
<template>
<view class=”content”>
<view> 验证码:</view>
<validcode :maxlength=”4″ :isPwd=”false” @finish=”getCode”></validcode>
<view> 密码:</view>
<validcode :maxlength=”6″ :isPwd=”true” @finish=”getPwd”></validcode>
</view>
</template>

<script>
export default {
data() {
return {};
},
onLoad() {},
methods: {
getCode(val) {
console.log(val);
},
getPwd(val){
console.log(val);
}
}
};
</script>

<style>
.content {
height: 400upx;
}
</style>

正文完
 0