前言
感谢作者的开源,让我们有机会学习
项目地址: vue-pure-admin
只是记录自己的学习,有问题地方感谢指正
只会记录一些自己目前感觉有用的知识点
代码demo都是基于vue3、ts、element plus
目录结构
-src
--api 存放与请求有关的文件
--assets 存放静态文件(图标、文字)
--components 存放全局公共组件
--config 项目配置
--directives 全局指令
--layout 全局布局
--plugins 插件
--router 路由
--store vuex
--style 全局样式
--utils 全局工具方法
--views 页面
登录页
登录页小功能
项目效果如下,感觉挺不错的
demo
<template>
<div class="login">
<div class="user">
<div ref="nameRef" class="user_name">用户名</div>
<input
class="input"
type="text"
v-model="userName"
@focus="onUserFocus(nameRef)"
@blur="onUserBlur(nameRef, userName)"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
let nameRef = ref(null);
let userName = ref("");
return {
userName,
nameRef,
onUserFocus,
onUserBlur,
};
},
});
//获取焦点事件
const onUserFocus = (dom) => {
dom.classList.remove("blur_name");
dom.classList.add("focus_name");
};
//失去焦点事件
const onUserBlur = (dom, value) => {
if (!value) {
dom.classList.add("blur_name");
}
};
</script>
<style scoped lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 1