vue component model prop event All In One
vue component model prop event All In One
vue components & custom events
https://vuejs.org/v2/guide/components-custom-events.html
WTF
demo
<template>
<div class="inline-block">
<el-select
:class="['avatar-select', selected.url ? 'selected' : 'not-selected']"
v-model="selected.id"
popper-class="avatar-select-dropdown"
:loading="loading"
:popper-append-to-body="false"
@change="handleChangeAvatar">
<img class="result-img m-r-8" slot="prefix" :src="selected.url" />
<div v-show="avatarList.length <= 1" class="no-data c-999 f12">
暂无数据
</div>
<div v-show="avatarList.length > 1" class="avatar-select-options-content" style="max-height: 214px; overflow: auto;">
<el-option
v-show="item.id"
v-for="item in avatarList" :key="item.id"
:value="item.id" :label="item.name">
<div class="avatar-select-item">
<div class="avatar-select-item-img">
<img :src="item.url">
<span class="name c-333 f12 m-l-10 text-ellipsis" :title="item.name">{{item.name}}</span>
</div>
<a class="delete f12" v-show="showDeleteBtn" @click.stop="handleDeleteAvatar(item)">删除</a>
</div>
</el-option>
</div>
<div v-show="showAvatarBottom" class="avatar-select-btn">
<a class="hand" v-show="showAddBtn" @click.stop="handleAddAvatar">新建头像及昵称跳转页</a>
<span v-show="showAddBtn" class="m-l-8 m-r-8" style="color: #c0c4cc;">|</span>
<a class="hand" v-show="showRefreshBtn" @click.stop="getAvatarList">刷新</a>
</div>
</el-select>
<AddAvatarModal
:visible="addAvatarModalvisible"
:spreaderId="spreaderId"
:gameId="gameId"
@close="handleAddAvatarModalClose"
@confirm="handleAddAvatarModalconfirm">
</AddAvatarModal>
<el-dialog
title="删除头像及昵称跳转页"
:visible.sync="deleteModalvisible"
width="420px"
:modal-append-to-body='false'
:before-close="handleDeleteModalClose">
<el-row class="p-l-20 p-r-20">
<el-col :span="24">
<i class="el-icon-warning m-r-10 f18 c-yellow"></i>
<span class="vertical-top">{{ `确定将删除“${currentDelete.name}”?` }}</span>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="handleDeleteModalClose">取 消</el-button>
<el-button type="primary" :loading="confirmDeleteBtnLoading" @click="handleDeleteConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import AddAvatarModal from './AddAvatarModal';
import Advertise2GdtService from '@/services/advertise-2/gdtService';
import Utils from '@/utils';
const allOperations = ['add','refresh','delete'];
let avatarListMap = {};
const defaultOption = { id: 0, name: '请选择', url: '' };
export default {
name: 'AvatarSelect',
components: { AddAvatarModal },
props: {
value: {
type: [Number, String],
default: 0,
},
operations: {
type: Array,
default: () => allOperations,
},
spreaderId: {
type: Number,
default: 0,
},
gameId: {
type: Number,
default: 0,
},
},
model: {
prop: 'value',
event: 'change'
},
data () {
return {
avatarList: [],
selected: {
id: '',
url: '',
name: '',
},
addAvatarModalvisible: false,
deleteModalvisible: false,
currentDelete: {
id: '',
url: '',
name: '',
},
confirmDeleteBtnLoading: false,
loading: false,
};
},
computed: {
showAddBtn () {
return this.operations.includes('add');
},
showRefreshBtn () {
return this.operations.includes('refresh');
},
showDeleteBtn () {
return this.operations.includes('delete');
},
showAvatarBottom () {
return this.showAddBtn || showRefreshBtn;
},
},
mounted () {
this.getAvatarList();
},
methods: {
getAvatarList () {
const param = {
game_id: this.gameId,
spreader_id: this.spreaderId,
};
this.loading = true;
return Advertise2GdtService.getGdtProfileList(param).then(resp => {
let avatarList = resp.data.data.rows || [];
this.loading = false;
avatarList = Utils.convertObjInArray(avatarList, { 'head_image_url': 'url', id: 'id', name: 'name', description: 'description' });
this.avatarList = [].concat(defaultOption, avatarList);
avatarListMap = {...avatarListMap, ...Utils.getListMap(this.avatarList, 'id')};
this.$nextTick(() => {
const listStyle = document.querySelector('.avatar-select .el-select-dropdown__list')?.style;
if (listStyle) {
listStyle.paddingTop = 0;
listStyle.paddingBottom = 0;
}
if (this.value) {
this.handleChangeAvatar(this.value);
}
});
}).catch(err => {
this.loading = false;
});
},
handleDeleteModalClose () {
this.deleteModalvisible = false;
},
handleDeleteAvatar (avatarItem) {
this.deleteModalvisible = true;
this.currentDelete = avatarItem;
},
handleDeleteConfirm () {
const param = {
game_id: this.gameId,
spreader_id: this.spreaderId,
id: this.currentDelete.id
};
this.confirmDeleteBtnLoading = true;
return Advertise2GdtService.deleteGdtProfile(param).then(resp => {
this.confirmDeleteBtnLoading = false;
this.$message.success('删除头像成功');
this.handleDeleteModalClose();
setTimeout(() => {
this.getAvatarList();
}, 300);
}).catch(err => {
this.confirmDeleteBtnLoading = false;
});
},
handleAddAvatar () {
this.addAvatarModalvisible = true;
},
handleAddAvatarModalClose () {
this.addAvatarModalvisible = false;
},
handleAddAvatarModalconfirm () {
this.handleAddAvatarModalClose();
// 不加定时器会有闪屏
setTimeout(() => {
this.getAvatarList();
}, 300);
},
handleChangeAvatar (id) {
const option = avatarListMap[id] || {};
if (option.id) {
this.selected.id = option.id;
this.selected.name = option.name;
this.selected.url = option.url;
}
this.$emit('change', id);
},
},
watch: {
value: {
handler (val) {
if (val) {
console.log('va ???', val);
this.handleChangeAvatar(val);
}
},
immediate: true,
},
},
};
</script>
<style lang="scss" scoped>
.avatar-select {
width: 300px;
&.selected {
/deep/ .el-input__inner {
padding-left: 38px;
}
}
&.not-selected {
/deep/ .el-input__inner {
padding-left: 15px;
}
}
/deep/ .el-input__inner::placeholder {
color: #c0c4cc !important;
}
.result-img {
width: 24px;
height: 24px;
border-radius: 2px;
position: relative;
top: -1px;
}
}
.el-select-dropdown.avatar-select-dropdown {
.el-select-dropdown__wrap {
.el-select-dropdown__item {
padding: 0;
height: 56px;
line-height: 56px;
.avatar-select-item {
box-sizing: content-box;
display: flex;
justify-content: space-between;
align-items: center;
height: 56px;
// line-height: 56px;
padding: 0 10px;
.avatar-select-item-img {
display: flex;
justify-content: flex-start;
align-items: center;
width: calc(100% - 50px);
}
img {
width: 40px;
height: 40px;
border-radius: 8px;
}
.name {
display: inline-block;
width: 178px;
}
.delete {
justify-content: flex-end;
}
}
}
}
.avatar-select-btn {
box-sizing: border-box;
height: 36px;
line-height: 36px;
padding: 0 10px;
border-top: 1px solid #EBEEF5;
&.no-top-border {
border-top-color: transparent;
}
}
.no-data {
height: 80px;
line-height: 80px;
text-align: center;
}
}
</style>
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15350050.html
未经授权禁止转载,违者必究!