zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/components/dndlist.vue
View File

@@ -1,17 +1,14 @@
<template>
<div class="components-container">
<code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
<code>拖拽https://github.com/SortableJS/Vue.Draggable 项目：Vue.Draggable</code>
<div class="editor-container">
<TwoDndList :list1="list1" :list2="list2" :list1Title="头条列表" list2Title="文章池"></TwoDndList>
<DndList :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池" />
</div>
<!--<div class='editor-content'>
{{content}}
</div>-->
</div>
</template>
<script>
import DndList from 'components/twoDndList'
import { getList } from 'api/article';
export default {
components: { DndList },
data() {
@@ -20,8 +17,18 @@
list2: []
}
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.listLoading = true;
getList(this.listQuery).then(response => {
this.list1 = response.data.splice(0, 5);
this.list2 = response.data;
console.log(this.list1, this.list2)
})
}
}
};
</script>

28
src/views/components/dropzone.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="components-container">
<code>https://github.com/rowanwins/vue-dropzone
由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
</code>
<div class="editor-container">
<Dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone"
url="https://httpbin.org/post"></Dropzone>
</div>
</div>
</template>
<script>
import Dropzone from 'components/Dropzone';
export default {
components: { Dropzone },
methods: {
dropzoneS(file) {
this.$message({ message: '上传成功', type: 'success' });
},
dropzoneR(file) {
this.$message({ message: '删除成功', type: 'success' });
}
}
};
</script>

62
src/views/components/splitpane.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="components-container" >
<code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'>codepen</a>,<a href='https://jsfiddle.net/' target='_blank'>jsfiddle</a>就不会陌生了
暂还没有时间开源封装好，日后补上
</code>
<splitPane v-on:resize="resize" split="vertical">
<template slot="paneL">
<div class="left-container"></div>
</template>
<template slot="paneR">
<split-pane split="horizontal">
<template slot="paneL">
<div class="top-container"></div>
</template>
<template slot="paneR">
<div class="bottom-container">
</div>
</template>
</split-pane>
</template>
</splitPane>
</div>
</template>
<script>
import splitPane from 'components/SplitPane'
export default {
components: { splitPane },
methods: {
resize() {
console.log('resize')
}
}
};
</script>
<style scoped>
.components-container{
position: relative;
height: 100vh;
}
.left-container {
background-color: #F38181;
height:100%;
}
.right-container {
background-color: #FCE38A;
height: 200px;
}
.top-container {
background-color: #FCE38A;
width: 100%;
height: 100%;
}
.bottom-container {
width: 100%;
background-color: #95E1D3;
height: 100%;
}
</style>

125
src/views/components/sticky.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<div>
<Sticky className="sub-navbar">
<el-dropdown trigger="click">
<el-button>
平台<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button>
<el-dropdown-menu class="no-border" slot="dropdown">
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
{{item.name}}
</el-checkbox>
</el-checkbox-group>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown trigger="click">
<el-button>
外链<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button>
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
<el-input placeholder="请输入内容" v-model="url">
<template slot="prepend">填写url</template>
</el-input>
</el-dropdown-menu>
</el-dropdown>
<div class="time-container">
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间">
</el-date-picker>
</div>
<el-button style="margin-left: 10px;" type="success">发布
</el-button>
</Sticky>
<div class="components-container">
<code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
</div>
</div>
</template>
<script>
import Sticky from 'components/Sticky';
export default {
components: { Sticky },
data() {
return {
time: '',
url: '',
platforms: ['a-platform'],
platformsOptions: [
{ key: 'a-platform', name: '平台A' },
{ key: 'b-platform', name: '平台B' },
{ key: 'c-platform', name: '平台C' }
],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
}
};
</script>
<style scoped>
.time-container {
display: inline-block;
}
</style>

56
src/views/error/404.vue
View File

@@ -1,61 +1,7 @@
<template>
<div class="errorpage-container"> 404
<splitPane v-on:resize="resize" split="vertical">
<template slot="paneL">
<div class="left-container"></div>
</template>
<template slot="paneR">
<splitPane split="horizontal">
<template slot="paneL">
<div class="top-container"></div>
</template>
<template slot="paneR">
<div class="bottom-container">
</div>
</template>
</splitPane>
</template>
</splitPane>
</div>
<div>404</div>
</template>
<script>
import splitPane from 'components/SplitPane/SplitPane'
export default {
components: { splitPane },
methods: {
resize() {
console.log('resize')
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.errorpage-container{
position: relative;
height: 100vh;
}
.left-container {
background-color: #F38181;
height:100%;
}
.right-container {
background-color: #FCE38A;
height: 200px;
}
.top-container {
background-color: #FCE38A;
width: 100%;
height: 100%;
}
.bottom-container {
width: 100%;
background-color: #95E1D3;
height: 100%;
}
</style>

2
src/views/excel/index.vue
View File

@@ -33,7 +33,7 @@
</div>
</template>
<script>
import { getList } from 'api/article'
import { getList } from 'api/article';
export default {
data() {
return {