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 圖標】