Add draglist
lin-xin
parent
ef426d0724
commit
1b37000c3e
|
|
@ -15,7 +15,7 @@
|
|||
"element-ui": "1.3.1",
|
||||
"mockjs": "^1.0.1-beta3",
|
||||
"vue": "^2.3.2",
|
||||
"vue-core-image-upload": "2.1.5",
|
||||
"vue-core-image-upload": "2.1.11",
|
||||
"vue-datasource": "1.0.9",
|
||||
"vue-echarts-v3": "1.0.3",
|
||||
"vue-quill-editor": "2.1.6",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@
|
|||
</template>
|
||||
<style>
|
||||
@import "../static/css/main.css";
|
||||
@import "../static/css/color-dark.css"; /*深色主题*/
|
||||
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/
|
||||
/*@import "../static/css/color-dark.css"; 深色主题*/
|
||||
@import "../static/css/theme-green/color-green.css"; /*浅绿色主题*/
|
||||
</style>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<div class="sidebar">
|
||||
<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
|
||||
<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router>
|
||||
<template v-for="item in items">
|
||||
<template v-if="item.subs">
|
||||
<el-submenu :index="item.index">
|
||||
<template slot="title"><i class="el-icon-menu"></i>{{ item.title }}</template>
|
||||
<template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
|
||||
<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-menu-item :index="item.index">
|
||||
<i class="el-icon-setting"></i>{{ item.title }}
|
||||
<i :class="item.icon"></i>{{ item.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -25,10 +25,12 @@
|
|||
return {
|
||||
items: [
|
||||
{
|
||||
icon: 'el-icon-setting',
|
||||
index: 'readme',
|
||||
title: '自述'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-menu',
|
||||
index: '2',
|
||||
title: '表格',
|
||||
subs: [
|
||||
|
|
@ -43,6 +45,7 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-date',
|
||||
index: '3',
|
||||
title: '表单',
|
||||
subs: [
|
||||
|
|
@ -65,18 +68,14 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
index: '4',
|
||||
title: '图表',
|
||||
subs: [
|
||||
{
|
||||
index: 'basecharts',
|
||||
title: '基础图表'
|
||||
},
|
||||
{
|
||||
index: 'mixcharts',
|
||||
title: '混合图表'
|
||||
}
|
||||
]
|
||||
icon: 'el-icon-star-on',
|
||||
index: 'basecharts',
|
||||
title: '图表'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-upload2',
|
||||
index: 'drag',
|
||||
title: '拖拽'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
|
||||
访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
|
||||
</div>
|
||||
<div class="content-title">基础图表</div>
|
||||
<div class="echarts">
|
||||
<IEcharts :option="line" ></IEcharts>
|
||||
</div>
|
||||
|
|
@ -22,11 +23,23 @@
|
|||
<div class="echarts">
|
||||
<IEcharts :option="pie_radius" ></IEcharts>
|
||||
</div>
|
||||
<div class="content-title">混合图表</div>
|
||||
<div class="mix-echarts">
|
||||
<IEcharts :option="mix" ></IEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IEcharts from 'vue-echarts-v3';
|
||||
// import IEcharts from 'vue-echarts-v3';
|
||||
import IEcharts from 'vue-echarts-v3/src/lite.vue';
|
||||
|
||||
import 'echarts/lib/chart/bar';
|
||||
import 'echarts/lib/chart/line';
|
||||
import 'echarts/lib/chart/pie';
|
||||
import 'echarts/lib/component/legend';
|
||||
import 'echarts/lib/component/tooltip';
|
||||
import 'echarts/lib/component/title';
|
||||
export default {
|
||||
components: {
|
||||
IEcharts
|
||||
|
|
@ -140,7 +153,34 @@
|
|||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mix:{
|
||||
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
|
||||
legend: {
|
||||
data:['步步高','小天才','imoo']
|
||||
},
|
||||
xAxis: {
|
||||
data: ['周一','周二','周三','周四','周五','周末']
|
||||
},
|
||||
yAxis:{},
|
||||
series: [
|
||||
{
|
||||
name: "步步高",
|
||||
type: "line",
|
||||
data: [15, 20, 26, 30, 40, 27]
|
||||
},
|
||||
{
|
||||
name: "小天才",
|
||||
type: "bar",
|
||||
data: [5, 30, 36, 10, 34, 20]
|
||||
},
|
||||
{
|
||||
name: "imoo",
|
||||
type: "bar",
|
||||
data: [35, 40, 30, 50, 60, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -151,4 +191,16 @@
|
|||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
.content-title{
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
.mix-echarts{
|
||||
width:900px;
|
||||
height:600px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<section class="main">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="drag-box-left">
|
||||
<div class="drag-title">未完成</div>
|
||||
<div class="drag-list" draggable="true"
|
||||
v-for="list in data1"
|
||||
:data-id="list.id"
|
||||
@dragstart="dragstartEvent"
|
||||
@dragend="dragendEvent"
|
||||
@dragenter="dragenterEvent"
|
||||
@dragleave="dragleaveEvent"
|
||||
@dragover="dragoverEvent"
|
||||
>{{list.title}}</div>
|
||||
</div>
|
||||
<div class="drag-box-right">
|
||||
<div class="drag-title">已完成</div>
|
||||
<div class="drag-list" draggable="true"
|
||||
v-for="list in data2"
|
||||
:data-id="list.id"
|
||||
@dragstart="dragstartEvent"
|
||||
@dragend="dragendEvent"
|
||||
@dragenter="dragenterEvent"
|
||||
@dragleave="dragleaveEvent"
|
||||
@dragover="dragoverEvent"
|
||||
>{{list.title}}</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dragElement: null,
|
||||
lock: true,
|
||||
data1: [
|
||||
{id: 1, title: '这里是列表1的标题'},
|
||||
{id: 2, title: '这里是列表2的标题'},
|
||||
{id: 3, title: '这里是列表3的标题'},
|
||||
{id: 4, title: '这里是列表4的标题'},
|
||||
{id: 5, title: '这里是列表5的标题'},
|
||||
{id: 6, title: '这里是列表6的标题'},
|
||||
{id: 7, title: '这里是列表7的标题'}
|
||||
],
|
||||
data2: [
|
||||
{id: 1, title: '这里是列表11的标题'},
|
||||
{id: 2, title: '这里是列表12的标题'},
|
||||
{id: 3, title: '这里是列表13的标题'},
|
||||
{id: 4, title: '这里是列表14的标题'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dragstartEvent(ev) {
|
||||
const self = this;
|
||||
self.dragElement = ev.target;
|
||||
ev.target.style.backgroundColor = '#f8f8f8';
|
||||
},
|
||||
dragendEvent(ev) {
|
||||
ev.target.style.backgroundColor = '#fff';
|
||||
ev.preventDefault();
|
||||
},
|
||||
dragenterEvent(ev) {
|
||||
const self = this;
|
||||
if(self.dragElement != ev.target){
|
||||
ev.target.parentNode.insertBefore(self.dragElement, ev.target);
|
||||
}
|
||||
},
|
||||
dragleaveEvent(ev) {
|
||||
const self = this;
|
||||
if(self.dragElement != ev.target){
|
||||
if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
|
||||
ev.target.parentNode.appendChild(self.dragElement);
|
||||
self.lock = false;
|
||||
}else{
|
||||
self.lock = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
dragoverEvent(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drag-box-left{
|
||||
float: left;
|
||||
width: 45%;
|
||||
}
|
||||
.drag-box-right{
|
||||
float: right;
|
||||
width: 45%;
|
||||
}
|
||||
.drag-list{
|
||||
border: 1px solid #ddd;
|
||||
padding:20px;
|
||||
margin-bottom: 20px;
|
||||
transition: border .3s;
|
||||
}
|
||||
.drag-list:hover{
|
||||
border: 1px solid #20a0ff;
|
||||
}
|
||||
.drag-title{
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>混合图表</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="plugins-tips">
|
||||
vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
|
||||
访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
|
||||
</div>
|
||||
<div class="mix-echarts">
|
||||
<IEcharts :option="mix" ></IEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IEcharts from 'vue-echarts-v3';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
mix:{
|
||||
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
|
||||
legend: {
|
||||
data:['步步高','小天才','imoo']
|
||||
},
|
||||
xAxis: {
|
||||
data: ['周一','周二','周三','周四','周五','周末']
|
||||
},
|
||||
yAxis:{},
|
||||
series: [
|
||||
{
|
||||
name: "步步高",
|
||||
type: "line",
|
||||
data: [15, 20, 26, 30, 40, 27]
|
||||
},
|
||||
{
|
||||
name: "小天才",
|
||||
type: "bar",
|
||||
data: [5, 30, 36, 10, 34, 20]
|
||||
},
|
||||
{
|
||||
name: "imoo",
|
||||
type: "bar",
|
||||
data: [35, 40, 30, 50, 60, 40]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
IEcharts
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mix-echarts{
|
||||
width:900px;
|
||||
height:600px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,16 +12,12 @@
|
|||
访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
|
||||
</div>
|
||||
<el-upload
|
||||
action="/api/posts/"
|
||||
type="drag"
|
||||
:thumbnail-mode="true"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:on-error="handleError"
|
||||
:default-file-list="fileList"
|
||||
>
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="/api/posts/"
|
||||
multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</el-upload>
|
||||
<div class="content-title">支持裁剪</div>
|
||||
|
|
@ -56,12 +52,6 @@
|
|||
imageuploaded(res) {
|
||||
console.log(res)
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleError(){
|
||||
this.$notify.error({
|
||||
title: '上传失败',
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ import App from './App';
|
|||
import router from './router';
|
||||
import axios from 'axios';
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-default/index.css'; // 默认主题
|
||||
// import '../static/css/theme-green/index.css'; // 浅绿色主题
|
||||
// import 'element-ui/lib/theme-default/index.css'; // 默认主题
|
||||
import '../static/css/theme-green/index.css'; // 浅绿色主题
|
||||
import "babel-polyfill";
|
||||
import './mock/index.js';
|
||||
|
||||
Vue.use(ElementUI);
|
||||
Vue.prototype.$axios = axios;
|
||||
new Vue({
|
||||
|
|
|
|||
|
|
@ -46,8 +46,8 @@ export default new Router({
|
|||
component: resolve => require(['../components/page/BaseCharts.vue'], resolve) // vue-echarts-v3组件
|
||||
},
|
||||
{
|
||||
path: '/mixcharts',
|
||||
component: resolve => require(['../components/page/MixCharts.vue'], resolve) // vue-echarts-v3组件
|
||||
path: '/drag',
|
||||
component: resolve => require(['../components/page/DragList.vue'], resolve) // 拖拽列表组件
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue