2019年03月_Dora_5537

原创【应用】如何实现函数公用

1.新建一个commonFunction.js文件在这里，写入函数方法，如下图所示：export function commonFun1 ( param1,param2 ) { 函数体}export function commonFun2 () { 函数体 Fun ()}function Fun () { 函数体}2.在所需页面引入函数方...

2019-03-08 18:10:41 367

原创【应用】如何实现在不同的路径下激活同一个菜单

这篇博客的讲述基于如何使用 element-ui 之 NavMenu 导航菜单中的 router 属性（在激活导航时以 path 进行路由跳转），大家可以先去看看上篇博客。要实现在不同的路径下激活同一个菜单，需修改一个函数，即上篇博客中的 onRouteChanged () 函数，完整代码如下所示： methods: { onRouteChanged () { ...

2019-03-08 17:33:26 267

原创【应用】如何使用 element-ui 之 NavMenu 导航菜单中的 router 属性（在激活导航时以 path 进行路由跳转）

效果图：使用：1.<template><el-header style="height: 61px" > <el-menu mode = "horizontal" background-color = "#76c7f4" text-color = "#000000" active-text-color ...

2019-03-08 11:47:39 14907 2

原创【应用】使用 vue-router 之导航守卫 + meta 实现不同的用户角色具有不同的页面访问权限的功能

这篇博客的讲述基于使用 vue-router 之导航守卫 + localStorage 实现在未登录状态下跳转到登录页面的功能，大家可以先去看看上篇博客。具体实现：1.router.js文件现在以superadmin、admin、user三种不同的用户角色为例，在定义路由时，加上该路由可以由哪种用户角色来访问，代码如下所示:比如说，/HelloWorld 页面这三种用户角色均可...

2019-03-08 10:31:48 7340 3

原创【应用】使用 vue-router 之导航守卫 + meta + localStorage 实现在未登录状态下跳转到登录页面的功能

vue-router 之导航守卫的官网地址具体实现：1.router.js文件在定义路由的时候，加上 meta: {requireAuth: true}，定义一个完整路由的代码如下所示： { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld, me...

2019-03-08 10:00:59 1470

原创【应用】使用 cookie 实现自动登录功能

一、登陆页面1.checkbox+button<el-checkbox v-model="AccountForm.autoLogin">一周内自动登录</el-checkbox><el-button type="primary" style="width: 372px" @click="submitForm()">登录</el-button...

2019-03-07 22:34:36 584

原创【应用】使用 cookie 实现记住密码功能

一、登陆页面1.checkbox+button<el-checkbox v-model="AccountForm.checked">记住密码</el-checkbox><el-button type="primary" style="width: 372px" @click="submitForm()">登录</el-button>...

2019-03-07 21:59:48 1448

原创【应用】如何使用 antv 图表组件

效果图：安装：cnpm install --save @antv/g2使用：首先，在<template></template>中写入：<div id="barG2"></div>其次，在<script></script>中写入：<script>import G2 from '...

2019-03-07 18:43:17 4712 1

原创【应用】如何使用 chart 图表组件

效果图：安装：cnpm install --save chart.js使用：首先，在<template></template>中写入：<div class="chart-container" style="position: relative;width: 550px;height: 335px;margin: auto"> ...

2019-03-07 18:42:45 583

原创【应用】如何使用 vue-html5-editor 富文本编辑器

效果图：安装：cnpm install vue-html5-editor --save-dev使用：1.在 index.html 文件中引入图标样式：<link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">2.在 m...

2019-03-07 18:25:40 3786

原创【应用】element-ui 的安装和引入

参考官方文档：http://element-cn.eleme.io/#/zh-CN/component/installationnpm 安装推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用。npm i element-ui -S完整引入 Element在 main.js 中写入以下内容：import ElementUI from 'eleme...

2019-03-01 20:01:31 1329

原创【应用】使用vue router实现页面之间的跳转

在https://blog.csdn.net/Dora_5537/article/details/87918022这篇博客中，我们使用vue-cli 新建了自己的项目；在https://blog.csdn.net/Dora_5537/article/details/87921443这篇博客中，我们使用WebStorm打开并运行了自己的项目；接下来，我们就简单使用vue router...

2019-03-01 18:41:44 4846

Dora_5537的博客