drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Avatar demo

Browse source
This commit is contained in:
梁灏 2018-02-26 10:15:56 +08:00
parent f4174ccd1b
commit a8afe010d9
1 changed files with 12 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
examples/routers/avatar.vue
View file

@ -1,80 +1,25 @@
<template> <template>
<div> <div class="demo-avatar">
<Avatar icon="person" size="large" style="background-color: #fde3cf;color: #f56a00"></Avatar> <Avatar :style="{background: color}">{{ user }}</Avatar>
<Avatar icon="person"></Avatar> <Button size="small" @click="handleChange">Change</Button>
<Avatar icon="person" size="small"></Avatar>
<Avatar icon="person" size="large" shape="square"></Avatar>
<Avatar icon="person" shape="square"></Avatar>
<Avatar icon="person" size="small" shape="square"></Avatar>
<br><br>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large"></Avatar>
<Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small"></Avatar>
<Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460" size="large" shape="square"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" shape="square"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small" shape="square"></Avatar>
<br><br>
<Avatar size="large">Leo</Avatar>
<Avatar size="large">A</Avatar>
<Avatar size="default">A</Avatar>
<Avatar size="small">A</Avatar>
<Avatar size="large">Tomserm</Avatar>
<Avatar size="large">{{ name }}</Avatar>
{{ name }}
<br><br>
<Badge dot>
<Avatar icon="person" shape="square"></Avatar>
</Badge>
<Badge :count="3">
<Avatar icon="person" shape="square"></Avatar>
</Badge>
<Button @click="change">change</Button>
<Menu mode="horizontal" :theme="theme1" active-name="1">
<MenuItem name="1">
<Icon type="ios-paper"></Icon>
内容管理
</MenuItem>
<MenuItem name="2">
<Icon type="ios-people"></Icon>
用户管理
</MenuItem>
<Submenu name="3">
<template slot="title">
<Icon type="stats-bars"></Icon>
统计分析
</template>
<MenuGroup title="使用">
<MenuItem name="3-1">新增和启动</MenuItem>
<MenuItem name="3-2">活跃分析</MenuItem>
<MenuItem name="3-3">时段分析</MenuItem>
</MenuGroup>
<MenuGroup title="留存">
<MenuItem name="3-4">用户留存</MenuItem>
<MenuItem name="3-5">流失用户</MenuItem>
</MenuGroup>
</Submenu>
<MenuItem name="4">
<Icon type="settings"></Icon>
综合设置
</MenuItem>
<div>
<Avatar icon="person"></Avatar>
</div>
</Menu>
</div> </div>
</template> </template>
<script> <script>
const UserList = ['二', '小二', '三', '二个人'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
export default { export default {
data () { data () {
return { return {
name: 'Aresn', user: UserList[0],
theme1: 'dark' color: ColorList[0]
} }
}, },
methods: { methods: {
change () { handleChange () {
this.name = 'Tomserm' const index = UserList.indexOf(this.user);
this.user = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
this.color = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0];
} }
} }
} }