组件优化

This commit is contained in:
吕金泽
2022-05-15 18:07:30 +08:00
parent ea9ef20c96
commit fb66f0c105
11 changed files with 67 additions and 33 deletions
@@ -10,18 +10,17 @@ const props = defineProps({
type: String,
default: 'mb-icon'
},
icon: String,
size: String,
icon: String
});
const symbolId = computed(() => props.icon&&props.icon.startsWith('#') ? props.icon : `#${props.prefix}-${props.icon}`)
const className = computed(() => props.icon&&props.icon.startsWith('#') ? props.icon.substring(1) : `${props.prefix}-${props.icon}`)
</script>
<style scoped>
svg {
width: 1.3em;
width: 1.3em;
height: 1.3em;
vertical-align: -0.25em;
overflow: hidden;
fill: var(--mb-main-icon-color)
}
</style>
</style>
@@ -29,7 +29,7 @@ import { watch, ref, reactive, defineExpose, nextTick, getCurrentInstance, onBef
const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'check-change', 'node-click', 'mounted'])
const emit = defineEmits(['update:modelValue', 'check-change', 'node-click'])
const props = defineProps({
url: {
@@ -85,6 +85,10 @@ export default {
showRemoveTip: {
type: Boolean,
default: () => true
},
join: {
type: Boolean,
default: true
}
},
data() {
@@ -172,8 +176,13 @@ export default {
}
})
if (this.multiple) {
this.$emit('update:modelValue', this.urls)
this.$emit('change', this.urls)
if(this.join){
this.$emit('update:modelValue', this.urls.join(','))
this.$emit('change', this.urls.join(','))
}else{
this.$emit('update:modelValue', this.urls)
this.$emit('change', this.urls)
}
} else {
document.getElementById(this.uploadDomId).getElementsByClassName('el-upload__input')[0].removeAttribute('disabled')
this.$emit('update:modelValue', '')
@@ -196,10 +205,15 @@ export default {
handleAvatarSuccess(res, file, fileList) {
this.uploadLoading = false
if (res.data) {
this.urls.push(res.data.url)
if (this.multiple) {
this.urls.push(res.data.url)
this.$emit('update:modelValue', this.urls)
this.$emit('change', this.urls)
if(this.join){
this.$emit('update:modelValue', this.urls.join(','))
this.$emit('change', this.urls.join(','))
}else{
this.$emit('update:modelValue', this.urls)
this.$emit('change', this.urls)
}
} else {
document.getElementById(this.uploadDomId).getElementsByClassName('el-upload__input')[0].setAttribute('disabled', '')
this.$emit('update:modelValue', res.data.url)
@@ -133,6 +133,10 @@ export default {
tipColor: {
type: String,
default: ''
},
join: {
type: Boolean,
default: true
}
},
data() {
@@ -200,8 +204,13 @@ export default {
})
this.$delete('/system/file/delete', { url: encodeURI(url) })
if (this.multiple) {
this.$emit('update:modelValue', this.urls)
this.$emit('change', this.urls)
if(this.join){
this.$emit('update:modelValue', this.urls.join(','))
this.$emit('change', this.urls.join(','))
}else{
this.$emit('update:modelValue', this.urls)
this.$emit('change', this.urls)
}
} else {
this.$emit('update:modelValue', '')
this.$emit('change', '')
@@ -221,8 +230,13 @@ export default {
this.urls.push(res.data.url)
// console.log(this.urls)
if (this.multiple) {
this.$emit('update:modelValue', this.urls)
this.$emit('change', this.urls)
if(this.join){
this.$emit('update:modelValue', this.urls.join(','))
this.$emit('change', this.urls.join(','))
}else{
this.$emit('update:modelValue', this.urls)
this.$emit('change', this.urls)
}
} else {
this.$emit('update:modelValue', res.data.url)
this.$emit('change', res.data.url)
@@ -8,7 +8,10 @@
<el-button v-if="it.type == 'add'" v-permission="it.permission" class="filter-item" type="primary" icon="ElIconPlus" @click="it.click">
{{ it.label || '添加' }}
</el-button>
<mb-button v-if="it.type == 'delete'" v-permission="it.permission" :plain="true" :request-url="it.url" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reload" />
<mb-button v-else-if="it.type == 'delete'" v-permission="it.permission" :plain="true" :request-url="it.url" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reload" />
<el-button v-else :icon="it.icon" :key="it.label" v-permission="it.permission" :type="it.type" :size="it.size" :class="it.class" @click="it.click(ids)">
{{ it.label }}
</el-button>
</div>
</el-row>