93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<!--
|
|
* @Descripttion: 用户头像
|
|
-->
|
|
<template>
|
|
<div class="xavatar" @click="getUser(data)">
|
|
<el-avatar v-if="data.anonymous" title="匿名发布" size="small">匿</el-avatar>
|
|
<el-avatar v-else :src="data[name]" size="small">空</el-avatar>
|
|
<label v-if="options.subfield" class="input-mask">
|
|
<input class="el-input__inner" type="text" readonly :value="data[options.subfield]">
|
|
</label>
|
|
</div>
|
|
<el-drawer type="primary" :with-header="false" append-to-body="true" v-if="visible" v-model="visible" :size="options.size || 1000" :show-close="false" style="overflow: initial;" destroy-on-close @closed="visible=false;$emit('closed')">
|
|
<el-button type="danger" @click="closeUser" class="userdrawerclose" icon="el-icon-close"> </el-button>
|
|
<x-user v-model="data"></x-user>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
modelValue: { type: Object, default: () => {} },
|
|
options: { type: Object, default: () => {} },
|
|
name: { type: String, default: "avatar" },
|
|
},
|
|
data() {
|
|
return {
|
|
data: this.modelValue,
|
|
visible:false,
|
|
}
|
|
},
|
|
watch:{
|
|
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
|
|
closeUser(){
|
|
this.visible = false;
|
|
},
|
|
getUser(){
|
|
|
|
// 无法找到会员
|
|
if (!this.data.uid && !this.data.uin) {
|
|
return false;
|
|
}
|
|
|
|
this.visible = true
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.xavatar{
|
|
display: flex;align-items: center;cursor: pointer;
|
|
}
|
|
|
|
.userdrawerclose {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 148px;
|
|
left: -36px;
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
padding: 6px;
|
|
font-size: 22px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
|
|
.xavatar .input-mask {
|
|
margin-left: 28px;
|
|
z-indexz: 1;
|
|
position: absolute;
|
|
}
|
|
|
|
.xavatar .input-mask::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|