青岛做网站那家好,美术馆网站建设概述,网站建设工作总结培训,php发布post到wordpress介绍
1.element Plus 是一套基于 Vue.js 的组件库#xff0c;是对饿了么团队的 Element UI 组件库的升级版本。Element Plus 的目标是提供一套更为现代、更好用的 Vue.js UI 组件。
导入
1.1 执行命令: npm install element-plus --save
1.2 在main.js中做如下配置import E…介绍
1.element Plus 是一套基于 Vue.js 的组件库是对饿了么团队的 Element UI 组件库的升级版本。Element Plus 的目标是提供一套更为现代、更好用的 Vue.js UI 组件。
导入
1.1 执行命令: npm install element-plus --save
1.2 在main.js中做如下配置import ElementPlus from element-plusimport element-plus/dist/index.cssapp.use(ElementPlus)在vue文件中使用
直接去官网官网有相应的代码复制下载即可使用
script setup
import { User, Lock } from element-plus/icons-vue
import { ref } from vue
//控制注册与登录表单的显示 默认显示注册
const isRegister ref(false)
/scripttemplateel-row classlogin-pageel-col :span12 classbg/el-colel-col :span6 :offset3 classform!-- 注册表单 --el-form refform sizelarge autocompleteoff v-ifisRegisterel-form-itemh1注册/h1/el-form-itemel-form-itemel-input :prefix-iconUser placeholder请输入用户名/el-input/el-form-itemel-form-itemel-input :prefix-iconLock typepassword placeholder请输入密码/el-input/el-form-itemel-form-itemel-input :prefix-iconLock typepassword placeholder请输入再次密码/el-input/el-form-item!-- 注册按钮 --el-form-itemel-button classbutton typeprimary auto-insert-space注册/el-button/el-form-itemel-form-item classflexel-link typeinfo :underlinefalse clickisRegister false← 返回/el-link/el-form-item/el-form!-- 登录表单 --el-form refform sizelarge autocompleteoff v-elseel-form-itemh1登录/h1/el-form-itemel-form-itemel-input :prefix-iconUser placeholder请输入用户名/el-input/el-form-itemel-form-itemel-input namepassword :prefix-iconLock typepassword placeholder请输入密码/el-input/el-form-itemel-form-item classflexdiv classflexel-checkbox记住我/el-checkboxel-link typeprimary :underlinefalse忘记密码/el-link/div/el-form-item!-- 登录按钮 --el-form-itemel-button classbutton typeprimary auto-insert-space登录/el-button/el-form-itemel-form-item classflexel-link typeinfo :underlinefalse clickisRegister true注册 →/el-link/el-form-item/el-form/el-col/el-row
/templatestyle langscss scoped
/* 样式 */
.login-page {height: 100vh;background-color: #fff;.bg {background: url(/assets/logo2.png) no-repeat 60% center / 240px auto,url(/assets/login_bg.jpg) no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
/style
