0.0.6 • Published 6 years ago
ts-login v0.0.6
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
Prop | Required | Default Value | Description |
---|---|---|---|
topTab | true | toptab: [{text: "账号登录"},{text: "忘記密码"}] | 设置tab标签(1-2项) |
logo | false | url | 设置登录页logo图片 |
tabIndex | false | {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>