Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: import typescript #301

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: import typescript #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20311d0
import ts
Jul 30, 2021
ca28189
import ts
mistery-li Aug 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Expand Up @@ -19,9 +19,10 @@
"wangeditor": "^4.7.4"
},
"devDependencies": {
"vite": "2.3.7",
"@types/vue-router": "^2.0.0",
"@vitejs/plugin-vue": "^1.2.3",
"@vue/compiler-sfc": "^3.1.2"
"@vue/compiler-sfc": "^3.1.2",
"vite": "2.3.7"
},
"browserslist": [
"> 1%",
Expand Down
7 changes: 5 additions & 2 deletions src/App.vue
View file
Open in desktop
Expand Up @@ -2,8 +2,11 @@
<router-view />
</template>

<script>
export default {};
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: 'App'
});
</script>

<style>
Expand Down
243 changes: 126 additions & 117 deletions src/components/Header.vue
View file
Open in desktop
@@ -1,162 +1,171 @@
<template>
<div class="header">
<!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage">
<i v-if="!collapse" class="el-icon-s-fold"></i>
<i v-else class="el-icon-s-unfold"></i>
<div class="header">
<!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage">
<i v-if="!collapse" class="el-icon-s-fold"></i>
<i v-else class="el-icon-s-unfold"></i>
</div>
<div class="logo">后台管理系统</div>
<div class="header-right">
<div class="header-user-con">
<!-- 消息中心 -->
<div class="btn-bell">
<el-tooltip
effect="dark"
:content="message ? `有${message}条未读消息` : `消息中心`"
placement="bottom"
>
<router-link to="/tabs">
<i class="el-icon-bell"></i>
</router-link>
</el-tooltip>
<span class="btn-bell-badge" v-if="message"></span>
</div>
<div class="logo">后台管理系统</div>
<div class="header-right">
<div class="header-user-con">
<!-- 消息中心 -->
<div class="btn-bell">
<el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
<router-link to="/tabs">
<i class="el-icon-bell"></i>
</router-link>
</el-tooltip>
<span class="btn-bell-badge" v-if="message"></span>
</div>
<!-- 用户头像 -->
<div class="user-avator">
<img src="../assets/img/img.jpg" />
</div>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{username}}
<i class="el-icon-caret-bottom"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item>
</a>
<el-dropdown-item command="user">个人中心</el-dropdown-item>
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 用户头像 -->
<div class="user-avator">
<img src="../assets/img/img.jpg" />
</div>
<!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ username }}
<i class="el-icon-caret-bottom"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<a
href="https://github.com/lin-xin/vue-manage-system"
target="_blank"
>
<el-dropdown-item>项目仓库</el-dropdown-item>
</a>
<el-dropdown-item command="user">个人中心</el-dropdown-item>
<el-dropdown-item divided command="loginout"
>退出登录</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</template>
<script>
import { computed, onMounted } from "vue";
<script lang="ts">
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
setup() {
const username = localStorage.getItem("ms_username");
const message = 2;
setup() {
const username = localStorage.getItem("ms_username");
const message = ref(2);

const store = useStore();
const collapse = computed(() => store.state.collapse);
// 侧边栏折叠
const collapseChage = () => {
store.commit("handleCollapse", !collapse.value);
};
const store = useStore();
const collapse = computed(() => store.state.collapse);
// 侧边栏折叠
const collapseChage = () => {
store.commit("handleCollapse", !collapse.value);
};

onMounted(() => {
if (document.body.clientWidth < 1500) {
collapseChage();
}
});
onMounted(() => {
if (document.body.clientWidth < 1500) {
collapseChage();
}
});

// 用户名下拉菜单选择事件
const router = useRouter();
const handleCommand = (command) => {
if (command == "loginout") {
localStorage.removeItem("ms_username");
router.push("/login");
} else if (command == "user") {
router.push("/user");
}
};
// 用户名下拉菜单选择事件
const router = useRouter();
const handleCommand = (command) => {
if (command == "loginout") {
localStorage.removeItem("ms_username");
router.push("/login");
} else if (command == "user") {
router.push("/user");
}
};

return {
username,
message,
collapse,
collapseChage,
handleCommand,
};
},
return {
username,
message,
collapse,
collapseChage,
handleCommand,
};
},
};
</script>
<style scoped>
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: 22px;
color: #fff;
position: relative;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: 22px;
color: #fff;
}
.collapse-btn {
float: left;
padding: 0 21px;
cursor: pointer;
line-height: 70px;
float: left;
padding: 0 21px;
cursor: pointer;
line-height: 70px;
}
.header .logo {
float: left;
width: 250px;
line-height: 70px;
float: left;
width: 250px;
line-height: 70px;
}
.header-right {
float: right;
padding-right: 50px;
float: right;
padding-right: 50px;
}
.header-user-con {
display: flex;
height: 70px;
align-items: center;
display: flex;
height: 70px;
align-items: center;
}
.btn-fullscreen {
transform: rotate(45deg);
margin-right: 5px;
font-size: 24px;
transform: rotate(45deg);
margin-right: 5px;
font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
position: relative;
width: 30px;
height: 30px;
text-align: center;
border-radius: 15px;
cursor: pointer;
position: relative;
width: 30px;
height: 30px;
text-align: center;
border-radius: 15px;
cursor: pointer;
}
.btn-bell-badge {
position: absolute;
right: 0;
top: -2px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #f56c6c;
color: #fff;
position: absolute;
right: 0;
top: -2px;
width: 8px;
height: 8px;
border-radius: 4px;
background: #f56c6c;
color: #fff;
}
.btn-bell .el-icon-bell {
color: #fff;
color: #fff;
}
.user-name {
margin-left: 10px;
margin-left: 10px;
}
.user-avator {
margin-left: 20px;
margin-left: 20px;
}
.user-avator img {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
.el-dropdown-link {
color: #fff;
cursor: pointer;
color: #fff;
cursor: pointer;
}
.el-dropdown-menu__item {
text-align: center;
text-align: center;
}
</style>