携带参数
?
展示效果
?
?
父组件-html
<div class="page_linkbox">
<div class="link_left">主页地址</div>
<div class="link_right"
@click="showLinkwhere">
<img class="right_img"
src="../../assets/validation/plat-union.png"//随便图片
alt="">
<span class="right_text">链接在哪</span>
</div>
<div class="linkBox"
v-if="showLink">
<div class="link_wherebox">
<div class="close_btn"
@click="closeLink">
<img src="../../assets/validation/plat-close.png" //关闭按钮图片
alt="">
</div>
<div class="title">如何找到{{terraceInfo.name}}主页链接</div>
<v-accountImg :code="terraceInfo.code"></v-accountImg>//把code传递过去
</div>
</div>?父组件 js
<script lang='ts'>
import accountImg from '../validation/components/accountImg.vue'
import { defineComponent, onMounted, computed, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Toast, Dialog } from 'vant'
export default defineComponent({
components: {
'v-accountImg': accountImg,
},
setup() {
const router = useRouter(),
route = useRoute()
const title = ref(route.meta?.title || '')
const terraceInfo: any = ref({
code: '',
id: '',
name: '',
flag: false,
homelink: '',
homepage: '',
platInfo: {},
})
const code = ref()
const homelink = ref('')
const showLink = ref(false) //是否展示链接在哪
const showLinkwhere = () => {
showLink.value = !showLink.value
}
const closeLink = () => {
showLink.value = !showLink.value
}
onMounted(() => {
sessionStorage.removeItem('terraceInfo') //流程开始清除缓存
if (route.query.name) {
terraceInfo.value.name = route.query.name
terraceInfo.value.id = route.query.id
terraceInfo.value.code = route.query.code
}
})
return {
title,
terraceInfo,
showLink,
homelink,
code,
//方法
showLinkwhere,
closeLink,
}
},
})父组件css
<style scoped>
.page_linkbox {
margin-top: 0.56rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.24rem;
}
.page_linkbox .link_left {
color: #151515;
font-size: 0.28rem;
line-height: 0.4rem;
}
.page_linkbox .link_right {
display: flex;
align-items: center;
}
.page_linkbox .link_right .right_img {
width: 0.28rem;
height: 0.28rem;
margin-right: 0.08rem;
}
.page_linkbox .link_right .right_text {
color: #61646c;
font-size: 0.24rem;
}
.btnCont {
position: fixed;
bottom: 0rem;
background-color: #fff;
padding: 0.1rem 0 0.4rem 0;
left: 0;
width: 100%;
border: 0;
text-align: center;
}
.btnCont .savebtn {
color: #fff;
display: inline-block;
height: 0.88rem;
line-height: 0.88rem;
border-radius: 0.44rem;
width: 6.9rem;
margin: auto;
font-size: 0.3rem;
}
.btnCont .saveTrue {
background-color: #ff0b95;
}
.btnCont .saveFalse {
background-color: #ffbfe4;
}
.pagelinkIpt {
height: 3.3rem;
width: 6.9rem;
box-sizing: border-box;
text-align: left;
padding: 0.3rem;
outline: none;
border: 0;
background-color: #f4f7f9;
resize: none;
border-radius: 0.12rem;
color: #61646c;
font-size: 0.28rem;
word-break: break-all;
}
.pagelinkIpt::-webkit-input-placeholder {
color: #c1c4cb;
font-size: 0.28rem;
}
.linkBox {
position: fixed;
top: 0rem;
left: 0rem;
height: 100%;
width: 100%;
overflow: hidden;
z-index: 999;
background-color: rgba(0, 0, 0, 0.4);
}
.link_wherebox {
width: 100%;
/* overflow: auto;
height: 60vh; */
position: absolute;
bottom: 0;
left: 0;
background: #fff;
border-radius: 0.16rem 0.16rem 0 0;
padding: 0.5rem 0.3rem 0.52rem 0.3rem;
box-sizing: border-box;
}
.link_wherebox .close_btn {
width: 0.4rem;
height: 0.4rem;
position: absolute;
right: 0.3rem;
top: 0.3rem;
}
.link_wherebox .close_btn img {
width: 100%;
height: 100%;
}
.link_wherebox .title {
text-align: center;
margin-bottom: 0.4rem;
color: #151515;
font-size: 0.32rem;
font-weight: 500;
}
</style>子组件
<template>
<div class="account_imgbox">
<img class="platimg"
v-for="(item,index) in imgList"
:key="index"
:src="'图片路径/'+item"//这个就填你自己图片的前面路径就可以
alt="">
</div>
</template>
<script>
export default {
data() {
return {
plantImg: {
1: {
title: '微博',
list: ['1_1.png', '1_2.png', '1_3.png', '1_4.png'],
},
4: {
title: '抖音',
list: ['4_1.png', '4_2.png', '4_3.png', '4_4.png', '4_5.png'],
},
5: {
title: '快手',
list: ['5_1.png', '5_2.png', '5_3.png', '5_4.png'],
},
6: {
title: '小红书',
list: ['6_1.png', '6_2.png', '6_3.png'],
},
7: {
title: '哔哩哔哩',
list: ['7_1.png', '7_2.png', '7_3.png'],
},
8: {
title: '美图',
list: ['8_1.png', '8_2.png', '8_3.png', '8_4.png', '8_5.png'],
},
9: {
title: '知乎',
list: ['9_1.png', '9_2.png', '9_3.png', '9_4.png'],
},
},
imgList: [],
}
},
props: {
code: 0,
},
computed: {},
mounted() {
this.imgList = this.plantImg[this.code].list
},
methods: {},
}
</script>
<style scoped>
.account_imgbox {
max-height: 60vh;
overflow-y: scroll;
}
.account_imgbox .platimg {
width: 100%;
min-height: 4.5rem;
}
</style>遇到一个问题 一开始用了vant 中的van-overlay 里面展示图片过高度写了scorll也会不产生滚动条
自己写了一个遮罩层就好了，组件中的问题暂时没找到解决办法
如果有解决办法请指教
