0.0.6 • Published 6 years ago

ts-login v0.0.6

Weekly downloads
1
License
ISC
Repository
-
Last release
6 years ago

login 登录

http://ui.ucmed.cn/#/login

<ts-login :top-tab="toptab" :tab-index="tabindex">
  <template v-if="tabindex.index==1">
    tab1
  </template>
  <template v-if="tabindex.index==2">
    tab项最多支持2项。2项时必须配置tab-index。
  </template>
</ts-login>

API

Props
PropRequiredDefault ValueDescription
topTabtruetoptab: [{text: "账号登录"},{text: "忘記密码"}]设置tab标签(1-2项)
logofalseurl设置登录页logo图片
tabIndexfalse{index: 1}设置默认选中的tab标签

说明:登录表单内部内容自由发挥。组件库定义了几套样式提供参考使用

<!--登录-->
<div class="ts-loginlabel username" style="margin-top:20px;">
  <input type="text" placeholder="请输入用户名" />
</div>
<div class="ts-loginlabel password">
  <input type="password" placeholder="请输入密码" />
</div>
<div class="ts-loginlabel">
  <el-checkbox v-model="checked">10天内自动登录</el-checkbox>
  <a class="ts-fogot" @click="$router.push('foget')">忘记密码?</a>
</div>
<div class="ts-loginlabel">
  <el-button type="primary" @click="login">登录</el-button>
</div>
<!--忘记密码-->
<a class="back" @click="back">返回上级</a>
<el-steps class="ts-loginsteps" :active="active" style="margin-top:15px;">
  <el-step title="填写账号"></el-step>
  <el-step title="安全验证"></el-step>
  <el-step title="设置新密码"></el-step>
</el-steps>
<div class="ts-loginlabel username" style="margin-top:10%;">
  <input type="text" placeholder="请输入用户名" />
</div>
<div class="ts-loginlabel yzm hasbtn">
  <input type="text" placeholder="请输入密码" />
  <el-button type="info">发送验证码</el-button>
</div>
<div class="ts-loginlabel" style="margin-top:5%;">
  <el-button type="primary" @click="next">下一步</el-button>
</div>