init
This commit is contained in:
Pan
103
src/components/Charts/barPercent.vue
Normal file
103
src/components/Charts/barPercent.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入 ECharts 主模块
|
||||
const echarts = require('echarts/lib/echarts');
|
||||
// 引入柱状图
|
||||
require('echarts/lib/chart/bar');
|
||||
// 引入提示框和标题组件
|
||||
require('echarts/lib/component/tooltip');
|
||||
export default {
|
||||
name: 'barPercent',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'bar-percent-chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'bar-percent-chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '80px'
|
||||
},
|
||||
dataNum: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dataNum() {
|
||||
this.setOptions()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initBar();
|
||||
},
|
||||
methods: {
|
||||
initBar() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter(params) {
|
||||
return '已完成' + params.value + '篇<br/>目标90篇<br/>完成进度' + Math.round((params.value / 90) * 100) + '%'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
containLabel: false
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['文章完成比例']
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
data: [],
|
||||
show: false
|
||||
}],
|
||||
animationDelay: 1000,
|
||||
series: [{
|
||||
type: 'bar',
|
||||
name: '初诊',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#e5e5e5'
|
||||
}
|
||||
},
|
||||
silent: true,
|
||||
barGap: '-100%', // Make series be overlap
|
||||
data: [150]
|
||||
}, {
|
||||
type: 'bar',
|
||||
name: 'app',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#30b08f'
|
||||
}
|
||||
},
|
||||
z: 10,
|
||||
data: [this.dataNum]
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
113
src/components/Charts/keyboard.vue
Normal file
113
src/components/Charts/keyboard.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入 ECharts 主模块
|
||||
const echarts = require('echarts/lib/echarts');
|
||||
// 引入柱状图
|
||||
require('echarts/lib/chart/bar');
|
||||
require('echarts/lib/chart/line');
|
||||
// 引入提示框和标题组件
|
||||
require('echarts/lib/component/tooltip');
|
||||
require('echarts/lib/component/title');
|
||||
|
||||
require('echarts/lib/component/visualMap');
|
||||
export default {
|
||||
name: 'barPercent',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'bar-percent-chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'bar-percent-chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.initBar();
|
||||
},
|
||||
methods: {
|
||||
initBar() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
|
||||
const xAxisData = [];
|
||||
const data = [];
|
||||
for (let i = 0; i < 30; i++) {
|
||||
xAxisData.push(i + '号');
|
||||
data.push(Math.round(Math.random() * 2 + 3))
|
||||
}
|
||||
|
||||
this.chart.setOption(
|
||||
{
|
||||
backgroundColor: '#08263a',
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
data: xAxisData
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 50,
|
||||
dimension: 0,
|
||||
inRange: {
|
||||
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#4a657a'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#08263f'
|
||||
}
|
||||
},
|
||||
axisTick: {}
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data,
|
||||
name: '撸文数',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5,
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#111'
|
||||
}
|
||||
},
|
||||
animationEasing: 'elasticOut',
|
||||
animationEasingUpdate: 'elasticOut',
|
||||
animationDelay(idx) {
|
||||
return idx * 20;
|
||||
},
|
||||
animationDelayUpdate(idx) {
|
||||
return idx * 20;
|
||||
}
|
||||
}]
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
145
src/components/Charts/line.vue
Normal file
145
src/components/Charts/line.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入 ECharts 主模块
|
||||
const echarts = require('echarts/lib/echarts');
|
||||
// 引入图
|
||||
require('echarts/lib/chart/line');
|
||||
// 引入提示框和标题组件
|
||||
require('echarts/lib/component/markLine');
|
||||
require('echarts/lib/component/markPoint');
|
||||
require('echarts/lib/component/tooltip');
|
||||
export default {
|
||||
name: 'lineChart',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'line-chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'line-chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '280px'
|
||||
},
|
||||
listData: {
|
||||
type: Array,
|
||||
require: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
listData(dataList) {
|
||||
this.setLine(dataList)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
},
|
||||
methods: {
|
||||
setLine(dataList) {
|
||||
const xAxisData = [];
|
||||
const data = [];
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
const item = dataList[i]
|
||||
xAxisData.push(item.week.substring(item.week.length - 2) + '周');
|
||||
data.push(item.count)
|
||||
}
|
||||
const markLineData = [];
|
||||
for (let i = 1; i < data.length; i++) {
|
||||
markLineData.push([{
|
||||
xAxis: i - 1,
|
||||
yAxis: data[i - 1],
|
||||
value: data[i] - data[i - 1]
|
||||
}, {
|
||||
xAxis: i,
|
||||
yAxis: data[i]
|
||||
}]);
|
||||
}
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: 'Awesome Chart'
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 20,
|
||||
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
animationDelay: 1000,
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
// axisLabel:{
|
||||
// show:false
|
||||
// },
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
show: false
|
||||
// min: 90
|
||||
},
|
||||
series: [{
|
||||
name: '撸文数',
|
||||
type: 'line',
|
||||
data,
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: '最大值' },
|
||||
{ type: 'min', name: '最小值' }
|
||||
]
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#30b08f'
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: true,
|
||||
smooth: true,
|
||||
effect: {
|
||||
show: true
|
||||
},
|
||||
animationDuration(idx) {
|
||||
return idx * 100;
|
||||
},
|
||||
animationDelay: 1000,
|
||||
animationEasing: 'quadraticInOut',
|
||||
distance: 1,
|
||||
label: {
|
||||
normal: {
|
||||
position: 'middle'
|
||||
}
|
||||
},
|
||||
symbol: ['none', 'none'],
|
||||
data: markLineData
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
291
src/components/Dropzone/index.vue
Normal file
291
src/components/Dropzone/index.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div :ref="id" :action="url" class="dropzone" :id="id">
|
||||
<input type="file" name="file">
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Dropzone from 'dropzone';
|
||||
import 'dropzone/dist/dropzone.css';
|
||||
import { getToken } from 'api/qiniu';
|
||||
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dropzone: '',
|
||||
initOnce: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const element = document.getElementById(this.id);
|
||||
const vm = this;
|
||||
this.dropzone = new Dropzone(element, {
|
||||
clickable: this.clickable,
|
||||
thumbnailWidth: this.thumbnailWidth,
|
||||
thumbnailHeight: this.thumbnailHeight,
|
||||
maxFiles: this.maxFiles,
|
||||
maxFilesize: this.maxFilesize,
|
||||
dictRemoveFile: 'Remove',
|
||||
addRemoveLinks: this.showRemoveLink,
|
||||
acceptedFiles: this.acceptedFiles,
|
||||
autoProcessQueue: this.autoProcessQueue,
|
||||
dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
|
||||
dictMaxFilesExceeded: '只能一个图',
|
||||
previewTemplate: '<div class="dz-preview dz-file-preview"> <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div> <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div class="dz-success-mark"> <i class="material-icons">done</i> </div> <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
|
||||
init() {
|
||||
const val = vm.defaultImg;
|
||||
if (!val) return;
|
||||
if (Array.isArray(val)) {
|
||||
if (val.length === 0) return;
|
||||
val.map((v, i) => {
|
||||
const mockFile = { name: 'name' + i, size: 12345, url: v };
|
||||
this.options.addedfile.call(this, mockFile);
|
||||
this.options.thumbnail.call(this, mockFile, v);
|
||||
mockFile.previewElement.classList.add('dz-success');
|
||||
mockFile.previewElement.classList.add('dz-complete');
|
||||
vm.initOnce = false;
|
||||
return true;
|
||||
})
|
||||
} else {
|
||||
const mockFile = { name: 'name', size: 12345, url: val };
|
||||
this.options.addedfile.call(this, mockFile);
|
||||
this.options.thumbnail.call(this, mockFile, val);
|
||||
mockFile.previewElement.classList.add('dz-success');
|
||||
mockFile.previewElement.classList.add('dz-complete');
|
||||
vm.initOnce = false;
|
||||
}
|
||||
},
|
||||
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();
|
||||
})
|
||||
},
|
||||
sending: (file, xhr, formData) => {
|
||||
formData.append('token', file.token);
|
||||
formData.append('key', file.key);
|
||||
vm.initOnce = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (this.couldPaste) {
|
||||
document.addEventListener('paste', this.pasteImg)
|
||||
}
|
||||
|
||||
this.dropzone.on('success', file => {
|
||||
vm.$emit('dropzone-success', file, vm.dropzone.element)
|
||||
});
|
||||
this.dropzone.on('addedfile', file => {
|
||||
vm.$emit('dropzone-fileAdded', file)
|
||||
});
|
||||
this.dropzone.on('removedfile', file => {
|
||||
vm.$emit('dropzone-removedFile', file)
|
||||
});
|
||||
this.dropzone.on('error', (file, error, xhr) => {
|
||||
vm.$emit('dropzone-error', file, error, xhr)
|
||||
});
|
||||
this.dropzone.on('successmultiple', (file, error, xhr) => {
|
||||
vm.$emit('dropzone-successmultiple', file, error, xhr)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
removeAllFiles() {
|
||||
this.dropzone.removeAllFiles(true)
|
||||
},
|
||||
processQueue() {
|
||||
this.dropzone.processQueue()
|
||||
},
|
||||
pasteImg(event) {
|
||||
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
|
||||
if (items[0].kind === 'file') {
|
||||
this.dropzone.addFile(items[0].getAsFile())
|
||||
}
|
||||
},
|
||||
initImages(val) {
|
||||
if (!val) return;
|
||||
if (Array.isArray(val)) {
|
||||
val.map((v, i) => {
|
||||
const mockFile = { name: 'name' + i, size: 12345, url: v };
|
||||
this.dropzone.options.addedfile.call(this.dropzone, mockFile);
|
||||
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v);
|
||||
mockFile.previewElement.classList.add('dz-success');
|
||||
mockFile.previewElement.classList.add('dz-complete');
|
||||
return true
|
||||
})
|
||||
} else {
|
||||
const mockFile = { name: 'name', size: 12345, url: val };
|
||||
this.dropzone.options.addedfile.call(this.dropzone, mockFile);
|
||||
this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val);
|
||||
mockFile.previewElement.classList.add('dz-success');
|
||||
mockFile.previewElement.classList.add('dz-complete');
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
document.removeEventListener('paste', this.pasteImg);
|
||||
this.dropzone.destroy();
|
||||
},
|
||||
watch: {
|
||||
defaultImg(val) {
|
||||
if (val.length === 0) {
|
||||
this.initOnce = false;
|
||||
return;
|
||||
}
|
||||
if (!this.initOnce) return;
|
||||
this.initImages(val);
|
||||
this.initOnce = false;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
clickable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
defaultMsg: {
|
||||
type: String,
|
||||
default: '上传图片'
|
||||
},
|
||||
acceptedFiles: {
|
||||
type: String
|
||||
},
|
||||
thumbnailHeight: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
thumbnailWidth: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
showRemoveLink: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maxFilesize: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
maxFiles: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
autoProcessQueue: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
useCustomDropzoneOptions: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
defaultImg: {
|
||||
default: false
|
||||
},
|
||||
couldPaste: {
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropzone {
|
||||
border: 2px solid #E5E5E5;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #777;
|
||||
transition: background-color .2s linear;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.dropzone:hover {
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.dropzone .dz-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dropzone input[name='file'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-image {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview:hover .dz-image img {
|
||||
transform: none;
|
||||
-webkit-filter: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details {
|
||||
bottom: 0px;
|
||||
top: 0px;
|
||||
color: white;
|
||||
background-color: rgba(33, 150, 243, 0.8);
|
||||
transition: opacity .2s linear;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details .dz-filename:hover span {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-remove {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
color: white;
|
||||
margin-left: 15px;
|
||||
padding: 10px;
|
||||
top: inherit;
|
||||
bottom: 15px;
|
||||
border: 2px white solid;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.1px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview:hover .dz-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
|
||||
margin-left: -40px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
|
||||
color: white;
|
||||
font-size: 5rem;
|
||||
}
|
||||
</style>
|
||||
43
src/components/ErrLog/index.vue
Normal file
43
src/components/ErrLog/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
|
||||
<el-button size="small" type="primary">
|
||||
<wscn-icon-svg icon-class="bug" class="meta-item__icon"/>
|
||||
</el-button>
|
||||
</el-badge>
|
||||
<el-dialog title="bug日志" v-model="dialogTableVisible">
|
||||
<el-table :data="logsList">
|
||||
<el-table-column label="message">
|
||||
<template scope="scope">
|
||||
<div>msg:{{ scope.row.err.message }}</div>
|
||||
<br/>
|
||||
<div>url: {{scope.row.url}}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="stack">
|
||||
<template scope="scope">
|
||||
{{ scope.row.err.stack}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'errLog',
|
||||
props: {
|
||||
logsList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogTableVisible: false
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
38
src/components/Hamburger/index.vue
Normal file
38
src/components/Hamburger/index.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" aria-hidden="true">
|
||||
<use xlink:href="#icon-hamburger"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'hamburger',
|
||||
props: {
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
toggleClick: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: rotate(0deg);
|
||||
transition: .38s;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.hamburger.is-active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
11
src/components/Icon-svg/index.js
Normal file
11
src/components/Icon-svg/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
function registerAllComponents(requireContext) {
|
||||
return requireContext.keys().forEach(comp => {
|
||||
const vueComp = requireContext(comp)
|
||||
const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1]
|
||||
Vue.component(compName, vueComp)
|
||||
})
|
||||
}
|
||||
|
||||
registerAllComponents(require.context('./', false, /\.vue$/))
|
||||
52
src/components/Icon-svg/wscn-icon-stack.vue
Normal file
52
src/components/Icon-svg/wscn-icon-stack.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="icon-container" :style="containerStyle">
|
||||
<slot class="icon"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wscn-icon-stack',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'circle',
|
||||
validator: val => {
|
||||
const validShapes = ['circle', 'square']
|
||||
return validShapes.indexOf(val) > -1
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerStyle() {
|
||||
return {
|
||||
width: `${this.width}px`,
|
||||
height: `${this.width}px`,
|
||||
fontSize: `${this.width * 0.6}px`,
|
||||
borderRadius: `${this.shape === 'circle' && '50%'}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #1482F0;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
26
src/components/Icon-svg/wscn-icon-svg.vue
Normal file
26
src/components/Icon-svg/wscn-icon-svg.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<svg class="wscn-icon" aria-hidden="true">
|
||||
<use :xlink:href="iconName"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wscn-icon-svg',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName() {
|
||||
return `#icon-${this.iconClass}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
676
src/components/ImageCropper/index.vue
Normal file
676
src/components/ImageCropper/index.vue
Normal file
@@ -0,0 +1,676 @@
|
||||
<template>
|
||||
<div class="vue-image-crop-upload" v-show="show">
|
||||
<div class="vicp-wrap">
|
||||
<div class="vicp-close" @click="off">
|
||||
<i class="vicp-icon4"></i>
|
||||
</div>
|
||||
|
||||
<div class="vicp-step1" v-show="step == 1">
|
||||
<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-arrow"></i>
|
||||
<i class="vicp-icon1-body"></i>
|
||||
<i class="vicp-icon1-bottom"></i>
|
||||
</i>
|
||||
<span class="vicp-hint" v-show="loading !== 1">{{ lang.hint }}</span>
|
||||
<span class="vicp-no-supported-hint" v-show="!isSupported">{{ lang.noSupported }}</span>
|
||||
<input type="file" v-show="false" @change="handleChange" ref="fileinput">
|
||||
</div>
|
||||
<div class="vicp-error" v-show="hasError">
|
||||
<i class="vicp-icon2"></i> {{ errorMsg }}
|
||||
</div>
|
||||
<div class="vicp-operate">
|
||||
<a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vicp-step2" v-if="step == 2">
|
||||
<div class="vicp-crop">
|
||||
<div class="vicp-crop-left" v-show="true">
|
||||
<div class="vicp-img-container">
|
||||
<img :src="sourceImgUrl"
|
||||
:style="sourceImgStyle"
|
||||
class="vicp-img"
|
||||
draggable="false"
|
||||
@drag="preventDefault"
|
||||
@dragstart="preventDefault"
|
||||
@dragend="preventDefault"
|
||||
@dragleave="preventDefault"
|
||||
@dragover="preventDefault"
|
||||
@dragenter="preventDefault"
|
||||
@drop="preventDefault"
|
||||
@mousedown="imgStartMove"
|
||||
@mousemove="imgMove"
|
||||
@mouseup="createImg"
|
||||
@mouseout="createImg"
|
||||
ref="img">
|
||||
<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>
|
||||
<div class="vicp-range">
|
||||
<input type="range" :value="scale.range" step="1" min="0" max="100" @change="zoomChange">
|
||||
<i @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub"
|
||||
class="vicp-icon5"></i>
|
||||
<i @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd"
|
||||
class="vicp-icon6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vicp-crop-right" v-show="true">
|
||||
<div class="vicp-preview">
|
||||
<div class="vicp-preview-item">
|
||||
<img :src="createImgUrl" :style="previewStyle">
|
||||
<span>{{ lang.preview }}</span>
|
||||
</div>
|
||||
<div class="vicp-preview-item">
|
||||
<img :src="createImgUrl" :style="previewStyle" v-if="!noCircle">
|
||||
<span>{{ lang.preview }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vicp-operate">
|
||||
<a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
||||
<a class="vicp-operate-btn" @click="upload" @mousedown="ripple">{{ lang.btn.save }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vicp-step3" v-if="step == 3">
|
||||
<div class="vicp-upload">
|
||||
<span class="vicp-loading" v-show="loading === 1">{{ lang.loading }}</span>
|
||||
<div class="vicp-progress-wrap">
|
||||
<span class="vicp-progress" v-show="loading === 1" :style="progressStyle"></span>
|
||||
</div>
|
||||
<div class="vicp-error" v-show="hasError">
|
||||
<i class="vicp-icon2"></i> {{ errorMsg }}
|
||||
</div>
|
||||
<div class="vicp-success" v-show="loading === 2">
|
||||
<i class="vicp-icon3"></i> {{ lang.success }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="vicp-operate">
|
||||
<a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
|
||||
<a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<canvas v-show="false" :width="width" :height="height" ref="canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
import {getToken, upload} from 'api/qiniu';
|
||||
import {effectRipple, data2blob} from './utils';
|
||||
import langBag from './lang';
|
||||
const mimes = {
|
||||
'jpg': 'image/jpeg',
|
||||
'png': 'image/png',
|
||||
'gif': 'image/gif',
|
||||
'svg': 'image/svg+xml',
|
||||
'psd': 'image/photoshop'
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
|
||||
field: {
|
||||
type: String,
|
||||
default: 'avatar'
|
||||
},
|
||||
// 上传地址
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 其他要上传文件附带的数据，对象格式
|
||||
params: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
// 剪裁图片的宽
|
||||
width: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 剪裁图片的高
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 不预览圆形图片
|
||||
noCircle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 单文件大小限制
|
||||
maxSize: {
|
||||
type: Number,
|
||||
default: 10240
|
||||
},
|
||||
// 语言类型
|
||||
langType: {
|
||||
type: String,
|
||||
'default': 'zh'
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
let that = this,
|
||||
{
|
||||
langType,
|
||||
width,
|
||||
height
|
||||
} = that,
|
||||
isSupported = true,
|
||||
lang = langBag[langType] ? langBag[langType] : lang['zh'];
|
||||
|
||||
if (typeof FormData != 'function') {
|
||||
isSupported = false;
|
||||
}
|
||||
return {
|
||||
show: true,
|
||||
// 图片的mime
|
||||
mime:mimes['jpg'],
|
||||
// 语言包
|
||||
lang,
|
||||
// 浏览器是否支持该控件
|
||||
isSupported,
|
||||
// 步骤
|
||||
step: 1, //1选择文件 2剪裁 3上传
|
||||
// 上传状态及进度
|
||||
loading: 0, //0未开始 1正在 2成功 3错误
|
||||
progress: 0,
|
||||
// 是否有错误及错误信息
|
||||
hasError: false,
|
||||
errorMsg: '',
|
||||
// 需求图宽高比
|
||||
ratio: width / height,
|
||||
// 原图地址、生成图片地址
|
||||
sourceImg: null,
|
||||
sourceImgUrl: '',
|
||||
createImgUrl: '',
|
||||
// 原图片拖动事件初始值
|
||||
sourceImgMouseDown: {
|
||||
on: false,
|
||||
mX: 0, //鼠标按下的坐标
|
||||
mY: 0,
|
||||
x: 0, //scale原图坐标
|
||||
y: 0
|
||||
},
|
||||
// 生成图片预览的容器大小
|
||||
previewContainer: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
// 原图容器宽高
|
||||
sourceImgContainer: { // sic
|
||||
width: 240,
|
||||
height: 180
|
||||
},
|
||||
// 原图展示属性
|
||||
scale: {
|
||||
zoomAddOn: false, //按钮缩放事件开启
|
||||
zoomSubOn: false, //按钮缩放事件开启
|
||||
range: 1, //最大100
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
maxWidth: 0,
|
||||
maxHeight: 0,
|
||||
minWidth: 0, //最宽
|
||||
minHeight: 0,
|
||||
naturalWidth: 0, //原宽
|
||||
naturalHeight: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 进度条样式
|
||||
progressStyle() {
|
||||
let {
|
||||
progress
|
||||
} = this;
|
||||
return {
|
||||
width: progress + '%'
|
||||
}
|
||||
},
|
||||
// 原图样式
|
||||
sourceImgStyle() {
|
||||
let {
|
||||
scale,
|
||||
sourceImgMasking
|
||||
} = this;
|
||||
return {
|
||||
top: scale.y + sourceImgMasking.y + 'px',
|
||||
left: scale.x + sourceImgMasking.x + 'px',
|
||||
width: scale.width + 'px',
|
||||
height: scale.height + 'px'
|
||||
}
|
||||
},
|
||||
// 原图蒙版属性
|
||||
sourceImgMasking() {
|
||||
let {
|
||||
width,
|
||||
height,
|
||||
ratio,
|
||||
sourceImgContainer
|
||||
} = this,
|
||||
sic = sourceImgContainer,
|
||||
sicRatio = sic.width / sic.height, // 原图容器宽高比
|
||||
x = 0,
|
||||
y = 0,
|
||||
w = sic.width,
|
||||
h = sic.height,
|
||||
scale = 1;
|
||||
if (ratio < sicRatio) {
|
||||
scale = sic.height / height;
|
||||
w = sic.height * ratio;
|
||||
x = (sic.width - w) / 2;
|
||||
}
|
||||
if (ratio > sicRatio) {
|
||||
scale = sic.width / width;
|
||||
h = sic.width / ratio;
|
||||
y = (sic.height - h) / 2;
|
||||
}
|
||||
return {
|
||||
scale, // 蒙版相对需求宽高的缩放
|
||||
x,
|
||||
y,
|
||||
width: w,
|
||||
height: h
|
||||
};
|
||||
},
|
||||
// 原图遮罩样式
|
||||
sourceImgShadeStyle() {
|
||||
let sic = this.sourceImgContainer,
|
||||
sim = this.sourceImgMasking,
|
||||
w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2,
|
||||
h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
};
|
||||
},
|
||||
previewStyle() {
|
||||
let {
|
||||
width,
|
||||
height,
|
||||
ratio,
|
||||
previewContainer
|
||||
} = this,
|
||||
pc = previewContainer,
|
||||
w = pc.width,
|
||||
h = pc.height,
|
||||
pcRatio = w / h;
|
||||
if (ratio < pcRatio) {
|
||||
w = pc.height * ratio;
|
||||
}
|
||||
if (ratio > pcRatio) {
|
||||
h = pc.width / ratio;
|
||||
}
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击波纹效果
|
||||
ripple(e) {
|
||||
effectRipple(e);
|
||||
},
|
||||
// 关闭控件
|
||||
off() {
|
||||
this.show = false;
|
||||
},
|
||||
// 设置步骤
|
||||
setStep(step) {
|
||||
let that = this;
|
||||
setTimeout(function () {
|
||||
that.step = step;
|
||||
}, 200);
|
||||
},
|
||||
/* 图片选择区域函数绑定
|
||||
---------------------------------------------------------------*/
|
||||
preventDefault(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
},
|
||||
handleClick(e) {
|
||||
if (this.loading !== 1) {
|
||||
if (e.target !== this.$refs.fileinput) {
|
||||
e.preventDefault();
|
||||
if (document.activeElement !== this.$refs) {
|
||||
this.$refs.fileinput.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleChange(e) {
|
||||
e.preventDefault();
|
||||
if (this.loading !== 1) {
|
||||
let files = e.target.files || e.dataTransfer.files;
|
||||
this.reset();
|
||||
if (this.checkFile(files[0])) {
|
||||
this.setSourceImg(files[0]);
|
||||
}
|
||||
}
|
||||
},
|
||||
/* ---------------------------------------------------------------*/
|
||||
// 检测选择的文件是否合适
|
||||
checkFile(file) {
|
||||
let that = this,
|
||||
{
|
||||
lang,
|
||||
maxSize
|
||||
} = that;
|
||||
// 仅限图片
|
||||
if (file.type.indexOf('image') === -1) {
|
||||
that.hasError = true;
|
||||
that.errorMsg = lang.error.onlyImg;
|
||||
return false;
|
||||
}
|
||||
this.mime=file.type;
|
||||
// 超出大小
|
||||
if (file.size / 1024 > maxSize) {
|
||||
that.hasError = true;
|
||||
that.errorMsg = lang.error.outOfSize + maxSize + 'kb';
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
// 重置控件
|
||||
reset() {
|
||||
let that = this;
|
||||
that.step = 1;
|
||||
that.loading = 0;
|
||||
that.hasError = false;
|
||||
that.errorMsg = '';
|
||||
that.progress = 0;
|
||||
},
|
||||
// 设置图片源
|
||||
setSourceImg(file) {
|
||||
let that = this,
|
||||
fr = new FileReader();
|
||||
fr.onload = function (e) {
|
||||
that.sourceImgUrl = fr.result;
|
||||
that.startCrop();
|
||||
};
|
||||
fr.readAsDataURL(file);
|
||||
},
|
||||
// 剪裁前准备工作
|
||||
startCrop() {
|
||||
let that = this,
|
||||
{
|
||||
width,
|
||||
height,
|
||||
ratio,
|
||||
scale,
|
||||
sourceImgUrl,
|
||||
sourceImgMasking,
|
||||
lang
|
||||
} = that,
|
||||
sim = sourceImgMasking,
|
||||
img = new Image();
|
||||
img.src = sourceImgUrl;
|
||||
img.onload = function () {
|
||||
let nWidth = img.naturalWidth,
|
||||
nHeight = img.naturalHeight,
|
||||
nRatio = nWidth / nHeight,
|
||||
w = sim.width,
|
||||
h = sim.height,
|
||||
x = 0,
|
||||
y = 0;
|
||||
// 图片像素不达标
|
||||
// if (nWidth < width || nHeight < height) {
|
||||
// that.hasError = true;
|
||||
// that.errorMsg = lang.error.lowestPx + width + '*' + height;
|
||||
// return false;
|
||||
// }
|
||||
if (ratio > nRatio) {
|
||||
h = w / nRatio;
|
||||
y = (sim.height - h) / 2;
|
||||
}
|
||||
if (ratio < nRatio) {
|
||||
w = h * nRatio;
|
||||
x = (sim.width - w) / 2;
|
||||
}
|
||||
scale.range = 0;
|
||||
scale.x = x;
|
||||
scale.y = y;
|
||||
scale.width = w;
|
||||
scale.height = h;
|
||||
scale.minWidth = w;
|
||||
scale.minHeight = h;
|
||||
scale.maxWidth = nWidth * sim.scale;
|
||||
scale.maxHeight = nHeight * sim.scale;
|
||||
scale.naturalWidth = nWidth;
|
||||
scale.naturalHeight = nHeight;
|
||||
that.sourceImg = img;
|
||||
that.createImg();
|
||||
that.setStep(2);
|
||||
};
|
||||
},
|
||||
// 鼠标按下图片准备移动
|
||||
imgStartMove(e) {
|
||||
let {
|
||||
sourceImgMouseDown,
|
||||
scale
|
||||
} = this,
|
||||
simd = sourceImgMouseDown;
|
||||
simd.mX = e.screenX;
|
||||
simd.mY = e.screenY;
|
||||
simd.x = scale.x;
|
||||
simd.y = scale.y;
|
||||
simd.on = true;
|
||||
},
|
||||
// 鼠标按下状态下移动，图片移动
|
||||
imgMove(e) {
|
||||
let {
|
||||
sourceImgMouseDown: {
|
||||
on,
|
||||
mX,
|
||||
mY,
|
||||
x,
|
||||
y
|
||||
},
|
||||
scale,
|
||||
sourceImgMasking
|
||||
} = this,
|
||||
sim = sourceImgMasking,
|
||||
nX = e.screenX,
|
||||
nY = e.screenY,
|
||||
dX = nX - mX,
|
||||
dY = nY - mY,
|
||||
rX = x + dX,
|
||||
rY = y + dY;
|
||||
if (!on) return;
|
||||
if (rX > 0) {
|
||||
rX = 0;
|
||||
}
|
||||
if (rY > 0) {
|
||||
rY = 0;
|
||||
}
|
||||
if (rX < sim.width - scale.width) {
|
||||
rX = sim.width - scale.width;
|
||||
}
|
||||
if (rY < sim.height - scale.height) {
|
||||
rY = sim.height - scale.height;
|
||||
}
|
||||
scale.x = rX;
|
||||
scale.y = rY;
|
||||
},
|
||||
// 按钮按下开始放大
|
||||
startZoomAdd(e) {
|
||||
let that = this,
|
||||
{
|
||||
scale
|
||||
} = that;
|
||||
scale.zoomAddOn = true;
|
||||
function zoom() {
|
||||
if (scale.zoomAddOn) {
|
||||
let range = scale.range >= 100 ? 100 : ++scale.range;
|
||||
that.zoomImg(range);
|
||||
setTimeout(function () {
|
||||
zoom();
|
||||
}, 60);
|
||||
}
|
||||
}
|
||||
|
||||
zoom();
|
||||
},
|
||||
// 按钮松开或移开取消放大
|
||||
endZoomAdd(e) {
|
||||
this.scale.zoomAddOn = false;
|
||||
},
|
||||
// 按钮按下开始缩小
|
||||
startZoomSub(e) {
|
||||
let that = this,
|
||||
{
|
||||
scale
|
||||
} = that;
|
||||
scale.zoomSubOn = true;
|
||||
function zoom() {
|
||||
if (scale.zoomSubOn) {
|
||||
let range = scale.range <= 0 ? 0 : --scale.range;
|
||||
that.zoomImg(range);
|
||||
setTimeout(function () {
|
||||
zoom();
|
||||
}, 60);
|
||||
}
|
||||
}
|
||||
|
||||
zoom();
|
||||
},
|
||||
// 按钮松开或移开取消缩小
|
||||
endZoomSub(e) {
|
||||
let {
|
||||
scale
|
||||
} = this;
|
||||
scale.zoomSubOn = false;
|
||||
},
|
||||
zoomChange(e) {
|
||||
this.zoomImg(e.target.value);
|
||||
},
|
||||
// 缩放原图
|
||||
zoomImg(newRange) {
|
||||
let that = this,
|
||||
{
|
||||
sourceImgMasking,
|
||||
sourceImgMouseDown,
|
||||
scale
|
||||
} = this,
|
||||
{
|
||||
maxWidth,
|
||||
maxHeight,
|
||||
minWidth,
|
||||
minHeight,
|
||||
width,
|
||||
height,
|
||||
x,
|
||||
y,
|
||||
range
|
||||
} = scale,
|
||||
sim = sourceImgMasking,
|
||||
// 蒙版宽高
|
||||
sWidth = sim.width,
|
||||
sHeight = sim.height,
|
||||
// 新宽高
|
||||
nWidth = minWidth + (maxWidth - minWidth) * newRange / 100,
|
||||
nHeight = minHeight + (maxHeight - minHeight) * newRange / 100,
|
||||
// 新坐标（根据蒙版中心点缩放）
|
||||
nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x),
|
||||
nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y);
|
||||
// 判断新坐标是否超过蒙版限制
|
||||
if (nX > 0) {
|
||||
nX = 0;
|
||||
}
|
||||
if (nY > 0) {
|
||||
nY = 0;
|
||||
}
|
||||
if (nX < sWidth - nWidth) {
|
||||
nX = sWidth - nWidth;
|
||||
}
|
||||
if (nY < sHeight - nHeight) {
|
||||
nY = sHeight - nHeight;
|
||||
}
|
||||
// 赋值处理
|
||||
scale.x = nX;
|
||||
scale.y = nY;
|
||||
scale.width = nWidth;
|
||||
scale.height = nHeight;
|
||||
scale.range = newRange;
|
||||
setTimeout(function () {
|
||||
if (scale.range == newRange) {
|
||||
that.createImg();
|
||||
}
|
||||
}, 300);
|
||||
},
|
||||
// 生成需求图片
|
||||
createImg(e) {
|
||||
let that = this,
|
||||
{
|
||||
mime,
|
||||
sourceImg,
|
||||
scale: {
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height
|
||||
},
|
||||
sourceImgMasking: {
|
||||
scale
|
||||
}
|
||||
} = that,
|
||||
canvas = that.$refs.canvas,
|
||||
ctx = canvas.getContext('2d');
|
||||
if (e) {
|
||||
// 取消鼠标按下移动状态
|
||||
that.sourceImgMouseDown.on = false;
|
||||
}
|
||||
ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale);
|
||||
that.createImgUrl = canvas.toDataURL(mime);
|
||||
},
|
||||
// 上传图片
|
||||
upload() {
|
||||
let that = this,
|
||||
{
|
||||
lang,
|
||||
mime,
|
||||
createImgUrl
|
||||
} = this,
|
||||
formData = new FormData();
|
||||
// 上传文件
|
||||
that.loading = 1;
|
||||
that.progress = 0;
|
||||
that.setStep(3);
|
||||
formData.append('file', data2blob(createImgUrl, mime));
|
||||
const token = this.$store.getters.token;
|
||||
getToken(token).then((response)=> {
|
||||
const url = response.data.qiniu_url;
|
||||
formData.append('token', response.data.qiniu_token);
|
||||
formData.append('key', response.data.qiniu_key);
|
||||
upload(formData).then((response)=> {
|
||||
that.loading = 2;
|
||||
that.$emit('crop-upload-success', url);
|
||||
}).catch(err => {
|
||||
that.loading = 3;
|
||||
that.hasError = true;
|
||||
that.errorMsg = lang.fail;
|
||||
that.$emit('crop-upload-fail');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "./upload.css";
|
||||
</style>
|
||||
41
src/components/ImageCropper/lang.js
Normal file
41
src/components/ImageCropper/lang.js
Normal file
@@ -0,0 +1,41 @@
|
||||
const langBag = {
|
||||
zh: {
|
||||
hint: '点击，或拖动图片至此处',
|
||||
loading: '正在上传……',
|
||||
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
|
||||
success: '上传成功',
|
||||
fail: '图片上传失败',
|
||||
preview: '头像预览',
|
||||
btn: {
|
||||
off: '取消',
|
||||
close: '关闭',
|
||||
back: '上一步',
|
||||
save: '保存'
|
||||
},
|
||||
error: {
|
||||
onlyImg: '仅限图片格式',
|
||||
outOfSize: '单文件大小不能超过 ',
|
||||
lowestPx: '图片最低像素为（宽*高）：'
|
||||
}
|
||||
},
|
||||
en: {
|
||||
hint: 'Click, or drag the file here',
|
||||
loading: 'Uploading……',
|
||||
noSupported: 'Browser does not support, please use IE10+ or other browsers',
|
||||
success: 'Upload success',
|
||||
fail: 'Upload failed',
|
||||
preview: 'Preview',
|
||||
btn: {
|
||||
off: 'Cancel',
|
||||
close: 'Close',
|
||||
back: 'Back',
|
||||
save: 'Save'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Image only',
|
||||
outOfSize: 'Image exceeds size limit: ',
|
||||
lowestPx: 'The lowest pixel in the image: '
|
||||
}
|
||||
}
|
||||
};
|
||||
export default langBag;
|
||||
691
src/components/ImageCropper/upload.css
Normal file
691
src/components/ImageCropper/upload.css
Normal file
@@ -0,0 +1,691 @@
|
||||
@charset "UTF-8";
|
||||
@-webkit-keyframes vicp_progress {
|
||||
0% {
|
||||
background-position-y: 0;
|
||||
}
|
||||
100% {
|
||||
background-position-y: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vicp_progress {
|
||||
0% {
|
||||
background-position-y: 0;
|
||||
}
|
||||
100% {
|
||||
background-position-y: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes vicp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0) translatey(-60px);
|
||||
transform: scale(0) translatey(-60px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1) translatey(0);
|
||||
transform: scale(1) translatey(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vicp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0) translatey(-60px);
|
||||
transform: scale(0) translatey(-60px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1) translatey(0);
|
||||
transform: scale(1) translatey(0);
|
||||
}
|
||||
}
|
||||
|
||||
.vue-image-crop-upload {
|
||||
position: fixed;
|
||||
display: block;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.65);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-moz-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap {
|
||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||
position: fixed;
|
||||
display: block;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 600px;
|
||||
height: 330px;
|
||||
padding: 25px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
-webkit-animation: vicp 0.12s ease-in;
|
||||
animation: vicp 0.12s ease-in;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-close {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: -webkit-transform 0.18s;
|
||||
transition: -webkit-transform 0.18s;
|
||||
transition: transform 0.18s;
|
||||
transition: transform 0.18s, -webkit-transform 0.18s;
|
||||
-webkit-transform: rotate(0);
|
||||
-ms-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
|
||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 4px;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
|
||||
position: relative;
|
||||
padding: 35px;
|
||||
height: 200px;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
text-align: center;
|
||||
border: 1px dashed rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
|
||||
display: block;
|
||||
margin: 0 auto 6px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 14.7px solid transparent;
|
||||
border-right: 14.7px solid transparent;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
|
||||
display: block;
|
||||
width: 12.6px;
|
||||
height: 14.7px;
|
||||
margin: 0 auto;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 12.6px;
|
||||
border: 6px solid rgba(0, 0, 0, 0.3);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 30px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 30px;
|
||||
background-color: #eee;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
|
||||
cursor: pointer;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
background-color: #e5e5e0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
|
||||
position: absolute;
|
||||
display: block;
|
||||
cursor: move;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
|
||||
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||
position: absolute;
|
||||
background-color: rgba(241, 242, 243, 0.8);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
|
||||
position: relative;
|
||||
margin: 30px 0;
|
||||
width: 240px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
|
||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 3px;
|
||||
top: 8px;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 3px;
|
||||
top: 8px;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
top: 3px;
|
||||
left: 8px;
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
margin: 0 auto;
|
||||
width: 180px;
|
||||
height: 8px;
|
||||
vertical-align: top;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
/* 滑块
|
||||
---------------------------------------------------------------*/
|
||||
/* 轨道
|
||||
---------------------------------------------------------------*/
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin-top: -3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #61c091;
|
||||
border-radius: 100%;
|
||||
border: none;
|
||||
-webkit-transition: 0.2s;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-thumb {
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #61c091;
|
||||
border-radius: 100%;
|
||||
border: none;
|
||||
-webkit-transition: 0.2s;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-thumb {
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #61c091;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
-webkit-transition: 0.2s;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-webkit-slider-thumb {
|
||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||
margin-top: -4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-runnable-track {
|
||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
background-color: rgba(68, 170, 119, 0.3);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-track {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
background-color: rgba(68, 170, 119, 0.3);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-track {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
height: 6px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
|
||||
background-color: rgba(68, 170, 119, 0.3);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
|
||||
background-color: rgba(68, 170, 119, 0.15);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background-color: rgba(68, 170, 119, 0.5);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
|
||||
background-color: rgba(68, 170, 119, 0.5);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
|
||||
background-color: rgba(68, 170, 119, 0.45);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
|
||||
background-color: rgba(68, 170, 119, 0.25);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #bbb;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
padding: 3px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item:last-child img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
|
||||
position: relative;
|
||||
padding: 35px;
|
||||
height: 200px;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
text-align: center;
|
||||
border: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
|
||||
margin-top: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background-color: #4a7;
|
||||
-webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
|
||||
box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
|
||||
-webkit-transition: width 0.15s linear;
|
||||
transition: width 0.15s linear;
|
||||
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
|
||||
background-size: 40px 40px;
|
||||
-webkit-animation: vicp_progress 0.5s linear infinite;
|
||||
animation: vicp_progress 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 1px solid rgba(245, 246, 247, 0.7);
|
||||
-webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
|
||||
box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
|
||||
border-radius: 100%;
|
||||
background-color: #4a7;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-operate {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-operate a {
|
||||
position: relative;
|
||||
float: left;
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #4a7;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-error,
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-success {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
color: #d10;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-success {
|
||||
color: #4a7;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-icon3 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 6px;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-color: #4a7;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-icon2 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 4px;
|
||||
width: 13px;
|
||||
height: 2px;
|
||||
background-color: #d10;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.e-ripple {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background-clip: padding-box;
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.e-ripple.z-active {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(2);
|
||||
-ms-transform: scale(2);
|
||||
transform: scale(2);
|
||||
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
|
||||
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
|
||||
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
|
||||
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
|
||||
}
|
||||
58
src/components/ImageCropper/utils.js
Normal file
58
src/components/ImageCropper/utils.js
Normal file
@@ -0,0 +1,58 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
*
|
||||
* @param e
|
||||
* @param arg_opts
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function effectRipple(e, arg_opts) {
|
||||
let opts = Object.assign({
|
||||
ele: e.target, // 波纹作用元素
|
||||
type: 'hit', // hit点击位置扩散 center中心点扩展
|
||||
bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
|
||||
}, arg_opts),
|
||||
target = opts.ele;
|
||||
if (target) {
|
||||
let rect = target.getBoundingClientRect(),
|
||||
ripple = target.querySelector('.e-ripple');
|
||||
if (!ripple) {
|
||||
ripple = document.createElement('span');
|
||||
ripple.className = 'e-ripple';
|
||||
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
|
||||
target.appendChild(ripple);
|
||||
} else {
|
||||
ripple.className = 'e-ripple';
|
||||
}
|
||||
switch (opts.type) {
|
||||
case 'center':
|
||||
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
|
||||
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
|
||||
break;
|
||||
default:
|
||||
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
|
||||
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
|
||||
}
|
||||
ripple.style.backgroundColor = opts.bgc;
|
||||
ripple.className = 'e-ripple z-active';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// database64文件格式转换为2进制
|
||||
/**
|
||||
*
|
||||
* @param data
|
||||
* @param mime
|
||||
* @returns {*}
|
||||
*/
|
||||
export function data2blob(data, mime) {
|
||||
// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
|
||||
data = data.split(',')[1];
|
||||
data = window.atob(data);
|
||||
var ia = new Uint8Array(data.length);
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
ia[i] = data.charCodeAt(i);
|
||||
}
|
||||
// canvas.toDataURL 返回的默认格式就是 image/png
|
||||
return new Blob([ia], {type: mime});
|
||||
};
|
||||
407
src/components/MDinput/index.vue
Normal file
407
src/components/MDinput/index.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="material-input__component" :class="computedClasses">
|
||||
<input
|
||||
v-if="type === 'email'"
|
||||
type="email"
|
||||
class="material-input"
|
||||
:name="name"
|
||||
:id="id"
|
||||
:placeholder="placeholder"
|
||||
v-model="valueCopy"
|
||||
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
:autocomplete="autocomplete"
|
||||
|
||||
:required="required"
|
||||
|
||||
@focus="handleFocus(true)"
|
||||
@blur="handleFocus(false)"
|
||||
@input="handleModelInput"
|
||||
>
|
||||
<input
|
||||
v-if="type === 'url'"
|
||||
type="url"
|
||||
class="material-input"
|
||||
:name="name"
|
||||
:id="id"
|
||||
:placeholder="placeholder"
|
||||
v-model="valueCopy"
|
||||
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
:autocomplete="autocomplete"
|
||||
|
||||
:required="required"
|
||||
|
||||
@focus="handleFocus(true)"
|
||||
@blur="handleFocus(false)"
|
||||
@input="handleModelInput"
|
||||
>
|
||||
<input
|
||||
v-if="type === 'number'"
|
||||
type="number"
|
||||
class="material-input"
|
||||
:name="name"
|
||||
:id="id"
|
||||
:placeholder="placeholder"
|
||||
v-model="valueCopy"
|
||||
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
:autocomplete="autocomplete"
|
||||
|
||||
:max="max"
|
||||
:min="min"
|
||||
:minlength="minlength"
|
||||
:maxlength="maxlength"
|
||||
:required="required"
|
||||
|
||||
@focus="handleFocus(true)"
|
||||
@blur="handleFocus(false)"
|
||||
@input="handleModelInput"
|
||||
>
|
||||
<input
|
||||
v-if="type === 'password'"
|
||||
type="password"
|
||||
class="material-input"
|
||||
:name="name"
|
||||
:id="id"
|
||||
:placeholder="placeholder"
|
||||
v-model="valueCopy"
|
||||
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
:autocomplete="autocomplete"
|
||||
|
||||
:max="max"
|
||||
:min="min"
|
||||
:required="required"
|
||||
|
||||
@focus="handleFocus(true)"
|
||||
@blur="handleFocus(false)"
|
||||
@input="handleModelInput"
|
||||
>
|
||||
<input
|
||||
v-if="type === 'tel'"
|
||||
type="tel"
|
||||
class="material-input"
|
||||
:name="name"
|
||||
:id="id"
|
||||
:placeholder="placeholder"
|
||||
v-model="valueCopy"
|
||||
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
:autocomplete="autocomplete"
|
||||
|
||||
:required="required"
|
||||
|
||||
@focus="handleFocus(true)"
|
||||
@blur="handleFocus(false)"
|
||||
@input="handleModelInput"
|
||||
>
|
||||
<input
|
||||
v-if="type === 'text'"
|
||||
type="text"
|
||||
class="material-input"
|
||||
:name="name"
|
||||
:id="id"
|
||||
:placeholder="placeholder"
|
||||
v-model="valueCopy"
|
||||
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
:autocomplete="autocomplete"
|
||||
|
||||
:minlength="minlength"
|
||||
:maxlength="maxlength"
|
||||
:required="required"
|
||||
|
||||
@focus="handleFocus(true)"
|
||||
@blur="handleFocus(false)"
|
||||
@input="handleModelInput"
|
||||
>
|
||||
|
||||
<span class="material-input-bar"></span>
|
||||
|
||||
<label class="material-label">
|
||||
<slot></slot>
|
||||
</label>
|
||||
<div v-if="errorMessages" class="material-errors">
|
||||
<div v-for="error in computedErrors" class="material-error">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'material-input',
|
||||
computed: {
|
||||
computedErrors() {
|
||||
return typeof this.errorMessages === 'string'
|
||||
? [this.errorMessages] : this.errorMessages
|
||||
},
|
||||
computedClasses() {
|
||||
return {
|
||||
'material--active': this.focus,
|
||||
'material--disabled': this.disabled,
|
||||
'material--has-errors': Boolean(
|
||||
!this.valid ||
|
||||
(this.errorMessages && this.errorMessages.length)),
|
||||
'material--raised': Boolean(
|
||||
this.focus ||
|
||||
this.valueCopy || // has value
|
||||
(this.placeholder && !this.valueCopy)) // has placeholder
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
valueCopy: null,
|
||||
focus: false,
|
||||
valid: true
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// Here we are following the Vue2 convention on custom v-model:
|
||||
// https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
|
||||
this.copyValue(this.value)
|
||||
},
|
||||
methods: {
|
||||
handleModelInput(event) {
|
||||
this.$emit('input', event.target.value, event)
|
||||
this.handleValidation()
|
||||
},
|
||||
handleFocus(focused) {
|
||||
this.focus = focused
|
||||
},
|
||||
handleValidation() {
|
||||
this.valid = this.$el ? this.$el.querySelector(
|
||||
'.material-input').validity.valid : this.valid
|
||||
},
|
||||
copyValue(value) {
|
||||
this.valueCopy = value
|
||||
this.handleValidation()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newValue) {
|
||||
this.copyValue(newValue)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
value: {
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
min: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
max: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
minlength: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autocomplete: {
|
||||
type: String,
|
||||
default: 'off'
|
||||
},
|
||||
errorMessages: {
|
||||
type: [Array, String],
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
// Fonts:
|
||||
$font-size-base: 16px;
|
||||
$font-size-small: 18px;
|
||||
$font-size-smallest: 12px;
|
||||
$font-weight-normal: normal;
|
||||
// Utils
|
||||
$spacer: 12px;
|
||||
$transition: 0.2s ease all;
|
||||
// Base clases:
|
||||
%base-bar-pseudo {
|
||||
content: '';
|
||||
height: 1px;
|
||||
width: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
// Mixins:
|
||||
@mixin slided-top() {
|
||||
top: -2 * $spacer;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
// Component:
|
||||
.material-input__component {
|
||||
/*margin-top: 30px;*/
|
||||
position: relative;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.material-input {
|
||||
font-size: $font-size-base;
|
||||
padding: $spacer $spacer $spacer $spacer / 2;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid transparent; // fixes the height issue
|
||||
}
|
||||
}
|
||||
.material-label {
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-normal;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0;
|
||||
top: $spacer;
|
||||
transition: $transition;
|
||||
}
|
||||
.material-input-bar {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
&:before {
|
||||
@extend %base-bar-pseudo;
|
||||
left: 50%;
|
||||
}
|
||||
&:after {
|
||||
@extend %base-bar-pseudo;
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
// Disabled state:
|
||||
&.material--disabled {
|
||||
.material-input {
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
}
|
||||
// Raised state:
|
||||
&.material--raised {
|
||||
.material-label {
|
||||
@include slided-top();
|
||||
}
|
||||
}
|
||||
// Active state:
|
||||
&.material--active {
|
||||
.material-input-bar {
|
||||
&:before,
|
||||
&:after {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Errors:
|
||||
.material-errors {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.material-error {
|
||||
font-size: $font-size-smallest;
|
||||
line-height: $font-size-smallest + 2px;
|
||||
overflow: hidden;
|
||||
margin-top: 0;
|
||||
padding-top: $spacer / 2;
|
||||
padding-right: $spacer / 2;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Theme:
|
||||
$color-white: white;
|
||||
$color-grey: #9E9E9E;
|
||||
$color-grey-light: #E0E0E0;
|
||||
$color-blue: #2196F3;
|
||||
$color-red: #F44336;
|
||||
$color-black: black;
|
||||
.material-input__component {
|
||||
background: $color-white;
|
||||
.material-input {
|
||||
background: none;
|
||||
color: $color-black;
|
||||
text-indent: 30px;
|
||||
border-bottom: 1px solid $color-grey-light;
|
||||
}
|
||||
.material-label {
|
||||
color: $color-grey;
|
||||
}
|
||||
.material-input-bar {
|
||||
&:before,
|
||||
&:after {
|
||||
background: $color-blue;
|
||||
}
|
||||
}
|
||||
// Active state:
|
||||
&.material--active {
|
||||
.material-label {
|
||||
color: $color-blue;
|
||||
}
|
||||
}
|
||||
// Errors:
|
||||
&.material--has-errors {
|
||||
// These styles are required
|
||||
// for custom validation:
|
||||
&.material--active .material-label {
|
||||
color: $color-red;
|
||||
}
|
||||
.material-input-bar {
|
||||
&:before,
|
||||
&:after {
|
||||
background: $color-red;
|
||||
}
|
||||
}
|
||||
.material-errors {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
src/components/MdEditor/index.vue
Normal file
108
src/components/MdEditor/index.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class='simplemde-container'>
|
||||
<textarea :id='id'>
|
||||
</textarea>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'simplemde/dist/simplemde.min.css'
|
||||
import SimpleMDE from 'simplemde'
|
||||
export default {
|
||||
name: 'Sticky',
|
||||
props: {
|
||||
value: String,
|
||||
id: {
|
||||
type: String,
|
||||
default: 'markdown-editor'
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
toolbar: {
|
||||
type: Array
|
||||
// default() {
|
||||
// return ['bold', '|', 'link']
|
||||
// }
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
simplemde: null,
|
||||
hasChange: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val === this.simplemde.value() && !this.hasChange) return;
|
||||
this.simplemde.value(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.simplemde = new SimpleMDE({
|
||||
element: document.getElementById(this.id),
|
||||
autofocus: this.autofocus,
|
||||
toolbar: this.toolbar,
|
||||
spellChecker: false,
|
||||
insertTexts: {
|
||||
link: ['[', ']( )']
|
||||
},
|
||||
// hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
|
||||
placeholder: this.placeholder
|
||||
});
|
||||
if (this.value) {
|
||||
this.simplemde.value(this.value);
|
||||
}
|
||||
|
||||
this.simplemde.codemirror.on('change', () => {
|
||||
if (this.hasChange) {
|
||||
this.hasChange = true
|
||||
}
|
||||
this.$emit('input', this.simplemde.value());
|
||||
});
|
||||
},
|
||||
destroyed() {
|
||||
this.simplemde = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.simplemde-container .CodeMirror {
|
||||
height: 150px;
|
||||
min-height: 150px;
|
||||
}
|
||||
.simplemde-container .CodeMirror-scroll{
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.simplemde-container .CodeMirror-code{
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.simplemde-container .editor-statusbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
|
||||
color: #1482F0;
|
||||
}
|
||||
|
||||
.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
|
||||
color: #2d3b4d;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
|
||||
padding: 0 2px;
|
||||
font-weight: bold;
|
||||
color: #E61E1E;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
145
src/components/PanThumb/index.vue
Normal file
145
src/components/PanThumb/index.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
|
||||
<div class="pan-info">
|
||||
<div class="pan-info-roles-container">
|
||||
<slot>pan</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pan-thumb" :style="{ backgroundImage: 'url('+ image+')' }"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'PanThumb',
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '150px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pan-item {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.pan-info-roles-container {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pan-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
transform-origin: 95% 40%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.pan-thumb:after {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 40%;
|
||||
left: 95%;
|
||||
margin: -4px 0 0 -4px;
|
||||
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);
|
||||
}
|
||||
|
||||
.pan-info {
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.pan-info h3 {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
letter-spacing: 2px;
|
||||
font-size: 18px;
|
||||
margin: 0 60px;
|
||||
padding: 22px 0 0 0;
|
||||
height: 85px;
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
text-shadow: 0 0 1px #fff,
|
||||
0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.pan-info p {
|
||||
color: #fff;
|
||||
padding: 10px 5px;
|
||||
font-style: italic;
|
||||
margin: 0 30px;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.pan-info p a {
|
||||
display: block;
|
||||
color: #333;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 9px;
|
||||
letter-spacing: 1px;
|
||||
padding-top: 24px;
|
||||
margin: 7px auto 0;
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
opacity: 0;
|
||||
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);
|
||||
}
|
||||
|
||||
.pan-info p a:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.pan-item:hover .pan-thumb {
|
||||
transform: rotate(-110deg);
|
||||
}
|
||||
|
||||
.pan-item:hover .pan-info p a {
|
||||
opacity: 1;
|
||||
transform: translateX(0px) rotate(0deg);
|
||||
}
|
||||
</style>
|
||||
61
src/components/SplitPane/Pane.vue
Normal file
61
src/components/SplitPane/Pane.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.splitter-pane.vertical.splitter-paneL{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.splitter-pane.vertical.splitter-paneR{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.splitter-pane.horizontal.splitter-paneL{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.splitter-pane.horizontal.splitter-paneR{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
75
src/components/SplitPane/Resizer.vue
Normal file
75
src/components/SplitPane/Resizer.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div :class="classes" @mousedown="onMouseDown"></div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.Resizer {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
opacity: .2;
|
||||
z-index: 1;
|
||||
/*-moz-background-clip: padding;*/
|
||||
/*-webkit-background-clip: padding;*/
|
||||
/*background-clip: padding-box;*/
|
||||
}
|
||||
|
||||
/*.Resizer:hover {*/
|
||||
/*-webkit-transition: all 2s ease;*/
|
||||
/*transition: all 2s ease;*/
|
||||
/*}*/
|
||||
|
||||
.Resizer.horizontal {
|
||||
height: 11px;
|
||||
margin: -5px 0;
|
||||
border-top: 5px solid rgba(255, 255, 255, 0);
|
||||
border-bottom: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: row-resize;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Resizer.horizontal:hover {
|
||||
border-top: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.Resizer.vertical:hover {
|
||||
border-left: 5px solid rgba(0, 0, 0, 0.5);
|
||||
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>
|
||||
175
src/components/SplitPane/SplitPane-backup.vue
Normal file
175
src/components/SplitPane/SplitPane-backup.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<!--<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>
|
||||
117
src/components/SplitPane/SplitPane.vue
Normal file
117
src/components/SplitPane/SplitPane.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div ref :style="{ cursor, userSelect}" class="vue-splitter-container clearfix" @mouseup="onMouseUp"
|
||||
@mousemove="onMouseMove">
|
||||
<Pane class="splitter-pane splitter-paneL" :split="split" :style="{ [type]: percent+'%'}">
|
||||
<slot name="paneL"></slot>
|
||||
</Pane>
|
||||
<Resizer :style="{ [resizeType]: percent+'%'}" :split="split" :onMouseDown="onMouseDown"
|
||||
@click="onClick"></Resizer>
|
||||
<Pane class="splitter-pane splitter-paneR" :split="split" :style="{ [type]: 100-percent+'%'}">
|
||||
<slot name="paneR"></slot>
|
||||
</Pane>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
.vue-splitter-container {
|
||||
height: 100%;
|
||||
/*display: flex;*/
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Resizer from './Resizer';
|
||||
import Pane from './Pane';
|
||||
export default {
|
||||
name: 'splitPane',
|
||||
components: { Resizer, Pane },
|
||||
props: {
|
||||
margin: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
split: {
|
||||
validator(value) {
|
||||
return ['vertical', 'horizontal'].indexOf(value) >= 0
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: false,
|
||||
hasMoved: false,
|
||||
height: null,
|
||||
percent: 50,
|
||||
type: this.split === 'vertical' ? 'width' : 'height',
|
||||
resizeType: this.split === 'vertical' ? 'left' : 'top'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userSelect() {
|
||||
return this.active ? 'none' : ''
|
||||
},
|
||||
cursor() {
|
||||
return this.active ? 'col-resize' : ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const element = this.$el;
|
||||
const elementOffset = element.getBoundingClientRect();
|
||||
console.log(elementOffset.height)
|
||||
// this.height = elementOffset.height+'px';
|
||||
},
|
||||
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;
|
||||
if (this.split === 'vertical') {
|
||||
while (target) {
|
||||
offset += target.offsetLeft;
|
||||
target = target.offsetParent;
|
||||
}
|
||||
} else {
|
||||
while (target) {
|
||||
offset += target.offsetTop;
|
||||
target = target.offsetParent;
|
||||
}
|
||||
}
|
||||
|
||||
const currentPage = this.split === 'vertical' ? e.pageX : e.pageY;
|
||||
const targetOffset = this.split === 'vertical' ? e.currentTarget.offsetWidth : e.currentTarget.offsetHeight;
|
||||
const percent = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
|
||||
if (percent > this.margin && percent < 100 - this.margin) {
|
||||
this.percent = percent;
|
||||
}
|
||||
this.$emit('resize');
|
||||
this.hasMoved = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
7
src/components/SplitPane/index.js
Normal file
7
src/components/SplitPane/index.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import SplitPane from './a.vue';
|
||||
import Pane from './Pane.vue';
|
||||
|
||||
export {
|
||||
SplitPane,
|
||||
Pane
|
||||
}
|
||||
73
src/components/Sticky/index.vue
Normal file
73
src/components/Sticky/index.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div :style="{height:height+'px',zIndex:zIndex}">
|
||||
<div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
|
||||
<slot>
|
||||
<div>sticky</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Sticky',
|
||||
props: {
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: false,
|
||||
position: '',
|
||||
currentTop: '',
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
child: null,
|
||||
stickyHeight: 0
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
sticky() {
|
||||
if (this.active) {
|
||||
return
|
||||
}
|
||||
this.position = 'fixed';
|
||||
this.active = true;
|
||||
this.width = this.width + 'px';
|
||||
},
|
||||
reset() {
|
||||
if (!this.active) {
|
||||
return
|
||||
}
|
||||
this.position = '';
|
||||
this.width = 'auto'
|
||||
this.active = false
|
||||
},
|
||||
handleScroll() {
|
||||
this.width = this.$el.getBoundingClientRect().width;
|
||||
const offsetTop = this.$el.getBoundingClientRect().top;
|
||||
if (offsetTop <= this.stickyTop) {
|
||||
this.sticky();
|
||||
return
|
||||
}
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.height = this.$el.getBoundingClientRect().height;
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
119
src/components/Tinymce/components/editorAudio.vue
Normal file
119
src/components/Tinymce/components/editorAudio.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-button :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传音频
|
||||
</el-button>
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
|
||||
<el-upload
|
||||
class="editor-audio-upload"
|
||||
action="https://upload.qbox.me"
|
||||
:data="dataObj"
|
||||
:show-file-list="true"
|
||||
:file-list="audioList"
|
||||
:on-success="handleAudioScucess"
|
||||
:on-change="handleAudioChange"
|
||||
:before-upload="audioBeforeUpload">
|
||||
<el-button size="small" type="primary">上传音频</el-button>
|
||||
</el-upload>
|
||||
<el-form-item prop="url" label="音频URL">
|
||||
<el-input v-model="form.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="音频标题">
|
||||
<el-input v-model="form.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="音频文本">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2}" v-model="form.text"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getToken } from 'api/qiniu';
|
||||
|
||||
export default {
|
||||
name: 'editorAudioUpload',
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#20a0ff'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dataObj: { token: '', key: '' },
|
||||
audioList: [],
|
||||
tempAudioUrl: '',
|
||||
form: {
|
||||
title: '',
|
||||
url: '',
|
||||
text: ''
|
||||
},
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, trigger: 'blur' }
|
||||
],
|
||||
url: [
|
||||
{ required: true, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.$emit('successCBK', this.form);
|
||||
this.dialogVisible = false;
|
||||
this.form = {
|
||||
title: '',
|
||||
url: '',
|
||||
text: ''
|
||||
}
|
||||
} else {
|
||||
this.$message('填写有误');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleAudioChange(file, fileList) {
|
||||
this.audioList = fileList.slice(-1);
|
||||
},
|
||||
handleAudioScucess() {
|
||||
this.form.url = this.tempAudioUrl
|
||||
},
|
||||
audioBeforeUpload() {
|
||||
const _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key;
|
||||
const token = response.data.qiniu_token;
|
||||
_self._data.dataObj.token = token;
|
||||
_self._data.dataObj.key = key;
|
||||
this.tempAudioUrl = response.data.qiniu_url;
|
||||
resolve(true);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.upload-container {
|
||||
.editor-audio-upload {
|
||||
button {
|
||||
float: left;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
src/components/Tinymce/components/editorImage.vue
Normal file
85
src/components/Tinymce/components/editorImage.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
|
||||
</el-button>
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<el-upload
|
||||
class="editor-slide-upload"
|
||||
action="https://upload.qbox.me"
|
||||
:data="dataObj"
|
||||
:multiple="true"
|
||||
:file-list="fileList"
|
||||
:show-file-list="true"
|
||||
list-type="picture-card"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeUpload">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getToken } from 'api/qiniu';
|
||||
|
||||
export default {
|
||||
name: 'editorSlideUpload',
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#20a0ff'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dataObj: { token: '', key: '' },
|
||||
list: [],
|
||||
fileList: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
const arr = this.list.map(v => v.url);
|
||||
this.$emit('successCBK', arr);
|
||||
this.list = [];
|
||||
this.fileList = [];
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
handleRemove(file) {
|
||||
const key = file.response.key;
|
||||
for (let i = 0, len = this.list.length; i < len; i++) {
|
||||
if (this.list[i].key === key) {
|
||||
this.list.splice(i, 1);
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpload() {
|
||||
const _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key;
|
||||
const token = response.data.qiniu_token;
|
||||
_self._data.dataObj.token = token;
|
||||
_self._data.dataObj.key = key;
|
||||
this.list.push({ key, url: response.data.qiniu_url });
|
||||
resolve(true);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.upload-container {
|
||||
.editor-slide-upload {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
src/components/Tinymce/components/editorSlide.vue
Normal file
82
src/components/Tinymce/components/editorSlide.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-button :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传轮播图
|
||||
</el-button>
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<el-upload
|
||||
class="editor-slide-upload"
|
||||
action="https://upload.qbox.me"
|
||||
:data="dataObj"
|
||||
:multiple="true"
|
||||
:show-file-list="true"
|
||||
list-type="picture-card"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeUpload">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getToken } from 'api/qiniu';
|
||||
|
||||
export default {
|
||||
name: 'editorSlideUpload',
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#20a0ff'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dataObj: { token: '', key: '' },
|
||||
list: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
const arr = this.list.map(v => v.url);
|
||||
this.$emit('successCBK', arr);
|
||||
this.list = [];
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
handleRemove(file) {
|
||||
const key = file.response.key;
|
||||
for (let i = 0, len = this.list.length; i < len; i++) {
|
||||
if (this.list[i].key === key) {
|
||||
this.list.splice(i, 1);
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpload() {
|
||||
const _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key;
|
||||
const token = response.data.qiniu_token;
|
||||
_self._data.dataObj.token = token;
|
||||
_self._data.dataObj.key = key;
|
||||
this.list.push({ key, url: response.data.qiniu_url });
|
||||
resolve(true);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.upload-container {
|
||||
.editor-slide-upload {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
167
src/components/Tinymce/components/editorVideo.vue
Normal file
167
src/components/Tinymce/components/editorVideo.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-button :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传视频</el-button>
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
|
||||
<el-upload
|
||||
class="editor-video-upload"
|
||||
action="https://upload.qbox.me"
|
||||
:data="dataObj"
|
||||
:show-file-list="true"
|
||||
:file-list="videoList"
|
||||
:on-success="handleVideoScucess"
|
||||
:on-change="handleVideoChange"
|
||||
:before-upload="videoBeforeUpload">
|
||||
<el-button size="small" type="primary">上传视频</el-button>
|
||||
</el-upload>
|
||||
<el-form-item prop="url" label="视频URL">
|
||||
<el-input v-model="form.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="title" label="视频标题">
|
||||
<el-input v-model="form.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传视频封面图">
|
||||
</el-form-item>
|
||||
<el-upload
|
||||
class="image-uploader"
|
||||
action="https://upload.qbox.me"
|
||||
:show-file-list="false"
|
||||
:data="dataObj"
|
||||
:on-success="handleImageScucess"
|
||||
:before-upload="beforeImageUpload">
|
||||
<img v-if="form.image" :src="form.image" class="image-uploader-image">
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getToken } from 'api/qiniu';
|
||||
|
||||
export default {
|
||||
name: 'editorVideoUpload',
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#20a0ff'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dataObj: { token: '', key: '' },
|
||||
videoList: [],
|
||||
tempVideoUrl: '',
|
||||
tempImageUrl: '',
|
||||
form: {
|
||||
title: '',
|
||||
url: '',
|
||||
image: ''
|
||||
},
|
||||
rules: {
|
||||
url: [
|
||||
{ required: true, trigger: 'blur' }
|
||||
],
|
||||
title: [
|
||||
{ required: true, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.image.length > 0) {
|
||||
this.$emit('successCBK', this.form);
|
||||
this.dialogVisible = false;
|
||||
this.form = {
|
||||
title: '',
|
||||
url: '',
|
||||
image: ''
|
||||
}
|
||||
} else {
|
||||
this.$message('请上传图片');
|
||||
}
|
||||
} else {
|
||||
this.$message('填写有误');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleVideoChange(file, fileList) {
|
||||
this.videoList = fileList.slice(-1);
|
||||
},
|
||||
handleVideoScucess() {
|
||||
this.form.url = this.tempVideoUrl
|
||||
},
|
||||
videoBeforeUpload() {
|
||||
const _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key;
|
||||
const token = response.data.qiniu_token;
|
||||
_self._data.dataObj.token = token;
|
||||
_self._data.dataObj.key = key;
|
||||
this.tempVideoUrl = response.data.qiniu_url;
|
||||
resolve(true);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
},
|
||||
handleImageScucess() {
|
||||
this.form.image = this.tempImageUrl
|
||||
},
|
||||
beforeImageUpload() {
|
||||
const _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key;
|
||||
const token = response.data.qiniu_token;
|
||||
_self._data.dataObj.token = token;
|
||||
_self._data.dataObj.key = key;
|
||||
this.tempImageUrl = response.data.qiniu_url;
|
||||
resolve(true);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.upload-container {
|
||||
.editor-video-upload {
|
||||
button {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.image-uploader {
|
||||
margin: 5px auto;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
line-height: 200px;
|
||||
i {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
}
|
||||
.image-uploader-image {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
251
src/components/Tinymce/index.vue
Normal file
251
src/components/Tinymce/index.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class='tinymce-container editor-container'>
|
||||
<textarea class='tinymce-textarea' :id="id"></textarea>
|
||||
<div class="editor-custom-btn-container">
|
||||
<editorSlide v-if="customButton.indexOf('editorSlide')>=0" color="#3A71A8" class="editor-upload-btn" @successCBK="slideSuccessCBK"></editorSlide>
|
||||
<editorAudio v-if="customButton.indexOf('editorAudio')>=0" color="#30B08F" class="editor-upload-btn" @successCBK="aduioSuccessCBK"></editorAudio>
|
||||
<editorVideo v-if="customButton.indexOf('editorVideo')>=0" color="#E65D6E" class="editor-upload-btn" @successCBK="videoSuccessCBK"></editorVideo>
|
||||
<editorImage v-if="customButton.indexOf('editorImage')>=0" color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import editorAudio from './components/editorAudio';
|
||||
import editorVideo from './components/editorVideo';
|
||||
import editorSlide from './components/editorSlide';
|
||||
import editorImage from './components/editorImage';
|
||||
import { getToken, upload } from 'api/qiniu';
|
||||
export default {
|
||||
name: 'tinymce',
|
||||
components: { editorImage, editorAudio, editorSlide, editorVideo },
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'tinymceEditor'
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
customButton: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default() {
|
||||
return ['editorAudio', 'editorImage']
|
||||
}
|
||||
},
|
||||
toolbar: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default() {
|
||||
return ['removeformat undo redo | bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p media link | alignleft aligncenter alignright']
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hasChange: false,
|
||||
hasInit: false
|
||||
}
|
||||
},
|
||||
menubar: {
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 360
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (!this.hasChange && this.hasInit) {
|
||||
this.$nextTick(() => tinymce.get(this.id).setContent(val))
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const _this = this;
|
||||
tinymce.init({
|
||||
selector: `#${this.id}`,
|
||||
height: this.height,
|
||||
body_class: 'panel-body ',
|
||||
object_resizing: false,
|
||||
// language: 'zh_CN',
|
||||
// language_url: '/static/tinymce/langs/zh_CN.js',
|
||||
toolbar: this.toolbar,
|
||||
menubar: this.menubar,
|
||||
plugins: 'advlist,autolink,code,powerpaste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
|
||||
end_container_on_empty_block: true,
|
||||
powerpaste_word_import: 'clean',
|
||||
code_dialog_height: 450,
|
||||
code_dialog_width: 1000,
|
||||
advlist_bullet_styles: 'square',
|
||||
advlist_number_styles: 'default',
|
||||
block_formats: '普通标签=p;小标题=h2;',
|
||||
imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
|
||||
imagetools_toolbar: 'watermark',
|
||||
default_link_target: '_blank',
|
||||
link_title: false,
|
||||
textcolor_map: [
|
||||
'1482f0', '1482f0',
|
||||
'4595e6', '4595e6'],
|
||||
init_instance_callback: editor => {
|
||||
if (_this.value) {
|
||||
editor.setContent(_this.value)
|
||||
}
|
||||
_this.hasInit = true;
|
||||
editor.on('Change', () => {
|
||||
this.hasChange = true;
|
||||
this.$emit('input', editor.getContent({ format: 'raw' }));
|
||||
});
|
||||
},
|
||||
images_dataimg_filter(img) {
|
||||
setTimeout(() => {
|
||||
const $image = $(img);
|
||||
$image.removeAttr('width');
|
||||
$image.removeAttr('height');
|
||||
if ($image[0].height && $image[0].width) {
|
||||
$image.attr('data-wscntype', 'image');
|
||||
$image.attr('data-wscnh', $image[0].height);
|
||||
$image.attr('data-wscnw', $image[0].width);
|
||||
$image.addClass('wscnph');
|
||||
}
|
||||
}, 0);
|
||||
return img
|
||||
},
|
||||
images_upload_handler(blobInfo, success, failure, progress) {
|
||||
progress(0);
|
||||
const token = _this.$store.getters.token;
|
||||
getToken(token).then(response => {
|
||||
const url = response.data.qiniu_url;
|
||||
const formData = new FormData();
|
||||
formData.append('token', response.data.qiniu_token);
|
||||
formData.append('key', response.data.qiniu_key);
|
||||
formData.append('file', blobInfo.blob(), url);
|
||||
upload(formData).then(() => {
|
||||
success(url);
|
||||
progress(100);
|
||||
// setTimeout(() => {
|
||||
// const doc = tinymce.activeEditor.getDoc();
|
||||
// const $$ = tinymce.dom.DomQuery;
|
||||
// const $image = $$(doc).find('img[src="' + url + '"]')
|
||||
// $image.addClass('wscnph');
|
||||
// $image.attr('data-wscntype', 'image');
|
||||
// $image.attr('data-wscnh', $image[0].height || 640);
|
||||
// $image.attr('data-wscnw', $image[0].width || 640);
|
||||
// }, 0);
|
||||
})
|
||||
}).catch(err => {
|
||||
failure('出现未知问题，刷新页面，或者联系程序员')
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
setup(editor) {
|
||||
editor.addButton('h2', {
|
||||
title: '小标题', // tooltip text seen on mouseover
|
||||
text: '小标题',
|
||||
onclick() {
|
||||
editor.execCommand('mceToggleFormat', false, 'h2');
|
||||
},
|
||||
onPostRender() {
|
||||
const btn = this;
|
||||
editor.on('init', () => {
|
||||
editor.formatter.formatChanged('h2', state => {
|
||||
btn.active(state);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
editor.addButton('p', {
|
||||
title: '正文', // tooltip text seen on mouseover
|
||||
text: '正文',
|
||||
onclick() {
|
||||
editor.execCommand('mceToggleFormat', false, 'p');
|
||||
},
|
||||
onPostRender() {
|
||||
const btn = this;
|
||||
editor.on('init', () => {
|
||||
editor.formatter.formatChanged('p', state => {
|
||||
btn.active(state);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
imageSuccessCBK(arr) {
|
||||
console.log(arr)
|
||||
const _this = this;
|
||||
arr.forEach(v => {
|
||||
const node = document.createElement('img');
|
||||
node.setAttribute('src', v);
|
||||
node.onload = function() {
|
||||
$(this).addClass('wscnph');
|
||||
$(this).attr('data-wscntype', 'image');
|
||||
$(this).attr('data-wscnh', this.height);
|
||||
$(this).attr('data-wscnw', this.width);
|
||||
tinymce.get(_this.id).insertContent(node.outerHTML)
|
||||
}
|
||||
})
|
||||
},
|
||||
slideSuccessCBK(arr) {
|
||||
const node = document.createElement('img');
|
||||
node.setAttribute('data-wscntype', 'slide');
|
||||
node.setAttribute('data-uri', arr.toString());
|
||||
node.setAttribute('data-wscnh', '190');
|
||||
node.setAttribute('data-wscnw', '200');
|
||||
node.setAttribute('src', ' https://wdl.wallstreetcn.com/6410b47d-a54c-4826-9bc1-c3e5df31280c');
|
||||
node.className = 'wscnph editor-placeholder';
|
||||
tinymce.get(this.id).insertContent(node.outerHTML)
|
||||
},
|
||||
videoSuccessCBK(form) {
|
||||
const node = document.createElement('img');
|
||||
node.setAttribute('data-wscntype', 'video');
|
||||
node.setAttribute('data-uri', form.url);
|
||||
node.setAttribute('data-cover-img-uri', form.image);
|
||||
node.setAttribute('data-title', form.title);
|
||||
node.setAttribute('src', 'https://wdl.wallstreetcn.com/07aeb3e7-f4ca-4207-befb-c987b3dc7011');
|
||||
node.className = 'wscnph editor-placeholder';
|
||||
tinymce.get(this.id).insertContent(node.outerHTML)
|
||||
},
|
||||
aduioSuccessCBK(form) {
|
||||
const node = document.createElement('img');
|
||||
node.setAttribute('data-wscntype', 'audio');
|
||||
node.setAttribute('data-uri', form.url);
|
||||
node.setAttribute('data-title', form.title);
|
||||
node.setAttribute('data-text', form.text);
|
||||
node.setAttribute('src', 'https://wdl.wallstreetcn.com/2ed0c8c8-fb82-499d-b81c-3fd1de114eae');
|
||||
node.className = 'wscnph editor-placeholder';
|
||||
tinymce.get(this.id).insertContent(node.outerHTML)
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
tinymce.get(this.id).destroy();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tinymce-container {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.tinymce-textarea {
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.editor-custom-btn-container {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
/*z-index: 2005;*/
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.editor-upload-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
128
src/components/Upload/singleImage.vue
Normal file
128
src/components/Upload/singleImage.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-upload
|
||||
class="image-uploader"
|
||||
:data="dataObj"
|
||||
drag
|
||||
:multiple="false"
|
||||
:show-file-list="false"
|
||||
action="https://upload.qbox.me"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleImageScucess">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
</el-upload>
|
||||
<div class="image-preview">
|
||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||
<img :src="imageUrl+'?imageView2/1/w/200/h/200'">
|
||||
<div class="image-preview-action">
|
||||
<i @click="rmImage" class="el-icon-delete"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 预览效果见付费文章
|
||||
import { getToken } from 'api/qiniu';
|
||||
export default {
|
||||
name: 'singleImageUpload',
|
||||
props: {
|
||||
value: String
|
||||
},
|
||||
computed: {
|
||||
imageUrl() {
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tempUrl: '',
|
||||
dataObj: { token: '', key: '' }
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rmImage() {
|
||||
this.emitInput('');
|
||||
},
|
||||
emitInput(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
handleImageScucess() {
|
||||
this.emitInput(this.tempUrl)
|
||||
},
|
||||
beforeUpload() {
|
||||
const _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key;
|
||||
const token = response.data.qiniu_token;
|
||||
_self._data.dataObj.token = token;
|
||||
_self._data.dataObj.key = key;
|
||||
this.tempUrl = response.data.qiniu_url;
|
||||
resolve(true);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.upload-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@include clearfix;
|
||||
.image-uploader {
|
||||
width: 60%;
|
||||
float: left;
|
||||
}
|
||||
.image-preview {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
border: 1px dashed #d9d9d9;
|
||||
float: left;
|
||||
margin-left: 50px;
|
||||
.image-preview-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.image-preview-action {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
font-size: 20px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
transition: opacity .3s;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
.el-icon-delete {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.image-preview-action {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
126
src/components/Upload/singleImage2.vue
Normal file
126
src/components/Upload/singleImage2.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="singleImageUpload2 upload-container">
|
||||
<el-upload
|
||||
class="image-uploader"
|
||||
:data="dataObj"
|
||||
drag
|
||||
:multiple="false"
|
||||
:show-file-list="false"
|
||||
action="https://upload.qbox.me"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleImageScucess">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">Drag或<em>点击上传</em></div>
|
||||
</el-upload>
|
||||
<div v-show="imageUrl.length>0" class="image-preview">
|
||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||
<img :src="imageUrl">
|
||||
<div class="image-preview-action">
|
||||
<i @click="rmImage" class="el-icon-delete"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 预览效果见专题
|
||||
import { getToken } from 'api/qiniu';
|
||||
export default {
|
||||
name: 'singleImageUpload2',
|
||||
props: {
|
||||
value: String
|
||||
},
|
||||
computed: {
|
||||
imageUrl() {
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tempUrl: '',
|
||||
dataObj: { token: '', key: '' }
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rmImage() {
|
||||
this.emitInput('');
|
||||
},
|
||||
emitInput(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
handleImageScucess() {
|
||||
this.emitInput(this.tempUrl)
|
||||
},
|
||||
beforeUpload() {
|
||||
const _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key;
|
||||
const token = response.data.qiniu_token;
|
||||
_self._data.dataObj.token = token;
|
||||
_self._data.dataObj.key = key;
|
||||
this.tempUrl = response.data.qiniu_url;
|
||||
resolve(true);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.upload-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.image-uploader{
|
||||
height: 100%;
|
||||
}
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
.image-preview-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.image-preview-action {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
font-size: 20px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
transition: opacity .3s;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
.el-icon-delete {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.image-preview-action {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
154
src/components/Upload/singleImage3.vue
Normal file
154
src/components/Upload/singleImage3.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-upload
|
||||
class="image-uploader"
|
||||
:data="dataObj"
|
||||
drag
|
||||
:multiple="false"
|
||||
:show-file-list="false"
|
||||
action="https://upload.qbox.me"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleImageScucess">
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
</el-upload>
|
||||
<div class="image-preview image-app-preview">
|
||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||
<div class='app-fake-conver'>  全球 付费节目单 最热 经济</div>
|
||||
<img :src="imageUrl+'?imageView2/1/h/180/w/320/q/100'">
|
||||
<div class="image-preview-action">
|
||||
<i @click="rmImage" class="el-icon-delete"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-preview">
|
||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||
<img :src="imageUrl+'?imageView2/1/w/200/h/200'">
|
||||
<div class="image-preview-action">
|
||||
<i @click="rmImage" class="el-icon-delete"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 预览效果见文章
|
||||
import { getToken } from 'api/qiniu';
|
||||
export default {
|
||||
name: 'singleImageUpload',
|
||||
props: {
|
||||
value: String
|
||||
},
|
||||
computed: {
|
||||
imageUrl() {
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tempUrl: '',
|
||||
dataObj: { token: '', key: '' }
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rmImage() {
|
||||
this.emitInput('');
|
||||
},
|
||||
emitInput(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
handleImageScucess() {
|
||||
this.emitInput(this.tempUrl)
|
||||
},
|
||||
beforeUpload() {
|
||||
const _self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
getToken().then(response => {
|
||||
const key = response.data.qiniu_key;
|
||||
const token = response.data.qiniu_token;
|
||||
_self._data.dataObj.token = token;
|
||||
_self._data.dataObj.key = key;
|
||||
this.tempUrl = response.data.qiniu_url;
|
||||
resolve(true);
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.upload-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@include clearfix;
|
||||
.image-uploader {
|
||||
width: 35%;
|
||||
float: left;
|
||||
}
|
||||
.image-preview {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
border: 1px dashed #d9d9d9;
|
||||
float: left;
|
||||
margin-left: 50px;
|
||||
.image-preview-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.image-preview-action {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
font-size: 20px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
transition: opacity .3s;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
.el-icon-delete {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.image-preview-action {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.image-app-preview{
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
border: 1px dashed #d9d9d9;
|
||||
float: left;
|
||||
margin-left: 50px;
|
||||
.app-fake-conver{
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
// background: rgba(0, 0, 0, .1);
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
src/components/jsonEditor/index.vue
Normal file
64
src/components/jsonEditor/index.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class='json-editor'>
|
||||
<textarea ref='textarea'></textarea>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import CodeMirror from 'codemirror';
|
||||
import 'codemirror/addon/lint/lint.css';
|
||||
import 'codemirror/lib/codemirror.css';
|
||||
import 'codemirror/theme/rubyblue.css';
|
||||
require('script-loader!jsonlint');
|
||||
import 'codemirror/mode/javascript/javascript'
|
||||
import 'codemirror/addon/lint/lint'
|
||||
import 'codemirror/addon/lint/json-lint';
|
||||
|
||||
export default {
|
||||
name: 'jsonEditor',
|
||||
data() {
|
||||
return {
|
||||
jsonEditor: false
|
||||
}
|
||||
},
|
||||
props: ['value'],
|
||||
watch: {
|
||||
value(value) {
|
||||
const editor_value = this.jsonEditor.getValue();
|
||||
if (value !== editor_value) {
|
||||
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
||||
lineNumbers: true,
|
||||
mode: 'application/json',
|
||||
gutters: ['CodeMirror-lint-markers'],
|
||||
theme: 'rubyblue',
|
||||
lint: true
|
||||
});
|
||||
|
||||
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
|
||||
this.jsonEditor.on('change', cm => {
|
||||
this.$emit('changed', cm.getValue())
|
||||
this.$emit('input', cm.getValue())
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getValue() {
|
||||
return this.jsonEditor.getValue()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.CodeMirror {
|
||||
height: 100%;
|
||||
}
|
||||
.json-editor .cm-s-rubyblue span.cm-string{
|
||||
color: #F08047;
|
||||
}
|
||||
</style>
|
||||
157
src/components/twoDndList/index.vue
Normal file
157
src/components/twoDndList/index.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<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)">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
name: 'twoDndList',
|
||||
components: { draggable },
|
||||
computed: {
|
||||
filterList2() {
|
||||
return this.list2.filter(v => {
|
||||
if (this.isNotInList1(v)) {
|
||||
return v
|
||||
}
|
||||
return false;
|
||||
})
|
||||
}
|
||||
},
|
||||
props: {
|
||||
list1: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
list2: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
list1Title: {
|
||||
type: String,
|
||||
default: 'list1'
|
||||
},
|
||||
list2Title: {
|
||||
type: String,
|
||||
default: 'list2'
|
||||
},
|
||||
width1: {
|
||||
type: String,
|
||||
default: '48%'
|
||||
},
|
||||
width2: {
|
||||
type: String,
|
||||
default: '48%'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isNotInList1(v) {
|
||||
return this.list1.every(k => v.id !== k.id)
|
||||
},
|
||||
isNotInList2(v) {
|
||||
return this.list2.every(k => v.id !== k.id)
|
||||
},
|
||||
deleteEle(ele) {
|
||||
for (const item of this.list1) {
|
||||
if (item.id === ele.id) {
|
||||
const index = this.list1.indexOf(item);
|
||||
this.list1.splice(index, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
if (this.isNotInList2(ele)) {
|
||||
this.list2.unshift(ele)
|
||||
}
|
||||
},
|
||||
pushEle(ele) {
|
||||
this.list1.push(ele)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.twoDndList {
|
||||
background: #fff;
|
||||
padding-bottom: 40px;
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.twoDndList-list {
|
||||
float: left;
|
||||
padding-bottom: 30px;
|
||||
&:first-of-type {
|
||||
margin-right: 2%;
|
||||
}
|
||||
.dragArea {
|
||||
margin-top: 15px;
|
||||
min-height: 50px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-complete-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 5px 12px;
|
||||
margin-top: 4px;
|
||||
border: 1px solid #bfcbd9;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.list-complete-item-handle {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.list-complete-item-handle2{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.list-complete-item.sortable-chosen {
|
||||
background: #4AB7BD;
|
||||
}
|
||||
|
||||
.list-complete-item.sortable-ghost {
|
||||
background: #30B08F;
|
||||
}
|
||||
|
||||
.list-complete-enter, .list-complete-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user