创建组件guide
<template>
<view v-if="show" class="guide-wrap">
<view class="guide-shadow" :style="{'width':(guideArray[currentIndex].width?guideArray[currentIndex].width:(width+10))+'px','height':(height+10)+'px','left':(left-5)+'px',top:(top-5)+'px','border-radius': guideArray[currentIndex].radius?guideArray[currentIndex].radius+'px':'' }"></view>
<template v-if="guideArray[currentIndex].type=='left'">
<view class="guide-messgae-left" :style="{'top':(guideArray[currentIndex].Mtop?guideArray[currentIndex].Mtop:(top+height+10))+'px','left':(guideArray[currentIndex].Mleft?guideArray[currentIndex].Mleft:left)+'px'}">
<image style="width: 32px;height: 57px;" src="@/static/guide_left.png"></image>
<view class="guide-messgae-content" :style="{'margin-left':guideArray[currentIndex].Cleft+'px'}">{{guideArray[currentIndex].guideMessage}}</view>
</view>
</template>
<template v-if="guideArray[currentIndex].type=='right'">
<view class="guide-messgae-left" :style="{'top':(guideArray[currentIndex].Mtop?guideArray[currentIndex].Mtop:(top+height+10))+'px','left':(guideArray[currentIndex].Mleft?guideArray[currentIndex].Mleft:left)+'px'}">
<image style="width: 32px;height: 57px;" src="@/static/guide_right.png"></image>
<view class="guide-messgae-content" :style="{'margin-left':guideArray[currentIndex].Cleft+'px'}">{{guideArray[currentIndex].guideMessage}}</view>
</view>
</template>
<image src="@/static/guide_btn.png" class="guide-btn" :style="{'top':(guideArray[currentIndex].Btop?guideArray[currentIndex].Btop:(imagesHeight+top+height))+'px'}" @click="click"></image>
</view>
</template>
<script>
export default {
name:"guide",
props: {
show: {
type: Boolean,
default: false
},
left: {
type: [Number, String],
default: ''
},
top: {
type: [Number, String],
default: ''
},
width: {
type: [Number, String],
default: ''
},
height: {
type: [Number, String],
default: ''
},
currentIndex: {
type: Number,
default: 0
},
guideArray: {
type: Array,
default:()=>{
return []
}
}
},
data() {
return {
imagesHeight:120
};
},
methods:{
click() {
this.$emit('click');
}
}
}
</script>
<style lang="scss" scoped>
.guide-wrap{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
}
.guide-shadow{
border: 1px dashed #FFFFFF;
position: absolute;
border-radius: 6px;
box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.guide-messgae-left{
border: 0px dashed #FFFFFF;
position: absolute;
max-width: 50%;
}
.guide-messgae-content{
pointer-events: none;
color: #fff;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
}
.guide-btn{
position: absolute;
width: 120px;
height: 42px;
left: 50%;
transform: translateX(-60px);
}
</style>
使用组件
1.在template中引入组件
<template>
<view class="refund-wrap">
<view class="refund-box">
<!-- 退款金额 -->
<view class="refund-money" style="margin-top: 16px;">
<view class="refund-money-title" id="guild001">退款金额</view>
<view class="refund-money-con" style="margin-top: 12.5px;">
<view class="refund-money-conItem">
<view class="refund-money-lf" id="guild002">退款</view>
<view class="refund-money-rg">
<text class="refund-money-rg1">￥123</text>
<text class="refund-money-rg2" id="guild003">￥234</text>
</view>
</view>
</view>
</view>
<!-- 退款说明 -->
<view class="matchDetail-introduce" style="margin-top: 16px;">
<view class="matchDetail-introduce-title">退款说明</view>
<view class="matchDetail-introduce-con" style="margin-top: 12.5px;">
<view class="matchDetail-introduce-item">
<view class="matchDetail-introduce-itemsubtitle">1、本活动由主办方委托【一起决斗吧】代为处理退款事宜；</view>
<view class="matchDetail-introduce-itemsubtitle">2、如需退款，请与活动开始前24小时之内提交申请，活动开始前24小时内不接受退款； </view>
<view class="matchDetail-introduce-itemsubtitle">3、退款时，将收取报名费的10%作为手续费。</view>
</view>
</view>
</view>
<!-- 退款理由 -->
<view class="refund-reason" style="margin-top: 16px;">
<view class="refund-reason-title" id="guild004">请输入退款理由</view>
<view class="refund-reason-con" style="margin-top: 12.5px;">
<textarea class="textarea" placeholder="请输入退款理由" placeholder-class="placeholderclass"></textarea>
</view>
</view>
</view>
<view style="height: 75px;"></view>
<view class="matchDetail-footer">
<view class="submit-btn form-btn">确认退款</view>
</view>
<guide :show="showGuide"
:guideArray="guideArray"
:width="GWidth"
:height="GHeight"
:left="GLeft"
:top="GTop"
:currentIndex="currentGuideIndex"
@click="nextGuideHandle">
</guide>
</view>
</template>
2.在script中的data中声明变量,设置初始化函数，点击触发函数
<script>
export default {
data() {
return {
showGuide:false,
GWidth:"",
GHeight:"",
GLeft:"",
GTop:"",
currentGuideIndex:0,
guideArray:[{
guideID:"guild001",
guideMessage:"点击此处查看申请比赛的说明规则",
width:"70",//文字宽度
type:"left",
Mleft:"",//提示框距离左边的距离
Mtop:"",//提示框距离上边的距离
Cleft:"",//提示框文字距离左边框的距离
Btop:"",//确认按钮距离上边的距离
},{
guideID:"guild002",
guideMessage:"查看瑞士轮对阵信息",
width:"40",//文字宽度
type:"left",
Mleft:"",//提示框距离左边的距离
Mtop:"",//提示框距离上边的距离
Cleft:"",//提示框文字距离左边框的距离
Btop:"",//确认按钮距离上边的距离
},{
guideID:"guild003",
guideMessage:"查看瑞士轮对阵信息",
width:"40",//文字宽度
type:"right",
Mleft:"",//提示框距离左边的距离
Mtop:"",//提示框距离上边的距离
Cleft:"-90",//提示框文字距离左边框的距离
Btop:"",//确认按钮距离上边的距离
},{
guideID:"guild004",
guideMessage:"查看瑞士轮对阵信息查看瑞士轮对阵信息",
width:"100",//文字宽度
type:"left",
Mleft:"",//提示框距离左边的距离
Mtop:"",//提示框距离上边的距离
Cleft:"",//提示框文字距离左边框的距离
Btop:"",//确认按钮距离上边的距离
}]
}
},
onLoad() {
},
onShow() {
this.initGuideFun(this.currentGuideIndex);
},
methods: {
/**
* 初始化指引页
*/
initGuideFun(currentGuideIndex){
this.$nextTick(()=>{
if(currentGuideIndex>=this.guideArray.length){
this.showGuide=false
return;
}
this.showGuide=true
//根据布局信息显示引导框位置
let ID="#"+this.guideArray[currentGuideIndex].guideID
const query = uni.createSelectorQuery().in(this);
query.select(ID).boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
this.GWidth = data.width;
this.GHeight = data.height;
this.GLeft = data.left;
this.GTop = data.top;
}).exec();
})
},
/**
* 指引页确认按钮
*/
nextGuideHandle(){
console.log("ok")
if(this.currentGuideIndex>=this.guideArray.length){
this.showGuide=false
return;
}
this.currentGuideIndex+=1;
this.initGuideFun(this.currentGuideIndex);
}
}
}
</script>
3.页面样式
<style lang="scss" scoped>
.refund-wrap{
display: flex;
flex-direction: column;
.refund-box{
width: 91.47%;
margin:12px auto;
display: flex;
flex-direction: column;
}
}
// 退款金额
.refund-money{
display: flex;
flex-direction: column;
.refund-money-title{
width: 100px;
font-size:15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
.refund-money-con{
width: 100%;
background: #252841;
border: 1px solid #575B79;
border-radius: 8px;
display: flex;
flex-direction: column;
.refund-money-conItem{
width:95.33%;
display: flex;
flex-direction: row;
margin:12.5px auto;
.refund-money-lf{
width: 50%;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
}
.refund-money-rg{
width: 50%;
text-align: end;
.refund-money-rg1{
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #F15251;
margin-right: 10px;
}
.refund-money-rg2{
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 400;
text-decoration: line-through;
color: #999999;
}
}
}
}
}
//退款说明
.matchDetail-introduce{
display: flex;
flex-direction: column;
.matchDetail-introduce-title{
font-size:15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
.matchDetail-introduce-con{
width: 100%;
background: #252841;
border: 1px solid #575B79;
border-radius: 8px;
display: flex;
flex-direction: column;
padding-top: 12.5px;
.matchDetail-introduce-item{
width:95.33%;
margin: auto;
display: flex;
flex-direction: column;
margin-bottom: 12.5px;
}
.matchDetail-introduce-itemtitle{
flex: 1;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
position: relative;
.point{
position: absolute;
top: -3px;
}
.matchDetail-introduce-itemtitletxt{
padding-left: 10px;
}
}
.matchDetail-introduce-itemsubtitle{
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
margin-top: 6.5px;
}
}
}
.refund-reason{
display: flex;
flex-direction: column;
.refund-reason-title{
font-size:15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
.refund-reason-con{
width: 100%;
background: #252841;
box-shadow: 0px 2.5px 9px 0px rgba(0, 0, 0, 0.21);
border: 1px solid #575B79;
border-radius: 8px;
display: flex;
flex-direction: column;
.textarea{
width:95.33%;
margin:11px auto;
height: 135px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
}
.placeholderclass{
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
}
}
}
.matchDetail-footer{
position: fixed;
height: 65px;
bottom: 0;
left: 0;
right: 0;
background: #0A0E1D;
box-shadow: 0px -3px 13px 0px rgba(255, 255, 255, 0.05);
z-index: 2;
display: flex;
.submit-btn{
width: 100%;
height: 44px;
background: linear-gradient(0deg, #F65555 0%, #E54848 100%);
border-radius: 22px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFEFA;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 27.5px;
}
.form-disabled{
background: #1B202F;
width:100%;
height: 44px;
border-radius: 22px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #82838F;
margin: 10px 27.5px;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
本文档展示了如何在uniapp中创建一个名为guide的自定义组件，用于实现页面指引功能。组件包括阴影遮罩、提示信息及确认按钮，并通过data属性接收配置。在使用组件时，需在template中引入，并在script中声明相关变量，设置初始化及点击事件处理。样式方面，定义了组件及各个元素的样式以实现所需布局。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
