zoukankan      html  css  js  c++  java
  • vant

     安装

    npm i vant -S

    【main.js】

    import Vant from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Vant);

    【index.html】

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.4/lib/index.css">
            
    <!-- 引入组件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@1.4/lib/vant.min.js"></script>

    【HelloWorld.vue】

    <template>
        <div class="hello">
            <van-row class="m-header">
                <van-col span="24">
                    <van-icon name="arrow-left" class="m-header-icon" />
              内容
           </van-col> </van-row> </div> </template>
    <style scoped>
        .m-header {
            height: 50px;
            line-height: 50px;
            background: #245fd7;
            color: #fff;
        }
        
        .m-header-icon {
            position: absolute;
            top: 16px;
            left: 6px;
            font-size: 18px;
        }
    </style>

     具体参数查看vant API 【Layout 布局】【Icon 图标】

     

     

  • 相关阅读:
    qt动态加载UI文件
    Qt常见控件和操作
    MySQL
    tomcat
    linux iptables基础
    linux 网络基础
    linux CA及OpenSSL学习
    k8s 访问控制
    k8s 存储卷
    docker 安装部署
  • 原文地址:https://www.cnblogs.com/dudu123/p/10032555.html
Copyright © 2011-2022 走看看