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)"
/>
</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)=>{
ve("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:150px;
margin-left:100px;
}
.user {
width:100%;
position: relative;
display: grid;
}
.user_name {
color: gray;
position: relative;
left:20px;
top:10px;
font-size:18px;
}
.focus_name {
transform:translateY(-20px);
transition:0.3s;
font-size:14px;
color: blueviolet;
}
.blur_name {
transform:translateY(0px);
font-size:18px;
}
.input {
position: absolute;
top:0;
left:0;
border: none;
border-bottom:1px solid gray;
outline: none;
background: none;
padding:0.5rem 0.7rem;
font-size:1.2rem;
color: #555;
}
</style>
效果
备注（踩坑）
原理差不多，与源代码有些区别
不要使⽤封装好的input框，要使⽤原始的input框。我使⽤position和z-index属性可以使⽂字和输⼊框在⼀块，但是会⽆法触发获取焦点事件
htmlborder使⽤原⽣输⼊框的话，需要解决的问题是前台如何进⾏登陆校验。
试了⼀下el-input，打算修改placeholder的样式来实现，但是placeholder从输⼊框⾥跑出去看不见了
⾸页
全屏
使⽤了vueuse包⾥的useFullscreen功能
vueuse：VueUse不是Vue.use，它是为Vue 2和3服务的⼀套Vue Composition API的常⽤⼯具集，是⽬前世界上Star最⾼的同类型库之⼀。它的初衷就是将⼀切原本并不⽀持响应式的JS API变得⽀持响应式，省去程序员⾃⼰写相关代码。
页⾯跳转，顶部进度条
依赖包：NProgress
菜单标签
项⽬效果
这块的功能涉及路由和菜单⽐较复杂，就简单写了个类似的demo，代码如下：组件代码
<template>
<div @mouseover="handleOver(tagRef)" @mouseout="handleOut(tagRef)">
<div
class="tag"
ref="tagRef"
:class="tagOptions.isActive ? 'active' : 'common'"
>
<!--⽂字-->
<div>{{ ssage }}</div>
<!--关闭按钮-->
<i
v-show="tagOptions.showIcon"
class="el-icon-close close-btn"
@click="closeTag"
></i>
</div>
<!--底部线条-->
<div
ref="tagBottomRef"
class="tag-bottom"
:
></div>
</div>
</template>
<script lang="ts">
import{ defineComponent, onMounted, reactive, ref, watch }from"vue";
export default defineComponent({
props:{
//是否激活，默认不激活
active:{
type: Boolean,
default:false,
},
//是否显⽰按钮，默认不显⽰
icon:{
type: Boolean,
default:false,
},
//信息
message:{
type: String,
default:"",
},
//路由地址
url:{
type: String,
default:"",
},
setup(props, context){
let tagOptions =reactive({
//是否激活
isActive:false,
//是否显⽰按钮
showIcon:false,
//消息
message:"",
//路由地址
url:"",
isMove:false,
});
let tagRef =ref(null);
let tagBottomRef =ref(null);
//监听激活状态
watch(
()=> props.active,
(nval)=>{
tagOptions.isActive = nval;
tagOptions.isMove =false;
tagOptions.showIcon =false;
}
);
//页⾯渲染完成进⾏赋值
onMounted(()=>{
tagOptions.isActive = props.active;
tagOptions.showIcon = props.icon;
tagOptions.url = props.url;
});
//⿏标移⼊事件
const handleOver=(dom)=>{
//⿏标移⼊时，如果不是激活状态，显⽰底部边框、关闭按钮if(!props.active){
tagOptions.showIcon =true;
tagOptions.isMove =true;
}
};
//⿏标移出事件
const handleOut=(dom)=>{
//⿏标移出时，如果不是激活状态，隐藏底部边框、关闭按钮if(!props.active){
tagOptions.showIcon =false;
tagOptions.isMove =false;
}
};
//关闭事件
const closeTag=()=>{
};
return{
tagOptions,
tagRef,
tagBottomRef,
handleOver,
handleOut,
closeTag,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。