VxPwd

引用

import VxPwd from '@/components/vx-pwd'

// 页面内部引入
export default {
  components: {
    [VxPwd.name]: VxPwd,
  },
}

使用指南

• 密码控件

代码演示

<ui-form :model="ruleForm2" ref="ruleForm">
  <ui-form-item label="新登录密码">
    <vx-pwd :pwdHtml="pwdObj[0].pwdHtml" :pwdDegree="pwdObj[0].pwdDegree"></vx-pwd>
  </ui-form-item>
  <ui-form-item label="确认新登陆密码">
    <vx-pwd :pwdHtml="pwdObj[1].pwdHtml"></vx-pwd>
  </ui-form-item>
</ui-form>
<script>
import VxPwd from '@/components/vx-pwd ';
import { createPwdObject, GetResponseData, getPassInput, GetPasswordLen, passwordCheck } from '@/utils/writeObject.js';
export default {
  name: 'xxx-xxx-pre',
  components: {
    VxPwd,
  },
  data() {
    return {
      pwdObj: [
        {
          init: true, // 是否初始化密码控件， true：初始化，false：不初始化，默认为false
          id: 'loginPower', // 密码控件ID 唯一 默认为时间戳
          showDegree: true, // 是否显示密码强度，true：显示，false：不显示，默认为false
          placehoder: '请输入loginPower登录密码', // 为支持高版本控件下密码框默认显示 默认为请输入密码
        },
        {
          init: true,
          // 生成的密码控件的校验规则 传入正则表达式 默认配置如下default对象所列
          accepts: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
          id: 'loginPowerUIser', // 密码控件ID 唯一
          showDegree: true,
          placehoder: '请输入loginPowerUser登录密码',
        },
      ];
    }
  },
  created() {
    window.createPwdObject = createPwdObject;
    window.getPassInput = getPassInput;
    window.GetPasswordLen = GetPasswordLen;
    window.passwordCheck = passwordCheck;
    window.GetResponseData = GetResponseData;
  },
  mounted() {
    window.createPwdObject(this);
    this.getToken();
  },
  methods: {
    // 获取密码回调函数
    // @param { object } arg
    // arg.error 错误信息，正确时为空
    // arg.password 获取的密码控件内输入密码
    pwdCallbackUserId(arg) {
      //获取密码错误
      if (arg.error != '') {
        // 登录密码错误
        this.$message.error(arg.error)
        return
      }
      this.PassWord = arg.password
      //调用发起登录请求
      this.CusNumSubmit()
    },
    // 提交时获取密码
    submit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 表单校验完后获取密码
          let ts = new Date().getTime()
          /*
          *  获取密码方法
          *  @param {string}  密码控件id
          *  @param {string}  时间戳
          *  @param {string}  自定义错误信息
          *  @param {function}  回调方法
          */
          getPassInput(this.pwdObj[1].id, ts, '密码错误', this.pwdCallbackUserId)
        } else {
          //登录表单校验失败
          this.$message.error('表单校验失败')
        }
      })
    },
    // 密码修改时，比较两次密码是否相等
    submitPre(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          /*
          *  比较密码方法
          *  @param {object}  需要比较的密码控件属性
          *  @param {object}  需要比较的密码控件属性
          *  @param {function}  回调方法，在回调方法内 通过result.equal 判断俩个密码是否相等
          */
          passwordCheck(this.pwd0bj[0], this.pwdObj[1], this.pwdCheck)
        } else {
          //登录表单校验失败
          this.$message.error('表单校验失败')
        }
      })
    },
    /**
     * 判断两密码是否相等，通过result.equal 判断俩个密码是否相等
    */
    pwdCheck(result) {
      if (result.equal) {
        // 两个密码相等，
      } else {
        // 两个密码不等
        this.$message.error('俩次密码不一致')
      }
    },
  }
}

API

VxInputAmountRange Props

Current Tags

• 0.0.9                                ...           latest (3 years ago)

1 Versions

• 0.0.9                                ...           3 years ago