Compare commits
36 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
9b5f0160af | ||
|
|
0e4ea0871c | ||
|
|
88429bd809 | ||
|
62a9565f86 | ||
|
|
f663b23b29 | ||
|
|
afd255d5ba | ||
|
|
b7c8079350 | ||
|
543a9928cf | ||
|
|
8f37950589 | ||
|
|
6821eac35b | ||
|
|
cc5e62d5f5 | ||
|
|
0cccc636b8 | ||
|
|
563ce873bd | ||
|
|
44e94b2d16 | ||
|
|
a160848367 | ||
|
|
7099e6a3eb | ||
|
|
14fee27a92 | ||
|
|
7003a79ef6 | ||
|
|
c5faa63ee5 | ||
|
d29a9486a2 | ||
|
01442ce4d7 | ||
|
|
f28a7149fb | ||
|
|
51ad902d8f | ||
|
3cff6dcf4c | ||
|
|
afe975b3c2 | ||
|
|
d0eebf83c4 | ||
|
|
a55b149b27 | ||
|
|
fc19121311 | ||
|
|
de06619266 | ||
|
|
88c28f5d7e | ||
|
|
26b84847dd | ||
|
|
3cc3e134c2 | ||
|
|
2afb1dfabb | ||
|
|
5fe3d70246 | ||
|
|
4aa9345d90 | ||
|
0fcbf4b53b |
35
README.md
35
README.md
@@ -3,21 +3,21 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://github.com/vuejs/vue">
|
<a href="https://github.com/vuejs/vue">
|
||||||
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/ElemeFE/element">
|
<a href="https://github.com/ElemeFE/element">
|
||||||
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
<img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
<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">
|
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
<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">
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
<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">
|
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
English | [简体中文](./README.zh-CN.md)
|
English | [简体中文](./README.zh-CN.md)
|
||||||
@@ -30,6 +30,8 @@ English | [简体中文](./README.zh-CN.md)
|
|||||||
|
|
||||||
- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
|
- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
|
||||||
|
|
||||||
|
- [Gitter](https://gitter.im/vue-element-admin/discuss)
|
||||||
|
|
||||||
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
||||||
|
|
||||||
- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
|
- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
|
||||||
@@ -39,7 +41,7 @@ English | [简体中文](./README.zh-CN.md)
|
|||||||
- Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
- Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
||||||
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||||
|
|
||||||
**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0+**
|
**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
|
||||||
|
|
||||||
## Preparation
|
## Preparation
|
||||||
|
|
||||||
@@ -86,6 +88,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
|
|||||||
- Form example
|
- Form example
|
||||||
- Two-step login
|
- Two-step login
|
||||||
- SplitPane
|
- SplitPane
|
||||||
|
- Drag Dialog
|
||||||
- Dropzone
|
- Dropzone
|
||||||
- Sticky
|
- Sticky
|
||||||
- CountTo
|
- CountTo
|
||||||
|
|||||||
@@ -3,21 +3,21 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="https://github.com/vuejs/vue">
|
<a href="https://github.com/vuejs/vue">
|
||||||
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/ElemeFE/element">
|
<a href="https://github.com/ElemeFE/element">
|
||||||
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
<img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
<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">
|
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
<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">
|
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
<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">
|
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
简体中文 | [English](./README.md)
|
简体中文 | [English](./README.md)
|
||||||
@@ -30,6 +30,8 @@
|
|||||||
|
|
||||||
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
|
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
|
||||||
|
|
||||||
|
- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss)
|
||||||
|
|
||||||
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
||||||
|
|
||||||
- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate)
|
- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate)
|
||||||
@@ -38,7 +40,7 @@
|
|||||||
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
||||||
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||||
|
|
||||||
**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0+**
|
**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+**
|
||||||
|
|
||||||
## 前序准备
|
## 前序准备
|
||||||
|
|
||||||
@@ -52,7 +54,6 @@
|
|||||||
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
||||||
- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
|
- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
|
||||||
|
|
||||||
响应需求，开了一个qq群 `591724180` 方便大家交流
|
|
||||||
|
|
||||||
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
|
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
|
||||||
|
|
||||||
@@ -99,6 +100,7 @@
|
|||||||
- Form example
|
- Form example
|
||||||
- 二步登录
|
- 二步登录
|
||||||
- SplitPane
|
- SplitPane
|
||||||
|
- 拖拽 Dialog
|
||||||
- Dropzone
|
- Dropzone
|
||||||
- Sticky
|
- Sticky
|
||||||
- CountTo
|
- CountTo
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"development"',
|
NODE_ENV: '"development"',
|
||||||
ENV_CONFIG: '"dev"',
|
ENV_CONFIG: '"dev"',
|
||||||
BASE_API: '"https://api-dev"'
|
BASE_API: '"https://api-dev"'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"production"',
|
NODE_ENV: '"production"',
|
||||||
ENV_CONFIG: '"prod"',
|
ENV_CONFIG: '"prod"',
|
||||||
BASE_API: '"https://api-prod"'
|
BASE_API: '"https://api-prod"'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"production"',
|
NODE_ENV: '"production"',
|
||||||
ENV_CONFIG: '"sit"',
|
ENV_CONFIG: '"sit"',
|
||||||
BASE_API: '"https://api-sit"'
|
BASE_API: '"https://api-sit"'
|
||||||
}
|
}
|
||||||
|
|||||||
24
index.html
24
index.html
@@ -1,15 +1,15 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<title>vue-element-admin</title>
|
<title>vue-element-admin</title>
|
||||||
</head>
|
</head>
|
||||||
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
|
<body>
|
||||||
<body>
|
<script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
21
package.json
21
package.json
@@ -1,10 +1,9 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-element-admin",
|
"name": "vue-element-admin",
|
||||||
"version": "3.6.3",
|
"version": "3.6.6",
|
||||||
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
||||||
"author": "Pan <panfree23@gmail.com>",
|
"author": "Pan <panfree23@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||||
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
|
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
|
||||||
@@ -12,13 +11,27 @@
|
|||||||
"lint": "eslint --ext .js,.vue src",
|
"lint": "eslint --ext .js,.vue src",
|
||||||
"test": "npm run lint"
|
"test": "npm run lint"
|
||||||
},
|
},
|
||||||
|
"keywords": [
|
||||||
|
"vue",
|
||||||
|
"element-ui",
|
||||||
|
"admin",
|
||||||
|
"management-system",
|
||||||
|
"admin-template"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/PanJiaChen/vue-element-admin/issues"
|
||||||
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "0.17.1",
|
"axios": "0.17.1",
|
||||||
"clipboard": "1.7.1",
|
"clipboard": "1.7.1",
|
||||||
"codemirror": "5.32.0",
|
"codemirror": "5.32.0",
|
||||||
"dropzone": "5.2.0",
|
"dropzone": "5.2.0",
|
||||||
"echarts": "3.8.5",
|
"echarts": "3.8.5",
|
||||||
"element-ui": "2.0.8",
|
"element-ui": "2.3.2",
|
||||||
"file-saver": "1.3.3",
|
"file-saver": "1.3.3",
|
||||||
"font-awesome": "4.7.0",
|
"font-awesome": "4.7.0",
|
||||||
"js-cookie": "2.2.0",
|
"js-cookie": "2.2.0",
|
||||||
@@ -37,7 +50,7 @@
|
|||||||
"vue-multiselect": "2.0.8",
|
"vue-multiselect": "2.0.8",
|
||||||
"vue-router": "3.0.1",
|
"vue-router": "3.0.1",
|
||||||
"vue-splitpane": "1.0.2",
|
"vue-splitpane": "1.0.2",
|
||||||
"vuedraggable": "2.15.0",
|
"vuedraggable": "^2.16.0",
|
||||||
"vuex": "3.0.1",
|
"vuex": "3.0.1",
|
||||||
"xlsx": "^0.11.16"
|
"xlsx": "^0.11.16"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -25,14 +25,16 @@ export default {
|
|||||||
},
|
},
|
||||||
customStyle: {
|
customStyle: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {
|
default: function() {
|
||||||
right: '50px',
|
return {
|
||||||
bottom: '50px',
|
right: '50px',
|
||||||
width: '40px',
|
bottom: '50px',
|
||||||
height: '40px',
|
width: '40px',
|
||||||
'border-radius': '4px',
|
height: '40px',
|
||||||
'line-height': '45px',
|
'border-radius': '4px',
|
||||||
background: '#e7eaf1'
|
'line-height': '45px',
|
||||||
|
background: '#e7eaf1'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
transitionName: {
|
transitionName: {
|
||||||
|
|||||||
@@ -30,16 +30,16 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.hamburger {
|
.hamburger {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
transition: .38s;
|
transition: .38s;
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.is-active {
|
.hamburger.is-active {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,104 +1,104 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vue-image-crop-upload" v-show="value">
|
<div class="vue-image-crop-upload" v-show="value">
|
||||||
<div class="vicp-wrap">
|
<div class="vicp-wrap">
|
||||||
<div class="vicp-close" @click="off">
|
<div class="vicp-close" @click="off">
|
||||||
<i class="vicp-icon4"></i>
|
<i class="vicp-icon4"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step1" v-show="step == 1">
|
<div class="vicp-step1" v-show="step == 1">
|
||||||
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
|
<div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
|
||||||
<i class="vicp-icon1" v-show="loading != 1">
|
<i class="vicp-icon1" v-show="loading != 1">
|
||||||
<i class="vicp-icon1-arrow"></i>
|
<i class="vicp-icon1-arrow"></i>
|
||||||
<i class="vicp-icon1-body"></i>
|
<i class="vicp-icon1-body"></i>
|
||||||
<i class="vicp-icon1-bottom"></i>
|
<i class="vicp-icon1-bottom"></i>
|
||||||
</i>
|
</i>
|
||||||
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
|
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
|
||||||
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
|
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
|
||||||
<input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
|
<input type="file" v-show="false" v-if="step == 1" @change="handleChange" ref="fileinput">
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-error" v-show="hasError">
|
<div class="vicp-error" v-show="hasError">
|
||||||
<i class="vicp-icon2"></i> {{ errorMsg }}
|
<i class="vicp-icon2"></i> {{ errorMsg }}
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
|
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step2" v-if="step == 2">
|
<div class="vicp-step2" v-if="step == 2">
|
||||||
<div class="vicp-crop">
|
<div class="vicp-crop">
|
||||||
<div class="vicp-crop-left" v-show="true">
|
<div class="vicp-crop-left" v-show="true">
|
||||||
<div class="vicp-img-container">
|
<div class="vicp-img-container">
|
||||||
<img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
|
<img :src="sourceImgUrl" :style="sourceImgStyle" class="vicp-img" draggable="false"
|
||||||
@drag="preventDefault"
|
@drag="preventDefault"
|
||||||
@dragstart="preventDefault"
|
@dragstart="preventDefault"
|
||||||
@dragend="preventDefault"
|
@dragend="preventDefault"
|
||||||
@dragleave="preventDefault"
|
@dragleave="preventDefault"
|
||||||
@dragover="preventDefault"
|
@dragover="preventDefault"
|
||||||
@dragenter="preventDefault"
|
@dragenter="preventDefault"
|
||||||
@drop="preventDefault"
|
@drop="preventDefault"
|
||||||
@touchstart="imgStartMove"
|
@touchstart="imgStartMove"
|
||||||
@touchmove="imgMove"
|
@touchmove="imgMove"
|
||||||
@touchend="createImg"
|
@touchend="createImg"
|
||||||
@touchcancel="createImg"
|
@touchcancel="createImg"
|
||||||
@mousedown="imgStartMove"
|
@mousedown="imgStartMove"
|
||||||
@mousemove="imgMove"
|
@mousemove="imgMove"
|
||||||
@mouseup="createImg"
|
@mouseup="createImg"
|
||||||
@mouseout="createImg"
|
@mouseout="createImg"
|
||||||
ref="img">
|
ref="img">
|
||||||
<div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
|
<div class="vicp-img-shade vicp-img-shade-1" :style="sourceImgShadeStyle"></div>
|
||||||
<div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
|
<div class="vicp-img-shade vicp-img-shade-2" :style="sourceImgShadeStyle"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-range">
|
<div class="vicp-range">
|
||||||
<input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
|
<input type="range" :value="scale.range" step="1" min="0" max="100" @input="zoomChange">
|
||||||
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
|
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub" class="vicp-icon5"></i>
|
||||||
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
|
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd" class="vicp-icon6"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-rotate" v-if="!noRotate">
|
<div class="vicp-rotate" v-if="!noRotate">
|
||||||
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
|
<i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
|
||||||
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
|
<i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-crop-right" v-show="true">
|
<div class="vicp-crop-right" v-show="true">
|
||||||
<div class="vicp-preview">
|
<div class="vicp-preview">
|
||||||
<div class="vicp-preview-item" v-if="!noSquare">
|
<div class="vicp-preview-item" v-if="!noSquare">
|
||||||
<img :src="createImgUrl" :style="previewStyle">
|
<img :src="createImgUrl" :style="previewStyle">
|
||||||
<span>{{ lang.preview }}</span>
|
<span>{{ lang.preview }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
|
<div class="vicp-preview-item vicp-preview-item-circle" v-if="!noCircle">
|
||||||
<img :src="createImgUrl" :style="previewStyle">
|
<img :src="createImgUrl" :style="previewStyle">
|
||||||
<span>{{ lang.preview }}</span>
|
<span>{{ lang.preview }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
||||||
<a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
|
<a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vicp-step3" v-if="step == 3">
|
<div class="vicp-step3" v-if="step == 3">
|
||||||
<div class="vicp-upload">
|
<div class="vicp-upload">
|
||||||
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
|
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
|
||||||
<div class="vicp-progress-wrap">
|
<div class="vicp-progress-wrap">
|
||||||
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
|
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-error" v-show="hasError">
|
<div class="vicp-error" v-show="hasError">
|
||||||
<i class="vicp-icon2"></i> {{ errorMsg }}
|
<i class="vicp-icon2"></i> {{ errorMsg }}
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-success" v-show="loading === 2">
|
<div class="vicp-success" v-show="loading === 2">
|
||||||
<i class="vicp-icon3"></i> {{ lang.success }}
|
<i class="vicp-icon3"></i> {{ lang.success }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vicp-operate">
|
<div class="vicp-operate">
|
||||||
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
||||||
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
|
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -395,6 +395,7 @@ export default {
|
|||||||
off() {
|
off() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$emit('input', false)
|
this.$emit('input', false)
|
||||||
|
this.$emit('close')
|
||||||
if (this.step == 3 && this.loading == 2) {
|
if (this.step == 3 && this.loading == 2) {
|
||||||
this.setStep(1)
|
this.setStep(1)
|
||||||
}
|
}
|
||||||
@@ -408,7 +409,7 @@ export default {
|
|||||||
}, 200)
|
}, 200)
|
||||||
},
|
},
|
||||||
/* 图片选择区域函数绑定
|
/* 图片选择区域函数绑定
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
preventDefault(e) {
|
preventDefault(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
return false
|
return false
|
||||||
@@ -588,7 +589,7 @@ export default {
|
|||||||
scale.x = rX
|
scale.x = rX
|
||||||
scale.y = rY
|
scale.y = rY
|
||||||
},
|
},
|
||||||
// 按钮按下开始向右旋转
|
// 按钮按下开始向右旋转
|
||||||
startRotateRight(e) {
|
startRotateRight(e) {
|
||||||
let that = this,
|
let that = this,
|
||||||
{
|
{
|
||||||
@@ -736,7 +737,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}, 300)
|
}, 300)
|
||||||
},
|
},
|
||||||
// 生成需求图片
|
// 生成需求图片
|
||||||
createImg(e) {
|
createImg(e) {
|
||||||
let that = this,
|
let that = this,
|
||||||
{
|
{
|
||||||
@@ -1131,9 +1132,9 @@ export default {
|
|||||||
appearance: none;
|
appearance: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* 滑块
|
/* 滑块
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
/* 轨道
|
/* 轨道
|
||||||
---------------------------------------------------------------*/ }
|
---------------------------------------------------------------*/ }
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
|
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
|
||||||
outline: none; }
|
outline: none; }
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
|
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
|
||||||
|
|||||||
89
src/components/Kanban/index.vue
Normal file
89
src/components/Kanban/index.vue
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<div class="board-column">
|
||||||
|
<div class="board-column-header">
|
||||||
|
{{headerText}}
|
||||||
|
</div>
|
||||||
|
<draggable
|
||||||
|
class="board-column-content"
|
||||||
|
:list="list"
|
||||||
|
:options="options">
|
||||||
|
<div class="board-item" v-for="element in list" :key="element.id">
|
||||||
|
{{element.name}} {{element.id}}
|
||||||
|
</div>
|
||||||
|
</draggable>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'dragKanban-demo',
|
||||||
|
components: {
|
||||||
|
draggable
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
headerText: {
|
||||||
|
type: String,
|
||||||
|
default: 'Header'
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.board-column {
|
||||||
|
min-width: 300px;
|
||||||
|
min-height: 100px;
|
||||||
|
height: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
.board-column-header {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 20px;
|
||||||
|
text-align: center;
|
||||||
|
background: #333;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 3px 3px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-column-content {
|
||||||
|
height: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 10px solid transparent;
|
||||||
|
min-height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.board-item {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
margin: 5px 0;
|
||||||
|
background-color: #fff;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 54px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
||||||
<div class="pan-info">
|
<div class="pan-info">
|
||||||
<div class="pan-info-roles-container">
|
<div class="pan-info-roles-container">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img class="pan-thumb" :src="image">
|
<img class="pan-thumb" :src="image">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -19,7 +19,7 @@ export default {
|
|||||||
},
|
},
|
||||||
zIndex: {
|
zIndex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 100
|
default: 1
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -35,106 +35,106 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.pan-item {
|
.pan-item {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info-roles-container {
|
.pan-info-roles-container {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-thumb {
|
.pan-thumb {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform-origin: 95% 40%;
|
transform-origin: 95% 40%;
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-thumb:after {
|
.pan-thumb:after {
|
||||||
content: '';
|
content: '';
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
left: 95%;
|
left: 95%;
|
||||||
margin: -4px 0 0 -4px;
|
margin: -4px 0 0 -4px;
|
||||||
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
|
||||||
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info {
|
.pan-info {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info h3 {
|
.pan-info h3 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
position: relative;
|
position: relative;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin: 0 60px;
|
margin: 0 60px;
|
||||||
padding: 22px 0 0 0;
|
padding: 22px 0 0 0;
|
||||||
height: 85px;
|
height: 85px;
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
font-family: 'Open Sans', Arial, sans-serif;
|
||||||
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p {
|
.pan-info p {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin: 0 30px;
|
margin: 0 30px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p a {
|
.pan-info p a {
|
||||||
display: block;
|
display: block;
|
||||||
color: #333;
|
color: #333;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
padding-top: 24px;
|
padding-top: 24px;
|
||||||
margin: 7px auto 0;
|
margin: 7px auto 0;
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
font-family: 'Open Sans', Arial, sans-serif;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
|
||||||
transform: translateX(60px) rotate(90deg);
|
transform: translateX(60px) rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-info p a:hover {
|
.pan-info p a:hover {
|
||||||
background: rgba(255, 255, 255, 0.5);
|
background: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-item:hover .pan-thumb {
|
.pan-item:hover .pan-thumb {
|
||||||
transform: rotate(-110deg);
|
transform: rotate(-110deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-item:hover .pan-info p a {
|
.pan-item:hover .pan-info p a {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0px) rotate(0deg);
|
transform: translateX(0px) rotate(0deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -153,7 +153,10 @@ export default {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.tinymce-container {
|
.tinymce-container {
|
||||||
position: relative
|
position: relative;
|
||||||
|
}
|
||||||
|
.tinymce-container>>>.mce-fullscreen {
|
||||||
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
.tinymce-textarea {
|
.tinymce-textarea {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|||||||
@@ -2,6 +2,6 @@
|
|||||||
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
||||||
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
||||||
|
|
||||||
const plugins = ['advlist anchor autolink autoresize autosave bbcode code codesample colorpicker colorpicker contextmenu directionality emoticons fullpage fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
|
const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
|
||||||
|
|
||||||
export default plugins
|
export default plugins
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="singleImageUpload2 upload-container">
|
<div class="singleImageUpload2 upload-container">
|
||||||
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
||||||
:on-success="handleImageScucess">
|
:on-success="handleImageScucess">
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">Drag或<em>点击上传</em></div>
|
<div class="el-upload__text">Drag或<em>点击上传</em></div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div v-show="imageUrl.length>0" class="image-preview">
|
<div v-show="imageUrl.length>0" class="image-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -66,53 +66,53 @@ export default {
|
|||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.upload-container {
|
.upload-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, .5);
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,34 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="upload-container">
|
<div class="upload-container">
|
||||||
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
<el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
|
||||||
:on-success="handleImageScucess">
|
:on-success="handleImageScucess">
|
||||||
<i class="el-icon-upload"></i>
|
<i class="el-icon-upload"></i>
|
||||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div class="image-preview image-app-preview">
|
<div class="image-preview image-app-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="image-preview">
|
<div class="image-preview">
|
||||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||||
<img :src="imageUrl">
|
<img :src="imageUrl">
|
||||||
<div class="image-preview-action">
|
<div class="image-preview-action">
|
||||||
<i @click="rmImage" class="el-icon-delete"></i>
|
<i @click="rmImage" class="el-icon-delete"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getToken } from '@/api/qiniu'
|
import { getToken } from '@/api/qiniu'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'singleImageUpload',
|
name: 'singleImageUpload3',
|
||||||
props: {
|
props: {
|
||||||
value: String
|
value: String
|
||||||
},
|
},
|
||||||
@@ -76,70 +76,70 @@ export default {
|
|||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
.upload-container {
|
.upload-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, .5);
|
||||||
transition: opacity .3s;
|
transition: opacity .3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.image-app-preview {
|
.image-app-preview {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
.app-fake-conver {
|
.app-fake-conver {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%; // background: rgba(0, 0, 0, .1);
|
width: 100%; // background: rgba(0, 0, 0, .1);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 64px;
|
line-height: 64px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
<input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
||||||
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
||||||
Drop excel file here or
|
Drop excel file here or
|
||||||
<el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
|
<el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
|
||||||
@@ -51,7 +51,9 @@ export default {
|
|||||||
handkeFileChange(e) {
|
handkeFileChange(e) {
|
||||||
const files = e.target.files
|
const files = e.target.files
|
||||||
const itemFile = files[0] // only use files[0]
|
const itemFile = files[0] // only use files[0]
|
||||||
|
if (!itemFile) return
|
||||||
this.readerData(itemFile)
|
this.readerData(itemFile)
|
||||||
|
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
|
||||||
},
|
},
|
||||||
readerData(itemFile) {
|
readerData(itemFile) {
|
||||||
const reader = new FileReader()
|
const reader = new FileReader()
|
||||||
|
|||||||
74
src/directive/el-dragDialog/drag.js
Normal file
74
src/directive/el-dragDialog/drag.js
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
export default{
|
||||||
|
bind(el, binding) {
|
||||||
|
const dialogHeaderEl = el.querySelector('.el-dialog__header')
|
||||||
|
const dragDom = el.querySelector('.el-dialog')
|
||||||
|
dialogHeaderEl.style.cssText += ';cursor:move;'
|
||||||
|
dragDom.style.cssText += ';top:0px;'
|
||||||
|
|
||||||
|
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
||||||
|
function getStyle(dom, attr) {
|
||||||
|
if (dom.currentStyle) {
|
||||||
|
return dom.currentStyle[attr]
|
||||||
|
} else {
|
||||||
|
return getComputedStyle(dom, false)[attr]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dialogHeaderEl.onmousedown = (e) => {
|
||||||
|
// 鼠标按下，计算当前元素距离可视区的距离
|
||||||
|
const disX = e.clientX - dialogHeaderEl.offsetLeft
|
||||||
|
const disY = e.clientY - dialogHeaderEl.offsetTop
|
||||||
|
|
||||||
|
const dragDomWidth = dragDom.offsetWidth
|
||||||
|
const dragDomheight = dragDom.offsetHeight
|
||||||
|
|
||||||
|
const screenWidth = document.body.clientWidth
|
||||||
|
const screenHeight = document.body.clientHeight
|
||||||
|
|
||||||
|
const minDragDomLeft = dragDom.offsetLeft
|
||||||
|
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
|
||||||
|
|
||||||
|
const minDragDomTop = dragDom.offsetTop
|
||||||
|
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
|
||||||
|
|
||||||
|
// 获取到的值带px 正则匹配替换
|
||||||
|
let styL = getStyle(dragDom, 'left')
|
||||||
|
let styT = getStyle(dragDom, 'top')
|
||||||
|
|
||||||
|
if (styL.includes('%')) {
|
||||||
|
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
|
||||||
|
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
|
||||||
|
} else {
|
||||||
|
styL = +styL.replace(/\px/g, '')
|
||||||
|
styT = +styT.replace(/\px/g, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
document.onmousemove = function(e) {
|
||||||
|
// 通过事件委托，计算移动的距离
|
||||||
|
let left = e.clientX - disX
|
||||||
|
let top = e.clientY - disY
|
||||||
|
|
||||||
|
// 边界处理
|
||||||
|
if (-(left) > minDragDomLeft) {
|
||||||
|
left = -minDragDomLeft
|
||||||
|
} else if (left > maxDragDomLeft) {
|
||||||
|
left = maxDragDomLeft
|
||||||
|
}
|
||||||
|
|
||||||
|
if (-(top) > minDragDomTop) {
|
||||||
|
top = -minDragDomTop
|
||||||
|
} else if (top > maxDragDomTop) {
|
||||||
|
top = maxDragDomTop
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动当前元素
|
||||||
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
|
||||||
|
}
|
||||||
|
|
||||||
|
document.onmouseup = function(e) {
|
||||||
|
document.onmousemove = null
|
||||||
|
document.onmouseup = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/directive/el-dragDialog/index.js
Normal file
13
src/directive/el-dragDialog/index.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import drag from './drag'
|
||||||
|
|
||||||
|
const install = function(Vue) {
|
||||||
|
Vue.directive('el-drag-dialog', drag)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.Vue) {
|
||||||
|
window['el-drag-dialog'] = drag
|
||||||
|
Vue.use(install); // eslint-disable-line
|
||||||
|
}
|
||||||
|
|
||||||
|
drag.install = install
|
||||||
|
export default drag
|
||||||
@@ -18,6 +18,8 @@ export default {
|
|||||||
countTo: 'CountTo',
|
countTo: 'CountTo',
|
||||||
componentMixin: 'Mixin',
|
componentMixin: 'Mixin',
|
||||||
backToTop: 'BackToTop',
|
backToTop: 'BackToTop',
|
||||||
|
dragDialog: 'Drag Dialog',
|
||||||
|
dragKanban: 'Drag Kanban',
|
||||||
charts: 'Charts',
|
charts: 'Charts',
|
||||||
keyboardChart: 'Keyboard Chart',
|
keyboardChart: 'Keyboard Chart',
|
||||||
lineChart: 'Line Chart',
|
lineChart: 'Line Chart',
|
||||||
|
|||||||
@@ -18,6 +18,8 @@ export default {
|
|||||||
countTo: 'CountTo',
|
countTo: 'CountTo',
|
||||||
componentMixin: '小组件',
|
componentMixin: '小组件',
|
||||||
backToTop: '返回顶部',
|
backToTop: '返回顶部',
|
||||||
|
dragDialog: '拖拽 Dialog',
|
||||||
|
dragKanban: '可拖拽看板',
|
||||||
charts: '图表',
|
charts: '图表',
|
||||||
keyboardChart: '键盘图表',
|
keyboardChart: '键盘图表',
|
||||||
lineChart: '折线图',
|
lineChart: '折线图',
|
||||||
|
|||||||
@@ -111,7 +111,9 @@ export const asyncRouterMap = [
|
|||||||
{ path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
|
{ path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
|
||||||
{ path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
|
{ path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
|
||||||
{ path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
|
{ path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
|
||||||
{ path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }}
|
{ path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
|
||||||
|
{ path: 'drag-dialog', component: _import('components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
|
||||||
|
{ path: 'drag-kanban', component: _import('components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
const getters = {
|
const getters = {
|
||||||
sidebar: state => state.app.sidebar,
|
sidebar: state => state.app.sidebar,
|
||||||
language: state => state.app.language,
|
language: state => state.app.language,
|
||||||
|
device: state => state.app.device,
|
||||||
visitedViews: state => state.tagsView.visitedViews,
|
visitedViews: state => state.tagsView.visitedViews,
|
||||||
cachedViews: state => state.tagsView.cachedViews,
|
cachedViews: state => state.tagsView.cachedViews,
|
||||||
token: state => state.user.token,
|
token: state => state.user.token,
|
||||||
|
|||||||
@@ -3,8 +3,10 @@ import Cookies from 'js-cookie'
|
|||||||
const app = {
|
const app = {
|
||||||
state: {
|
state: {
|
||||||
sidebar: {
|
sidebar: {
|
||||||
opened: !+Cookies.get('sidebarStatus')
|
opened: !+Cookies.get('sidebarStatus'),
|
||||||
|
withoutAnimation: false
|
||||||
},
|
},
|
||||||
|
device: 'desktop',
|
||||||
language: Cookies.get('language') || 'en'
|
language: Cookies.get('language') || 'en'
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
@@ -15,6 +17,15 @@ const app = {
|
|||||||
Cookies.set('sidebarStatus', 0)
|
Cookies.set('sidebarStatus', 0)
|
||||||
}
|
}
|
||||||
state.sidebar.opened = !state.sidebar.opened
|
state.sidebar.opened = !state.sidebar.opened
|
||||||
|
state.sidebar.withoutAnimation = false
|
||||||
|
},
|
||||||
|
CLOSE_SIDEBAR: (state, withoutAnimation) => {
|
||||||
|
Cookies.set('sidebarStatus', 1)
|
||||||
|
state.sidebar.opened = false
|
||||||
|
state.sidebar.withoutAnimation = withoutAnimation
|
||||||
|
},
|
||||||
|
TOGGLE_DEVICE: (state, device) => {
|
||||||
|
state.device = device
|
||||||
},
|
},
|
||||||
SET_LANGUAGE: (state, language) => {
|
SET_LANGUAGE: (state, language) => {
|
||||||
state.language = language
|
state.language = language
|
||||||
@@ -25,6 +36,12 @@ const app = {
|
|||||||
toggleSideBar({ commit }) {
|
toggleSideBar({ commit }) {
|
||||||
commit('TOGGLE_SIDEBAR')
|
commit('TOGGLE_SIDEBAR')
|
||||||
},
|
},
|
||||||
|
closeSideBar({ commit }, { withoutAnimation }) {
|
||||||
|
commit('CLOSE_SIDEBAR', withoutAnimation)
|
||||||
|
},
|
||||||
|
toggleDevice({ commit }, device) {
|
||||||
|
commit('TOGGLE_DEVICE', device)
|
||||||
|
},
|
||||||
setLanguage({ commit }, language) {
|
setLanguage({ commit }, language) {
|
||||||
commit('SET_LANGUAGE', language)
|
commit('SET_LANGUAGE', language)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -73,3 +73,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//dropdown
|
||||||
|
.el-dropdown-menu{
|
||||||
|
a{
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,19 +1,27 @@
|
|||||||
#app {
|
#app {
|
||||||
|
|
||||||
// 主体区域
|
// 主体区域
|
||||||
.main-container {
|
.main-container {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
transition: margin-left 0.28s;
|
transition: margin-left .28s;
|
||||||
margin-left: 180px;
|
margin-left: 180px;
|
||||||
} // 侧边栏
|
}
|
||||||
|
|
||||||
|
// 侧边栏
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: width 0.28s;
|
.horizontal-collapse-transition {
|
||||||
width: 180px!important;
|
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||||
|
}
|
||||||
|
transition: width .28s;
|
||||||
|
width: 180px !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
font-size: 0px;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
|
overflow: hidden;
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -23,78 +31,75 @@
|
|||||||
}
|
}
|
||||||
.el-menu {
|
.el-menu {
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hideSidebar {
|
.hideSidebar {
|
||||||
.sidebar-container,.sidebar-container .el-menu {
|
.sidebar-container {
|
||||||
width: 36px!important;
|
width: 36px !important;
|
||||||
// overflow: inherit;
|
|
||||||
}
|
}
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-left: 36px;
|
margin-left: 36px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.hideSidebar {
|
|
||||||
.submenu-title-noDropdown {
|
.submenu-title-noDropdown {
|
||||||
padding-left: 10px!important;
|
padding-left: 10px !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
span {
|
.el-tooltip {
|
||||||
height: 0;
|
padding: 0 10px !important;
|
||||||
width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
|
|
||||||
opacity: 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
border-radius: 3px;
|
|
||||||
z-index: 1002;
|
|
||||||
width: 140px;
|
|
||||||
height: 56px;
|
|
||||||
visibility: visible;
|
|
||||||
position: absolute;
|
|
||||||
right: -145px;
|
|
||||||
text-align: left;
|
|
||||||
text-indent: 20px;
|
|
||||||
top: 0px;
|
|
||||||
background-color: $subMenuBg!important;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-submenu {
|
.el-submenu {
|
||||||
&>.el-submenu__title {
|
&>.el-submenu__title {
|
||||||
padding-left: 10px!important;
|
padding-left: 10px !important;
|
||||||
&>span {
|
&>span {
|
||||||
display: none;
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.el-submenu__icon-arrow {
|
.el-submenu__icon-arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nest-menu {
|
|
||||||
.el-submenu__icon-arrow {
|
|
||||||
display: block!important;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
display: inline-block!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nest-menu .el-submenu>.el-submenu__title,
|
|
||||||
.el-submenu .el-menu-item {
|
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
|
||||||
min-width: 180px!important;
|
.sidebar-container .el-submenu .el-menu-item {
|
||||||
background-color: $subMenuBg!important;
|
min-width: 180px !important;
|
||||||
|
background-color: $subMenuBg !important;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $menuHover!important;
|
background-color: $menuHover !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-menu--collapse .el-menu .el-submenu{
|
.el-menu--collapse .el-menu .el-submenu {
|
||||||
min-width: 180px!important;
|
min-width: 180px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
//适配移动端
|
||||||
|
.mobile {
|
||||||
|
.main-container {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
.sidebar-container {
|
||||||
|
top: 50px;
|
||||||
|
transition: transform .28s;
|
||||||
|
width: 180px !important;
|
||||||
|
}
|
||||||
|
&.hideSidebar {
|
||||||
|
.sidebar-container {
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transform: translate3d(-180px, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.withoutAnimation {
|
||||||
|
.main-container,
|
||||||
|
.sidebar-container {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -131,16 +131,14 @@ export function objectMerge(target, source) {
|
|||||||
if (Array.isArray(source)) {
|
if (Array.isArray(source)) {
|
||||||
return source.slice()
|
return source.slice()
|
||||||
}
|
}
|
||||||
for (const property in source) {
|
Object.keys(source).forEach((property) => {
|
||||||
if (source.hasOwnProperty(property)) {
|
const sourceProperty = source[property]
|
||||||
const sourceProperty = source[property]
|
if (typeof sourceProperty === 'object') {
|
||||||
if (typeof sourceProperty === 'object') {
|
target[property] = objectMerge(target[property], sourceProperty)
|
||||||
target[property] = objectMerge(target[property], sourceProperty)
|
} else {
|
||||||
continue
|
|
||||||
}
|
|
||||||
target[property] = sourceProperty
|
target[property] = sourceProperty
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
return target
|
return target
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -253,15 +251,13 @@ export function deepClone(source) {
|
|||||||
throw new Error('error arguments', 'shallowClone')
|
throw new Error('error arguments', 'shallowClone')
|
||||||
}
|
}
|
||||||
const targetObj = source.constructor === Array ? [] : {}
|
const targetObj = source.constructor === Array ? [] : {}
|
||||||
for (const keys in source) {
|
Object.keys(source).forEach((keys) => {
|
||||||
if (source.hasOwnProperty(keys)) {
|
if (source[keys] && typeof source[keys] === 'object') {
|
||||||
if (source[keys] && typeof source[keys] === 'object') {
|
targetObj[keys] = source[keys].constructor === Array ? [] : {}
|
||||||
targetObj[keys] = source[keys].constructor === Array ? [] : {}
|
targetObj[keys] = deepClone(source[keys])
|
||||||
targetObj[keys] = deepClone(source[keys])
|
} else {
|
||||||
} else {
|
targetObj[keys] = source[keys]
|
||||||
targetObj[keys] = source[keys]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
return targetObj
|
return targetObj
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ export function validateUpperCase(str) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 大小写字母*/
|
/* 大小写字母*/
|
||||||
export function validatAlphabets(str) {
|
export function validateAlphabets(str) {
|
||||||
const reg = /^[A-Za-z]+$/
|
const reg = /^[A-Za-z]+$/
|
||||||
return reg.test(str)
|
return reg.test(str)
|
||||||
}
|
}
|
||||||
|
|||||||
54
src/vendor/Export2Excel.js
vendored
54
src/vendor/Export2Excel.js
vendored
@@ -116,45 +116,43 @@ export function export_table_to_excel(id) {
|
|||||||
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
|
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
|
||||||
}
|
}
|
||||||
|
|
||||||
export function export_json_to_excel(th, jsonData, defaultTitle) {
|
export function export_json_to_excel({header, data, filename='excel-list', autoWidth=true}={}) {
|
||||||
|
|
||||||
/* original data */
|
/* original data */
|
||||||
|
data=[...data]
|
||||||
var data = jsonData;
|
data.unshift(header);
|
||||||
data.unshift(th);
|
|
||||||
var ws_name = "SheetJS";
|
var ws_name = "SheetJS";
|
||||||
|
|
||||||
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
|
||||||
|
|
||||||
/*设置worksheet每列的最大宽度*/
|
if(autoWidth){
|
||||||
const colWidth = data.map(row => row.map(val => {
|
/*设置worksheet每列的最大宽度*/
|
||||||
/*先判断是否为null/undefined*/
|
const colWidth = data.map(row => row.map(val => {
|
||||||
if (val == null) {
|
/*先判断是否为null/undefined*/
|
||||||
return {'wch': 10};
|
if (val == null) {
|
||||||
}
|
return {'wch': 10};
|
||||||
/*再判断是否为中文*/
|
}
|
||||||
else if (val.toString().charCodeAt(0) > 255) {
|
/*再判断是否为中文*/
|
||||||
return {'wch': val.toString().length * 2};
|
else if (val.toString().charCodeAt(0) > 255) {
|
||||||
} else {
|
return {'wch': val.toString().length * 2};
|
||||||
return {'wch': val.toString().length};
|
} else {
|
||||||
}
|
return {'wch': val.toString().length};
|
||||||
}))
|
}
|
||||||
/*以第一行为初始值*/
|
}))
|
||||||
let result = colWidth[0];
|
/*以第一行为初始值*/
|
||||||
for (let i = 1; i < colWidth.length; i++) {
|
let result = colWidth[0];
|
||||||
for (let j = 0; j < colWidth[i].length; j++) {
|
for (let i = 1; i < colWidth.length; i++) {
|
||||||
if (result[j]['wch'] < colWidth[i][j]['wch']) {
|
for (let j = 0; j < colWidth[i].length; j++) {
|
||||||
result[j]['wch'] = colWidth[i][j]['wch'];
|
if (result[j]['wch'] < colWidth[i][j]['wch']) {
|
||||||
|
result[j]['wch'] = colWidth[i][j]['wch'];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
ws['!cols'] = result;
|
||||||
}
|
}
|
||||||
ws['!cols'] = result;
|
|
||||||
|
|
||||||
/* add worksheet to workbook */
|
/* add worksheet to workbook */
|
||||||
wb.SheetNames.push(ws_name);
|
wb.SheetNames.push(ws_name);
|
||||||
wb.Sheets[ws_name] = ws;
|
wb.Sheets[ws_name] = ws;
|
||||||
|
|
||||||
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
|
||||||
var title = defaultTitle || 'excel-list'
|
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), filename + ".xlsx");
|
||||||
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
|
|
||||||
}
|
}
|
||||||
|
|||||||
43
src/views/components-demo/dragDialog.vue
Normal file
43
src/views/components-demo/dragDialog.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="components-container">
|
||||||
|
<el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
|
||||||
|
<el-dialog v-el-drag-dialog title="Shipping address" :visible.sync="dialogTableVisible">
|
||||||
|
<el-table :data="gridData">
|
||||||
|
<el-table-column property="date" label="Date" width="150"></el-table-column>
|
||||||
|
<el-table-column property="name" label="Name" width="200"></el-table-column>
|
||||||
|
<el-table-column property="address" label="Address"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'dragDialog-demo',
|
||||||
|
directives: { elDragDialog },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dialogTableVisible: false,
|
||||||
|
gridData: [{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: 'John Smith',
|
||||||
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: 'John Smith',
|
||||||
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: 'John Smith',
|
||||||
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: 'John Smith',
|
||||||
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
68
src/views/components-demo/dragKanban.vue
Normal file
68
src/views/components-demo/dragKanban.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div class="components-container board">
|
||||||
|
<Kanban :key="1" class="kanban todo" :list="list1" :options="options" header-text="Todo"/>
|
||||||
|
<Kanban :key="2" class="kanban working" :list="list2" :options="options" header-text="Working"/>
|
||||||
|
<Kanban :key="3" class="kanban done" :list="list3" :options="options" header-text="Done"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Kanban from '@/components/Kanban'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'dragKanban-demo',
|
||||||
|
components: {
|
||||||
|
Kanban
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {
|
||||||
|
group: 'mission'
|
||||||
|
},
|
||||||
|
list1: [
|
||||||
|
{ name: 'Mission', id: 1 },
|
||||||
|
{ name: 'Mission', id: 2 },
|
||||||
|
{ name: 'Mission', id: 3 },
|
||||||
|
{ name: 'Mission', id: 4 }
|
||||||
|
],
|
||||||
|
list2: [
|
||||||
|
{ name: 'Mission', id: 5 },
|
||||||
|
{ name: 'Mission', id: 6 },
|
||||||
|
{ name: 'Mission', id: 7 }
|
||||||
|
],
|
||||||
|
list3: [
|
||||||
|
{ name: 'Mission', id: 8 },
|
||||||
|
{ name: 'Mission', id: 9 },
|
||||||
|
{ name: 'Mission', id: 10 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.board {
|
||||||
|
width: 1000px;
|
||||||
|
margin-left: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.kanban {
|
||||||
|
&.todo {
|
||||||
|
.board-column-header {
|
||||||
|
background: #4A9FF9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.working {
|
||||||
|
.board-column-header {
|
||||||
|
background: #f9944a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.done {
|
||||||
|
.board-column-header {
|
||||||
|
background: #2ac06d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -38,30 +38,30 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.components-container {
|
.components-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-container {
|
.left-container {
|
||||||
background-color: #F38181;
|
background-color: #F38181;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container {
|
.right-container {
|
||||||
background-color: #FCE38A;
|
background-color: #FCE38A;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-container {
|
.top-container {
|
||||||
background-color: #FCE38A;
|
background-color: #FCE38A;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #95E1D3;
|
background-color: #95E1D3;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,317 +1,319 @@
|
|||||||
.todoapp {
|
.todoapp {
|
||||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
color: #4d4d4d;
|
color: #4d4d4d;
|
||||||
min-width: 230px;
|
min-width: 230px;
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
margin: 0 auto ;
|
margin: 0 auto ;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
button {
|
button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: none;
|
background: none;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
:focus {
|
:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todoapp {
|
.todoapp {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin: 130px 0 40px 0;
|
margin: 130px 0 40px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
.todoapp input::-webkit-input-placeholder {
|
.todoapp input::-webkit-input-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp input::-moz-placeholder {
|
.todoapp input::-moz-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp input::input-placeholder {
|
.todoapp input::input-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
}
|
}
|
||||||
.todoapp h1 {
|
.todoapp h1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -155px;
|
top: -155px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgba(175, 47, 47, 0.15);
|
color: rgba(175, 47, 47, 0.15);
|
||||||
-webkit-text-rendering: optimizeLegibility;
|
-webkit-text-rendering: optimizeLegibility;
|
||||||
-moz-text-rendering: optimizeLegibility;
|
-moz-text-rendering: optimizeLegibility;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
.new-todo,
|
.new-todo,
|
||||||
.edit {
|
.edit {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
.new-todo {
|
.new-todo {
|
||||||
padding: 10px 16px 16px 60px;
|
padding: 10px 16px 16px 60px;
|
||||||
border: none;
|
border: none;
|
||||||
background: rgba(0, 0, 0, 0.003);
|
background: rgba(0, 0, 0, 0.003);
|
||||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
.main {
|
.main {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
border-top: 1px solid #e6e6e6;
|
border-top: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.toggle-all {
|
.toggle-all {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
/* Mobile Safari */
|
/* Mobile Safari */
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.toggle-all+label {
|
.toggle-all+label {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -52px;
|
top: -52px;
|
||||||
left: -13px;
|
left: -13px;
|
||||||
-webkit-transform: rotate(90deg);
|
-webkit-transform: rotate(90deg);
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
.toggle-all+label:before {
|
.toggle-all+label:before {
|
||||||
content: '❯';
|
content: '❯';
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: #e6e6e6;
|
color: #e6e6e6;
|
||||||
padding: 10px 27px 10px 27px;
|
padding: 10px 27px 10px 27px;
|
||||||
}
|
}
|
||||||
.toggle-all:checked+label:before {
|
.toggle-all:checked+label:before {
|
||||||
color: #737373;
|
color: #737373;
|
||||||
}
|
}
|
||||||
.todo-list {
|
.todo-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.todo-list li {
|
.todo-list li {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
border-bottom: 1px solid #ededed;
|
border-bottom: 1px solid #ededed;
|
||||||
}
|
}
|
||||||
.todo-list li:last-child {
|
.todo-list li:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.todo-list li.editing {
|
.todo-list li.editing {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.todo-list li.editing .edit {
|
.todo-list li.editing .edit {
|
||||||
display: block;
|
display: block;
|
||||||
width: 506px;
|
width: 506px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
margin: 0 0 0 43px;
|
margin: 0 0 0 43px;
|
||||||
}
|
}
|
||||||
.todo-list li.editing .view {
|
.todo-list li.editing .view {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
border: none;
|
border: none;
|
||||||
/* Mobile Safari */
|
/* Mobile Safari */
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle+label {
|
.todo-list li .toggle+label {
|
||||||
/*
|
/*
|
||||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||||
*/
|
*/
|
||||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center left;
|
background-position: center left;
|
||||||
background-size: 36px;
|
background-size: 36px;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle:checked+label {
|
.todo-list li .toggle:checked+label {
|
||||||
background-size: 36px;
|
background-size: 36px;
|
||||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
||||||
}
|
}
|
||||||
.todo-list li label {
|
.todo-list li label {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
padding: 15px 15px 15px 50px;
|
padding: 15px 15px 15px 50px;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.0;
|
line-height: 1.0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: color 0.4s;
|
transition: color 0.4s;
|
||||||
}
|
}
|
||||||
.todo-list li.completed label {
|
.todo-list li.completed label {
|
||||||
color: #d9d9d9;
|
color: #d9d9d9;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy {
|
.todo-list li .destroy {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: #cc9a9a;
|
color: #cc9a9a;
|
||||||
transition: color 0.2s ease-out;
|
transition: color 0.2s ease-out;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy:hover {
|
.todo-list li .destroy:hover {
|
||||||
color: #af5b5e;
|
color: #af5b5e;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy:after {
|
.todo-list li .destroy:after {
|
||||||
content: '×';
|
content: '×';
|
||||||
}
|
}
|
||||||
.todo-list li:hover .destroy {
|
.todo-list li:hover .destroy {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.todo-list li .edit {
|
.todo-list li .edit {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.todo-list li.editing:last-child {
|
.todo-list li.editing:last-child {
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
}
|
}
|
||||||
.footer {
|
.footer {
|
||||||
color: #777;
|
color: #777;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-top: 1px solid #e6e6e6;
|
border-top: 1px solid #e6e6e6;
|
||||||
}
|
}
|
||||||
.footer:before {
|
.footer:before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
.todo-count {
|
.todo-count {
|
||||||
float: left;
|
float: left;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.todo-count strong {
|
.todo-count strong {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
.filters {
|
.filters {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
position: relative;
|
||||||
}
|
z-index: 1;
|
||||||
.filters li {
|
list-style: none;
|
||||||
display: inline;
|
}
|
||||||
}
|
.filters li {
|
||||||
.filters li a {
|
display: inline;
|
||||||
color: inherit;
|
}
|
||||||
font-size: 12px;
|
.filters li a {
|
||||||
padding: 3px 7px;
|
color: inherit;
|
||||||
text-decoration: none;
|
font-size: 12px;
|
||||||
border: 1px solid transparent;
|
padding: 3px 7px;
|
||||||
border-radius: 3px;
|
text-decoration: none;
|
||||||
}
|
border: 1px solid transparent;
|
||||||
.filters li a:hover {
|
border-radius: 3px;
|
||||||
border-color: rgba(175, 47, 47, 0.1);
|
}
|
||||||
}
|
.filters li a:hover {
|
||||||
.filters li a.selected {
|
border-color: rgba(175, 47, 47, 0.1);
|
||||||
border-color: rgba(175, 47, 47, 0.2);
|
}
|
||||||
}
|
.filters li a.selected {
|
||||||
.clear-completed,
|
border-color: rgba(175, 47, 47, 0.2);
|
||||||
html .clear-completed:active {
|
}
|
||||||
float: right;
|
.clear-completed,
|
||||||
position: relative;
|
html .clear-completed:active {
|
||||||
line-height: 20px;
|
float: right;
|
||||||
text-decoration: none;
|
position: relative;
|
||||||
cursor: pointer;
|
line-height: 20px;
|
||||||
}
|
text-decoration: none;
|
||||||
.clear-completed:hover {
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
}
|
||||||
}
|
.clear-completed:hover {
|
||||||
.info {
|
text-decoration: underline;
|
||||||
margin: 65px auto 0;
|
}
|
||||||
color: #bfbfbf;
|
.info {
|
||||||
font-size: 10px;
|
margin: 65px auto 0;
|
||||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
color: #bfbfbf;
|
||||||
text-align: center;
|
font-size: 10px;
|
||||||
}
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
.info p {
|
text-align: center;
|
||||||
line-height: 1;
|
}
|
||||||
}
|
.info p {
|
||||||
.info a {
|
line-height: 1;
|
||||||
color: inherit;
|
}
|
||||||
text-decoration: none;
|
.info a {
|
||||||
font-weight: 400;
|
color: inherit;
|
||||||
}
|
text-decoration: none;
|
||||||
.info a:hover {
|
font-weight: 400;
|
||||||
text-decoration: underline;
|
}
|
||||||
}
|
.info a:hover {
|
||||||
/*
|
text-decoration: underline;
|
||||||
Hack to remove background from Mobile Safari.
|
}
|
||||||
Can't use it globally since it destroys checkboxes in Firefox
|
/*
|
||||||
|
Hack to remove background from Mobile Safari.
|
||||||
|
Can't use it globally since it destroys checkboxes in Firefox
|
||||||
*/
|
*/
|
||||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||||
.toggle-all,
|
.toggle-all,
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 430px) {
|
@media (max-width: 430px) {
|
||||||
.footer {
|
.footer {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
.filters {
|
.filters {
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -40,35 +40,34 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.emptyGif {
|
.emptyGif {
|
||||||
display: block;
|
display: block;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-editor-container {
|
.dashboard-editor-container {
|
||||||
background-color: #e3e3e3;
|
background-color: #e3e3e3;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
margin-top: -50px;
|
padding: 50px 60px 0px;
|
||||||
padding: 100px 60px 0px;
|
.pan-info-roles {
|
||||||
.pan-info-roles {
|
font-size: 12px;
|
||||||
font-size: 12px;
|
font-weight: 700;
|
||||||
font-weight: 700;
|
color: #333;
|
||||||
color: #333;
|
display: block;
|
||||||
display: block;
|
}
|
||||||
}
|
.info-container {
|
||||||
.info-container {
|
position: relative;
|
||||||
position: relative;
|
margin-left: 190px;
|
||||||
margin-left: 190px;
|
height: 150px;
|
||||||
height: 150px;
|
line-height: 200px;
|
||||||
line-height: 200px;
|
.display_name {
|
||||||
.display_name {
|
font-size: 48px;
|
||||||
font-size: 48px;
|
line-height: 48px;
|
||||||
line-height: 48px;
|
color: #212121;
|
||||||
color: #212121;
|
position: absolute;
|
||||||
position: absolute;
|
top: 25px;
|
||||||
top: 25px;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export default {
|
|||||||
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
|
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
|
||||||
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
|
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
|
||||||
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
|
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
|
||||||
{ title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
|
{ title: '优雅的使用 icon', href: 'https://segmentfault.com/a/1190000012213278' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -65,6 +65,7 @@ export default {
|
|||||||
.pan-img {
|
.pan-img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.text-jumbo {
|
.text-jumbo {
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
|
|||||||
@@ -335,7 +335,11 @@ export default {
|
|||||||
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||||
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||||
const data = this.formatJson(filterVal, this.list)
|
const data = this.formatJson(filterVal, this.list)
|
||||||
excel.export_json_to_excel(tHeader, data, 'table-list')
|
excel.export_json_to_excel({
|
||||||
|
header: tHeader,
|
||||||
|
data,
|
||||||
|
filename: 'table-list'
|
||||||
|
})
|
||||||
this.downloadLoading = false
|
this.downloadLoading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,8 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- $t is vue-i18n global function to translate lang -->
|
<!-- $t is vue-i18n global function to translate lang -->
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
|
|
||||||
|
<label class="radio-label" style="padding-left:0;">Filename: </label>
|
||||||
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
|
<label class="radio-label">Cell Auto Width: </label>
|
||||||
|
<el-radio-group v-model="autoWidth">
|
||||||
|
<el-radio :label="true" border>True</el-radio>
|
||||||
|
<el-radio :label="false" border>False</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-button style='margin:0 0 20px 20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
|
||||||
|
|
||||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||||
<el-table-column align="center" label='Id' width="95">
|
<el-table-column align="center" label='Id' width="95">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@@ -45,7 +53,8 @@ export default {
|
|||||||
list: null,
|
list: null,
|
||||||
listLoading: true,
|
listLoading: true,
|
||||||
downloadLoading: false,
|
downloadLoading: false,
|
||||||
filename: ''
|
filename: '',
|
||||||
|
autoWidth: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@@ -66,7 +75,12 @@ export default {
|
|||||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||||
const list = this.list
|
const list = this.list
|
||||||
const data = this.formatJson(filterVal, list)
|
const data = this.formatJson(filterVal, list)
|
||||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
excel.export_json_to_excel({
|
||||||
|
header: tHeader,
|
||||||
|
data,
|
||||||
|
filename: this.filename,
|
||||||
|
autoWidth: this.autoWidth
|
||||||
|
})
|
||||||
this.downloadLoading = false
|
this.downloadLoading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -82,3 +96,13 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.radio-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 12px 0 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -72,7 +72,11 @@ export default {
|
|||||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||||
const list = this.multipleSelection
|
const list = this.multipleSelection
|
||||||
const data = this.formatJson(filterVal, list)
|
const data = this.formatJson(filterVal, list)
|
||||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
excel.export_json_to_excel({
|
||||||
|
header: tHeader,
|
||||||
|
data,
|
||||||
|
filename: this.filename
|
||||||
|
})
|
||||||
this.$refs.multipleTable.clearSelection()
|
this.$refs.multipleTable.clearSelection()
|
||||||
this.downloadLoading = false
|
this.downloadLoading = false
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,16 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
|
<div class="app-wrapper" :class="classObj">
|
||||||
<sidebar class="sidebar-container"></sidebar>
|
<sidebar class="sidebar-container"></sidebar>
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<navbar></navbar>
|
<navbar></navbar>
|
||||||
<tags-view></tags-view>
|
<tags-view></tags-view>
|
||||||
<app-main></app-main>
|
<app-main></app-main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Navbar, Sidebar, AppMain, TagsView } from './components'
|
import { Navbar, Sidebar, AppMain, TagsView } from './components'
|
||||||
|
import ResizeMixin from './mixin/ResizeHandler'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'layout',
|
name: 'layout',
|
||||||
@@ -20,20 +21,31 @@ export default {
|
|||||||
AppMain,
|
AppMain,
|
||||||
TagsView
|
TagsView
|
||||||
},
|
},
|
||||||
|
mixins: [ResizeMixin],
|
||||||
computed: {
|
computed: {
|
||||||
sidebar() {
|
sidebar() {
|
||||||
return this.$store.state.app.sidebar
|
return this.$store.state.app.sidebar
|
||||||
|
},
|
||||||
|
device() {
|
||||||
|
return this.$store.state.app.device
|
||||||
|
},
|
||||||
|
classObj() {
|
||||||
|
return {
|
||||||
|
hideSidebar: !this.sidebar.opened,
|
||||||
|
withoutAnimation: this.sidebar.withoutAnimation,
|
||||||
|
mobile: this.device === 'mobile'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
.app-wrapper {
|
.app-wrapper {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -2,17 +2,18 @@
|
|||||||
<div class="menu-wrapper">
|
<div class="menu-wrapper">
|
||||||
<template v-for="item in routes" v-if="!item.hidden&&item.children">
|
<template v-for="item in routes" v-if="!item.hidden&&item.children">
|
||||||
|
|
||||||
<router-link v-if="item.children.length===1 && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
|
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
|
||||||
|
:key="item.children[0].name">
|
||||||
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
||||||
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
|
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
|
||||||
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
|
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<el-submenu v-else :index="item.name||item.path" :key="item.name">
|
<el-submenu v-else :index="item.name||item.path" :key="item.name">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
|
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
|
||||||
<span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
|
<span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-for="child in item.children" v-if="!child.hidden">
|
<template v-for="child in item.children" v-if="!child.hidden">
|
||||||
@@ -21,7 +22,7 @@
|
|||||||
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
|
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
|
||||||
<el-menu-item :index="item.path+'/'+child.path">
|
<el-menu-item :index="item.path+'/'+child.path">
|
||||||
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
|
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
|
||||||
<span v-if="child.meta&&child.meta.title">{{generateTitle(child.meta.title)}}</span>
|
<span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
@@ -46,6 +47,15 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
hasOneShowingChildren(children) {
|
||||||
|
const showingChildren = children.filter(item => {
|
||||||
|
return !item.hidden
|
||||||
|
})
|
||||||
|
if (showingChildren.length === 1) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
generateTitle
|
generateTitle
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<scroll-bar>
|
<scroll-bar>
|
||||||
<el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
|
<el-menu
|
||||||
|
mode="vertical"
|
||||||
|
:show-timeout="200"
|
||||||
|
:default-active="$route.path"
|
||||||
|
:collapse="isCollapse"
|
||||||
|
background-color="#304156"
|
||||||
|
text-color="#bfcbd9"
|
||||||
|
active-text-color="#409EFF"
|
||||||
|
>
|
||||||
<sidebar-item :routes="permission_routers"></sidebar-item>
|
<sidebar-item :routes="permission_routers"></sidebar-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</scroll-bar>
|
</scroll-bar>
|
||||||
|
|||||||
@@ -156,7 +156,7 @@ export default {
|
|||||||
.contextmenu {
|
.contextmenu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 2;
|
z-index: 100;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
|
|||||||
41
src/views/layout/mixin/ResizeHandler.js
Normal file
41
src/views/layout/mixin/ResizeHandler.js
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import store from '@/store'
|
||||||
|
|
||||||
|
const { body } = document
|
||||||
|
const WIDTH = 1024
|
||||||
|
const RATIO = 3
|
||||||
|
|
||||||
|
export default {
|
||||||
|
watch: {
|
||||||
|
$route(route) {
|
||||||
|
if (this.device === 'mobile' && this.sidebar.opened) {
|
||||||
|
store.dispatch('closeSideBar', { withoutAnimation: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
window.addEventListener('resize', this.resizeHandler)
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const isMobile = this.isMobile()
|
||||||
|
if (isMobile) {
|
||||||
|
store.dispatch('toggleDevice', 'mobile')
|
||||||
|
store.dispatch('closeSideBar', { withoutAnimation: true })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isMobile() {
|
||||||
|
const rect = body.getBoundingClientRect()
|
||||||
|
return rect.width - RATIO < WIDTH
|
||||||
|
},
|
||||||
|
resizeHandler() {
|
||||||
|
if (!document.hidden) {
|
||||||
|
const isMobile = this.isMobile()
|
||||||
|
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
store.dispatch('closeSideBar', { withoutAnimation: true })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -34,35 +34,35 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.social-signup-container {
|
.social-signup-container {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
.sign-btn {
|
.sign-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
.wx-svg-container,
|
.wx-svg-container,
|
||||||
.qq-svg-container {
|
.qq-svg-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.wx-svg-container {
|
.wx-svg-container {
|
||||||
background-color: #8dc349;
|
background-color: #8dc349;
|
||||||
}
|
}
|
||||||
.qq-svg-container {
|
.qq-svg-container {
|
||||||
background-color: #6BA2D6;
|
background-color: #6BA2D6;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user