qiaopengfei
/
ag-element-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

22

This commit is contained in:
ln1778 2024-09-12 13:45:10 +08:00
parent 756f3307f3
commit d14d425a29
4 changed files with 122 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ag-element-ui", "name": "ag-element-ui",
"version": "0.1.6", "version": "0.1.7",
"main": "packages/index.js", "main": "packages/index.js",
"scripts": { "scripts": {
"dev": "vue-cli-service serve", "dev": "vue-cli-service serve",

2
packages/agForm/src/index.vue
View File

@ -8,7 +8,7 @@
<ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item" v-if="item.type=='ag-textarea'" size="small" clearable></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>
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'" size="small" 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-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
<agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" 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-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 :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>
</el-radio-group> </el-radio-group>

35
packages/agSelect/src/index.vue
View File

@ -1,22 +1,20 @@
<template> <template>
<div> <el-select
<el-select class="ag_select"
class="ag_select" :style="{ width: `100%` }"
:style="{ width: `100%` }" :value="selectValue"
:value="selectValue" ref="apselectref"
ref="apselectref" v-bind="$attrs"
v-bind="$attrs" v-on="$listeners"
v-on="$listeners" >
> <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 in options"
v-for="item in options" :key="item.value"
:key="item.value" :label="item.label"
:label="item.label" :value="item.value"
:value="item.value" ></el-option>
></el-option> </el-select>
</el-select>
</div>
</template> </template>
<script> <script>
@ -74,6 +72,7 @@ export default {
::v-deep { ::v-deep {
.ag_select{ .ag_select{
min-width: 90px; min-width: 90px;
width:100%;
} }
.el-input__icon { .el-input__icon {
font-size: 16px !important; font-size: 16px !important;

140
packages/agUpload/src/index.vue
View File

@ -45,18 +45,31 @@
</slot> </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 class="ag-upload-list__item-namebox" @click="handlePictureCardPreview(img)">
<slot name="icon">
<i class="el-icon-document ag-icon-document"></i>
</slot>
<slot name="file" :file="img"> <slot name="file" :file="img">
<img v-if="listType=='picture'" :src="img.url" class="ag-upload-list__item-thumbnail" /> <img v-if="listType=='picture'" :src="img.url" class="ag-upload-list__item-thumbnail" />
<a class="ag-upload-list__item-name" @click="handlePictureCardPreview(img)"><i class="el-icon-document ag-icon-document"></i>{{img.name}} <a class="ag-upload-list__item-name" >{{img.name}}</a>
</a>
</slot> </slot>
</div>
<div class="uploadrightbox">
<slot name="status" :file="img">
<span class="uploadstatusbpx">
<i v-if="img.status==='uploading'" class="el-icon-loading uploadingicon" ></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>
</slot>
<el-popconfirm <el-popconfirm
:title="`确定移除${img.name}吗？`" :title="`确定移除${img.name}吗？`"
@confirm="handleRemove(img.raw,index)" @confirm="handleRemove(img.raw,index)"
> >
<i class="el-icon-close ag-icon-close" slot="reference"></i> <i class="el-icon-close ag-icon-close" slot="reference"></i>
</el-popconfirm> </el-popconfirm>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -204,13 +217,13 @@
} }
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(",");
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;
} }
@ -218,38 +231,61 @@
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('onError',`其中第${i+1}张图片大小不能超过${this.$attrs.maxSize/1024/1024}M"`); this.$emit('onError',`其中第${i+1}张文件大小不能超过${this.$attrs.maxSize/1024/1024}M"`);
} }
return true; return true;
} }
} }
}); });
if(find){ if(find){
return; return;
} }
files.map((item,index) => { files.map((item,index) => {
let filerender=new FileReader(); if(item.type.indexOf("image")>-1){
filerender.onload=function(e){ let filerender=new FileReader();
uplist.push({ filerender.onload=function(e){
name:item.name, uplist.push({
url:e.target.result, name:item.name,
type:item.type, url:e.target.result,
size:item.size, type:item.type,
raw:item size:item.size,
}); raw:item,
if(files.length==uplist.length){ status:'init',
if(this.$listeners.onUpload){ msg:""
this.fileList.push(...uplist); });
this.$emit('onUpload',this.fileList,uplist); if(files.length==uplist.length){
}else{ if(this.$listeners.onUpload){
this.imageList.push(...uplist); this.fileList.push(...uplist);
this.$emit('onUpload',this.fileList,uplist);
}else{
this.imageList.push(...uplist);
}
} }
} }.bind(this);
}.bind(this); filerender.readAsDataURL(item);
filerender.readAsDataURL(item); }else{
uplist.push({
name:item.name,
type:item.type,
size:item.size,
raw:item,
status:'init',
msg:""
});
if(files.length==uplist.length){
if(this.$listeners.onUpload){
this.fileList.push(...uplist);
this.$emit('onUpload',this.fileList,uplist);
}else{
this.imageList.push(...uplist);
}
}
}
}); });
}catch(e){ }catch(err){
console.log(err,"uploaderr");
if(this.$listeners.onError){ if(this.$listeners.onError){
this.$emit('onError',e); this.$emit('onError',e);
} }
@ -448,6 +484,7 @@
} }
.uploadtextbox{ .uploadtextbox{
.uploadtextcontain{ .uploadtextcontain{
margin-bottom:7px;
.uploadtextcontaindefaultbtn{ .uploadtextcontaindefaultbtn{
display:flex; display:flex;
align-items:center; align-items:center;
@ -492,6 +529,7 @@
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;
display: flex; display: flex;
padding: 5px 10px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
@ -505,18 +543,21 @@
} }
} }
} }
.ag-upload-list__item-namebox{
margin-right: 40px;
padding-left: 4px;
line-height: 1.8;
}
.ag-upload-list__item-name{ .ag-upload-list__item-name{
text-decoration: none; text-decoration: none;
color: #606266; color: #606266;
display: block; display: block;
margin-right: 40px; overflow: hidden;
overflow: hidden;
padding-left: 4px;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: color .3s; transition: color .3s;
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
line-height: 1.8;
.ag-icon-document{ .ag-icon-document{
height: 100%; height: 100%;
margin-right: 7px; margin-right: 7px;
@ -566,25 +607,30 @@
display: inline-block; display: inline-block;
width: 70px; width: 70px;
height: 70px; height: 70px;
float: left; float:left;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-left: -80px; margin-left: -80px;
background: #fff; background: #fff;
} }
.ag-upload-list__item-namebox{
margin-right: 40px;
padding-left: 4px;
line-height: 1.8;
}
.ag-upload-list__item-name{ .ag-upload-list__item-name{
flex:1; flex:1;
color: #606266; color: #606266;
display: block; display: block;
margin-right: 40px; overflow: hidden;
overflow: hidden;
padding-left: 4px;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: color .3s; transition: color .3s;
white-space: nowrap; white-space: nowrap;
line-height: 70px; line-height: 70px;
font-size:14px;
margin-top: 0; margin-top: 0;
text-decoration: none; text-decoration: none;
.ag-icon-document{ .ag-icon-document{
display:none; display:none;
} }
@ -614,6 +660,26 @@
} }
} }
} }
}
.uploadrightbox{
display:flex;
justify-content:flex-end;
align-items: center;
.uploadstatusbpx{
margin-right: 7px;
}
}
.uploadingicon{
color:#409eff;
}
.failedicon{
color:red;
}
.statusicon{
color:green;
}
.uploadmsg{
margin:0 7px;
} }
::v-deep { ::v-deep {
.el-table { .el-table {