mpvue——componets中引入vant-weapp组件

前言

这个问题很奇葩，网上也有很多人，给了很多方法，但是我想说的是，那些方法我用了都没效果，我试了一些都没效果，因为我当时引入时报错说没有export default出来，但是一旦暴露出来就又出其他问题，还是比较蛋疼的，所以还是直接自己研究了下,因为一边学一边弄，所以就先写个大概的,如果不理解请在评论中指出,或者私信,我会在后面重构。

正文

封装的页面上该用vant的组件就用vant的组件，也不用引入，直接写就好了，只需要在调用的页面的main.json中去引入vant的组件即可

封装的页面

代码语言：javascript复制

<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

height mpvue vant width 重构

0 人点赞