正文
mpvue——componets中引入vant-weapp组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前言
这个问题很奇葩，网上也有很多人，给了很多方法，但是我想说的是，那些方法我用了都没效果，我试了一些都没效果，因为我当时引入时报错说没有export default出来，但是一旦暴露出来就又出其他问题，还是比较蛋疼的，所以还是直接自己研究了下,因为一边学一边弄，所以就先写个大概的,如果不理解请在评论中指出,或者私信,我会在后面重构。
正文
封装的页面上该用vant的组件就用vant的组件，也不用引入，直接写就好了，只需要在调用的页面的main.json中去引入vant的组件即可
封装的页面
<template>
<van-popup class="game-rules custom" :show="showRules">
</van-popup>
</template>
<script>
export default {
data() {
return {
showRules: false,
}
},
methods: {
openRules() {
this.showRules = true;
},
clickBtn() {
this.showRules = false;
}
},
}
</script>
<style lang="less" scoped>
.van-popup.game-rules {
color: #fff;
font-size: 12px;
.top-header {
top: -50px;
img {
width: 216px;
}
}
.first {
width: 100%;
height: 42px;
border-radius: 8px;
background: linear-gradient(to bottom, #F47979, #E54444);
}
.second {
width: calc(100% - 30px);
box-sizing: border-box;
margin: 0 auto;
padding: 16px 14px;
padding-right: 10px;
background: linear-gradient(to bottom, #F86D6D, #E13333);
border-radius: 0 0 8px 8px;
.detail {
text-align: left;
margin-bottom: 16px;
}
.detail-title {
margin-top: 8px;
margin-bottom: 8px;
font-weight: bold;
img {
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: text-top;
}
}
.detail-item {
line-height: 1.3;
}
}
.title {
font-size: 16px;
}
.hint {
color: rgba(255,255,255,0.5);
font-size: 10px;
margin-top: 15px;
}
.iknow {
font-size: 15px;
width: 75px;
height: 30px;
line-height: 30px;
}
}
</style>
调用的页面
<template>
<van-popup class="game-rules custom" :show="showRules"> </van-popup>
</template> <script>
export default {
data() {
return {
showRules: false,
}
},
methods: {
openRules() {
this.showRules = true;
},
clickBtn() {
this.showRules = false;
}
},
}
</script> <style lang="less" scoped>
.van-popup.game-rules { color: #fff;
font-size: 12px; .top-header {
top: -50px; img {
width: 216px;
}
} .first {
width: 100%;
height: 42px;
border-radius: 8px;
background: linear-gradient(to bottom, #F47979, #E54444);
} .second {
width: calc(100% - 30px);
box-sizing: border-box;
margin: 0 auto;
padding: 16px 14px;
padding-right: 10px;
background: linear-gradient(to bottom, #F86D6D, #E13333);
border-radius: 0 0 8px 8px; .detail {
text-align: left;
margin-bottom: 16px;
}
.detail-title {
margin-top: 8px;
margin-bottom: 8px;
font-weight: bold;
img {
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: text-top;
}
}
.detail-item {
line-height: 1.3;
}
}
.title {
font-size: 16px;
}
.hint {
color: rgba(255,255,255,0.5);
font-size: 10px;
margin-top: 15px;
}
.iknow {
font-size: 15px;
width: 75px;
height: 30px;
line-height: 30px;
} }
</style>
main.json引入vant
