THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

Browse Source

Feature/english (#381)

* perf[navbar]: set langSelect to component && refine errorLog component

* feat[login]:add 18n to login form

* fix[pagination]: fixed when selected page-sizes

* perf[i18n]:dashboard document svg permission

* perf[charts]: perf effect

* perf[i18n]:excel && zip

* perf[i18n]: table && errorLog && theme

* perf[i18n]: components

* perf[i18n]: direct use $t

* perf[i18n]: complex-table

* update README.md

* update README.md 📘

* perf[i18n]: refine code comments
pull/389/head
花裤衩 2 years ago
committed by GitHub
parent
commit
45fef9b431
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
61 changed files with 901 additions and 779 deletions
  1. +1
    -1
      LICENSE
  2. +0
    -177
      README-en.md
  3. +94
    -120
      README.md
  4. +165
    -0
      README.zh-CN.md
  5. +11
    -8
      src/components/Charts/lineMarker.vue
  6. +12
    -11
      src/components/Charts/mixChart.vue
  7. +0
    -1
      src/components/Upload/singleImage3.vue
  8. +4
    -0
      src/errorLog.js
  9. +0
    -1
      src/icons/svg/trendChart1.svg
  10. +0
    -1
      src/icons/svg/trendChart2.svg
  11. +0
    -1
      src/icons/svg/trendChart3.svg
  12. +71
    -2
      src/lang/en.js
  13. +69
    -0
      src/lang/zh.js
  14. +3
    -3
      src/main.js
  15. +4
    -4
      src/mock/article.js
  16. +9
    -9
      src/permission.js
  17. +4
    -0
      src/router/index.js
  18. +7
    -0
      src/styles/element-ui.scss
  19. +2
    -1
      src/styles/index.scss
  20. +2
    -2
      src/utils/clipboard.js
  21. +2
    -2
      src/utils/i18n.js
  22. +5
    -5
      src/utils/request.js
  23. +4
    -5
      src/views/charts/keyboard.vue
  24. +4
    -5
      src/views/charts/line.vue
  25. +4
    -6
      src/views/charts/mixChart.vue
  26. +2
    -2
      src/views/clipboard/index.vue
  27. +5
    -5
      src/views/components-demo/avatarUpload.vue
  28. +123
    -130
      src/views/components-demo/backToTop.vue
  29. +1
    -1
      src/views/components-demo/dndList.vue
  30. +4
    -4
      src/views/components-demo/dropzone.vue
  31. +3
    -3
      src/views/components-demo/markdown.vue
  32. +3
    -3
      src/views/components-demo/splitpane.vue
  33. +71
    -68
      src/views/components-demo/sticky.vue
  34. +12
    -4
      src/views/components-demo/tinymce.vue
  35. +1
    -1
      src/views/dashboard/admin/components/BarChart.vue
  36. +1
    -1
      src/views/dashboard/admin/components/LineChart.vue
  37. +4
    -4
      src/views/dashboard/admin/components/PanelGroup.vue
  38. +1
    -1
      src/views/dashboard/admin/components/PieChart.vue
  39. +1
    -1
      src/views/dashboard/admin/components/RaddarChart.vue
  40. +2
    -2
      src/views/dashboard/admin/components/TransactionTable.vue
  41. +2
    -2
      src/views/dashboard/editor/index.vue
  42. +3
    -4
      src/views/documentation/index.vue
  43. +6
    -4
      src/views/errorLog/index.vue
  44. +8
    -8
      src/views/example/tab/components/tabPane.vue
  45. +4
    -4
      src/views/example/tab/index.vue
  46. +53
    -53
      src/views/example/table/complexTable.vue
  47. +11
    -11
      src/views/example/table/dragTable.vue
  48. +5
    -5
      src/views/example/table/dynamicTable/fixedThead.vue
  49. +2
    -2
      src/views/example/table/dynamicTable/index.vue
  50. +1
    -1
      src/views/example/table/dynamicTable/unfixedThead.vue
  51. +11
    -9
      src/views/example/table/inlineEditTable.vue
  52. +9
    -8
      src/views/excel/exportExcel.vue
  53. +18
    -17
      src/views/excel/selectExcel.vue
  54. +0
    -1
      src/views/layout/components/AppMain.vue
  55. +6
    -6
      src/views/layout/components/Navbar.vue
  56. +7
    -7
      src/views/login/authredirect.vue
  57. +16
    -22
      src/views/login/index.vue
  58. +2
    -2
      src/views/permission/index.vue
  59. +2
    -1
      src/views/svg-icons/index.vue
  60. +16
    -10
      src/views/theme/index.vue
  61. +8
    -7
      src/views/zip/index.vue

+ 1
- 1
LICENSE View File

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2017 PanJiaChen
Copyright (c) 2017-presen PanJiaChen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

+ 0
- 177
README-en.md View File

@ -1,177 +0,0 @@
[![vue](https://img.shields.io/badge/vue-2.4.2-brightgreen.svg)](https://github.com/vuejs/vue)
[![element-ui](https://img.shields.io/badge/element--ui-1.4.2-brightgreen.svg)](https://github.com/ElemeFE/element)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
## Intro
> In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly [Vue.js](https://github.com/vuejs/vue)+[Element](https://github.com/ElemeFE/element)+[axios](https://github.com/mzabriskie/axios). Since it's a personal project, all data requests are simulated with [Mock.js](https://github.com/nuysoft/Mock). **Note:** if anyone wants to modify or develop based on this project, please remove the mock files.
**Live demo:** http://panjiachen.github.io/vue-element-admin
**Note: element-ui@1.4.2 is used in the project, so vue 2.3.0+ is required.**
- vueAdmin-template: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- electron-vue-admin: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Donate:[donate](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md#donate)
## Features
- Login/Logout
- Permission authentication
- Sidebar
- Breadcrumb
- Rich text editor
- Markdown editor
- JSON editor
- Drag & drop list
- SplitPane
- Dropzone
- Sticky
- CountTo
- ECharts
- 401, 404 error page
- Error log
- Export Excel
- Upload Excel
- Export Zip
- Table example
- Interactive table example
- Drag & drop table example
- Form example
- Multi-environments distribution
- Dashboard
- Two-factor authentication
- Collapsing sidebar (support nested routes)
- Mock data
- cache tabs example
- screenfull
- markdown2html
- views-tab
- clipboard
## Development
```bash
# Clone project
git clone https://github.com/PanJiaChen/vue-element-admin.git
# Install dependencies
npm install
# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
npm install --registry=https://registry.npm.taobao.org
# Run local dev server
npm run dev
```
Visit in browser: http://localhost:9527
## Distribution
```bash
# Build staged environment with webpack-bundle-analyzer
npm run build:sit-preview
# Build production environment
npm run build:prod
```
## Directory structure
```
├── build // build 
├── config // config
├── src // source code
│   ├── api // all requests
│   ├── assets // static resource like themes, fonts
│   ├── components // global public components
│   ├── directive // global directive
│   ├── filters // global filters
│   ├── mock // mock data
│   ├── router // router
│   ├── store // global status management
│   ├── styles // global styles
│   ├── utils // global public functions
│   ├── view // view
│   ├── App.vue // entry view
│   └── main.js // entry for loading components, initialization
├── static // third-party libraries not packed with Webpack
│   └── Tinymce // rich text
├── .babelrc // babel-loader config
├── eslintrc.js // eslint config
├── .gitignore // gitignore
├── favicon.ico // favicon
├── index.html // html template
└── package.json // package.json
```
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
## Donate
If you find this project useful, you can buy me a cup of coffee
![donate](https://panjiachen.github.io/donate/donation.png)
## State Management
Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.
## Demo
#### Two-factor authentication, supporting WeChat and QQ
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
#### Realtime switching themes
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)
#### tabs
![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)<br />
#### Collapsing sidebar
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
#### Drag & drop table
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
#### Interactive table
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
#### Uploading cropped avatar
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
#### Error log
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
#### Rich text (integrated with Qiniu, watermark and customization)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
#### Packaging table component
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
#### Charts
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
#### Exporting to Excel
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
#### More
http://panjiachen.github.io/vue-element-admin
## License
MIT

+ 94
- 120
README.md View File

@ -2,177 +2,151 @@
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
</p>
# vue-element-admin
<p align="center">
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
</a>
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
</a>
</p>
[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg)](https://github.com/vuejs/vue)
[![element-ui](https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg)](https://github.com/ElemeFE/element)
[![Build Status](https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master)](https://travis-ci.org/PanJiaChen/vue-element-admin)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
English | [简体中文](./README.zh-CN.md)
**A magical vue admin.**
## Introduction
- [线上地址](http://panjiachen.github.io/vue-element-admin)
`vue-element-admin` is a production-ready solution for admin interfaces. Based on [Vue.js](https://github.com/vuejs/vue) and use the UI Toolkit -- [element](https://github.com/ElemeFE/element). `vue-element-admin` is a magical vue admin, it based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
- [Preview](http://panjiachen.github.io/vue-element-admin)
- [English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md)
- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
**本项目的定位是后台集成方案,不适合当基础模板来开发。**
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
**注意:该项目使用 element-ui@2.0.0+ 版本,所以最低兼容 vue@2.5.0**
## 前序准备
**vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.**
你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element),提前了解和学习这些知识会对使用本项目有很大的帮助。
- Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
同时配套一个系列的教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目
- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
- [手摸手,带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0**
响应需求,开了一个qq群 `591724180` 方便大家交流
## Preparation
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element). All data requests for this project are simulated using [Mock.js](https://github.com/nuysoft/Mock). It would be helpful if you have pre-existing knowledge on those.
**如有问题请先看上述使用文档和文章,若不能满足,欢迎 issue 和 pr**
**This project is not a scaffolding and is more of an integrated solution.**
**本项目并不是一个脚手架,更倾向于是一个集成解决方案**
**该项目不支持低版本游览器(如ie),有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
<p align="center">
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
</p>
## 功能
- 登录/注销
- 权限验证
- 多环境发布
- 动态侧边栏(支持多级路由)
- 动态面包屑
- 国际化多语言
- 多种动态换肤
- 快捷导航(标签页 支持右键操作)
- 富文本编辑器
- Markdown编辑器
- JSON编辑器
- Screenfull全屏
- 列表拖拽
- Svg Sprite 图标
## Features
```
- Login / Logout
- Permission authentication
- Multi-environment build
- Dynamic sidebar (supports multi-level routing)
- Dynamic breadcrumb
- I18n
- Customizable theme
- Tags-view(Tab page Support right-click operation)
- Rich text editor
- Markdown editor
- JSON editor
- Screenfull
- Drag and drop list
- Svg Sprite
- Dashboard
- 本地mock数据
- Echarts 图表
- Clipboard(剪贴复制)
- 401/404错误页面
- 错误日志
- 导出excel
- 导出zip
- 前端可视化excel
- Mock data
- Echarts
- Clipboard
- 401/404 error page
- Error log
- Export excel
- Export zip
- Front-end visualization excel
- Table example
- 动态table example
- 拖拽table example
- 内联编辑table example
- Dynamictable example
- Drag and drop table example
- Inline edit table example
- Form example
- 二步登录
- Two-step login
- SplitPane
- Dropzone
- Sticky
- CountTo
- Markdown to html
```
## Getting started
## 开发
```bash
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# clone the projice
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 安装依赖
npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# install dependency
npm install
# 启动服务
npm run dev
# develop
npm run dev
```
浏览器访问 http://localhost:9527
## 发布
This will automatically open http://localhost:9527.
## Build
```bash
# 构建测试环境
npm run build:sit
# build for test environment
npm run build:sit
# 构建生成环境
npm run build:prod
# build for production environment
npm run build:prod
```
## 其它
## Advanced
```bash
# --report to build with bundle size analytics
npm run build:prod --report
# --preview to start a server in local to preview
npm run build:prod --preview
# --report to build with bundle size analytics
npm run build:prod --report
# lint code
npm run lint
```
# --preview to start a server in local to preview
npm run build:prod --preview
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy)
## 目录结构
```shell
├── build // 构建相关  
├── config // 配置相关
├── src // 源代码
│   ├── api // 所有请求
│   ├── assets // 主题 图片等静态资源
│   ├── components // 全局公用组件
│   ├── directive // 全局指令
│   ├── filtres // 全局 filter
│   ├── icons // 项目svg icons
│   ├── lang // 国际化 lang
│   ├── mock // 项目mock 模拟数据
│   ├── router // 路由
│   ├── store // 全局 store
│   ├── styles // 全局样式
│   ├── utils // 全局公用方法
│   ├── vendor // 公用vendor
│   ├── views // views
│   ├── App.vue // 入口页面
│   ├── main.js // 入口js 初始化 加载组件等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│   └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── .eslintrc.js // eslint 配置项
├── .postcssrc.js // postcss 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
# lint code
npm run lint
# auto fix
npm run lint -- --fix
```
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/deploy) for more information
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
## Online Demo
[查看更多demo](http://panjiachen.github.io/vue-element-admin)
[Preview](http://panjiachen.github.io/vue-element-admin)
## Donate
If you find this project useful, you can buy me a cup of coffee
![donate](https://panjiachen.github.io/donate/donation.png)
If you find this project useful, you can buy author a glass of juice :tropical_drink:
![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
[Paypal Me](https://www.paypal.me/panfree23)
## License
MIT
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
Copyright (c) 2017-presen PanJiaChen

+ 165
- 0
README.zh-CN.md View File

@ -0,0 +1,165 @@
<p align="center">
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
</p>
<p align="center">
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
</a>
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
</a>
</p>
简体中文 | [English](./README.md)
## 简介
`vue-element-admin` 是一个后台集成解决方案,它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,权限验证等很多功能特性,相信不管你的需求是什么,本项目都能帮助到你。
- [在线访问](http://panjiachen.github.io/vue-element-admin)
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
**本项目的定位是后台集成方案,不适合当基础模板来开发。**
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
**注意:该项目使用 element-ui@2.0.0+ 版本,所以最低兼容 vue@2.5.0**
## 前序准备
你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element),所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。
同时配套一个系列的教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目
- [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
- [手摸手,带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
响应需求,开了一个qq群 `591724180` 方便大家交流
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
**如有问题请先看上述使用文档和文章,若不能满足,欢迎 issue 和 pr**
**本项目并不是一个脚手架,更倾向于是一个集成解决方案**
**该项目不支持低版本浏览器(如ie),有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
<p align="center">
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
</p>
## 功能
```
- 登录/注销
- 权限验证
- 多环境发布
- 动态侧边栏(支持多级路由)
- 动态面包屑
- 国际化多语言
- 多种动态换肤
- 快捷导航(标签页)
- 富文本编辑器
- Markdown编辑器
- JSON编辑器
- Screenfull全屏
- 列表拖拽
- Svg Sprite 图标
- Dashboard
- 本地mock数据
- Echarts 图表
- Clipboard(剪贴复制)
- 401/404错误页面
- 错误日志
- 导出excel
- 导出zip
- 前端可视化excel
- Table example
- 动态table example
- 拖拽table example
- 内联编辑table example
- Form example
- 二步登录
- SplitPane
- Dropzone
- Sticky
- CountTo
- Markdown2html
```
## 开发
```bash
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 安装依赖
npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
```
浏览器访问 http://localhost:9527
## 发布
```bash
# 构建测试环境
npm run build:sit
# 构建生成环境
npm run build:prod
```
## 其它
```bash
# --report to build with bundle size analytics
npm run build:prod --report
# --preview to start a server in local to preview
npm run build:prod --preview
# lint code
npm run lint
# auto fix
npm run lint -- --fix
```
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy)
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
## Online Demo
[在线 Demo](http://panjiachen.github.io/vue-element-admin)
## Donate
如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
![donate](https://panjiachen.github.io/donate/donation.png)
[Paypal Me](https://www.paypal.me/panfree23)
## License
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
Copyright (c) 2017-presen PanJiaChen

+ 11
- 8
src/components/Charts/lineMarker.vue View File

@ -46,13 +46,14 @@ export default {
this.chart.setOption({
backgroundColor: '#394056',
title: {
text: '请求数',
top: 20,
text: 'Requests',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#F1F1F3'
},
left: '6%'
left: '1%'
},
tooltip: {
trigger: 'axis',
@ -63,11 +64,12 @@ export default {
}
},
legend: {
top: 20,
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ['移动', '电信', '联通'],
data: ['CMCC', 'CTCC', 'CUCC'],
right: '4%',
textStyle: {
fontSize: 12,
@ -75,9 +77,10 @@ export default {
}
},
grid: {
top: 100,
left: '3%',
right: '4%',
bottom: '3%',
bottom: '2%',
containLabel: true
},
xAxis: [{
@ -92,7 +95,7 @@ export default {
}],
yAxis: [{
type: 'value',
name: '单位(%)',
name: '(%)',
axisTick: {
show: false
},
@ -114,7 +117,7 @@ export default {
}
}],
series: [{
name: '移动',
name: 'CMCC',
type: 'line',
smooth: true,
symbol: 'circle',
@ -148,7 +151,7 @@ export default {
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, {
name: '电信',
name: 'CTCC',
type: 'line',
smooth: true,
symbol: 'circle',
@ -182,7 +185,7 @@ export default {
},
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, {
name: '联通',
name: 'CUCC',
type: 'line',
smooth: true,
symbol: 'circle',

+ 12
- 11
src/components/Charts/mixChart.vue View File

@ -46,15 +46,16 @@ export default {
const xData = (function() {
const data = []
for (let i = 1; i < 13; i++) {
data.push(i + '月份')
data.push(i + 'month')
}
return data
}())
this.chart.setOption({
backgroundColor: '#344b58',
title: {
text: '统计',
x: '4%',
text: 'statistics',
x: '20',
top: '20',
textStyle: {
color: '#fff',
fontSize: '22'
@ -81,12 +82,12 @@ export default {
}
},
legend: {
x: '15%',
x: '5%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: ['女', '男', '平均']
data: ['female', 'male', 'average']
},
calculable: true,
xAxis: [{
@ -158,9 +159,9 @@ export default {
end: 35
}],
series: [{
name: '',
name: 'female',
type: 'bar',
stack: '总量',
stack: 'total',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
@ -195,9 +196,9 @@ export default {
},
{
name: '',
name: 'male',
type: 'bar',
stack: '总量',
stack: 'total',
itemStyle: {
normal: {
color: 'rgba(0,191,183,1)',
@ -226,9 +227,9 @@ export default {
220
]
}, {
name: '平均',
name: 'average',
type: 'line',
stack: '总量',
stack: 'total',
symbolSize: 10,
symbol: 'circle',
itemStyle: {

+ 0
- 1
src/components/Upload/singleImage3.vue View File

@ -7,7 +7,6 @@
</el-upload>
<div class="image-preview image-app-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
<div class='app-fake-conver'>&nbsp&nbsp全球 付费节目单 最热 经济</div>
<img :src="imageUrl">
<div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i>

+ 4
- 0
src/errorLog.js View File

@ -3,7 +3,10 @@ import store from './store'
// you can set only in production env show the error-log
// if (process.env.NODE_ENV === 'production') {
Vue.config.errorHandler = function(err, vm, info, a) {
// Don't ask me why I use Vue.nextTick, it just a hack.
// detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
Vue.nextTick(() => {
store.dispatch('addErrorLog', {
err,
@ -14,4 +17,5 @@ Vue.config.errorHandler = function(err, vm, info, a) {
console.error(err, info)
})
}
// }

+ 0
- 1
src/icons/svg/trendChart1.svg View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994155726" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8554" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M44.521739 0h44.521739v979.478261H44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM712.347826 712.347826h44.521739v267.130435h-44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8555"></path></svg>

+ 0
- 1
src/icons/svg/trendChart2.svg View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994177895" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8894" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M712.347826 0h44.521739v979.478261h-44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM44.521739 712.347826h44.521739v267.130435H44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8895"></path></svg>

+ 0
- 1
src/icons/svg/trendChart3.svg View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994166937" class="icon" style="" viewBox="0 0 1131 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8786" xmlns:xlink="http://www.w3.org/1999/xlink" width="70.6875" height="64"><defs><style type="text/css"></style></defs><path d="M0 0h53.894737v970.105263H0zM269.473684 431.157895h53.894737v538.947368H269.473684zM538.947368 161.684211h53.894737v808.421052h-53.894737zM808.421053 646.736842h53.894736v323.368421h-53.894736zM1077.894737 323.368421h53.894737v646.736842h-53.894737z" fill="" p-id="8787"></path></svg>

+ 71
- 2
src/lang/en.js View File

@ -20,7 +20,7 @@ export default {
backToTop: 'BackToTop',
charts: 'Charts',
keyboardChart: 'Keyboard Chart',
lineChart: 'Line chart',
lineChart: 'Line Chart',
mixChart: 'Mix Chart',
example: 'Example',
Table: 'Table',
@ -45,6 +45,13 @@ export default {
clipboardDemo: 'Clipboard',
i18n: 'I18n'
},
navbar: {
logOut: 'Log Out',
dashboard: 'Dashboard',
github: 'Github',
screenfull: 'screenfull',
theme: 'theme'
},
login: {
title: 'Login Form',
logIn: 'Log in',
@ -52,6 +59,68 @@ export default {
password: 'Password',
any: 'any',
thirdparty: 'Or connect with',
thirdpartyTips: 'Local can not be simulated, please combine their own business simulation! ! !'
thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
},
documentation: {
documentation: 'Documentation',
github: 'Github Repository'
},
permission: {
roles: 'Your roles',
switchRoles: 'Switch roles'
},
components: {
documentation: 'Documentation',
tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
},
table: {
dynamicTips1: 'Fixed header, sorted by header order',
dynamicTips2: 'Not fixed header, sorted by click order',
dragTips1: 'The default order',
dragTips2: 'The after dragging order',
title: 'Title',
importance: 'Imp',
type: 'Type',
remark: 'Remark',
search: 'Search',
add: 'Add',
export: 'Export',
reviewer: 'reviewer',
id: 'ID',
date: 'Date',
author: 'Author',
readings: 'Readings',
status: 'Status',
actions: 'Actions',
edit: 'Edit',
publish: 'Publish',
draft: 'Draft',
delete: 'Delete',
cancel: 'Cancel',
confirm: 'Confirm'
},
errorLog: {
tips: 'Please click the bug icon in the upper right corner',
description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
documentation: 'Document introduction'
},
excel: {
export: 'Export',
selectedExport: 'Export selected items',
placeholder: 'Please enter the file name(default excel-list)'
},
zip: {
export: 'Export',
placeholder: 'Please enter the file name(default file)'
},
theme: {
change: 'Theme change',
documentation: 'Theme documentation',
tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
}
}

+ 69
- 0
src/lang/zh.js View File

@ -45,6 +45,13 @@ export default {
clipboardDemo: 'clipboard',
i18n: '国际化'
},
navbar: {
logOut: '退出登录',
dashboard: '首页',
github: '项目地址',
screenfull: '全屏',
theme: '换肤'
},
login: {
title: '系统登录',
logIn: '登录',
@ -53,5 +60,67 @@ export default {
any: '随便填',
thirdparty: '第三方登录',
thirdpartyTips: '本地不能模拟,请结合自己业务进行模拟!!!'
},
documentation: {
documentation: '文档',
github: 'Github 地址'
},
permission: {
roles: '你的权限',
switchRoles: '切换权限'
},
components: {
documentation: '文档',
tinymceTips: '富文本是管理后台一个核心的功能,但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路,市面上常见的富文本都基本用过了,最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
dropzoneTips: '由于我司业务有特殊需求,而且要传七牛 所以没用第三方,选择了自己封装。代码非常的简单,具体代码你可以在这里看到 @/components/Dropzone',
stickyTips: '当页面滚动到预设的位置会吸附在顶部',
backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示,可在外部使用Element的el-tooltip元素',
imageUploadTips: '由于我在使用时它只有vue@1版本,而且和mockjs不兼容,所以自己改造了一下,如果大家要使用的话,优先还是使用官方版本。'
},
table: {
dynamicTips1: '固定表头, 按照表头顺序排序',
dynamicTips2: '不固定表头, 按照点击顺序排序',
dragTips1: '默认顺序',
dragTips2: '拖拽后顺序',
title: '标题',
importance: '重要性',
type: '类型',
remark: '点评',
search: '搜索',
add: '添加',
export: '导出',
reviewer: '审核人',
id: '序号',
date: '时间',
author: '作者',
readings: '阅读数',
status: '状态',
actions: '操作',
edit: '编辑',
publish: '发布',
draft: '草稿',
delete: '删除',
cancel: '取 消',
confirm: '确 定'
},
errorLog: {
tips: '请点击右上角bug小图标',
description: '现在的管理后台基本都是spa的形式了,它增强了用户体验,但同时也会增加页面出问题的可能性,可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常,你可以在其中进行错误处理或者异常上报。',
documentation: '文档介绍'
},
excel: {
export: '导出',
selectedExport: '导出已选择项',
placeholder: '请输入文件名(默认excel-list)'
},
zip: {
export: '导出',
placeholder: '请输入文件名(默认file)'
},
theme: {
change: '换肤',
documentation: '换肤文档',
tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法,各自有不同的应用场景,具体请参考文档。'
}
}

+ 3
- 3
src/main.js View File

@ -15,12 +15,12 @@ import i18n from './lang' // Internationalization
import './icons' // icon
import './errorLog'// error log
import './permission' // permission control
import './mock' // simulation data generator
import './mock' // simulation data
import * as filters from './filters' // global filter
import * as filters from './filters' // global filters
Vue.use(Element, {
size: 'medium',
size: 'medium', // set element-ui default size
i18n: (key, value) => i18n.t(key, value)
})

+ 4
- 4
src/mock/article.js View File

@ -8,9 +8,9 @@ for (let i = 0; i < count; i++) {
List.push(Mock.mock({
id: '@increment',
timestamp: +Mock.Random.date('T'),
author: '@cname',
auditor: '@cname',
title: '@ctitle(10, 20)',
author: '@first',
reviewer: '@first',
title: '@title(5, 10)',
forecast: '@float(0, 100, 2, 2)',
importance: '@integer(1, 3)',
'type|1': ['CN', 'US', 'JP', 'EU'],
@ -43,7 +43,7 @@ export default {
}
},
getPv: () => ({
pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
}),
getArticle: () => ({
id: 120000000001,

+ 9
- 9
src/permission.js View File

@ -1,21 +1,21 @@
import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { getToken } from '@/utils/auth' // 验权
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie
import { Message } from 'element-ui'
// permissiom judge
function hasPermission(roles, permissionRoles) {
if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过
if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
if (!permissionRoles) return true
return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login', '/authredirect']// 不重定向白名单
const whiteList = ['/login', '/authredirect']// no redirect whitelist
router.beforeEach((to, from, next) => {
NProgress.start() // 开启Progress
NProgress.start() // start progress bar
if (getToken()) { // 判断是否有token
if (to.path === '/login') {
next({ path: '/' })
@ -26,11 +26,11 @@ router.beforeEach((to, from, next) => {
const roles = res.data.role
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,replace: true so the navigation will not leave a history record
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
})
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
Message.error('验证失败,请重新登录')
Message.error('Verification failed, please login again')
next({ path: '/login' })
})
})
@ -56,5 +56,5 @@ router.beforeEach((to, from, next) => {
})
router.afterEach(() => {
NProgress.done() // 结束Progress
NProgress.done() // finish progress bar
})

+ 4
- 0
src/router/index.js View File

@ -9,6 +9,10 @@ Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'
/** note: submenu only apppear when children.length>=1
* detail see https://panjiachen.github.io/vue-element-admin-site/#/router-and-nav?id=sidebar
**/
/**
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb

+ 7
- 0
src/styles/element-ui.scss View File

@ -27,6 +27,13 @@
}
}
.fixed-width{
.el-button--mini{
padding: 7px 10px;
width: 60px;
}
}
.status-col {
.cell {
padding: 0 10px;

+ 2
- 1
src/styles/index.scss View File

@ -102,7 +102,8 @@ code {
margin-bottom: 20px;
display: block;
line-height: 36px;
font-size: 14px;
font-size: 15px;
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
a {
color: #337ab7;
cursor: pointer;

+ 2
- 2
src/utils/clipboard.js View File

@ -3,7 +3,7 @@ import Clipboard from 'clipboard'
function clipboardSuccess() {
Vue.prototype.$message({
message: '复制成功',
message: 'Copy successfully',
type: 'success',
duration: 1500
})
@ -11,7 +11,7 @@ function clipboardSuccess() {
function clipboardError() {
Vue.prototype.$message({
message: '复制失败',
message: 'Copy failed',
type: 'error'
})
}

+ 2
- 2
src/utils/i18n.js View File

@ -1,4 +1,4 @@
// translate router.meta.title , be used in breadcrumb sidebar tagsview
// translate router.meta.title, be used in breadcrumb sidebar tagsview
export function generateTitle(title) {
return this.$t('route.' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js
return this.$t('route.' + title) // $t :this method from vue-i18n, inject in @/lang/index.js
}

+ 5
- 5
src/utils/request.js View File

@ -3,17 +3,17 @@ import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 创建axios实例
// create an axios instance
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
timeout: 5000 // request timeout
})
// request拦截器
// request interceptor
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
}
return config
}, error => {
@ -22,7 +22,7 @@ service.interceptors.request.use(config => {
Promise.reject(error)
})
// respone拦截器
// respone interceptor
service.interceptors.response.use(
response => response,
/**

+ 4
- 5
src/views/charts/keyboard.vue View File

@ -1,8 +1,6 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
</template>
@ -18,8 +16,9 @@ export default {
<style scoped>
.chart-container{
position: relative;
padding: 20px;
width: 100%;
height: 90%;
height: 85vh;
}
</style>

+ 4
- 5
src/views/charts/line.vue View File

@ -1,8 +1,6 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
</template>
@ -18,8 +16,9 @@ export default {
<style scoped>
.chart-container{
position: relative;
padding:20px;
width: 100%;
height: 80%;
height:85vh;
}
</style>

+ 4
- 6
src/views/charts/mixChart.vue View File

@ -1,8 +1,6 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
</template>
@ -18,9 +16,9 @@ export default {
<style scoped>
.chart-container{
position: relative;
padding: 20px;
width: 100%;
height: 90%;
padding-bottom: 40px;
height:85vh;
}
</style>

+ 2
- 2
src/views/clipboard/index.vue View File

@ -2,11 +2,11 @@
<div class="app-container">
<el-tabs v-model="activeName">
<el-tab-pane label="use clipboard directly" name="directly">
<el-input v-model="inputData" placeholder="请输入内容" style='width:400px;'></el-input>
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
<el-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button>
</el-tab-pane>
<el-tab-pane label="use clipboard by v-directive" name="v-directive">
<el-input v-model="inputData" placeholder="请输入内容" style='width:400px;'></el-input>
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
<el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
</el-tab-pane>
</el-tabs>

+ 5
- 5
src/views/components-demo/avatarUpload.vue View File

@ -1,16 +1,16 @@
<template>
<div class="components-container">
<code>这里核心代码用的是
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>
由于我在使用时它只有vue@1版本而且有些业务的需求耦合到七牛等等原因吧自己改造了一下如果大家要使用的话优先还是使用官方component
<code>This is based on
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
{{$t('components.imageUploadTips')}}
</code>
<pan-thumb :image="image"></pan-thumb>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar
</el-button>
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
</div>
</template>

+ 123
- 130
src/views/components-demo/backToTop.vue View File

@ -1,134 +1,121 @@
<template>
<div class="components-container">
<code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
<code>可自定义按钮的样式show/hide临界点返回的位置 如需文字提示可在外部使用Element的el-tooltip元素 </code>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<code>{{$t('components.backToTopTips1')}}</code>
<code>{{$t('components.backToTopTips2')}}</code>
<div class="placeholder-container">
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>