vant - 头部 - header【Layout 布局】【Icon 图标】

 安装

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 图标】

 

 

posted @   Du.Du  阅读(8987)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示