zoukankan      html  css  js  c++  java
  • 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 {
                     216px;
                }
            }
    
            .first {
                 100%;
                height: 42px;
                border-radius: 8px;
                background: linear-gradient(to bottom, #F47979, #E54444);
            }
    
            .second {
                 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 {
                         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;
                 75px;
                height: 30px;
                line-height: 30px;
            }
    
        }
    </style>

    调用的页面

    main.json引入vant

  • 相关阅读:
    票房和口碑称霸国庆档,用 Python 爬取猫眼评论区看看电影《我和我的家乡》到底有多牛
    用 Python 写个七夕表白神器
    3. GC复制算法
    一个粗糙的RPC框架设计思路
    503Service Unavailable
    centos 7.8下载地址
    海康摄像头SDK在Linux、windows下的兼容问题(二)已解决
    海康摄像头SDK在Linux、windows下的兼容问题
    二重指针
    【JavaScript 对象03】
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/10449915.html
Copyright © 2011-2022 走看看