成品直播源码推荐,登录界面实现插入背景
成品直播源码推荐,登录界面实现插入背景
引用
因为是背景图片,所有要在最外层div引用
1 | <br> <div class = "background_style" > |
登录实现
引入Element UI
Element UI
通过npm安装
执行此命令
1 | <br>npm i element-ui -S |
然后再main.js中导入Element UI库
1 | <br>import ElementUI from 'element-ui' ;<br>import 'element-ui/lib/theme-chalk/index.css' ;<br>Vue. use (ElementUI); |
通过引入样式库
直接在需要使用Element UI组件的页面声明即可
1 | <br><!-- 引入样式 --><br><link rel= "stylesheet" href= "https://unpkg.com/element-ui/lib/theme-chalk/index.css" ><br><!-- 引入组件库 --><br><script src= "https://unpkg.com/element-ui/lib/index.js" ></script> |
实现
1 | <el-form status-icon label-width= "50px" label-position= "left" class = "login-page" ><br> <h2 class = "login_Title" >账号登录</h2><br> <el-form-item label= "账号" prop= "username" ><br> <el-input type= "text" v-model= "username" autocomplete= "off" ></el-input><br> </el-form-item><br> <el-form-item label= "密码" prop= "password" ><br> <el-input type= "password" v-model= "password" autocomplete= "off" show-password></el-input><br> </el-form-item><br> <el-form-item class = "button_center" ><br> <el-button type= "primary" @click= "LoginNleCloud" style= "width:50%;" >提交</el-button><br> </el-form-item><br> </el-form> |
双向绑定账号密码
1 | v-model= "username" <br>v-model= "password" |
定义字段
1 | <br> data(){<br> return {<br> password: "" ,<br> username: "" ,<br> } |
以上就是 成品直播源码推荐,登录界面实现插入背景,更多内容欢迎关注之后的文章
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现