github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

feature:路由缓存

pull/289/head
lin_xin 2021-03-17 22:18:49 +08:00
parent 98261e3eba
commit 9e7ec0cea7
11 changed files with 290 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/main.css
View File

@ -84,11 +84,11 @@ a {
.move-enter-active, .move-enter-active,
.move-leave-active { .move-leave-active {
transition: opacity .5s; transition: opacity .1s ease;
} }
.move-enter, .move-enter-from,
.move-leave { .move-leave-to {
opacity: 0; opacity: 0;
} }

1
src/components/Tags.vue
View File

@ -80,6 +80,7 @@ export default {
this.$store.commit("delTagsItem", { index: 0 }); this.$store.commit("delTagsItem", { index: 0 });
} }
this.$store.commit("setTagsItem", { this.$store.commit("setTagsItem", {
name: route.name,
title: route.meta.title, title: route.meta.title,
path: route.fullPath path: route.fullPath
}); });

20
src/router/index.js
View File

@ -12,7 +12,7 @@ const routes = [
children: [ children: [
{ {
path: "/dashboard", path: "/dashboard",
name: "Dashboard", name: "dashboard",
meta: { meta: {
title: '系统首页' title: '系统首页'
}, },
@ -21,7 +21,7 @@ const routes = [
"../views/Dashboard.vue") "../views/Dashboard.vue")
}, { }, {
path: "/table", path: "/table",
name: "BaseTable", name: "basetable",
meta: { meta: {
title: '表格' title: '表格'
}, },
@ -30,7 +30,7 @@ const routes = [
"../views/BaseTable.vue") "../views/BaseTable.vue")
}, { }, {
path: "/charts", path: "/charts",
name: "BaseCharts", name: "basecharts",
meta: { meta: {
title: '图表' title: '图表'
}, },
@ -39,7 +39,7 @@ const routes = [
"../views/BaseCharts.vue") "../views/BaseCharts.vue")
}, { }, {
path: "/form", path: "/form",
name: "BaseForm", name: "baseform",
meta: { meta: {
title: '表单' title: '表单'
}, },
@ -48,7 +48,7 @@ const routes = [
"../views/BaseForm.vue") "../views/BaseForm.vue")
}, { }, {
path: "/tabs", path: "/tabs",
name: "Tabs", name: "tabs",
meta: { meta: {
title: 'tab标签' title: 'tab标签'
}, },
@ -57,7 +57,7 @@ const routes = [
"../views/Tabs.vue") "../views/Tabs.vue")
}, { }, {
path: "/donate", path: "/donate",
name: "Donate", name: "donate",
meta: { meta: {
title: '鼓励作者' title: '鼓励作者'
}, },
@ -66,7 +66,7 @@ const routes = [
"../views/Donate.vue") "../views/Donate.vue")
}, { }, {
path: "/permission", path: "/permission",
name: "Permission", name: "permission",
meta: { meta: {
title: '权限管理', title: '权限管理',
permission: true permission: true
@ -76,7 +76,7 @@ const routes = [
"../views/Permission.vue") "../views/Permission.vue")
}, { }, {
path: "/i18n", path: "/i18n",
name: "I18n", name: "i18n",
meta: { meta: {
title: '国际化语言' title: '国际化语言'
}, },
@ -85,7 +85,7 @@ const routes = [
"../views/I18n.vue") "../views/I18n.vue")
}, { }, {
path: "/upload", path: "/upload",
name: "Upload", name: "upload",
meta: { meta: {
title: '上传插件' title: '上传插件'
}, },
@ -94,7 +94,7 @@ const routes = [
"../views/Upload.vue") "../views/Upload.vue")
}, { }, {
path: "/icon", path: "/icon",
name: "Icon", name: "icon",
meta: { meta: {
title: '自定义图标' title: '自定义图标'
}, },

77
src/views/BaseTable.vue
View File

@ -14,35 +14,13 @@
icon="el-icon-delete" icon="el-icon-delete"
class="handle-del mr10" class="handle-del mr10"
@click="delAllSelection" @click="delAllSelection"
>批量删除</el-button >批量删除</el-button>
> <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
<el-select <el-option key="1" label="广东省" value="广东省"></el-option>
v-model="query.address" <el-option key="2" label="湖南省" value="湖南省"></el-option>
placeholder="地址"
class="handle-select mr10"
>
<el-option
key="1"
label="广东省"
value="广东省"
></el-option>
<el-option
key="2"
label="湖南省"
value="湖南省"
></el-option>
</el-select> </el-select>
<el-input <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
v-model="query.name" <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
placeholder="用户名"
class="handle-input mr10"
></el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleSearch"
>搜索</el-button
>
</div> </div>
<el-table <el-table
:data="tableData" :data="tableData"
@ -52,22 +30,11 @@
header-cell-class-name="table-header" header-cell-class-name="table-header"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column <el-table-column type="selection" width="55" align="center"></el-table-column>
type="selection" <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
width="55"
align="center"
></el-table-column>
<el-table-column
prop="id"
label="ID"
width="55"
align="center"
></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column> <el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column label="账户余额"> <el-table-column label="账户余额">
<template #default="scope" <template #default="scope">￥{{ scope.row.money }}</template>
>￥{{ scope.row.money }}</template
>
</el-table-column> </el-table-column>
<el-table-column label="头像(查看大图)" align="center"> <el-table-column label="头像(查看大图)" align="center">
<template #default="scope"> <template #default="scope">
@ -89,8 +56,7 @@
? 'danger' ? 'danger'
: '' : ''
" "
>{{ scope.row.state }}</el-tag >{{ scope.row.state }}</el-tag>
>
</template> </template>
</el-table-column> </el-table-column>
@ -101,15 +67,13 @@
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)" @click="handleEdit(scope.$index, scope.row)"
>编辑</el-button >编辑</el-button>
>
<el-button <el-button
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
class="red" class="red"
@click="handleDelete(scope.$index, scope.row)" @click="handleDelete(scope.$index, scope.row)"
>删除</el-button >删除</el-button>
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -138,9 +102,7 @@
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button> <el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit" <el-button type="primary" @click="saveEdit">确 定</el-button>
>确 定</el-button
>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -150,13 +112,14 @@
<script> <script>
import { fetchData } from "../api/index"; import { fetchData } from "../api/index";
export default { export default {
name: "basetable",
data() { data() {
return { return {
query: { query: {
address: "", address: "",
name: "", name: "",
pageIndex: 1, pageIndex: 1,
pageSize: 10, pageSize: 10
}, },
tableData: [], tableData: [],
multipleSelection: [], multipleSelection: [],
@ -165,7 +128,7 @@ export default {
pageTotal: 0, pageTotal: 0,
form: {}, form: {},
idx: -1, idx: -1,
id: -1, id: -1
}; };
}, },
created() { created() {
@ -174,7 +137,7 @@ export default {
methods: { methods: {
// 获取 easy-mock 的模拟数据 // 获取 easy-mock 的模拟数据
getData() { getData() {
fetchData(this.query).then((res) => { fetchData(this.query).then(res => {
console.log(res); console.log(res);
this.tableData = res.list; this.tableData = res.list;
this.pageTotal = res.pageTotal || 50; this.pageTotal = res.pageTotal || 50;
@ -189,7 +152,7 @@ export default {
handleDelete(index) { handleDelete(index) {
// 二次确认删除 // 二次确认删除
this.$confirm("确定要删除吗？", "提示", { this.$confirm("确定要删除吗？", "提示", {
type: "warning", type: "warning"
}) })
.then(() => { .then(() => {
this.$message.success("删除成功"); this.$message.success("删除成功");
@ -227,8 +190,8 @@ export default {
handlePageChange(val) { handlePageChange(val) {
this.$set(this.query, "pageIndex", val); this.$set(this.query, "pageIndex", val);
this.getData(); this.getData();
}, }
}, }
}; };
</script> </script>

156
src/views/Dashboard.vue
View File

@ -4,11 +4,7 @@
<el-col :span="8"> <el-col :span="8">
<el-card shadow="hover" class="mgb20" style="height:252px;"> <el-card shadow="hover" class="mgb20" style="height:252px;">
<div class="user-info"> <div class="user-info">
<img <img src="../assets/img/img.jpg" class="user-avator" alt />
src="../assets/img/img.jpg"
class="user-avator"
alt
/>
<div class="user-info-cont"> <div class="user-info-cont">
<div class="user-info-name">{{ name }}</div> <div class="user-info-name">{{ name }}</div>
<div>{{ role }}</div> <div>{{ role }}</div>
@ -30,29 +26,16 @@
</div> </div>
</template> </template>
Vue Vue
<el-progress <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
:percentage="71.3" <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
color="#42b983" <el-progress :percentage="13.7"></el-progress>HTML
></el-progress <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
>JavaScript
<el-progress
:percentage="24.1"
color="#f1e05a"
></el-progress
>CSS <el-progress :percentage="13.7"></el-progress>HTML
<el-progress
:percentage="5.9"
color="#f56c6c"
></el-progress>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<el-row :gutter="20" class="mgb20"> <el-row :gutter="20" class="mgb20">
<el-col :span="8"> <el-col :span="8">
<el-card <el-card shadow="hover" :body-style="{ padding: '0px' }">
shadow="hover"
:body-style="{ padding: '0px' }"
>
<div class="grid-content grid-con-1"> <div class="grid-content grid-con-1">
<i class="el-icon-user-solid grid-con-icon"></i> <i class="el-icon-user-solid grid-con-icon"></i>
<div class="grid-cont-right"> <div class="grid-cont-right">
@ -63,14 +46,9 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-card <el-card shadow="hover" :body-style="{ padding: '0px' }">
shadow="hover"
:body-style="{ padding: '0px' }"
>
<div class="grid-content grid-con-2"> <div class="grid-content grid-con-2">
<i <i class="el-icon-message-solid grid-con-icon"></i>
class="el-icon-message-solid grid-con-icon"
></i>
<div class="grid-cont-right"> <div class="grid-cont-right">
<div class="grid-num">321</div> <div class="grid-num">321</div>
<div>系统消息</div> <div>系统消息</div>
@ -79,10 +57,7 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-card <el-card shadow="hover" :body-style="{ padding: '0px' }">
shadow="hover"
:body-style="{ padding: '0px' }"
>
<div class="grid-content grid-con-3"> <div class="grid-content grid-con-3">
<i class="el-icon-s-goods grid-con-icon"></i> <i class="el-icon-s-goods grid-con-icon"></i>
<div class="grid-cont-right"> <div class="grid-cont-right">
@ -97,24 +72,14 @@
<template #header> <template #header>
<div class="clearfix"> <div class="clearfix">
<span>待办事项</span> <span>待办事项</span>
<el-button <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
style="float: right; padding: 3px 0"
type="text"
>添加</el-button
>
</div> </div>
</template> </template>
<el-table <el-table :show-header="false" :data="todoList" style="width:100%;">
:show-header="false"
:data="todoList"
style="width:100%;"
>
<el-table-column width="40"> <el-table-column width="40">
<template #default="scope"> <template #default="scope">
<el-checkbox <el-checkbox v-model="scope.row.status"></el-checkbox>
v-model="scope.row.status"
></el-checkbox>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column> <el-table-column>
@ -124,9 +89,7 @@
:class="{ :class="{
'todo-item-del': scope.row.status, 'todo-item-del': scope.row.status,
}" }"
> >{{ scope.row.title }}</div>
{{ scope.row.title }}
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="60"> <el-table-column width="60">
@ -142,22 +105,12 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-card shadow="hover"> <el-card shadow="hover">
<schart <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
ref="bar"
class="schart"
canvasId="bar"
:options="options"
></schart>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-card shadow="hover"> <el-card shadow="hover">
<schart <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
ref="line"
class="schart"
canvasId="line"
:options="options2"
></schart>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -166,7 +119,6 @@
<script> <script>
import Schart from "vue-schart"; import Schart from "vue-schart";
// import bus from '../common/bus';
export default { export default {
name: "dashboard", name: "dashboard",
data() { data() {
@ -175,111 +127,111 @@ export default {
todoList: [ todoList: [
{ {
title: "今天要修复100个bug", title: "今天要修复100个bug",
status: false, status: false
}, },
{ {
title: "今天要修复100个bug", title: "今天要修复100个bug",
status: false, status: false
}, },
{ {
title: "今天要写100行代码加几个bug吧", title: "今天要写100行代码加几个bug吧",
status: false, status: false
}, },
{ {
title: "今天要修复100个bug", title: "今天要修复100个bug",
status: false, status: false
}, },
{ {
title: "今天要修复100个bug", title: "今天要修复100个bug",
status: true, status: true
}, },
{ {
title: "今天要写100行代码加几个bug吧", title: "今天要写100行代码加几个bug吧",
status: true, status: true
}, }
], ],
data: [ data: [
{ {
name: "2018/09/04", name: "2018/09/04",
value: 1083, value: 1083
}, },
{ {
name: "2018/09/05", name: "2018/09/05",
value: 941, value: 941
}, },
{ {
name: "2018/09/06", name: "2018/09/06",
value: 1139, value: 1139
}, },
{ {
name: "2018/09/07", name: "2018/09/07",
value: 816, value: 816
}, },
{ {
name: "2018/09/08", name: "2018/09/08",
value: 327, value: 327
}, },
{ {
name: "2018/09/09", name: "2018/09/09",
value: 228, value: 228
}, },
{ {
name: "2018/09/10", name: "2018/09/10",
value: 1065, value: 1065
}, }
], ],
options: { options: {
type: "bar", type: "bar",
title: { title: {
text: "最近一周各品类销售图", text: "最近一周各品类销售图"
}, },
xRorate: 25, xRorate: 25,
labels: ["周一", "周二", "周三", "周四", "周五"], labels: ["周一", "周二", "周三", "周四", "周五"],
datasets: [ datasets: [
{ {
label: "家电", label: "家电",
data: [234, 278, 270, 190, 230], data: [234, 278, 270, 190, 230]
}, },
{ {
label: "百货", label: "百货",
data: [164, 178, 190, 135, 160], data: [164, 178, 190, 135, 160]
}, },
{ {
label: "食品", label: "食品",
data: [144, 198, 150, 235, 120], data: [144, 198, 150, 235, 120]
}, }
], ]
}, },
options2: { options2: {
type: "line", type: "line",
title: { title: {
text: "最近几个月各品类销售趋势图", text: "最近几个月各品类销售趋势图"
}, },
labels: ["6月", "7月", "8月", "9月", "10月"], labels: ["6月", "7月", "8月", "9月", "10月"],
datasets: [ datasets: [
{ {
label: "家电", label: "家电",
data: [234, 278, 270, 190, 230], data: [234, 278, 270, 190, 230]
}, },
{ {
label: "百货", label: "百货",
data: [164, 178, 150, 135, 160], data: [164, 178, 150, 135, 160]
}, },
{ {
label: "食品", label: "食品",
data: [74, 118, 200, 235, 90], data: [74, 118, 200, 235, 90]
}, }
], ]
}, }
}; };
}, },
components: { components: {
Schart, Schart
}, },
computed: { computed: {
role() { role() {
return this.name === "admin" ? "超级管理员" : "普通用户"; return this.name === "admin" ? "超级管理员" : "普通用户";
}, }
}, },
methods: { methods: {
@ -290,22 +242,8 @@ export default {
item.name = `${date.getFullYear()}/${date.getMonth() + item.name = `${date.getFullYear()}/${date.getMonth() +
1}/${date.getDate()}`; 1}/${date.getDate()}`;
}); });
}, }
// handleListener() { }
// bus.$on('collapse', this.handleBus);
// // 调用renderChart方法对图表进行重新渲染
// window.addEventListener('resize', this.renderChart);
// },
// handleBus(msg) {
// setTimeout(() => {
// this.renderChart();
// }, 200);
// },
// renderChart() {
// this.$refs.bar.renderChart();
// this.$refs.line.renderChart();
// }
},
}; };
</script> </script>

4
src/views/Donate.vue
View File

@ -17,7 +17,9 @@
</template> </template>
<script> <script>
export default {}; export default {
name: "donate"
};
</script> </script>
<style> <style>

27
src/views/Home.vue
View File

@ -2,16 +2,16 @@
<div class="about"> <div class="about">
<v-header /> <v-header />
<v-sidebar /> <v-sidebar />
<div class="content-box" :class="{'content-collapse':collapse}"> <div class="content-box" :class="{ 'content-collapse': collapse }">
<v-tags></v-tags> <v-tags></v-tags>
<div class="content"> <div class="content">
<!-- <keep-alive :include="tagsList"> --> <router-view v-slot="{ Component }">
<router-view v-slot="{ Component }"> <transition name="move" mode="out-in">
<transition name="move" mode="out-in"> <keep-alive :include="tagsList">
<component :is="Component" /> <component :is="Component" />
</transition> </keep-alive>
</router-view> </transition>
<!-- </keep-alive> --> </router-view>
<!-- <el-backtop target=".content"></el-backtop> --> <!-- <el-backtop target=".content"></el-backtop> -->
</div> </div>
</div> </div>
@ -27,10 +27,13 @@ export default {
vSidebar, vSidebar,
vTags vTags
}, },
computed:{ computed: {
collapse(){ tagsList() {
return this.$store.state.collapse return this.$store.state.tagsList.map(item => item.name);
},
collapse() {
return this.$store.state.collapse;
} }
} }
}; };
</script> </script>

19
src/views/I18n.vue
View File

@ -2,14 +2,20 @@
<section class="main"> <section class="main">
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item> <el-breadcrumb-item>
<i class="el-icon-lx-global"></i>
{{$t('i18n.breadcrumb')}}
</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="container"> <div class="container">
<span>{{$t('i18n.tips')}}</span> <span>{{$t('i18n.tips')}}</span>
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh-cn'?'en':'zh-cn';">{{$t('i18n.btn')}}</el-button> <el-button
type="primary"
@click="$i18n.locale = $i18n.locale === 'zh-cn'?'en':'zh-cn';"
>{{$t('i18n.btn')}}</el-button>
<div class="list"> <div class="list">
<h2>{{$t('i18n.title1')}}</h2> <h2>{{$t('i18n.title1')}}</h2>
<p>{{$t('i18n.p1')}}</p> <p>{{$t('i18n.p1')}}</p>
<p>{{$t('i18n.p2')}}</p> <p>{{$t('i18n.p2')}}</p>
<p>{{$t('i18n.p3')}}</p> <p>{{$t('i18n.p3')}}</p>
@ -20,14 +26,15 @@
<script> <script>
export default { export default {
} name: "i18n"
};
</script> </script>
<style scoped> <style scoped>
.list{ .list {
padding: 30px 0; padding: 30px 0;
} }
.list p{ .list p {
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>

317
src/views/Icon.vue
View File

@ -2,14 +2,16 @@
<div> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item> <el-breadcrumb-item>
<i class="el-icon-lx-emoji"></i> 自定义图标
</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="container"> <div class="container">
<h2>使用方法</h2> <h2>使用方法</h2>
<p style="line-height: 50px;"> <p
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标） style="line-height: 50px;"
</p> >直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）</p>
<p class="example-p"> <p class="example-p">
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i> <i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
<span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span> <span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
@ -22,10 +24,16 @@
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i> <i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
<span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span> <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
</p> </p>
<br> <br />
<h2>图标</h2> <h2>图标</h2>
<div class="search-box"> <div class="search-box">
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input> <el-input
class="search"
size="large"
v-model="keyword"
clearable
placeholder="请输入图标名称"
></el-input>
</div> </div>
<ul> <ul>
<li class="icon-li" v-for="(item,index) in list" :key="index"> <li class="icon-li" v-for="(item,index) in list" :key="index">
@ -36,177 +44,178 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data: function(){ name: "icon",
return { data() {
keyword: '', return {
iconList: [ keyword: "",
'attentionforbid', iconList: [
'attentionforbidfill', "attentionforbid",
'attention', "attentionforbidfill",
'attentionfill', "attention",
'tag', "attentionfill",
'tagfill', "tag",
'people', "tagfill",
'peoplefill', "people",
'notice', "peoplefill",
'noticefill', "notice",
'mobile', "noticefill",
'mobilefill', "mobile",
'voice', "mobilefill",
'voicefill', "voice",
'unlock', "voicefill",
'lock', "unlock",
'home', "lock",
'homefill', "home",
'delete', "homefill",
'deletefill', "delete",
'notification', "deletefill",
'notificationfill', "notification",
'notificationforbidfill', "notificationfill",
'like', "notificationforbidfill",
'likefill', "like",
'comment', "likefill",
'commentfill', "comment",
'camera', "commentfill",
'camerafill', "camera",
'warn', "camerafill",
'warnfill', "warn",
'time', "warnfill",
'timefill', "time",
'location', "timefill",
'locationfill', "location",
'favor', "locationfill",
'favorfill', "favor",
'skin', "favorfill",
'skinfill', "skin",
'news', "skinfill",
'newsfill', "news",
'record', "newsfill",
'recordfill', "record",
'emoji', "recordfill",
'emojifill', "emoji",
'message', "emojifill",
'messagefill', "message",
'goods', "messagefill",
'goodsfill', "goods",
'crown', "goodsfill",
'crownfill', "crown",
'move', "crownfill",
'add', "move",
'hot', "add",
'hotfill', "hot",
'service', "hotfill",
'servicefill', "service",
'present', "servicefill",
'presentfill', "present",
'pic', "presentfill",
'picfill', "pic",
'rank', "picfill",
'rankfill', "rank",
'male', "rankfill",
'female', "male",
'down', "female",
'top', "down",
'recharge', "top",
'rechargefill', "recharge",
'forward', "rechargefill",
'forwardfill', "forward",
'info', "forwardfill",
'infofill', "info",
'redpacket', "infofill",
'redpacket_fill', "redpacket",
'roundadd', "redpacket_fill",
'roundaddfill', "roundadd",
'friendadd', "roundaddfill",
'friendaddfill', "friendadd",
'cart', "friendaddfill",
'cartfill', "cart",
'more', "cartfill",
'moreandroid', "more",
'back', "moreandroid",
'right', "back",
'shop', "right",
'shopfill', "shop",
'question', "shopfill",
'questionfill', "question",
'roundclose', "questionfill",
'roundclosefill', "roundclose",
'roundcheck', "roundclosefill",
'roundcheckfill', "roundcheck",
'global', "roundcheckfill",
'mail', "global",
'punch', "mail",
'exit', "punch",
'upload', "exit",
'read', "upload",
'file', "read",
'link', "file",
'full', "link",
'group', "full",
'friend', "group",
'profile', "friend",
'addressbook', "profile",
'calendar', "addressbook",
'text', "calendar",
'copy', "text",
'share', "copy",
'wifi', "share",
'vipcard', "wifi",
'weibo', "vipcard",
'remind', "weibo",
'refresh', "remind",
'filter', "refresh",
'settings', "filter",
'scan', "settings",
'qrcode', "scan",
'cascades', "qrcode",
'apps', "cascades",
'sort', "apps",
'searchlist', "sort",
'search', "searchlist",
'edit' "search",
] "edit"
} ]
}, };
computed: { },
list(){ computed: {
return this.iconList.filter((item) => { list() {
return item.indexOf(this.keyword) !== -1; return this.iconList.filter(item => {
}) return item.indexOf(this.keyword) !== -1;
} });
} }
} }
};
</script> </script>
<style scoped> <style scoped>
.example-p{ .example-p {
height: 45px; height: 45px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.search-box{ .search-box {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
} }
.search{ .search {
width: 300px; width: 300px;
} }
ul,li{ ul,
li {
list-style: none; list-style: none;
} }
.icon-li{ .icon-li {
display: inline-block; display: inline-block;
padding: 10px; padding: 10px;
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
.icon-li-content{ .icon-li-content {
display: flex; display: flex;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
@ -214,11 +223,11 @@ ul,li{
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
} }
.icon-li-content i{ .icon-li-content i {
font-size: 36px; font-size: 36px;
color: #606266; color: #606266;
} }
.icon-li-content span{ .icon-li-content span {
margin-top: 10px; margin-top: 10px;
color: #787878; color: #787878;
} }

26
src/views/Permission.vue
View File

@ -2,37 +2,39 @@
<div> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限测试</el-breadcrumb-item> <el-breadcrumb-item>
<i class="el-icon-lx-warn"></i> 权限测试
</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="container"> <div class="container">
<h1>管理员权限页面</h1> <h1>管理员权限页面</h1>
<p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到403页面，重新用管理员账号登录才有权限。</p> <p>只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到403页面，重新用管理员账号登录才有权限。</p>
<p>想尝试一下，请<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。</p> <p>
想尝试一下，请
<router-link to="/login" class="logout">退出登录</router-link>，随便输入个账号名，再进来试试看。
</p>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data: function(){ name: "permission"
return {} };
}
}
</script> </script>
<style scoped> <style scoped>
h1{ h1 {
text-align: center; text-align: center;
margin: 30px 0; margin: 30px 0;
} }
p{ p {
line-height: 30px; line-height: 30px;
margin-bottom: 10px; margin-bottom: 10px;
text-indent: 2em; text-indent: 2em;
} }
.logout{ .logout {
color: #409EFF; color: #409eff;
} }
</style> </style>

1
src/views/Upload.vue
View File

@ -81,6 +81,7 @@
import VueCropper from "vue-cropperjs"; import VueCropper from "vue-cropperjs";
import "cropperjs/dist/cropper.css"; import "cropperjs/dist/cropper.css";
export default { export default {
name: "upload",
data() { data() {
return { return {
defaultSrc: require("../assets/img/img.jpg"), defaultSrc: require("../assets/img/img.jpg"),