Compare commits
1 Commits
Author | SHA1 | Date |
---|---|---|
liunan | 0859519fea |
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "ag-element-ui",
|
"name": "ag-element-ui",
|
||||||
"version": "0.1.25",
|
"version": "0.1.20",
|
||||||
"main": "packages/index.js",
|
"main": "packages/index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vue-cli-service serve",
|
"dev": "vue-cli-service serve",
|
||||||
|
|
|
@ -1,172 +1,46 @@
|
||||||
<template>
|
<template>
|
||||||
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
|
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
|
||||||
<ag-row>
|
<ag-row>
|
||||||
<ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
|
<ag-col v-for="item,index in data" :key="index" :span="item.span||24">
|
||||||
<el-form-item v-bind="item" :prop="item.enName" >
|
<el-form-item v-bind="item" :prop="item.enName" >
|
||||||
<slot :name="item.soltName" v-if="item.soltName" :row="item"/>
|
<slot :name="item.soltName" v-if="item.soltName" :row="item"/>
|
||||||
<div class="contentbox" v-else>
|
<div class="contentbox" v-else>
|
||||||
<ag-input
|
<ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item" v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
|
||||||
v-model="formValue[item.enName]"
|
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'" size="small" clearable></ag-input>
|
||||||
type="textarea"
|
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
|
||||||
v-bind="item"
|
<ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
|
||||||
v-if="item.type == 'ag-textarea'"
|
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
|
||||||
size="small"
|
<el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>
|
||||||
clearable
|
|
||||||
></ag-input>
|
|
||||||
<ag-input
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-bind="item"
|
|
||||||
v-if="item.type == 'ag-input'"
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
></ag-input>
|
|
||||||
<ag-date-picker
|
|
||||||
v-bind="item"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-if="item.type == 'ag-date-picker'"
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
<ag-select
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-bind="item"
|
|
||||||
v-if="item.type == 'ag-select'"
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
<el-radio-group
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-bind="item"
|
|
||||||
v-if="item.type == 'ag-radio' && formValue[item.enName]"
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<el-radio
|
|
||||||
:label="it.value"
|
|
||||||
v-for="(it, index) in item.options"
|
|
||||||
:key="index"
|
|
||||||
>{{ it.label }}</el-radio
|
|
||||||
>
|
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
<el-checkbox-group
|
<el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
|
||||||
v-bind="item"
|
<el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox>
|
||||||
v-if="item.type == 'ag-checkbox' && formValue[item.enName]"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<el-checkbox
|
|
||||||
v-for="(it, index) in item.options"
|
|
||||||
:label="it.value"
|
|
||||||
:key="index"
|
|
||||||
>{{ it.label }}</el-checkbox
|
|
||||||
>
|
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
<el-input-number
|
<el-input-number v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input-number'" clearable></el-input-number>
|
||||||
v-model="formValue[item.enName]"
|
<el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader>
|
||||||
v-bind="item"
|
|
||||||
v-if="item.type == 'ag-input-number'"
|
|
||||||
clearable
|
|
||||||
></el-input-number>
|
|
||||||
<el-cascader
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-bind="item"
|
|
||||||
size="small"
|
|
||||||
v-if="item.type == 'ag-cascader'"
|
|
||||||
clearable
|
|
||||||
:style="{ width: '100%' }"
|
|
||||||
></el-cascader>
|
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="formValue[item.enName]"
|
v-model="formValue[item.enName]"
|
||||||
v-bind="item"
|
v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
|
||||||
size="small"
|
|
||||||
v-if="item.type == 'ag-switch' && formValue[item.enName]"
|
|
||||||
>
|
|
||||||
</el-switch>
|
</el-switch>
|
||||||
<el-slider
|
<el-slider v-model="formValue[item.enName]"
|
||||||
v-model="formValue[item.enName]"
|
v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
|
||||||
v-bind="item"
|
|
||||||
size="small"
|
|
||||||
v-if="item.type == 'ag-slider'"
|
|
||||||
></el-slider>
|
|
||||||
<el-time-select
|
<el-time-select
|
||||||
:style="{width:'100%'}"
|
:style="{width:'100%'}"
|
||||||
clearable
|
clearable
|
||||||
v-model="formValue[item.enName]"
|
v-model="formValue[item.enName]"
|
||||||
v-bind="item"
|
v-bind="item" size="small"
|
||||||
size="small"
|
|
||||||
v-if="item.type=='ag-time-select'"
|
v-if="item.type=='ag-time-select'"
|
||||||
:picker-options="item.options"
|
:picker-options="item.options">
|
||||||
>
|
|
||||||
</el-time-select>
|
</el-time-select>
|
||||||
<ag-upload
|
<ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
|
||||||
v-bind="item"
|
<el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
|
||||||
v-model="formValue[item.enName]"
|
<agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small">
|
||||||
v-if="item.type == 'ag-upload'"
|
|
||||||
@onError="$listeners.onError"
|
|
||||||
clear
|
|
||||||
isPre
|
|
||||||
@onUpload="item.onUpload"
|
|
||||||
></ag-upload>
|
|
||||||
<el-rate
|
|
||||||
v-bind="item"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-if="item.type == 'ag-rate'"
|
|
||||||
size="small"
|
|
||||||
></el-rate>
|
|
||||||
<agColorPicker
|
|
||||||
v-bind="item"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-if="item.type == 'ag-color-picker'"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
</agColorPicker>
|
</agColorPicker>
|
||||||
<el-transfer
|
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
|
||||||
:data="item.data"
|
<agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/>
|
||||||
v-bind="item"
|
<ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/>
|
||||||
v-model="formValue[item.enName]"
|
<agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
|
||||||
v-if="item.type == 'ag-transfer'"
|
<ag-mution-checkbox :datas="item.datas" v-bind="item" :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
|
||||||
size="small"
|
<ag-multion-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/>
|
||||||
></el-transfer>
|
|
||||||
<agNumberRange
|
|
||||||
v-bind="item"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-if="item.type == 'ag-numberRange'"
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
<ag-multion-input
|
|
||||||
v-bind="item"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-if="item.type == 'ag-multion-input'"
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
<agQuery
|
|
||||||
v-bind="item"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-if="item.type == 'ag-query'"
|
|
||||||
size="small"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
<ag-mution-checkbox
|
|
||||||
:datas="item.datas"
|
|
||||||
v-bind="item"
|
|
||||||
:placeholder="item.placeholder"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-if="item.type == 'ag-mution-checkbox'"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
</ag-mution-checkbox>
|
|
||||||
<ag-multion-date-picker
|
|
||||||
v-bind="item"
|
|
||||||
v-model="formValue[item.enName]"
|
|
||||||
v-if="item.type == 'ag-multion-datte-picker'"
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.tip" class="tipbox">
|
|
||||||
<slot name="tip" :row="item"> {{ item.tip }}</slot>
|
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</ag-col>
|
</ag-col>
|
||||||
|
@ -174,24 +48,27 @@
|
||||||
<div class="footerbox" v-if="$listeners.onSubmit">
|
<div class="footerbox" v-if="$listeners.onSubmit">
|
||||||
<slot name="button" :value="formValue">
|
<slot name="button" :value="formValue">
|
||||||
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
|
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
|
||||||
{{ submittitle || "提交" }}
|
{{submittitle||'提交'}}
|
||||||
</el-button>
|
</el-button>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import agInput from "./../../agInput/src/index.vue";
|
|
||||||
import agDatePicker from "./../../agDatePicker/src/index.vue";
|
|
||||||
import agSelect from "./../../agSelect/src/index.vue";
|
import agInput from './../../agInput/src/index.vue';
|
||||||
import agRow from "./../../agRow/src/index.vue";
|
import agDatePicker from './../../agDatePicker/src/index.vue';
|
||||||
import agCol from "./../../agCol/src/index.vue";
|
import agSelect from './../../agSelect/src/index.vue';
|
||||||
import agUpload from "./../../agUpload/src/index.vue";
|
import agRow from './../../agRow/src/index.vue';
|
||||||
import agColorPicker from "./../../agColorPicker/src/index.vue";
|
import agCol from './../../agCol/src/index.vue';
|
||||||
import agNumberRange from "./../../agNumberRange/src/index.vue";
|
import agUpload from './../../agUpload/src/index.vue';
|
||||||
import agMultionInput from "./../../agMultionInput/src/index.vue";
|
import agColorPicker from './../../agColorPicker/src/index.vue';
|
||||||
import agQuery from "./../../agQuery/src/index.vue";
|
import agNumberRange from './../../agNumberRange/src/index.vue';
|
||||||
import agMultionDatePicker from "../../agMultionDatePicker";
|
import agMultionInput from './../../agMultionInput/src/index.vue';
|
||||||
|
import agQuery from './../../agQuery/src/index.vue';
|
||||||
|
import agMultionDatePicker from '../../agMultionDatePicker';
|
||||||
|
|
||||||
|
|
||||||
export default{
|
export default{
|
||||||
name:"agForm",
|
name:"agForm",
|
||||||
|
@ -206,28 +83,30 @@ export default {
|
||||||
agColorPicker,
|
agColorPicker,
|
||||||
agNumberRange,
|
agNumberRange,
|
||||||
agMultionInput,
|
agMultionInput,
|
||||||
agQuery,
|
agQuery
|
||||||
},
|
},
|
||||||
props:{
|
props:{
|
||||||
submittitle:{
|
submittitle:{
|
||||||
type:String,
|
type:String,
|
||||||
default: "提交",
|
default:'提交'
|
||||||
},
|
},
|
||||||
data:{
|
data:{
|
||||||
type:Array,
|
type:Array,
|
||||||
default(){
|
default(){
|
||||||
return [];
|
return []
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
span:{
|
span:{
|
||||||
type:Number,
|
type:Number,
|
||||||
default: 24,
|
default:24
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
formValue: {},
|
formValue:{
|
||||||
};
|
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
this.formValue=this.$attrs.value;
|
this.formValue=this.$attrs.value;
|
||||||
|
@ -236,11 +115,12 @@ export default {
|
||||||
},1);
|
},1);
|
||||||
if(this.$refs.formref){
|
if(this.$refs.formref){
|
||||||
for(const key in this.$refs.formref){
|
for(const key in this.$refs.formref){
|
||||||
if (!this[key] && key != "value") {
|
if(!this[key]&&key!='value'){
|
||||||
this[key]=this.$refs.formref[key];
|
this[key]=this.$refs.formref[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
value(val){
|
value(val){
|
||||||
|
@ -248,14 +128,14 @@ export default {
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
this.$refs.formref.clearValidate();
|
this.$refs.formref.clearValidate();
|
||||||
},1);
|
},1);
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
onSubmit(){
|
onSubmit(){
|
||||||
this.$emit("onSubmit", this.formValue);
|
this.$emit('onSubmit',this.formValue)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -285,10 +165,6 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
.tipbox {
|
|
||||||
width: 100%;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
::v-deep{
|
::v-deep{
|
||||||
.el-form--inline{
|
.el-form--inline{
|
||||||
.el-form-item{
|
.el-form-item{
|
||||||
|
@ -298,7 +174,6 @@ export default {
|
||||||
display:flex;
|
display:flex;
|
||||||
flex:1;
|
flex:1;
|
||||||
width:100%;
|
width:100%;
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-left:0;
|
margin-left:0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -309,14 +184,8 @@ export default {
|
||||||
.el-form-item__content{
|
.el-form-item__content{
|
||||||
flex:1;
|
flex:1;
|
||||||
display:flex;
|
display:flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
width:100%;
|
width:100%;
|
||||||
margin-left:0!important;
|
margin-left:0!important;
|
||||||
}
|
}
|
||||||
.el-radio-button__inner,
|
|
||||||
.el-radio-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
<el-select
|
<el-select
|
||||||
class="ag_select"
|
class="ag_select"
|
||||||
:style="{ width: `100%` }"
|
:style="{ width: `100%` }"
|
||||||
|
:value="selectValue"
|
||||||
ref="apselectref"
|
ref="apselectref"
|
||||||
:size="$attrs.size||'small'"
|
:size="$attrs.size||'small'"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
|
@ -9,9 +10,8 @@
|
||||||
>
|
>
|
||||||
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
|
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="(item, index) in options"
|
v-for="item in options"
|
||||||
:key="index"
|
:key="item.value"
|
||||||
:disabled="item.disabled"
|
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value"
|
:value="item.value"
|
||||||
></el-option>
|
></el-option>
|
||||||
|
@ -32,20 +32,40 @@ export default {
|
||||||
return [];
|
return [];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
value:{
|
||||||
|
default: () =>'',
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
selectValue:""
|
||||||
|
};
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
if(this.$refs.apselectref){
|
if(this.$refs.apselectref){
|
||||||
for(const key in this.$refs.apselectref){
|
for(const key in this.$refs.apselectref){
|
||||||
if (!this[key] && key != "value") {
|
if(!this[key]&&key!='value'){
|
||||||
this[key]=this.$refs.apselectref[key];
|
this[key]=this.$refs.apselectref[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(newVal) {
|
||||||
|
let newselectValue=newVal;
|
||||||
|
const find=this.options.find((f)=>f.value==newselectValue);
|
||||||
|
if(find){
|
||||||
|
this.selectValue=newselectValue;
|
||||||
|
}else{
|
||||||
|
this.selectValue="";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,94 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="uploadbox">
|
<div class="uploadbox">
|
||||||
<div
|
<div class="uploadimgbox" :style="{height:width+'px'}" v-if="listType=='picture-card'">
|
||||||
class="uploadimgbox"
|
<div v-for="img,index in imageList" :key="index" :style="{width:width+'px'}" :draggable="dragmove" class="imgitem" :class="dragmove&&dragmoveclass" @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend" @dragleave="onMouseup" >
|
||||||
:style="{
|
|
||||||
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
|
|
||||||
}"
|
|
||||||
v-if="listType == 'picture-card'"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(img, index) in imageList"
|
|
||||||
:key="index"
|
|
||||||
:style="{
|
|
||||||
width: width + 'px',
|
|
||||||
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
|
|
||||||
}"
|
|
||||||
:draggable="dragmove"
|
|
||||||
class="imgitem"
|
|
||||||
:class="dragmove && dragmoveclass"
|
|
||||||
@dragstart="onDragstart"
|
|
||||||
@dragenter="onDragenter"
|
|
||||||
@dragover="onDragover"
|
|
||||||
@dragend="onDragend"
|
|
||||||
>
|
|
||||||
<slot name="file" :file="img">
|
<slot name="file" :file="img">
|
||||||
<img
|
<img :src="img.url" class="img" v-if="img.type.indexOf('image')>-1"/>
|
||||||
:src="img.url || img"
|
|
||||||
class="img"
|
|
||||||
v-if="(img.type && img.type.indexOf('image') > -1) || img != ''"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
index == 0 &&
|
|
||||||
$attrs.masktext &&
|
|
||||||
$attrs.masktext.ai == false &&
|
|
||||||
$attrs.masktext.data[index]
|
|
||||||
"
|
|
||||||
class="maskbox"
|
|
||||||
>
|
|
||||||
{{ $attrs.masktext.data[index] }}
|
|
||||||
</div>
|
|
||||||
<div v-if="$attrs.masktext && $attrs.masktext.ai == true" class="maskbox">
|
|
||||||
{{ index + 1 }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="filetext">
|
<div v-else class="filetext">
|
||||||
<div class="filetitletext">文件</div>
|
<div class="filetitletext">文件</div>
|
||||||
<div>{{img.name}}</div>
|
<div>{{img.name}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uploadimgmask" v-if="clear||isPrew" >
|
<div class="uploadimgmask" v-if="clear||isPrew" >
|
||||||
<i
|
<i class="el-icon-search" v-if="isPrew&&img.type.indexOf('image')>-1" @click="handlePictureCardPreview(img)"></i>
|
||||||
class="el-icon-search"
|
<i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
|
||||||
v-if="isPrew && img.type.indexOf('image') > -1"
|
|
||||||
@click="handlePictureCardPreview(img)"
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
class="el-icon-delete"
|
|
||||||
v-if="clear && !disabled"
|
|
||||||
@click="handleRemove(img.raw, index)"
|
|
||||||
></i>
|
|
||||||
</div>
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="uploadcontain" :style="{height:width+'px',aspectRatio:isDrap?4/3:1/1}"
|
||||||
class="uploadcontain"
|
|
||||||
:style="{
|
|
||||||
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
|
|
||||||
aspectRatio: isDrap ? 4 / 3 : 1 / 1,
|
|
||||||
width: width + 'px',
|
|
||||||
}"
|
|
||||||
:draggable="isDrap"
|
:draggable="isDrap"
|
||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@dragenter.prevent
|
@dragenter.prevent
|
||||||
@drop="onUploadDrap"
|
@drop="onUploadDrap"
|
||||||
v-if="limit > imageList.length"
|
v-if="limit>imageList.length">
|
||||||
>
|
|
||||||
<label for="uploadinput" class="uploadlabel" @click="onInputClick">
|
<label for="uploadinput" class="uploadlabel" @click="onInputClick">
|
||||||
<slot>
|
<slot>
|
||||||
<i
|
<i class="el-icon-plus"></i>
|
||||||
class="el-icon-plus"
|
<span class="draptiptext">{{isDrap?'拖拽上传':'上传'}}</span>
|
||||||
:style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
|
|
||||||
></i>
|
|
||||||
<span class="draptiptext">{{
|
|
||||||
isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
|
|
||||||
}}</span>
|
|
||||||
</slot>
|
</slot>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uploadtextbox" v-if="listType=='text'||listType=='picture'">
|
<div class="uploadtextbox" v-if="listType=='text'||listType=='picture'">
|
||||||
<div
|
<div class="uploadtextcontain"
|
||||||
class="uploadtextcontain"
|
|
||||||
:draggable="isDrap"
|
:draggable="isDrap"
|
||||||
@dragover.prevent
|
@dragover.prevent
|
||||||
@dragenter.prevent
|
@dragenter.prevent
|
||||||
|
@ -96,57 +37,33 @@
|
||||||
>
|
>
|
||||||
<label for="uploadinput" class="uploadlabel" @click="onInputClick" >
|
<label for="uploadinput" class="uploadlabel" @click="onInputClick" >
|
||||||
<slot>
|
<slot>
|
||||||
<el-button type="primary" size="small" :disabled="disabled"
|
<el-button type="primary" size="small"><i class="el-icon-plus"></i> {{isDrap?'拖拽上传':'上传'}}</el-button>
|
||||||
><i
|
|
||||||
class="el-icon-plus"
|
|
||||||
:style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
|
|
||||||
></i>
|
|
||||||
{{
|
|
||||||
isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
|
|
||||||
}}</el-button
|
|
||||||
>
|
|
||||||
</slot>
|
</slot>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<slot name="tip"> </slot>
|
<slot name="tip">
|
||||||
|
</slot>
|
||||||
<ul class="uploadtextlist" :class="'upload-list--'+listType">
|
<ul class="uploadtextlist" :class="'upload-list--'+listType">
|
||||||
<li v-for="(img, index) in imageList" :key="index" class="uploadtextitem">
|
<li v-for="img,index in imageList" :key="index" class="uploadtextitem" >
|
||||||
<div
|
<div class="ag-upload-list__item-namebox" @click="handlePictureCardPreview(img)">
|
||||||
class="ag-upload-list__item-namebox"
|
|
||||||
@click="handlePictureCardPreview(img)"
|
|
||||||
>
|
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<i class="el-icon-document ag-icon-document"></i>
|
<i class="el-icon-document ag-icon-document"></i>
|
||||||
</slot>
|
</slot>
|
||||||
<slot name="file" :file="img">
|
<slot name="file" :file="img">
|
||||||
<img
|
<img v-if="listType=='picture'" :src="img.url" class="ag-upload-list__item-thumbnail" />
|
||||||
v-if="listType == 'picture'"
|
|
||||||
:src="img.url"
|
|
||||||
class="ag-upload-list__item-thumbnail"
|
|
||||||
/>
|
|
||||||
<a class="ag-upload-list__item-name" >{{img.name}}</a>
|
<a class="ag-upload-list__item-name" >{{img.name}}</a>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="uploadrightbox">
|
<div class="uploadrightbox">
|
||||||
<slot name="status" :file="img">
|
<slot name="status" :file="img">
|
||||||
<span class="uploadstatusbpx">
|
<span class="uploadstatusbpx">
|
||||||
<i
|
<i v-if="img.status==='uploading'" class="el-icon-loading uploadingicon" ></i>
|
||||||
v-if="img.status === 'uploading'"
|
<i v-if="img.status==='success'" class="el-icon-circle-check statusicon"></i>
|
||||||
class="el-icon-loading uploadingicon"
|
<i v-if="img.status==='failed'" class="el-icon-circle-close failedicon"></i>
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
v-if="img.status === 'success'"
|
|
||||||
class="el-icon-circle-check statusicon"
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
v-if="img.status === 'failed'"
|
|
||||||
class="el-icon-circle-close failedicon"
|
|
||||||
></i>
|
|
||||||
<span v-if="img.msg" class="uploadmsg">{{img.msg}}</span>
|
<span v-if="img.msg" class="uploadmsg">{{img.msg}}</span>
|
||||||
</span>
|
</span>
|
||||||
</slot>
|
</slot>
|
||||||
<el-popconfirm
|
<el-popconfirm
|
||||||
v-if="!disabled"
|
|
||||||
:title="`确定移除${img.name}吗?`"
|
:title="`确定移除${img.name}吗?`"
|
||||||
@confirm="handleRemove(img.raw,index)"
|
@confirm="handleRemove(img.raw,index)"
|
||||||
>
|
>
|
||||||
|
@ -156,18 +73,9 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input type="file" style="display:none;" :multiple="limit>1&&$attrs.multiple" :accept="$attrs.accept" id="uploadinput" @change="onUpdate" ref="fileinputref"/>
|
||||||
type="file"
|
|
||||||
style="display: none"
|
|
||||||
:multiple="limit > 1 && $attrs.multiple"
|
|
||||||
:accept="$attrs.accept"
|
|
||||||
id="uploadinput"
|
|
||||||
:disabled="disabled"
|
|
||||||
@change="onUpdate"
|
|
||||||
ref="fileinputref"
|
|
||||||
/>
|
|
||||||
<el-dialog :visible.sync="dialogVisible">
|
<el-dialog :visible.sync="dialogVisible">
|
||||||
<img width="100%" :src="dialogImageUrl" alt="" />
|
<img width="100%" :src="dialogImageUrl" alt="">
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -178,71 +86,68 @@ export default {
|
||||||
props:{
|
props:{
|
||||||
isPrew:{
|
isPrew:{
|
||||||
type:Boolean,
|
type:Boolean,
|
||||||
default: true,
|
default:true
|
||||||
},
|
},
|
||||||
clear:{
|
clear:{
|
||||||
type:Boolean,
|
type:Boolean,
|
||||||
default: true,
|
default:true
|
||||||
},
|
},
|
||||||
width:{
|
width:{
|
||||||
type:Number,
|
type:Number,
|
||||||
default: 80,
|
default:80
|
||||||
},
|
},
|
||||||
dragmove:{
|
dragmove:{
|
||||||
type:Boolean,
|
type:Boolean,
|
||||||
default: false,
|
default:false
|
||||||
},
|
},
|
||||||
isDrap:{
|
isDrap:{
|
||||||
type:Boolean,
|
type:Boolean,
|
||||||
default: false,
|
default:false
|
||||||
},
|
},
|
||||||
limit:{
|
limit:{
|
||||||
type:Number,
|
type:Number,
|
||||||
default: 1,
|
default:1
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
fileList:{
|
fileList:{
|
||||||
type:Array,
|
type:Array,
|
||||||
default(){
|
default(){
|
||||||
return [];
|
return [];
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
listType:{
|
listType:{
|
||||||
type:String,
|
type:String,
|
||||||
default: "picture-card",
|
default:'picture-card'
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
model: {
|
model: {
|
||||||
prop: "fileList", // 明确指定 prop 为 'value'
|
prop: 'fileList', // 明确指定 prop 为 'value'
|
||||||
event: "onUpload", // 自定义事件名,用于更新 value
|
event: 'onUpload' // 自定义事件名,用于更新 value
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if(this.fileList.length>0){
|
if(this.fileList.length>0){
|
||||||
let list=[];
|
let list=[];
|
||||||
this.fileList.map((h)=>{
|
this.fileList.map((h)=>{
|
||||||
if (typeof h == "object") {
|
if(typeof(h)=='object'){
|
||||||
list.push(h);
|
list.push(h);
|
||||||
}else{
|
}else{
|
||||||
let imgurl=h.split("/");
|
let imgurl=h.split("/");
|
||||||
let filename=imgurl[imgurl.length-1];
|
let filename=imgurl[imgurl.length-1];
|
||||||
let extarr=h.split(".");
|
let extarr=h.split(".");
|
||||||
let extname=extarr[extarr.length-1];
|
let extname=extarr[extarr.length-1];
|
||||||
if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
|
if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
|
||||||
list.push({
|
list.push({
|
||||||
name:filename,
|
name:filename,
|
||||||
url:h,
|
url:h,
|
||||||
type: "image/" + extname.toLowerCase(),
|
type:'image/'+extname.toLowerCase(),
|
||||||
raw: null,
|
raw:null
|
||||||
});
|
});
|
||||||
}else{
|
}else{
|
||||||
list.push({
|
list.push({
|
||||||
name:filename,
|
name:filename,
|
||||||
url:h,
|
url:h,
|
||||||
type: "other/" + extname.toLowerCase(),
|
type:'other/'+extname.toLowerCase(),
|
||||||
raw: null,
|
raw:null
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -255,105 +160,80 @@ export default {
|
||||||
if(val.length>0){
|
if(val.length>0){
|
||||||
let list=[];
|
let list=[];
|
||||||
val.map((h)=>{
|
val.map((h)=>{
|
||||||
if (typeof h == "object") {
|
if(typeof(h)=='object'){
|
||||||
list.push(h);
|
list.push(h);
|
||||||
}else{
|
}else{
|
||||||
let imgurl=h.split("/");
|
let imgurl=h.split("/");
|
||||||
let filename=imgurl[imgurl.length-1];
|
let filename=imgurl[imgurl.length-1];
|
||||||
let extarr=h.split(".");
|
let extarr=h.split(".");
|
||||||
let extname=extarr[extarr.length-1];
|
let extname=extarr[extarr.length-1];
|
||||||
if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
|
if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
|
||||||
list.push({
|
list.push({
|
||||||
name:filename,
|
name:filename,
|
||||||
url:h,
|
url:h,
|
||||||
type: "image/" + extname.toLowerCase(),
|
type:'image/'+extname.toLowerCase(),
|
||||||
raw: null,
|
raw:null
|
||||||
});
|
});
|
||||||
}else{
|
}else{
|
||||||
list.push({
|
list.push({
|
||||||
name:filename,
|
name:filename,
|
||||||
url:h,
|
url:h,
|
||||||
type: "other/" + extname.toLowerCase(),
|
type:'other/'+extname.toLowerCase(),
|
||||||
raw: null,
|
raw:null
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.imageList=list;
|
this.imageList=list;
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dialogImageUrl: "",
|
dialogImageUrl: '',
|
||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
imageList:[],
|
imageList:[],
|
||||||
sourceNode:null,
|
sourceNode:null,
|
||||||
partNode:null,
|
partNode:null,
|
||||||
selectTop:false,
|
selectTop:false,
|
||||||
drag:false,
|
drag:false,
|
||||||
dragmoveclass: "imghover",
|
dragmoveclass:'imghover'
|
||||||
moveIndexs: [],
|
|
||||||
startIndex: null,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleRemove(file,index) {
|
handleRemove(file,index) {
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.imageList=this.imageList.filter((item,inkey)=>{
|
this.imageList=this.imageList.filter((item,inkey)=>{
|
||||||
return inkey !== index;
|
return inkey !== index;
|
||||||
});
|
});
|
||||||
this.$emit("onRemove", file, this.imageList);
|
this.$emit('onRemove',file,this.imageList);
|
||||||
this.$emit("onUpload", this.fileList, this.imageList, "remove");
|
|
||||||
},
|
},
|
||||||
handlePictureCardPreview(file) {
|
handlePictureCardPreview(file) {
|
||||||
if (file.type.indexOf("image/") > -1) {
|
if(file.type.indexOf('image/')>-1){
|
||||||
this.dialogImageUrl = file.url;
|
this.dialogImageUrl = file.url;
|
||||||
this.dialogVisible = true;
|
this.dialogVisible = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onUpdate(e){
|
onUpdate(e){
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(this.limit<=this.imageList.length){
|
if(this.limit<=this.imageList.length){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let that = this;
|
|
||||||
try{
|
try{
|
||||||
let uplist=[];
|
let uplist=[];
|
||||||
let files=[...e.target.files].slice(0,this.limit-this.imageList.length);
|
let files=[...e.target.files].slice(0,this.limit-this.imageList.length);
|
||||||
const find=files.find((f,i)=>{
|
const find=files.find((f,i)=>{
|
||||||
if(this.$attrs.accept){
|
if(this.$attrs.accept){
|
||||||
let acceptarr=this.$attrs.accept.split(",");
|
let acceptarr=this.$attrs.accept.split(",");
|
||||||
for (let i = 0; i < acceptarr.length; i++) {
|
|
||||||
let item = acceptarr[i];
|
|
||||||
if (item.includes("*")) {
|
|
||||||
if (!item.includes(f.type.split("/")[0])) {
|
|
||||||
if (this.$listeners.onError) {
|
|
||||||
this.$emit("onError", `其中第${i + 1}张文件类型错误`);
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if(!acceptarr.includes(f.type)){
|
if(!acceptarr.includes(f.type)){
|
||||||
if(this.$listeners.onError){
|
if(this.$listeners.onError){
|
||||||
this.$emit("onError", `其中第${i + 1}张文件类型错误`);
|
this.$emit('onError',`其中第${i+1}张文件类型错误`);
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
if(this.$attrs.maxSize){
|
if(this.$attrs.maxSize){
|
||||||
if(f.size>this.$attrs.maxSize){
|
if(f.size>this.$attrs.maxSize){
|
||||||
if(this.$listeners.onError){
|
if(this.$listeners.onError){
|
||||||
this.$emit(
|
this.$emit('onError',`其中第${i+1}张文件大小不能超过${this.$attrs.maxSize/1024/1024}M"`);
|
||||||
"onError",
|
|
||||||
`其中第${i + 1}张文件大小不能超过${this.$attrs.maxSize / 1024 / 1024}M"`
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
@ -364,65 +244,22 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
files.map((item,index) => {
|
files.map((item,index) => {
|
||||||
if (item.type && item.type.indexOf("image") > -1) {
|
if(item.type.indexOf("image")>-1){
|
||||||
let filerender=new FileReader();
|
let filerender=new FileReader();
|
||||||
filerender.onload=function(e){
|
filerender.onload=function(e){
|
||||||
if (that.$attrs.minWidth || that.$attrs.minHeight) {
|
|
||||||
let img = document.createElement("img");
|
|
||||||
img.src = e.target.result;
|
|
||||||
img.onload = () => {
|
|
||||||
if (img.width < that.$attrs.minWidth) {
|
|
||||||
if (this.$listeners.onError) {
|
|
||||||
this.$emit(
|
|
||||||
"onError",
|
|
||||||
`其中第${index + 1}张图片宽度不能小于${that.$attrs.minWidth}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (img.height < that.$attrs.minHeight) {
|
|
||||||
if (this.$listeners.onError) {
|
|
||||||
this.$emit(
|
|
||||||
"onError",
|
|
||||||
`其中第${index + 1}张图片高度不能小于${that.$attrs.minHeight}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
uplist.push({
|
uplist.push({
|
||||||
name:item.name,
|
name:item.name,
|
||||||
url:e.target.result,
|
url:e.target.result,
|
||||||
type:item.type,
|
type:item.type,
|
||||||
size:item.size,
|
size:item.size,
|
||||||
raw:item,
|
raw:item,
|
||||||
status: "init",
|
status:'init',
|
||||||
msg: "",
|
msg:""
|
||||||
});
|
|
||||||
if (files.length == uplist.length) {
|
|
||||||
this.$refs.fileinputref.value = "";
|
|
||||||
if (this.$listeners.onUpload) {
|
|
||||||
this.$emit("onUpload", this.fileList, uplist, "upload");
|
|
||||||
} else {
|
|
||||||
this.imageList.push(...uplist);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
uplist.push({
|
|
||||||
name: item.name,
|
|
||||||
url: e.target.result,
|
|
||||||
type: item.type,
|
|
||||||
size: item.size,
|
|
||||||
raw: item,
|
|
||||||
status: "init",
|
|
||||||
msg: "",
|
|
||||||
});
|
});
|
||||||
if(files.length==uplist.length){
|
if(files.length==uplist.length){
|
||||||
if(this.$listeners.onUpload){
|
if(this.$listeners.onUpload){
|
||||||
this.fileList.push(...uplist);
|
this.fileList.push(...uplist);
|
||||||
this.$emit("onUpload", this.fileList, uplist);
|
this.$emit('onUpload',this.fileList,uplist);
|
||||||
}else{
|
}else{
|
||||||
this.imageList.push(...uplist);
|
this.imageList.push(...uplist);
|
||||||
}
|
}
|
||||||
|
@ -435,13 +272,13 @@ export default {
|
||||||
type:item.type,
|
type:item.type,
|
||||||
size:item.size,
|
size:item.size,
|
||||||
raw:item,
|
raw:item,
|
||||||
status: "init",
|
status:'init',
|
||||||
msg: "",
|
msg:""
|
||||||
});
|
});
|
||||||
if(files.length==uplist.length){
|
if(files.length==uplist.length){
|
||||||
if(this.$listeners.onUpload){
|
if(this.$listeners.onUpload){
|
||||||
this.fileList.push(...uplist);
|
this.fileList.push(...uplist);
|
||||||
this.$emit("onUpload", this.fileList, uplist);
|
this.$emit('onUpload',this.fileList,uplist);
|
||||||
}else{
|
}else{
|
||||||
this.imageList.push(...uplist);
|
this.imageList.push(...uplist);
|
||||||
}
|
}
|
||||||
|
@ -449,15 +286,14 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}catch(err){
|
}catch(err){
|
||||||
|
console.log(err,"uploaderr");
|
||||||
|
|
||||||
if(this.$listeners.onError){
|
if(this.$listeners.onError){
|
||||||
this.$emit("onError", e);
|
this.$emit('onError',e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onDragstart(e){
|
onDragstart(e){
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.sourceNode=e.target;
|
this.sourceNode=e.target;
|
||||||
this.partNode=e.target.parentNode;
|
this.partNode=e.target.parentNode;
|
||||||
e.target.classList.add("tabsbg");
|
e.target.classList.add("tabsbg");
|
||||||
|
@ -466,19 +302,13 @@ export default {
|
||||||
e.target.classList.add("moving");
|
e.target.classList.add("moving");
|
||||||
},1);
|
},1);
|
||||||
},
|
},
|
||||||
onDragover(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
},
|
|
||||||
onDragenter(e){
|
onDragenter(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.dragmove){
|
if(!this.dragmove){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if(this.partNode===e.target||e.target===this.sourceNode){
|
if(this.partNode===e.target||e.target===this.sourceNode){
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
const childrens=[...this.partNode.children];
|
const childrens=[...this.partNode.children];
|
||||||
let thistarget=childrens.find((f)=>f==e.target);
|
let thistarget=childrens.find((f)=>f==e.target);
|
||||||
|
@ -486,27 +316,28 @@ export default {
|
||||||
thistarget=e.target.parentNode;
|
thistarget=e.target.parentNode;
|
||||||
}
|
}
|
||||||
if(!thistarget){
|
if(!thistarget){
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const sourceIndex=childrens.indexOf(this.sourceNode);
|
const sourceIndex=childrens.indexOf(this.sourceNode);
|
||||||
if (!this.startIndex) {
|
|
||||||
this.startIndex = sourceIndex;
|
|
||||||
}
|
|
||||||
const targetIndex=childrens.indexOf(thistarget);
|
const targetIndex=childrens.indexOf(thistarget);
|
||||||
this.moveIndexs = [sourceIndex, targetIndex];
|
if(sourceIndex<targetIndex){
|
||||||
},
|
this.partNode.insertBefore(this.sourceNode,thistarget.nextElementSibling);
|
||||||
|
}else{
|
||||||
|
this.partNode.insertBefore(this.sourceNode,thistarget);
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
onDragover(e){
|
||||||
|
e.preventDefault();
|
||||||
|
},
|
||||||
onMouseup(e){
|
onMouseup(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if(!this.dragmove){
|
if(!this.dragmove){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(this.partNode===e.target||e.target===this.sourceNode){
|
if(this.partNode===e.target||e.target===this.sourceNode){
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
this.sourceNode.classList.remove("moving");
|
this.sourceNode.classList.remove("moving");
|
||||||
},
|
},
|
||||||
|
@ -515,21 +346,19 @@ export default {
|
||||||
if(!this.dragmove){
|
if(!this.dragmove){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
e.target.classList.remove("moving");
|
e.target.classList.remove("moving");
|
||||||
e.target.classList.remove("tabsbg");
|
e.target.classList.remove("tabsbg");
|
||||||
this.sourceNode.classList.remove("moving");
|
this.sourceNode.classList.remove("moving");
|
||||||
const [sourceIndex, targetIndex] = this.moveIndexs;
|
if(this.partNode===e.target||e.target===this.sourceNode){
|
||||||
let newimage = Object.assign([], this.imageList);
|
return
|
||||||
let temp = Object.assign({}, newimage[sourceIndex]);
|
}
|
||||||
newimage[sourceIndex] = newimage[targetIndex];
|
const childrens=[...this.partNode.children];
|
||||||
newimage[targetIndex] = temp;
|
|
||||||
this.imageList = newimage;
|
const sourceIndex=childrens.indexOf(this.sourceNode);
|
||||||
this.partNode = null;
|
const item = this.imageList.splice(sourceIndex, 1)[0];
|
||||||
|
this.imageList.splice(sourceIndex, 0, item);
|
||||||
this.sourceNode=null;
|
this.sourceNode=null;
|
||||||
this.moveIndexs = [];
|
this.partNode=null;
|
||||||
},
|
},
|
||||||
onUploadDrap(e){
|
onUploadDrap(e){
|
||||||
e.preventDefault(); // 阻止默认行为(打开文件)
|
e.preventDefault(); // 阻止默认行为(打开文件)
|
||||||
|
@ -537,20 +366,14 @@ export default {
|
||||||
if(this.drap){
|
if(this.drap){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const files = event.dataTransfer.files;
|
const files = event.dataTransfer.files;
|
||||||
this.onUpdate({target:{files: files}});
|
this.onUpdate({target:{files: files}});
|
||||||
},
|
},
|
||||||
onInputClick(e){
|
onInputClick(e){
|
||||||
e.preventDefault(); // 阻止默认行为(打开文件)
|
e.preventDefault(); // 阻止默认行为(打开文件)
|
||||||
e.stopPropagation(); // 停止事件冒泡
|
e.stopPropagation(); // 停止事件冒泡
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$refs.fileinputref.click();
|
this.$refs.fileinputref.click();
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -562,7 +385,6 @@ export default {
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.uploadlabel{
|
.uploadlabel{
|
||||||
|
@ -594,23 +416,11 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
width:100px;
|
width:100px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
transition: all 0.3s;
|
transition: all .3s;
|
||||||
.maskbox {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background: #1f292e 60%;
|
|
||||||
padding: 5px 8px;
|
|
||||||
border-bottom-right-radius: 6px;
|
|
||||||
line-height: 1;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
&.imghover:hover{
|
&.imghover:hover{
|
||||||
cursor: move;
|
cursor: move;
|
||||||
}
|
}
|
||||||
|
@ -639,7 +449,7 @@ export default {
|
||||||
left: 0;
|
left: 0;
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0,0,0,.3);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap:6px;
|
gap:6px;
|
||||||
|
@ -700,6 +510,8 @@ export default {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-top:12px;
|
margin-top:12px;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.upload-list--text{
|
.upload-list--text{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -712,7 +524,7 @@ export default {
|
||||||
.uploadtextitem{
|
.uploadtextitem{
|
||||||
position: relative;
|
position: relative;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
line-height:1;
|
line-height:1;
|
||||||
|
@ -744,7 +556,7 @@ export default {
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
transition: color 0.3s;
|
transition: color .3s;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
@ -762,7 +574,7 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0.75;
|
opacity: .75;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
display:none;
|
display:none;
|
||||||
}
|
}
|
||||||
|
@ -815,7 +627,7 @@ export default {
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
transition: color 0.3s;
|
transition: color .3s;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
line-height: 70px;
|
line-height: 70px;
|
||||||
font-size:14px;
|
font-size:14px;
|
||||||
|
@ -845,7 +657,7 @@ export default {
|
||||||
top: 5px;
|
top: 5px;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0.75;
|
opacity: .75;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -877,3 +689,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue