vuesax实现点击按钮弹出层对话框登录框效果代码
代码语言:html
所属分类:弹出层
代码描述:vuesax实现点击按钮弹出层对话框登录框效果代码,vuesVuesax 是一个基于 Vue.js 的 UI 框架,提供了丰富的组件和功能,可以帮助开发者快速构建美观、交互丰富的 Web 应用程序。ax
代码标签: vuesax 点击 按钮 弹出层 对话框 登录 框
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/boxicons.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuesax.min.css"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <style> .not-margin { margin: 0px; font-weight: normal; padding: 10px; } .con-form { width: 100%; } .con-form .flex { display: flex; align-items: center; justify-content: space-between; } .con-form .flex a { font-size: 0.8rem; opacity: 0.7; } .con-form .flex a:hover { opacity: 1; } .con-form .vs-checkbox-label { font-size: 0.8rem; } .con-form .vs-input-content { margin: 10px 0px; width: calc(100%); } .con-form .vs-input-content .vs-input { width: 100%; } .footer-dialog { display: flex; align-items: center; justify-content: center; flex-direction: column; width: calc(100%); } .footer-dialog .new { margin: 0px; margin-top: 20px; padding: 0px; font-size: 0.7rem; } .footer-dialog .new a { color: rgba(var(--vs-primary), 1) !important; margin-left: 6px; } .footer-dialog .new a:hover { text-decoration: underline; } .footer-dialog .vs-button { margin: 0px; } </style> </head> <body> <div id="app"> <div class="center"> <vs-button @click="active=!active"> Open Dialog </vs-button> <vs-dialog v-model="active"> <template #header> <h4 class="not-margin"> Welcome to <b>Vuesax</b> </h4> </template> <div class="con.........完整代码请登录后点击上方下载按钮下载查看
网友评论0