hookehuyr

🎈 perf(组件): 选择幼儿园组件事件回调触发点调整

1 <template> 1 <template>
2 <div class="wrapper"> 2 <div class="wrapper">
3 <div class="w-image"> 3 <div class="w-image">
4 - <van-image v-if="avatar" class="van-hairline--surround" round width="3.8rem" height="3.8rem" lazy-load :src="avatar" style="position: absolute; left: 0.1rem; top: 0.1rem;" > 4 + <van-image class="van-hairline--surround avatar" round lazy-load :src="avatar ? avatar : icon_avatar">
5 - <template v-slot:error>加载失败</template> 5 + <template #error>加载失败</template>
6 - </van-image>
7 - <van-image v-else class="van-hairline--surround" round width="3.8rem" height="3.8rem" lazy-load :src="icon_avatar" style="position: absolute; left: 0.1rem; top: 0.1rem;" >
8 - <template v-slot:error>加载失败</template>
9 </van-image> 6 </van-image>
10 </div> 7 </div>
11 - <div class="text-wrapper" @click="handle"> 8 + <div class="text-wrapper">
12 - <van-row align="center" justify="center" style="position: relative; top: 50%; transform: translateY(-50%);"> 9 + <van-row align="center" justify="center" class="center-content">
13 - <van-col span="20" style="color: #713610;"><slot></slot></van-col> 10 + <van-col span="20" style="color: #713610;">
14 - <van-col span="4" style="text-align: center;"><van-icon name="arrow" color="#c5c5c5" size="1.25rem" /></van-col> 11 + <slot />
12 + </van-col>
13 + <van-col span="4" style="text-align: center;" @click="handle">
14 + <van-icon name="arrow" color="#c5c5c5" size="1.25rem" />
15 + </van-col>
15 </van-row> 16 </van-row>
16 </div> 17 </div>
17 </div> 18 </div>
...@@ -20,58 +21,54 @@ ...@@ -20,58 +21,54 @@
20 <script setup> 21 <script setup>
21 import icon_avatar from '@images/que-logo@2x.png' 22 import icon_avatar from '@images/que-logo@2x.png'
22 23
23 -import { ref, reactive, onMounted } from 'vue' 24 +// eslint-disable-next-line no-unused-vars
24 const props = defineProps({ 25 const props = defineProps({
25 - avatar: String 26 + avatar: {
27 + type: String,
28 + default: ''
29 + }
26 }) 30 })
27 -const emit = defineEmits(['on-click']); 31 +const emit = defineEmits(['on-icon-click']);
28 const handle = () => { 32 const handle = () => {
29 - emit('on-click', '') 33 + emit('on-icon-click', '')
30 -}
31 -
32 - onMounted(() => {
33 -
34 - })
35 -</script>
36 -
37 -<script>
38 -export default {
39 - data () {
40 - return {
41 -
42 - }
43 - },
44 - mounted () {
45 -
46 - },
47 - methods: {
48 -
49 - }
50 } 34 }
51 </script> 35 </script>
52 36
53 <style lang="less" scoped> 37 <style lang="less" scoped>
54 - .wrapper { 38 +.wrapper {
55 - position: relative; 39 + position: relative;
56 - background-color: #fff; 40 + background-color: #fff;
57 - margin: 2rem; 41 + margin: 2rem;
58 - margin-right: 0; 42 + margin-right: 0;
59 - margin-left: 4rem; 43 + margin-left: 4rem;
44 + height: 4rem;
45 + box-shadow: 0px 0px 4px 0px rgba(73, 156, 255, 0.2);
46 +
47 + .w-image {
48 + width: 4rem;
60 height: 4rem; 49 height: 4rem;
61 - box-shadow: 0px 0px 4px 0px rgba(73, 156, 255, 0.2); 50 + border-radius: 50%;
62 - .w-image { 51 + background-color: #FFF;
63 - width: 4rem; 52 + position: absolute;
64 - height: 4rem; 53 + left: -2rem;
65 - border-radius: 50%; 54 +
66 - background-color: #FFF; 55 + .avatar {
67 position: absolute; 56 position: absolute;
68 - left: -2rem; 57 + left: 0.1rem;
58 + top: 0.1rem;
59 + width: 3.8rem;
60 + height: 3.8rem;
69 } 61 }
70 - .text-wrapper { 62 + }
71 - height: 100%; 63 +
72 - text-align: left; 64 + .text-wrapper {
73 - // line-height: 4rem; 65 + height: 100%;
74 - padding-left: 3rem; 66 + text-align: left;
67 + // line-height: 4rem;
68 + padding-left: 3rem;
69 + .center-content{
70 + position: relative; top: 50%; transform: translateY(-50%);
75 } 71 }
76 } 72 }
73 +}
77 </style> 74 </style>
......
...@@ -5,9 +5,11 @@ ...@@ -5,9 +5,11 @@
5 <template v-for="(item, key) in schoolList" :key="key"> 5 <template v-for="(item, key) in schoolList" :key="key">
6 <right-side-list 6 <right-side-list
7 :avatar="item.logo" 7 :avatar="item.logo"
8 - @on-click="go('/client/chooseBook', { kg_id: item.id })" 8 + @on-icon-click="go('/client/chooseBook', { kg_id: item.id })"
9 > 9 >
10 - {{ item.name }} 10 + <span @click="go('/client/chooseBook', { kg_id: item.id })">
11 + {{ item.name }}
12 + </span>
11 </right-side-list> 13 </right-side-list>
12 </template> 14 </template>
13 </div> 15 </div>
......