feature:路由缓存
lin_xin
parent
98261e3eba
commit
9e7ec0cea7
|
|
@ -84,11 +84,11 @@ a {
|
|||
|
||||
.move-enter-active,
|
||||
.move-leave-active {
|
||||
transition: opacity .5s;
|
||||
transition: opacity .1s ease;
|
||||
}
|
||||
|
||||
.move-enter,
|
||||
.move-leave {
|
||||
.move-enter-from,
|
||||
.move-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ export default {
|
|||
this.$store.commit("delTagsItem", { index: 0 });
|
||||
}
|
||||
this.$store.commit("setTagsItem", {
|
||||
name: route.name,
|
||||
title: route.meta.title,
|
||||
path: route.fullPath
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const routes = [
|
|||
children: [
|
||||
{
|
||||
path: "/dashboard",
|
||||
name: "Dashboard",
|
||||
name: "dashboard",
|
||||
meta: {
|
||||
title: '系统首页'
|
||||
},
|
||||
|
|
@ -21,7 +21,7 @@ const routes = [
|
|||
"../views/Dashboard.vue")
|
||||
}, {
|
||||
path: "/table",
|
||||
name: "BaseTable",
|
||||
name: "basetable",
|
||||
meta: {
|
||||
title: '表格'
|
||||
},
|
||||
|
|
@ -30,7 +30,7 @@ const routes = [
|
|||
"../views/BaseTable.vue")
|
||||
}, {
|
||||
path: "/charts",
|
||||
name: "BaseCharts",
|
||||
name: "basecharts",
|
||||
meta: {
|
||||
title: '图表'
|
||||
},
|
||||
|
|
@ -39,7 +39,7 @@ const routes = [
|
|||
"../views/BaseCharts.vue")
|
||||
}, {
|
||||
path: "/form",
|
||||
name: "BaseForm",
|
||||
name: "baseform",
|
||||
meta: {
|
||||
title: '表单'
|
||||
},
|
||||
|
|
@ -48,7 +48,7 @@ const routes = [
|
|||
"../views/BaseForm.vue")
|
||||
}, {
|
||||
path: "/tabs",
|
||||
name: "Tabs",
|
||||
name: "tabs",
|
||||
meta: {
|
||||
title: 'tab标签'
|
||||
},
|
||||
|
|
@ -57,7 +57,7 @@ const routes = [
|
|||
"../views/Tabs.vue")
|
||||
}, {
|
||||
path: "/donate",
|
||||
name: "Donate",
|
||||
name: "donate",
|
||||
meta: {
|
||||
title: '鼓励作者'
|
||||
},
|
||||
|
|
@ -66,7 +66,7 @@ const routes = [
|
|||
"../views/Donate.vue")
|
||||
}, {
|
||||
path: "/permission",
|
||||
name: "Permission",
|
||||
name: "permission",
|
||||
meta: {
|
||||
title: '权限管理',
|
||||
permission: true
|
||||
|
|
@ -76,7 +76,7 @@ const routes = [
|
|||
"../views/Permission.vue")
|
||||
}, {
|
||||
path: "/i18n",
|
||||
name: "I18n",
|
||||
name: "i18n",
|
||||
meta: {
|
||||
title: '国际化语言'
|
||||
},
|
||||
|
|
@ -85,7 +85,7 @@ const routes = [
|
|||
"../views/I18n.vue")
|
||||
}, {
|
||||
path: "/upload",
|
||||
name: "Upload",
|
||||
name: "upload",
|
||||
meta: {
|
||||
title: '上传插件'
|
||||
},
|
||||
|
|
@ -94,7 +94,7 @@ const routes = [
|
|||
"../views/Upload.vue")
|
||||
}, {
|
||||
path: "/icon",
|
||||
name: "Icon",
|
||||
name: "icon",
|
||||
meta: {
|
||||
title: '自定义图标'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,35 +14,13 @@
|
|||
icon="el-icon-delete"
|
||||
class="handle-del mr10"
|
||||
@click="delAllSelection"
|
||||
>批量删除</el-button
|
||||
>
|
||||
<el-select
|
||||
v-model="query.address"
|
||||
placeholder="地址"
|
||||
class="handle-select mr10"
|
||||
>
|
||||
<el-option
|
||||
key="1"
|
||||
label="广东省"
|
||||
value="广东省"
|
||||
></el-option>
|
||||
<el-option
|
||||
key="2"
|
||||
label="湖南省"
|
||||
value="湖南省"
|
||||
></el-option>
|
||||
>批量删除</el-button>
|
||||
<el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
|
||||
<el-option key="1" label="广东省" value="广东省"></el-option>
|
||||
<el-option key="2" label="湖南省" value="湖南省"></el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="query.name"
|
||||
placeholder="用户名"
|
||||
class="handle-input mr10"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="handleSearch"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
|
|
@ -52,22 +30,11 @@
|
|||
header-cell-class-name="table-header"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
width="55"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column type="selection" 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 label="账户余额">
|
||||
<template #default="scope"
|
||||
>￥{{ scope.row.money }}</template
|
||||
>
|
||||
<template #default="scope">￥{{ scope.row.money }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="头像(查看大图)" align="center">
|
||||
<template #default="scope">
|
||||
|
|
@ -89,8 +56,7 @@
|
|||
? 'danger'
|
||||
: ''
|
||||
"
|
||||
>{{ scope.row.state }}</el-tag
|
||||
>
|
||||
>{{ scope.row.state }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
@ -101,15 +67,13 @@
|
|||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.$index, scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
>编辑</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
class="red"
|
||||
@click="handleDelete(scope.$index, scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -138,9 +102,7 @@
|
|||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="editVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveEdit"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button type="primary" @click="saveEdit">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
|
@ -150,13 +112,14 @@
|
|||
<script>
|
||||
import { fetchData } from "../api/index";
|
||||
export default {
|
||||
name: "basetable",
|
||||
data() {
|
||||
return {
|
||||
query: {
|
||||
address: "",
|
||||
name: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 10
|
||||
},
|
||||
tableData: [],
|
||||
multipleSelection: [],
|
||||
|
|
@ -165,7 +128,7 @@ export default {
|
|||
pageTotal: 0,
|
||||
form: {},
|
||||
idx: -1,
|
||||
id: -1,
|
||||
id: -1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -174,7 +137,7 @@ export default {
|
|||
methods: {
|
||||
// 获取 easy-mock 的模拟数据
|
||||
getData() {
|
||||
fetchData(this.query).then((res) => {
|
||||
fetchData(this.query).then(res => {
|
||||
console.log(res);
|
||||
this.tableData = res.list;
|
||||
this.pageTotal = res.pageTotal || 50;
|
||||
|
|
@ -189,7 +152,7 @@ export default {
|
|||
handleDelete(index) {
|
||||
// 二次确认删除
|
||||
this.$confirm("确定要删除吗？", "提示", {
|
||||
type: "warning",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success("删除成功");
|
||||
|
|
@ -227,8 +190,8 @@ export default {
|
|||
handlePageChange(val) {
|
||||
this.$set(this.query, "pageIndex", val);
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@
|
|||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="mgb20" style="height:252px;">
|
||||
<div class="user-info">
|
||||
<img
|
||||
src="../assets/img/img.jpg"
|
||||
class="user-avator"
|
||||
alt
|
||||
/>
|
||||
<img src="../assets/img/img.jpg" class="user-avator" alt />
|
||||
<div class="user-info-cont">
|
||||
<div class="user-info-name">{{ name }}</div>
|
||||
<div>{{ role }}</div>
|
||||
|
|
@ -30,29 +26,16 @@
|
|||
</div>
|
||||
</template>
|
||||
Vue
|
||||
<el-progress
|
||||
:percentage="71.3"
|
||||
color="#42b983"
|
||||
></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-progress :percentage="71.3" color="#42b983"></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-col>
|
||||
<el-col :span="16">
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="8">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
:body-style="{ padding: '0px' }"
|
||||
>
|
||||
<el-card shadow="hover" :body-style="{ padding: '0px' }">
|
||||
<div class="grid-content grid-con-1">
|
||||
<i class="el-icon-user-solid grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
|
|
@ -63,14 +46,9 @@
|
|||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
:body-style="{ padding: '0px' }"
|
||||
>
|
||||
<el-card shadow="hover" :body-style="{ padding: '0px' }">
|
||||
<div class="grid-content grid-con-2">
|
||||
<i
|
||||
class="el-icon-message-solid grid-con-icon"
|
||||
></i>
|
||||
<i class="el-icon-message-solid grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
<div class="grid-num">321</div>
|
||||
<div>系统消息</div>
|
||||
|
|
@ -79,10 +57,7 @@
|
|||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
:body-style="{ padding: '0px' }"
|
||||
>
|
||||
<el-card shadow="hover" :body-style="{ padding: '0px' }">
|
||||
<div class="grid-content grid-con-3">
|
||||
<i class="el-icon-s-goods grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
|
|
@ -97,24 +72,14 @@
|
|||
<template #header>
|
||||
<div class="clearfix">
|
||||
<span>待办事项</span>
|
||||
<el-button
|
||||
style="float: right; padding: 3px 0"
|
||||
type="text"
|
||||
>添加</el-button
|
||||
>
|
||||
<el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
:show-header="false"
|
||||
:data="todoList"
|
||||
style="width:100%;"
|
||||
>
|
||||
<el-table :show-header="false" :data="todoList" style="width:100%;">
|
||||
<el-table-column width="40">
|
||||
<template #default="scope">
|
||||
<el-checkbox
|
||||
v-model="scope.row.status"
|
||||
></el-checkbox>
|
||||
<el-checkbox v-model="scope.row.status"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column>
|
||||
|
|
@ -124,9 +89,7 @@
|
|||
:class="{
|
||||
'todo-item-del': scope.row.status,
|
||||
}"
|
||||
>
|
||||
{{ scope.row.title }}
|
||||
</div>
|
||||
>{{ scope.row.title }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="60">
|
||||
|
|
@ -142,22 +105,12 @@
|
|||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<schart
|
||||
ref="bar"
|
||||
class="schart"
|
||||
canvasId="bar"
|
||||
:options="options"
|
||||
></schart>
|
||||
<schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<schart
|
||||
ref="line"
|
||||
class="schart"
|
||||
canvasId="line"
|
||||
:options="options2"
|
||||
></schart>
|
||||
<schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -166,7 +119,6 @@
|
|||
|
||||
<script>
|
||||
import Schart from "vue-schart";
|
||||
// import bus from '../common/bus';
|
||||
export default {
|
||||
name: "dashboard",
|
||||
data() {
|
||||
|
|
@ -175,111 +127,111 @@ export default {
|
|||
todoList: [
|
||||
{
|
||||
title: "今天要修复100个bug",
|
||||
status: false,
|
||||
status: false
|
||||
},
|
||||
{
|
||||
title: "今天要修复100个bug",
|
||||
status: false,
|
||||
status: false
|
||||
},
|
||||
{
|
||||
title: "今天要写100行代码加几个bug吧",
|
||||
status: false,
|
||||
status: false
|
||||
},
|
||||
{
|
||||
title: "今天要修复100个bug",
|
||||
status: false,
|
||||
status: false
|
||||
},
|
||||
{
|
||||
title: "今天要修复100个bug",
|
||||
status: true,
|
||||
status: true
|
||||
},
|
||||
{
|
||||
title: "今天要写100行代码加几个bug吧",
|
||||
status: true,
|
||||
},
|
||||
status: true
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
name: "2018/09/04",
|
||||
value: 1083,
|
||||
value: 1083
|
||||
},
|
||||
{
|
||||
name: "2018/09/05",
|
||||
value: 941,
|
||||
value: 941
|
||||
},
|
||||
{
|
||||
name: "2018/09/06",
|
||||
value: 1139,
|
||||
value: 1139
|
||||
},
|
||||
{
|
||||
name: "2018/09/07",
|
||||
value: 816,
|
||||
value: 816
|
||||
},
|
||||
{
|
||||
name: "2018/09/08",
|
||||
value: 327,
|
||||
value: 327
|
||||
},
|
||||
{
|
||||
name: "2018/09/09",
|
||||
value: 228,
|
||||
value: 228
|
||||
},
|
||||
{
|
||||
name: "2018/09/10",
|
||||
value: 1065,
|
||||
},
|
||||
value: 1065
|
||||
}
|
||||
],
|
||||
options: {
|
||||
type: "bar",
|
||||
title: {
|
||||
text: "最近一周各品类销售图",
|
||||
text: "最近一周各品类销售图"
|
||||
},
|
||||
xRorate: 25,
|
||||
labels: ["周一", "周二", "周三", "周四", "周五"],
|
||||
datasets: [
|
||||
{
|
||||
label: "家电",
|
||||
data: [234, 278, 270, 190, 230],
|
||||
data: [234, 278, 270, 190, 230]
|
||||
},
|
||||
{
|
||||
label: "百货",
|
||||
data: [164, 178, 190, 135, 160],
|
||||
data: [164, 178, 190, 135, 160]
|
||||
},
|
||||
{
|
||||
label: "食品",
|
||||
data: [144, 198, 150, 235, 120],
|
||||
},
|
||||
],
|
||||
data: [144, 198, 150, 235, 120]
|
||||
}
|
||||
]
|
||||
},
|
||||
options2: {
|
||||
type: "line",
|
||||
title: {
|
||||
text: "最近几个月各品类销售趋势图",
|
||||
text: "最近几个月各品类销售趋势图"
|
||||
},
|
||||
labels: ["6月", "7月", "8月", "9月", "10月"],
|
||||
datasets: [
|
||||
{
|
||||
label: "家电",
|
||||
data: [234, 278, 270, 190, 230],
|
||||
data: [234, 278, 270, 190, 230]
|
||||
},
|
||||
{
|
||||
label: "百货",
|
||||
data: [164, 178, 150, 135, 160],
|
||||
data: [164, 178, 150, 135, 160]
|
||||
},
|
||||
{
|
||||
label: "食品",
|
||||
data: [74, 118, 200, 235, 90],
|
||||
},
|
||||
],
|
||||
},
|
||||
data: [74, 118, 200, 235, 90]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Schart,
|
||||
Schart
|
||||
},
|
||||
computed: {
|
||||
role() {
|
||||
return this.name === "admin" ? "超级管理员" : "普通用户";
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -290,22 +242,8 @@ export default {
|
|||
item.name = `${date.getFullYear()}/${date.getMonth() +
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
export default {
|
||||
name: "donate"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div class="about">
|
||||
<v-header />
|
||||
<v-sidebar />
|
||||
<div class="content-box" :class="{'content-collapse':collapse}">
|
||||
<div class="content-box" :class="{ 'content-collapse': collapse }">
|
||||
<v-tags></v-tags>
|
||||
<div class="content">
|
||||
<!-- <keep-alive :include="tagsList"> -->
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="move" mode="out-in">
|
||||
<component :is="Component" />
|
||||
<keep-alive :include="tagsList">
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
<!-- </keep-alive> -->
|
||||
<!-- <el-backtop target=".content"></el-backtop> -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,9 +27,12 @@ export default {
|
|||
vSidebar,
|
||||
vTags
|
||||
},
|
||||
computed:{
|
||||
collapse(){
|
||||
return this.$store.state.collapse
|
||||
computed: {
|
||||
tagsList() {
|
||||
return this.$store.state.tagsList.map(item => item.name);
|
||||
},
|
||||
collapse() {
|
||||
return this.$store.state.collapse;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,12 +2,18 @@
|
|||
<section class="main">
|
||||
<div class="crumbs">
|
||||
<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>
|
||||
</div>
|
||||
<div class="container">
|
||||
<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">
|
||||
<h2>{{$t('i18n.title1')}}</h2>
|
||||
<p>{{$t('i18n.p1')}}</p>
|
||||
|
|
@ -20,14 +26,15 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
name: "i18n"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list{
|
||||
.list {
|
||||
padding: 30px 0;
|
||||
}
|
||||
.list p{
|
||||
.list p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,16 @@
|
|||
<div>
|
||||
<div class="crumbs">
|
||||
<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>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h2>使用方法</h2>
|
||||
<p style="line-height: 50px;">
|
||||
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）
|
||||
</p>
|
||||
<p
|
||||
style="line-height: 50px;"
|
||||
>直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
|
||||
<span><i class="el-icon-lx-redpacket_fill"></i></span>
|
||||
|
|
@ -22,10 +24,16 @@
|
|||
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
|
||||
<span><i class="el-icon-lx-emojifill"></i></span>
|
||||
</p>
|
||||
<br>
|
||||
<br />
|
||||
<h2>图标</h2>
|
||||
<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>
|
||||
<ul>
|
||||
<li class="icon-li" v-for="(item,index) in list" :key="index">
|
||||
|
|
@ -36,177 +44,178 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
export default {
|
||||
name: "icon",
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
keyword: "",
|
||||
iconList: [
|
||||
'attentionforbid',
|
||||
'attentionforbidfill',
|
||||
'attention',
|
||||
'attentionfill',
|
||||
'tag',
|
||||
'tagfill',
|
||||
'people',
|
||||
'peoplefill',
|
||||
'notice',
|
||||
'noticefill',
|
||||
'mobile',
|
||||
'mobilefill',
|
||||
'voice',
|
||||
'voicefill',
|
||||
'unlock',
|
||||
'lock',
|
||||
'home',
|
||||
'homefill',
|
||||
'delete',
|
||||
'deletefill',
|
||||
'notification',
|
||||
'notificationfill',
|
||||
'notificationforbidfill',
|
||||
'like',
|
||||
'likefill',
|
||||
'comment',
|
||||
'commentfill',
|
||||
'camera',
|
||||
'camerafill',
|
||||
'warn',
|
||||
'warnfill',
|
||||
'time',
|
||||
'timefill',
|
||||
'location',
|
||||
'locationfill',
|
||||
'favor',
|
||||
'favorfill',
|
||||
'skin',
|
||||
'skinfill',
|
||||
'news',
|
||||
'newsfill',
|
||||
'record',
|
||||
'recordfill',
|
||||
'emoji',
|
||||
'emojifill',
|
||||
'message',
|
||||
'messagefill',
|
||||
'goods',
|
||||
'goodsfill',
|
||||
'crown',
|
||||
'crownfill',
|
||||
'move',
|
||||
'add',
|
||||
'hot',
|
||||
'hotfill',
|
||||
'service',
|
||||
'servicefill',
|
||||
'present',
|
||||
'presentfill',
|
||||
'pic',
|
||||
'picfill',
|
||||
'rank',
|
||||
'rankfill',
|
||||
'male',
|
||||
'female',
|
||||
'down',
|
||||
'top',
|
||||
'recharge',
|
||||
'rechargefill',
|
||||
'forward',
|
||||
'forwardfill',
|
||||
'info',
|
||||
'infofill',
|
||||
'redpacket',
|
||||
'redpacket_fill',
|
||||
'roundadd',
|
||||
'roundaddfill',
|
||||
'friendadd',
|
||||
'friendaddfill',
|
||||
'cart',
|
||||
'cartfill',
|
||||
'more',
|
||||
'moreandroid',
|
||||
'back',
|
||||
'right',
|
||||
'shop',
|
||||
'shopfill',
|
||||
'question',
|
||||
'questionfill',
|
||||
'roundclose',
|
||||
'roundclosefill',
|
||||
'roundcheck',
|
||||
'roundcheckfill',
|
||||
'global',
|
||||
'mail',
|
||||
'punch',
|
||||
'exit',
|
||||
'upload',
|
||||
'read',
|
||||
'file',
|
||||
'link',
|
||||
'full',
|
||||
'group',
|
||||
'friend',
|
||||
'profile',
|
||||
'addressbook',
|
||||
'calendar',
|
||||
'text',
|
||||
'copy',
|
||||
'share',
|
||||
'wifi',
|
||||
'vipcard',
|
||||
'weibo',
|
||||
'remind',
|
||||
'refresh',
|
||||
'filter',
|
||||
'settings',
|
||||
'scan',
|
||||
'qrcode',
|
||||
'cascades',
|
||||
'apps',
|
||||
'sort',
|
||||
'searchlist',
|
||||
'search',
|
||||
'edit'
|
||||
"attentionforbid",
|
||||
"attentionforbidfill",
|
||||
"attention",
|
||||
"attentionfill",
|
||||
"tag",
|
||||
"tagfill",
|
||||
"people",
|
||||
"peoplefill",
|
||||
"notice",
|
||||
"noticefill",
|
||||
"mobile",
|
||||
"mobilefill",
|
||||
"voice",
|
||||
"voicefill",
|
||||
"unlock",
|
||||
"lock",
|
||||
"home",
|
||||
"homefill",
|
||||
"delete",
|
||||
"deletefill",
|
||||
"notification",
|
||||
"notificationfill",
|
||||
"notificationforbidfill",
|
||||
"like",
|
||||
"likefill",
|
||||
"comment",
|
||||
"commentfill",
|
||||
"camera",
|
||||
"camerafill",
|
||||
"warn",
|
||||
"warnfill",
|
||||
"time",
|
||||
"timefill",
|
||||
"location",
|
||||
"locationfill",
|
||||
"favor",
|
||||
"favorfill",
|
||||
"skin",
|
||||
"skinfill",
|
||||
"news",
|
||||
"newsfill",
|
||||
"record",
|
||||
"recordfill",
|
||||
"emoji",
|
||||
"emojifill",
|
||||
"message",
|
||||
"messagefill",
|
||||
"goods",
|
||||
"goodsfill",
|
||||
"crown",
|
||||
"crownfill",
|
||||
"move",
|
||||
"add",
|
||||
"hot",
|
||||
"hotfill",
|
||||
"service",
|
||||
"servicefill",
|
||||
"present",
|
||||
"presentfill",
|
||||
"pic",
|
||||
"picfill",
|
||||
"rank",
|
||||
"rankfill",
|
||||
"male",
|
||||
"female",
|
||||
"down",
|
||||
"top",
|
||||
"recharge",
|
||||
"rechargefill",
|
||||
"forward",
|
||||
"forwardfill",
|
||||
"info",
|
||||
"infofill",
|
||||
"redpacket",
|
||||
"redpacket_fill",
|
||||
"roundadd",
|
||||
"roundaddfill",
|
||||
"friendadd",
|
||||
"friendaddfill",
|
||||
"cart",
|
||||
"cartfill",
|
||||
"more",
|
||||
"moreandroid",
|
||||
"back",
|
||||
"right",
|
||||
"shop",
|
||||
"shopfill",
|
||||
"question",
|
||||
"questionfill",
|
||||
"roundclose",
|
||||
"roundclosefill",
|
||||
"roundcheck",
|
||||
"roundcheckfill",
|
||||
"global",
|
||||
"mail",
|
||||
"punch",
|
||||
"exit",
|
||||
"upload",
|
||||
"read",
|
||||
"file",
|
||||
"link",
|
||||
"full",
|
||||
"group",
|
||||
"friend",
|
||||
"profile",
|
||||
"addressbook",
|
||||
"calendar",
|
||||
"text",
|
||||
"copy",
|
||||
"share",
|
||||
"wifi",
|
||||
"vipcard",
|
||||
"weibo",
|
||||
"remind",
|
||||
"refresh",
|
||||
"filter",
|
||||
"settings",
|
||||
"scan",
|
||||
"qrcode",
|
||||
"cascades",
|
||||
"apps",
|
||||
"sort",
|
||||
"searchlist",
|
||||
"search",
|
||||
"edit"
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
list(){
|
||||
return this.iconList.filter((item) => {
|
||||
list() {
|
||||
return this.iconList.filter(item => {
|
||||
return item.indexOf(this.keyword) !== -1;
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-p{
|
||||
.example-p {
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search-box{
|
||||
.search-box {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.search{
|
||||
.search {
|
||||
width: 300px;
|
||||
}
|
||||
ul,li{
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
.icon-li{
|
||||
.icon-li {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.icon-li-content{
|
||||
.icon-li-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
|
@ -214,11 +223,11 @@ ul,li{
|
|||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-li-content i{
|
||||
.icon-li-content i {
|
||||
font-size: 36px;
|
||||
color: #606266;
|
||||
}
|
||||
.icon-li-content span{
|
||||
.icon-li-content span {
|
||||
margin-top: 10px;
|
||||
color: #787878;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,37 +2,39 @@
|
|||
<div>
|
||||
<div class="crumbs">
|
||||
<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>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1>管理员权限页面</h1>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "permission"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1{
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
p{
|
||||
p {
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.logout{
|
||||
color: #409EFF;
|
||||
.logout {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -81,6 +81,7 @@
|
|||
import VueCropper from "vue-cropperjs";
|
||||
import "cropperjs/dist/cropper.css";
|
||||
export default {
|
||||
name: "upload",
|
||||
data() {
|
||||
return {
|
||||
defaultSrc: require("../assets/img/img.jpg"),
|
||||
|
|
|
|||
Loading…
Reference in New Issue