改用 EAvatar
This commit is contained in:
kuaifan
parent
57f2064449
commit
aba5206b5c
2
resources/assets/js/app.js
vendored
2
resources/assets/js/app.js
vendored
@ -30,11 +30,13 @@ Vue.component('TableAction', TableAction);
|
||||
Vue.component('UserAvatar', UserAvatar);
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Tooltip,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
} from 'element-ui';
|
||||
Vue.component('EAvatar', Avatar);
|
||||
Vue.component('ETooltip', Tooltip);
|
||||
Vue.component('EDropdown', Dropdown);
|
||||
Vue.component('EDropdownMenu', DropdownMenu);
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
<div class="avatar-wrapper">
|
||||
<div :class="['avatar-box', userId === userid || user.online ? 'online' : '']" :style="boxStyle">
|
||||
<em :style="spotStyle"></em>
|
||||
<WAvatar v-if="showImg" :src="user.userimg" :size="avatarSize"/>
|
||||
<WAvatar v-else :size="avatarSize" class="avatar-text">{{nickname}}</WAvatar>
|
||||
<EAvatar v-if="showImg" :src="user.userimg" :size="avatarSize"/>
|
||||
<EAvatar v-else :size="avatarSize" class="avatar-text">{{nickname}}</EAvatar>
|
||||
</div>
|
||||
<div v-if="showName" class="avatar-name">{{user.nickname}}</div>
|
||||
</div>
|
||||
@ -23,11 +23,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WAvatar from "./WAvatar";
|
||||
import {mapState} from "vuex";
|
||||
export default {
|
||||
name: 'UserAvatar',
|
||||
components: {WAvatar},
|
||||
props: {
|
||||
userid: {
|
||||
type: [String, Number],
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
:avatar="item.userimg"
|
||||
:disabled="isDisabled(item.userid)">
|
||||
<div class="user-input-option">
|
||||
<div class="user-input-avatar"><WAvatar :src="item.userimg"/></div>
|
||||
<div class="user-input-avatar"><EAvatar class="avatar" :src="item.userimg"/></div>
|
||||
<div class="user-input-nickname">{{ item.nickname }}</div>
|
||||
<div class="user-input-userid">ID: {{ item.userid }}</div>
|
||||
</div>
|
||||
@ -36,10 +36,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WAvatar from "./WAvatar";
|
||||
export default {
|
||||
name: 'UserInput',
|
||||
components: {WAvatar},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Array],
|
||||
|
||||
@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<span :class="classes" :style="styles">
|
||||
<img :src="src" v-if="src" @error="handleError">
|
||||
<Icon :type="icon" :custom="customIcon" v-else-if="icon || customIcon"></Icon>
|
||||
<span ref="children" :class="[prefixCls + '-string']" :style="childrenStyle" v-else><slot></slot></span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'view-design-hi/src/components/icon';
|
||||
import { oneOf } from 'view-design-hi/src/utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-avatar';
|
||||
|
||||
const sizeList = ['small', 'large', 'default'];
|
||||
|
||||
export default {
|
||||
name: 'WAvatar',
|
||||
components: { Icon },
|
||||
props: {
|
||||
shape: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['circle', 'square']);
|
||||
},
|
||||
default: 'circle'
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default () {
|
||||
return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
|
||||
}
|
||||
},
|
||||
src: {
|
||||
type: String
|
||||
},
|
||||
icon: {
|
||||
type: String
|
||||
},
|
||||
customIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
scale: 1,
|
||||
childrenWidth: 0,
|
||||
isSlotShow: false,
|
||||
slotTemp: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-${this.shape}`,
|
||||
{
|
||||
[`${prefixCls}-image`]: !!this.src,
|
||||
[`${prefixCls}-icon`]: !!this.icon || !!this.customIcon,
|
||||
[`${prefixCls}-${this.size}`]: oneOf(this.size, sizeList)
|
||||
}
|
||||
];
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
if (this.size && !oneOf(this.size, sizeList)) {
|
||||
style.width = `${this.size}px`;
|
||||
style.height = `${this.size}px`;
|
||||
style.lineHeight = `${this.size}px`;
|
||||
style.fontSize = `${this.size/2}px`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
childrenStyle () {
|
||||
let style = {};
|
||||
if (this.isSlotShow) {
|
||||
style = {
|
||||
msTransform: `scale(${this.scale})`,
|
||||
WebkitTransform: `scale(${this.scale})`,
|
||||
transform: `scale(${this.scale})`,
|
||||
display: 'inline-block',
|
||||
};
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size (val, oldVal) {
|
||||
if (val !== oldVal) this.setScale();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setScale () {
|
||||
this.isSlotShow = !this.src && !this.icon;
|
||||
if (this.$refs.children) {
|
||||
// set children width again to make slot centered
|
||||
this.childrenWidth = this.$refs.children.offsetWidth;
|
||||
const avatarWidth = this.$el.getBoundingClientRect().width;
|
||||
// add 4px gap for each side to get better performance
|
||||
if (avatarWidth - 8 < this.childrenWidth) {
|
||||
this.scale = (avatarWidth - 8) / this.childrenWidth;
|
||||
} else {
|
||||
this.scale = 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
handleError (e) {
|
||||
this.$emit('on-error', e);
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.slotTemp = this.$slots.default;
|
||||
},
|
||||
mounted () {
|
||||
this.setScale();
|
||||
},
|
||||
updated () {
|
||||
if (this.$slots.default !== this.slotTemp) {
|
||||
this.slotTemp = this.$slots.default;
|
||||
this.setScale();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -333,13 +333,14 @@
|
||||
<Poptip
|
||||
confirm
|
||||
placement="bottom"
|
||||
style="margin-left:8px"
|
||||
@on-ok="onUser"
|
||||
transfer>
|
||||
<div slot="title">
|
||||
<p><strong>{{$L('移除成员负责的任务将变成无负责人，')}}</strong></p>
|
||||
<p>{{$L('注意此操作不可逆！')}}</p>
|
||||
</div>
|
||||
<Button type="primary" :loading="userLoad > 0" style="margin-left:8px">{{$L('保存')}}</Button>
|
||||
<Button type="primary" :loading="userLoad > 0">{{$L('保存')}}</Button>
|
||||
</Poptip>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
.avatar-box {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar-text {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
@ -13,8 +15,8 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ff0000;
|
||||
border: 1px solid #ffffff;
|
||||
|
||||
@ -27,7 +27,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-input-avatar {
|
||||
.ivu-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
1
resources/assets/sass/element.scss
vendored
1
resources/assets/sass/element.scss
vendored
@ -6,6 +6,7 @@ $--dropdown-menuItem-hover-fill: #f4f5f7;
|
||||
$--dropdown-menuItem-hover-color: #606266;
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/common/transition";
|
||||
@import "~element-ui/packages/theme-chalk/src/avatar";
|
||||
@import "~element-ui/packages/theme-chalk/src/tooltip";
|
||||
@import "~element-ui/packages/theme-chalk/src/dropdown";
|
||||
@import "~element-ui/packages/theme-chalk/src/dropdown-menu";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user