|
3 | 3 | <view class="u-demo-wrap"> |
4 | 4 | <view class="u-demo-title">演示效果</view> |
5 | 5 | <view class="u-demo-area"> |
6 | | - <u-avatar :mode="mode" :size="size" :src="src" :text="text"> |
7 | | - </u-avatar> |
| 6 | + <u-avatar |
| 7 | + :mode="mode" |
| 8 | + :size="size" |
| 9 | + :src="src" |
| 10 | + :text="text" |
| 11 | + :showLevel="showLevel" |
| 12 | + :showSex="showSex" |
| 13 | + :sexIcon="sexIcon" |
| 14 | + :bgColor='bgColor' |
| 15 | + ></u-avatar> |
8 | 16 | </view> |
9 | 17 | </view> |
10 | 18 | <view class="u-config-wrap"> |
|
15 | 23 | <view class="u-item-title">模式选择</view> |
16 | 24 | <u-subsection vibrateShort :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection> |
17 | 25 | </view> |
| 26 | + <view class="u-config-item"> |
| 27 | + <view class="u-item-title">性别选择</view> |
| 28 | + <u-subsection vibrateShort :list="['男', '女', '不显示']" @change="sexChange"></u-subsection> |
| 29 | + </view> |
| 30 | + <view class="u-config-item"> |
| 31 | + <view class="u-item-title">等级</view> |
| 32 | + <u-subsection vibrateShort :list="['显示', '不显示']" @change="levelChange"></u-subsection> |
| 33 | + </view> |
18 | 34 | <view class="u-config-item"> |
19 | 35 | <view class="u-item-title">自定义内容</view> |
20 | | - <u-subsection vibrateShort current="1" :list="['默认', '图片', '文字']" @change="styleChange"></u-subsection> |
| 36 | + <u-subsection vibrateShort current="0" :list="['图片', '文字']" @change="styleChange"></u-subsection> |
21 | 37 | </view> |
22 | 38 | <view class="u-config-item"> |
23 | 39 | <view class="u-item-title">尺寸</view> |
|
34 | 50 | mode: 'circle', |
35 | 51 | src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', |
36 | 52 | text: '', // 优先级比src高 |
37 | | - size: '90' |
| 53 | + size: '90', |
| 54 | + showLevel: true, |
| 55 | + showSex: true, |
| 56 | + sexIcon: 'man', |
| 57 | + bgColor: '#fcbd71' |
38 | 58 | } |
39 | 59 | }, |
40 | 60 | methods: { |
|
43 | 63 | }, |
44 | 64 | styleChange(index) { |
45 | 65 | if(index == 0) { |
46 | | - this.src = ''; |
47 | | - this.text = ''; |
48 | | - } else if(index == 1) { |
49 | 66 | this.text = ''; |
50 | 67 | this.src = 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'; |
51 | 68 | } else { |
|
54 | 71 | }, |
55 | 72 | sizeChange(index) { |
56 | 73 | this.size = index == 0 ? 'large' : index == 1 ? 'default' : index == 2 ? 'mini' : 160; |
| 74 | + }, |
| 75 | + sexChange(index) { |
| 76 | + this.showSex = true; |
| 77 | + if(index == 0) this.sexIcon = 'man'; |
| 78 | + if(index == 1) this.sexIcon = 'woman'; |
| 79 | + if(index == 2) this.showSex = false; |
| 80 | + }, |
| 81 | + levelChange(index) { |
| 82 | + this.showLevel = !index; |
57 | 83 | } |
58 | | - |
59 | 84 | } |
60 | 85 | } |
61 | 86 | </script> |
|
0 commit comments