hookehuyr

✨ feat(组件): 新增左圆右靠列表组件

1 +<template>
2 + <div class="wrapper">
3 + <van-image
4 + class="van-hairline--surround"
5 + round
6 + width="4rem"
7 + height="4rem"
8 + lazy-load
9 + :src="avatar"
10 + style="position: absolute; left: -2rem;"
11 + >
12 + <template v-slot:error>加载失败</template>
13 + </van-image>
14 + <div class="text-wrapper" @click="handle">
15 + <van-row>
16 + <van-col span="20" style="color: #713610;"><slot></slot></van-col>
17 + <van-col span="4"><van-icon name="arrow" /></van-col>
18 + </van-row>
19 + </div>
20 + </div>
21 +</template>
22 +
23 +<script setup>
24 +import { ref, reactive, onMounted } from 'vue'
25 +const props = defineProps({
26 + avatar: String
27 +})
28 +const emit = defineEmits(['on-click']);
29 +const handle = () => {
30 + emit('on-click', '')
31 +}
32 +
33 + onMounted(() => {
34 +
35 + })
36 +</script>
37 +
38 +<script>
39 +export default {
40 + data () {
41 + return {
42 +
43 + }
44 + },
45 + mounted () {
46 +
47 + },
48 + methods: {
49 +
50 + }
51 +}
52 +</script>
53 +
54 +<style lang="less" scoped>
55 + .wrapper {
56 + position: relative;
57 + background-color: #fff;
58 + margin: 1rem;
59 + margin-right: 0;
60 + margin-left: 4rem;
61 + height: 4rem;
62 + .text-wrapper {
63 + text-align: left;
64 + line-height: 4rem;
65 + padding-left: 3rem;
66 + }
67 + }
68 +</style>
...\ No newline at end of file ...\ No newline at end of file