61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
|
<!--
|
||
|
|
* @Descripttion: 用户头像
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div style="display: flex;align-items: center;cursor: pointer; " @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" style="position: absolute;left: 42px;">
|
||
|
|
<input class="el-input__inner" type="text" readonly :value="data[options.subfield]">
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<el-drawer type="primary" :with-header="false" append-to-body="true" v-model="visible" :size="1000" :show-close="false" style="overflow: initial;" destroy-on-close @closed="$emit('closed')">
|
||
|
|
<el-button type="danger" @click="closeUser" class="userdrawerclose" icon="el-icon-close"> </el-button>
|
||
|
|
<x-user v-model="visibleInfo"></x-user>
|
||
|
|
</el-drawer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
modelValue: { type: Object, default: () => {} },
|
||
|
|
options: { type: Object, default: () => {} },
|
||
|
|
name: { type: String, default: "avatar" },
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
data: this.modelValue,
|
||
|
|
visible:false,
|
||
|
|
visibleInfo:{},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
closeUser(){
|
||
|
|
this.visible = false;
|
||
|
|
},
|
||
|
|
getUser(o){
|
||
|
|
this.visible = true
|
||
|
|
this.visibleInfo = {
|
||
|
|
uid:o.uid,
|
||
|
|
avatar:o.avatar,
|
||
|
|
nickname:o.nickname,
|
||
|
|
username:o.username,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.userdrawerclose {position: absolute; position: absolute; top: 148px; left: -36px; z-index: 10000; border-top-right-radius: 0px; border-bottom-right-radius: 0px; padding: 6px; font-size: 22px; font-weight: bolder;}
|
||
|
|
</style>
|