LoginPage 登录页

基础用法

<template>
  <div>
    <plv-button @click="visible = true">打开登录页</plv-button>

    <div v-show="visible" class="demo-login-page">
      <plv-login-page
        :cover-img="coverImg"
        :name="name"
        :slideVerifyVisible="true"
        @submit="handleSubmit"
      >
        <plv-login-page-input
          v-model="nick"
          placeholder="请输入昵称"
          :rules="nickRules"
        />
        <plv-login-page-input
          v-model="password"
          placeholder="请输入密码"
          type="password"
          :rules="passwordRules"
        />
      </plv-login-page>

      <!-- 关闭按钮 -->
      <plv-icon
        class="demo-login-page__close"
        icon="close-circle-fill"
        @click="visible = false"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      coverImg: '//s1.videocc.net/default-img/channel/default-logo.png',
      name: '广州易方信息科技股份有限公司',

      nick: '',
      password: '',

      nickRules: [
        { type: 'string', message: '请输入您的昵称', required: true, },
        {
          message: '昵称长度不得超过 5 个',
          validator: (rule, value) => {
            return value.length < 5
          },
        }
      ],
      passwordRules: [
        { type: 'string', message: '请输入您的密码', required: true, },
      ],
    };
  },

  methods: {
    handleSubmit(data) {
      console.info('submit', data);
      console.info('滑块验证码信息', data.ncData);
    }
  },
};
</script>

<style lang="scss">
.demo-login-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
}

.demo-login-page__close {
  position: absolute;
  top: 24px;
  right: 25px;
  font-size: 30px;
  color: #ff5b5b;
  cursor: pointer;
}
</style>

显示代码

互动学堂的登录页

<template>
  <div>
    <plv-button @click="visible = true">打开登录页</plv-button>

    <div v-show="visible" class="demo-login-page">
      <plv-login-page
        :background-img="backgroundImg"
        :name="name"
        @submit="handleSubmit"
      >
        <plv-login-page-input
          v-model="account"
          label="账号"
          placeholder="请输入账号"
          :rules="accountRules"
        />
        <plv-login-page-input
          v-model="password"
          label="密码"
          placeholder="请输入密码"
          type="password"
          :rules="passwordRules"
        />
      </plv-login-page>

      <!-- 关闭按钮 -->
      <plv-icon
        class="demo-login-page__close"
        icon="close-circle-fill"
        @click="visible = false"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      backgroundImg: 'https://s1.videocc.net/hi-class/img/background.1a1e48f8.png',
      name: '广州易方信息科技股份有限公司',

      account: '',
      password: '',

      accountRules: [
        { type: 'string', message: '请输入您的账号', required: true, },
      ],
      passwordRules: [
        { type: 'string', message: '请输入您的密码', required: true, },
      ],
    };
  },

  methods: {
    handleSubmit(data) {
      console.info('submit', data);
    }
  },
};
</script>

<style lang="scss">
.demo-login-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
}

.demo-login-page__close {
  position: absolute;
  top: 24px;
  right: 25px;
  font-size: 30px;
  color: #ff5b5b;
  cursor: pointer;
}
</style>

显示代码

表单验证规则请参考async-validator (opens new window)

LoginPage Attributes

参数	说明	类型	可选值	默认值
background-img	登录页背景图地址	String	-	内置默认图
cover-img	logo 图地址	String	-	-
name	登录页名称	String	-	-
buttonText	登录按钮文本	String	-	登录
slide-verify-visible	是否显示滑块验证码	Boolean	-	false
slide-verify-msg	未执行滑块验证码时的异常提示	String	-	请按提示滑动滑块
slide-verify-options	滑块验证码组件参数	Object	-	-
bottom-tips	底部提示文本	String	-	推荐使用 Chrome 58 以上版本浏览器

LoginPage Methods

方法	说明
setErrorMsg(msg)	设置异常信息
refreshVerify()	刷新滑块验证码

LoginPageInput Attributes

参数	说明	类型	可选值	默认值
value / v-model	输入框绑定值	String	-	-
placeholder	输入框占位文本	String	-	请输入
type	输入框类型	String	-	text
label	输入框标题	String	-	-
rules	输入框验证规则	Array Object	-	-
show-password	是否显示切换密码图标	Boolean	-	true