This commit is contained in:
Pan
2017-04-20 14:32:41 +08:00
parent 7bedb8610c
commit 6eca8e4751
17 changed files with 325 additions and 341 deletions

View File

@@ -57,17 +57,20 @@
}
},
accept: (file, done) => {
const token = this.$store.getters.token;
getToken(token).then(response => {
file.token = response.data.qiniu_token;
file.key = response.data.qiniu_key;
file.url = response.data.qiniu_url;
done();
})
/* 七牛*/
// const token = this.$store.getters.token;
// getToken(token).then(response => {
// file.token = response.data.qiniu_token;
// file.key = response.data.qiniu_key;
// file.url = response.data.qiniu_url;
// done();
// })
done();
},
sending: (file, xhr, formData) => {
formData.append('token', file.token);
formData.append('key', file.key);
/* 七牛*/
// formData.append('token', file.token);
// formData.append('key', file.key);
vm.initOnce = false;
}
});

View File

@@ -7,32 +7,12 @@
<script>
export default {
name: 'Pane',
props: {
// split: {
// validator: function (value) {
// return ['vertical', 'horizontal'].indexOf(value) >= 0
// },
// required: true
// }
},
// computed:{
// classes () {
// return this.$parent.split
// },
// },
data() {
const classes = ['Pane', this.$parent.split, 'className'];
return {
classes: classes.join(' '),
percent: 50
}
},
created() {
// console.log(this.$parent.split)
},
methods: {
}
}
</script>

View File

@@ -1,6 +1,28 @@
<template>
<div :class="classes" @mousedown="onMouseDown"></div>
</template>
<script>
export default {
props: {
split: {
validator(value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
required: true
},
onMouseDown: {
type: Function,
required: true
}
},
data() {
const classes = ['Resizer', this.split, 'className'];
return {
classes: classes.join(' ')
}
}
}
</script>
<style scoped>
.Resizer {
-moz-box-sizing: border-box;
@@ -37,8 +59,6 @@
.Resizer.vertical {
width: 11px;
height: 100%;
/*margin: 0 -5px;*/
border-left: 5px solid rgba(255, 255, 255, 0);
border-right: 5px solid rgba(255, 255, 255, 0);
cursor: col-resize;
@@ -49,27 +69,3 @@
border-right: 5px solid rgba(0, 0, 0, 0.5);
}
</style>
<script>
export default {
props: {
split: {
validator(value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
required: true
},
onMouseDown: {
type: Function,
required: true
}
},
data() {
const classes = ['Resizer', this.split, 'className'];
return {
classes: classes.join(' ')
}
},
methods: {}
}
</script>

View File

@@ -1,175 +0,0 @@
<!--<template>-->
<!--<div :style="{ cursor, userSelect }" class="vue-splitter-container clearfix" @mouseup="onMouseUp"-->
<!--@mousemove="onMouseMove">-->
<!--<Pane split="vertical" :style="{ width: percent+'%' }" class="left-container splitter-pane">-->
<!--orange-->
<!--</Pane>-->
<!--<Resizer split="vertical" :onMouseDown="onMouseDown" @click="onClick"></Resizer>-->
<!--<div class="todel" :style="{ width: 100-percent+'%'}">-->
<!--<Pane split="horizontal" class="top-container">-->
<!--<div slot>apple banana</div>-->
<!--</Pane>-->
<!--<Resizer split="horizontal" :onMouseDown="onMouseDown" @click="onClick"></Resizer>-->
<!--<Pane split="horizontal" class="bottom-container">-->
<!--<div slot>apple banana</div>-->
<!--</Pane>-->
<!--</div>-->
<!--</div>-->
<!--</template>-->
<style scoped>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.vue-splitter-container {
height: inherit;
display: flex;
}
</style>
<script>
/* eslint-disable */
import Resizer from './Resizer';
import vue from 'vue'
export default {
name: 'splitPane',
components: {Resizer},
props: {
margin: {
type: Number,
default: 10
}
},
data () {
return {
active: false,
percent: 50,
hasMoved: false,
panes: []
}
},
props: {
split: {
validator: function (value) {
return ['vertical', 'horizontal'].indexOf(value) >= 0
},
required: true
}
},
computed: {
userSelect () {
return this.active ? 'none' : ''
},
cursor () {
return this.active ? 'col-resize' : ''
},
// $paneItems () {
// return this.$children.filter(child => {
// console.log(child)
// })
// }
},
render(h){
const temp = [];
this.$slots.default.map((item, i) => {
if (item.tag && item.tag.toUpperCase().indexOf('PANE') >= 0) {
temp.push(item)
}
});
const newSlots = [];
const length = temp.length;
temp.map((item, index)=> {
newSlots.push(item)
if (index != length - 1) {
newSlots.push(
h('Resizer', {
props: {
split: this.split,
onMouseDown: this.onMouseDown
}
})
)
}
})
return h('div', {
on: {
mousemove: this.onMouseMove
}
}, [
h('div', {
'class': {
'vue-splitter-container': true
},
}, newSlots)
])
},
// beforeMount(){
// this.$slots.default=this.$slots.default.map((item, i) => {
// if (item.tag&&item.tag.toUpperCase().indexOf('PANE') >= 0) {
// return item
// }else{
// return null
// }
// })
//
// },
created(){
},
mounted(){
},
methods: {
onClick () {
if (!this.hasMoved) {
this.percent = 50;
this.$emit('resize');
}
},
onMouseDown () {
this.active = true;
this.hasMoved = false;
},
onMouseUp () {
this.active = false;
},
onMouseMove (e) {
if (e.buttons === 0 || e.which === 0) {
this.active = false;
}
if (this.active) {
let offset = 0;
let target = e.currentTarget;
while (target) {
offset += target.offsetLeft;
target = target.offsetParent;
}
const percent = Math.floor(((e.pageX - offset) / e.currentTarget.offsetWidth) * 10000) / 100;
if (percent > this.margin && percent < 100 - this.margin) {
this.percent = percent;
}
console.log(percent)
this.$children.map((v, i)=> {
if (i == 0) {
v.percent = percent
} else {
v.percent = 100 - percent
}
})
this.$emit('resize');
this.hasMoved = true;
}
}
}
}
</script>

View File

@@ -1,7 +0,0 @@
import SplitPane from './a.vue';
import Pane from './Pane.vue';
export {
SplitPane,
Pane
}

View File

@@ -66,7 +66,6 @@
mounted() {
const element = this.$el;
const elementOffset = element.getBoundingClientRect();
console.log(elementOffset.height)
// this.height = elementOffset.height+'px';
},
methods: {

View File

@@ -1,30 +1,28 @@
<template>
<div class="twoDndList">
<div class="twoDndList-list" :style="{width:width1}">
<h3>{{list1Title}}</h3>
<draggable :list="list1" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in list1">
<div class="list-complete-item-handle">[{{element.id}}] {{element.title}}</div>
<div style="position:absolute;right:0px;">
<a style="float: left ;margin-top: -20px;margin-right:5px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<div class="twoDndList">
<div class="twoDndList-list" :style="{width:width1}">
<h3>{{list1Title}}</h3>
<draggable :list="list1" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in list1">
<div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
<div style="position:absolute;right:0px;">
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<i style="color:#ff4949" class="el-icon-delete"></i>
</span>
</div>
</div>
</draggable>
</div>
<div class="twoDndList-list" :style="{width:width2}">
<h3>{{list2Title}}</h3>
<draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in filterList2">
<div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.id}}] {{element.title}}</div>
<a style="float: right ;margin-top: -20px;" :href="'/article/edit/'+element.id" target="_blank"><i style="color:#20a0ff" class="el-icon-information"></i></a>
</div>
</draggable>
</div>
</div>
</draggable>
</div>
<div class="twoDndList-list" :style="{width:width2}">
<h3>{{list2Title}}</h3>
<draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
<div class="list-complete-item" v-for="element in filterList2">
<div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
</div>
</draggable>
</div>
</div>
</template>
<script>
@@ -124,6 +122,7 @@
.list-complete-item {
cursor: pointer;
position: relative;
font-size: 14px;
padding: 5px 12px;
margin-top: 4px;
border: 1px solid #bfcbd9;