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

liunan #10

Merged
liunan merged 47 commits from liunan into master 2024-09-13 14:43:34 +08:00
Conversation 0 Commits 47 Files Changed 39 +122 -57
4 changed files with 122 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d14d425a29 - Show all commits

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ag-element-ui",
"version": "0.1.6",
"version": "0.1.7",
"main": "packages/index.js",
"scripts": {
"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]" 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/>
<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 :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>
</el-radio-group>

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

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

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

@ -45,18 +45,31 @@
</slot>
<ul class="uploadtextlist" :class="'upload-list--'+listType">
<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">
<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>
<a class="ag-upload-list__item-name" >{{img.name}}</a>
</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
:title="`确定移除${img.name}吗？`"
@confirm="handleRemove(img.raw,index)"
>
<i class="el-icon-close ag-icon-close" slot="reference"></i>
</el-popconfirm>
</div>
</li>
</ul>
</div>
@ -204,13 +217,13 @@
}
try{
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)=>{
if(this.$attrs.accept){
let acceptarr=this.$attrs.accept.split(",");
if(!acceptarr.includes(f.type)){
if(this.$listeners.onError){
this.$emit('onError',`其中第${i+1}张图片类型错误`);
this.$emit('onError',`其中第${i+1}张文件类型错误`);
}
return true;
}
@ -218,38 +231,61 @@
if(this.$attrs.maxSize){
if(f.size>this.$attrs.maxSize){
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;
}
}
});
});
if(find){
return;
}
files.map((item,index) => {
let filerender=new FileReader();
filerender.onload=function(e){
uplist.push({
name:item.name,
url:e.target.result,
type:item.type,
size:item.size,
raw:item
});
if(files.length==uplist.length){
if(this.$listeners.onUpload){
this.fileList.push(...uplist);
this.$emit('onUpload',this.fileList,uplist);
}else{
this.imageList.push(...uplist);
if(item.type.indexOf("image")>-1){
let filerender=new FileReader();
filerender.onload=function(e){
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(this.$listeners.onUpload){
this.fileList.push(...uplist);
this.$emit('onUpload',this.fileList,uplist);
}else{
this.imageList.push(...uplist);
}
}
}
}.bind(this);
filerender.readAsDataURL(item);
}.bind(this);
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){
this.$emit('onError',e);
}
@ -448,6 +484,7 @@
}
.uploadtextbox{
.uploadtextcontain{
margin-bottom:7px;
.uploadtextcontaindefaultbtn{
display:flex;
align-items:center;
@ -492,6 +529,7 @@
margin-top: 5px;
position: relative;
display: flex;
padding: 5px 10px;
align-items: center;
justify-content: space-between;
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{
text-decoration: none;
color: #606266;
display: block;
margin-right: 40px;
overflow: hidden;
padding-left: 4px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
transition: color .3s;
white-space: nowrap;
font-size: 14px;
line-height: 1.8;
.ag-icon-document{
height: 100%;
margin-right: 7px;
@ -566,25 +607,30 @@
display: inline-block;
width: 70px;
height: 70px;
float: left;
float:left;
position: relative;
z-index: 1;
margin-left: -80px;
background: #fff;
}
.ag-upload-list__item-namebox{
margin-right: 40px;
padding-left: 4px;
line-height: 1.8;
}
.ag-upload-list__item-name{
flex:1;
color: #606266;
display: block;
margin-right: 40px;
overflow: hidden;
padding-left: 4px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
transition: color .3s;
white-space: nowrap;
line-height: 70px;
font-size:14px;
margin-top: 0;
text-decoration: none;
text-decoration: none;
.ag-icon-document{
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 {
.el-table {