2. 程式人生 > 程式設計 >用Vue封裝導航欄元件

用Vue封裝導航欄元件

阿新 • • 發佈：2021-09-15

HTML5

概述

IDEA建立HTML專案

網頁基本資訊

<!--這裡是html的註釋-->

<!--DOCTYPE:告訴瀏覽器，我們要使用什麼規範-->
<!DOCTYPE html>

<html lang="en">

<!--head標籤代表網頁頭部-->
<head>
    <!--  meta 描述性標籤，用來描述網站的一些資訊  -->
    <!--  meta標籤，一般用來做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="html5,學習">
    <meta name="description" content="來這裡可以學習html5">

    <!--  title網頁標題  -->
    <title>我的第一個網頁</title>
</head>

<!--body標籤代表網頁的主體-->
<body>
hello world!
</body>

</html>

網頁基本標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本標籤</title>
</head>
<body>
<!--標題標籤-->
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>

<!--段落標籤-->
<p>七律·長征</p>
<p>紅軍不怕遠征難，萬水千山只等閒。</p>
<p>五嶺逶迤騰細浪，烏蒙磅礴走泥丸。</p>
<p>金沙水拍雲崖暖，大渡橋橫鐵索寒。</p>
<p>更喜岷山千里雪，三軍過後盡開顏。</p>

<!--水平線標籤-->
<hr/>

<!--換行標籤-->
七律·長征 <br/>
紅軍不怕遠征難，萬水千山只等閒。<br/>
五嶺逶迤騰細浪，烏蒙磅礴走泥丸。<br/>
金沙水拍雲崖暖，大渡橋橫鐵索寒。<br/>
更喜岷山千里雪，三軍過後盡開顏。<br/>

<!--字型樣式標籤，粗體，斜體-->
<h1>字型樣式標籤</h1>
<strong>粗體：我愛我家</strong><br/>
<em>斜體：我愛我家</em><br/>

<!--特殊符號標籤-->
空格：我&nbsp;和&nbsp;你。<br/>
大於號：&gt;<br/>
小於號：&lt;<br/>
版權號：&copy;<br/>

</body>
</html>

影象標籤


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>影象標籤</title>
</head>
<body>
<!--img學習
src:圖片地址(必填)
    相對路徑：
    ../ 上一級目錄

alt:圖片載入失敗，顯示此名字 (必填)
title:滑鼠懸停在圖片上時，顯示此文字
width:圖片的高
height：圖片的寬
-->
<img src="../resource/image/1.jpg" alt="頭像" title="這是頭像圖片" width="300" height="300">
</body>
</html>

超連結標籤及應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>連結標籤</title>
</head>
<body>
<!--使用name作為標記-->
<a name="top">頂部</a><br/>

<!--a標籤：超連結
href:必填，表示要跳轉到哪個頁面
target:表示視窗在哪裡開啟
    _blank:在新標籤中開啟
    _self:在自己的網頁中開啟
-->
<a href="1.我的第一個網頁.html" target="_blank">點選我跳轉到頁面一</a><br/>
<a href="https://www.baidu.com" target="_self">點選我跳轉到百度</a><br/>
<a href="1.我的第一個網頁.html">
    <img src="../resource/image/1.jpg" alt="超連結" title="點選我跳轉到頁面一" width="100" height="100">
</a><br/>
<hr/>

<!--a標籤：錨鏈接
1.需要一個錨標記
2.跳轉到標記#
-->
<a href="#top">回到頂部</a><br/>
<hr/>

<!--a標籤：功能性連結
郵件連結：mailto:
QQ連結：百度“QQ推廣”，複製程式碼
-->
<a href="mailto:[email protected]">點選郵件聯絡我</a><br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2792178110&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2792178110:53" alt="你好，加我一起交流" title="你好，加我一起交流"/></a>

</body>
</html>

塊元素和行內元素

列表標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表標籤</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>運維</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>
<hr/>
<!--無序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>運維</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>
<hr/>
<!--自定義列表
dl:標籤
dt:列表名稱
dd:列表內容
-->
<dl>
    <dt>學科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
</dl>

</body>
</html>

表格標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
邊框 border
跨列 colspan
跨行 rowspan
-->
<table border="1px">
    <tr>
        <td colspan="4">學生成績</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

</body>
</html>

媒體元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒體元素</title>
</head>
<body>
<!--視訊video
src 路徑
controls 控制播放條
autoplay 一開啟就自動播放
-->
<video src="../resource/video/zhongqiu.mp4" controls></video>

<!--音訊audio
src 路徑
controls 控制播放條
autoplay 自動播放
-->
<audio src="../resource/audio/yinyue.mp3" controls></audio>

</body>
</html>

頁面結構分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面結構</title>
</head>
<body>

<header>
    <h2>網頁頭部</h2>
</header>

<section>
    <h2>網頁主體</h2>
</section>

<footer>
    <h2>網頁尾部</h2>
</footer>

</body>
</html>

iframe內聯框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內聯框架</title>
</head>
<body>
<!--iframe內聯框架
src 地址
name 
-->
<iframe name="hello" src="https://www.bilibili.com/?spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.1"
        frameborder="0" width="800px" height="500px"></iframe>

<a href="1.我的第一個網頁.html" target="hello">點選跳轉</a>

</body>
</html>

初識表單post和get提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入註冊</title>
</head>
<body>

<h1>註冊</h1>
<!--表單form
action 表單提交的位置 可以是一個網站 也可以是一個請求處理地址
method post get 兩種不一樣的提交方式
    get 我們可以在url中看到我們提交的資訊，不安全，高效
    post 比較安全，提交大檔案

-->
<form action="1.我的第一個網頁.html" method="post">
    <p>名字：<input type="text" name="username"></p>
    <p>密碼：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

文字框和單選框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入註冊</title>
</head>
<body>

<h1>註冊</h1>
<!--表單form
action 表單提交的位置 可以是一個網站 也可以是一個請求處理地址
method post get 兩種不一樣的提交方式
    get 我們可以在url中看到我們提交的資訊，不安全，高效
    post 比較安全，提交大檔案
value 初始值
maxlength 最大長度

-->
<form action="1.我的第一個網頁.html" method="post">
    <p>名字：<input type="text" name="username" value="mm" maxlength="8"></p>
    <p>密碼：<input type="password" name="pwd"></p>

<!--單選框標籤
type="radio"
value 單選框的值
name 表示組，單選框所有選項必須在同一組
-->
    <p>性別：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

按鈕和多選框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入註冊</title>
</head>
<body>

<h1>註冊</h1>
<!--表單form
action 表單提交的位置 可以是一個網站 也可以是一個請求處理地址
method post get 兩種不一樣的提交方式
    get 我們可以在url中看到我們提交的資訊，不安全，高效
    post 比較安全，提交大檔案
value 初始值
maxlength 最大長度

-->
<form action="1.我的第一個網頁.html" method="post">
    <p>名字：<input type="text" name="username" maxlength="8"></p>
    <p>密碼：<input type="password" name="pwd"></p>

<!--單選框標籤
type="radio"
value 單選框的值
name 表示組，單選框所有選項必須在同一組
-->
    <p>性別：
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--    多選框
type="checkbox"
value 多選框的值
name 表示組，一般會寫成同一個組
-->
    <p>愛好：
        <input type="checkbox" value="sing" name="hobby"/>唱歌
        <input type="checkbox" value="dance" name="hobby"/>跳舞
        <input type="checkbox" value="draw" name="hobby"/>畫畫
    </p>
    
<!--    按鈕
type="button"
value 按鈕上顯示的字
name 表示組
圖片按鈕，點選圖片跳轉
-->
    <p>按鈕：
        <input type="button" name="btn1" value="點選變長">
        <input type="image" src="../resource/image/1.jpg" width="100" height="100">
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表單">
    </p>
</form>

</body>
</html>

列表框文字域和檔案域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入註冊</title>
</head>
<body>

<h1>註冊</h1>
<!--表單form
action 表單提交的位置 可以是一個網站 也可以是一個請求處理地址
method post get 兩種不一樣的提交方式
    get 我們可以在url中看到我們提交的資訊，不安全，高效
    post 比較安全，提交大檔案
value 初始值
maxlength 最大長度

-->
<form action="1.我的第一個網頁.html" method="post">
    <p>名字：<input type="text" name="username" maxlength="8"></p>
    <p>密碼：<input type="password" name="pwd"></p>

<!--單選框標籤
type="radio"
value 單選框的值
name 表示組，單選框所有選項必須在同一組
checked 預設選中
-->
    <p>性別：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--    多選框
type="checkbox"
value 多選框的值
name 表示組，一般會寫成同一個組
checked 預設選中
-->
    <p>愛好：
        <input type="checkbox" value="sing" name="hobby"/>唱歌
        <input type="checkbox" value="dance" name="hobby" checked/>跳舞
        <input type="checkbox" value="draw" name="hobby"/>畫畫
    </p>
    
<!--    按鈕
type="button"
value 按鈕上顯示的字
name 表示組
圖片按鈕，點選圖片跳轉
-->
    <p>按鈕：
        <input type="button" name="btn1" value="點選變長">
        <input type="image" src="../resource/image/1.jpg" width="100" height="100">
    </p>

<!--    下拉框，列表框
selected 預設選中
-->
    <p>國家：
        <select name="列表名稱">
            <option value="China">中國</option>
            <option value="USA">美國</option>
            <option value="Britain" selected>英國</option>
        </select>
    </p>

<!--    文字域 多行-->
    <p>反饋:
        <textarea name="textarea" cols="30" rows="10">文字內容</textarea>
    </p>

<!--    檔案域 上傳檔案-->
    <p>
        <input type="file" name="files"/>
        <input type="button" name="upload" value="上傳"/>
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表單">
    </p>
</form>

</body>
</html>

搜尋框滑塊和簡單驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入註冊</title>
</head>
<body>

<h1>註冊</h1>
<!--表單form
action 表單提交的位置 可以是一個網站 也可以是一個請求處理地址
method post get 兩種不一樣的提交方式
    get 我們可以在url中看到我們提交的資訊，不安全，高效
    post 比較安全，提交大檔案
value 初始值
maxlength 最大長度

-->
<form action="1.我的第一個網頁.html" method="post">
    <p>名字：<input type="text" name="username" maxlength="8"></p>
    <p>密碼：<input type="password" name="pwd"></p>

<!--單選框標籤
type="radio"
value 單選框的值
name 表示組，單選框所有選項必須在同一組
checked 預設選中
-->
    <p>性別：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--    多選框
type="checkbox"
value 多選框的值
name 表示組，一般會寫成同一個組
checked 預設選中
-->
    <p>愛好：
        <input type="checkbox" value="sing" name="hobby"/>唱歌
        <input type="checkbox" value="dance" name="hobby" checked/>跳舞
        <input type="checkbox" value="draw" name="hobby"/>畫畫
    </p>
    
<!--    按鈕
type="button"
value 按鈕上顯示的字
name 表示組
圖片按鈕，點選圖片跳轉
-->
    <p>按鈕：
        <input type="button" name="btn1" value="點選變長">
        <input type="image" src="../resource/image/1.jpg" width="100" height="100">
    </p>

<!--    下拉框，列表框
selected 預設選中
-->
    <p>國家：
        <select name="列表名稱">
            <option value="China">中國</option>
            <option value="USA">美國</option>
            <option value="Britain" selected>英國</option>
        </select>
    </p>

<!--    文字域 多行-->
    <p>反饋:
        <textarea name="textarea" cols="30" rows="10">文字內容</textarea>
    </p>

<!--    檔案域 上傳檔案-->
    <p>
        <input type="file" name="files"/>
        <input type="button" name="upload" value="上傳"/>
    </p>

    <!--    郵件驗證-->
    <p>郵箱：
        <input type="email" name="email"/>
    </p>

    <!--    URL驗證-->
    <p>URL：
        <input type="url" name="url"/>
    </p>

    <!--    數字驗證-->
    <p>商品數量：
        <input type="number" name="number" max="100" min="0" step="1"/>
    </p>

    <!--    滑塊-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2"/>
    </p>

    <!--    搜尋框-->
    <p>搜尋：
        <input type="search" name="search"/>
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表單">
    </p>
</form>

</body>
</html>

表單的應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入註冊</title>
</head>
<body>

<h1>註冊</h1>
<!--表單form
action 表單提交的位置 可以是一個網站 也可以是一個請求處理地址
method post get 兩種不一樣的提交方式
    get 我們可以在url中看到我們提交的資訊，不安全，高效
    post 比較安全，提交大檔案
value 初始值
maxlength 最大長度
-->
<form action="1.我的第一個網頁.html" method="post">
<!--
value="admin" readonly 賦值並設定為只讀
value="123456" hidden 賦值並隱藏
-->
    <p>名字：<input type="text" name="username" maxlength="8" value="admin" readonly></p>
    <p>密碼：<input type="password" name="pwd" value="123456" hidden></p>

    <!--單選框標籤
    type="radio"
    value 單選框的值
    name 表示組，單選框所有選項必須在同一組
    checked 預設選中
    disabled 禁用
    -->
    <p>性別：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <!--    多選框
    type="checkbox"
    value 多選框的值
    name 表示組，一般會寫成同一個組
    checked 預設選中
    -->
    <p>愛好：
        <input type="checkbox" value="sing" name="hobby"/>唱歌
        <input type="checkbox" value="dance" name="hobby" checked/>跳舞
        <input type="checkbox" value="draw" name="hobby"/>畫畫
    </p>

    <!--    按鈕
    type="button"
    value 按鈕上顯示的字
    name 表示組
    圖片按鈕，點選圖片跳轉
    -->
    <p>按鈕：
        <input type="button" name="btn1" value="點選變長">
        <input type="image" src="../resource/image/1.jpg" width="100" height="100">
    </p>

    <!--    下拉框，列表框
    selected 預設選中
    -->
    <p>國家：
        <select name="列表名稱">
            <option value="China">中國</option>
            <option value="USA">美國</option>
            <option value="Britain" selected>英國</option>
        </select>
    </p>

    <!--    文字域 多行-->
    <p>反饋:
        <textarea name="textarea" cols="30" rows="10">文字內容</textarea>
    </p>

    <!--    檔案域 上傳檔案-->
    <p>
        <input type="file" name="files"/>
        <input type="button" name="upload" value="上傳"/>
    </p>

    <!--    郵件驗證-->
    <p>郵箱：
        <input type="email" name="email"/>
    </p>

    <!--    URL驗證-->
    <p>URL：
        <input type="url" name="url"/>
    </p>

    <!--    數字驗證-->
    <p>商品數量：
        <input type="number" name="number" max="100" min="0" step="1"/>
    </p>

    <!--    滑塊-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2"/>
    </p>

    <!--    搜尋框-->
    <p>搜尋：
        <input type="search" name="search"/>
    </p>

<!--    增強滑鼠可用性，點選文字也可以進行輸入-->
    <p>
        <label for="mark">你點我試試</label>
        <input type="text" id="mark">
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表單">
    </p>

<!--    表單應用
value="admin" readonly 賦值並設定為只讀
value="123456" hidden 賦值並隱藏
 disabled 禁用
-->
</form>

</body>
</html>

表單初級驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入註冊</title>
</head>
<body>

<h1>註冊</h1>
<!--表單form
action 表單提交的位置 可以是一個網站 也可以是一個請求處理地址
method post get 兩種不一樣的提交方式
    get 我們可以在url中看到我們提交的資訊，不安全，高效
    post 比較安全，提交大檔案
value 初始值
maxlength 最大長度
-->
<form action="1.我的第一個網頁.html" method="post">
<!--
value="admin" readonly 賦值並設定為只讀
value="123456" hidden 賦值並隱藏
placeholder 提示資訊
required  非空驗證
-->
    <p>名字：<input type="text" name="username" maxlength="8" placeholder="請輸入使用者名稱" required></p>
    <p>密碼：<input type="password" name="pwd" value="123456" hidden></p>

    <!--單選框標籤
    type="radio"
    value 單選框的值
    name 表示組，單選框所有選項必須在同一組
    checked 預設選中
    disabled 禁用
    -->
    <p>性別：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <!--    多選框
    type="checkbox"
    value 多選框的值
    name 表示組，一般會寫成同一個組
    checked 預設選中
    -->
    <p>愛好：
        <input type="checkbox" value="sing" name="hobby"/>唱歌
        <input type="checkbox" value="dance" name="hobby" checked/>跳舞
        <input type="checkbox" value="draw" name="hobby"/>畫畫
    </p>

    <!--    按鈕
    type="button"
    value 按鈕上顯示的字
    name 表示組
    圖片按鈕，點選圖片跳轉
    -->
    <p>按鈕：
        <input type="button" name="btn1" value="點選變長">
        <input type="image" src="../resource/image/1.jpg" width="100" height="100">
    </p>

    <!--    下拉框，列表框
    selected 預設選中
    -->
    <p>國家：
        <select name="列表名稱">
            <option value="China">中國</option>
            <option value="USA">美國</option>
            <option value="Britain" selected>英國</option>
        </select>
    </p>

    <!--    文字域 多行-->
    <p>反饋:
        <textarea name="textarea" cols="30" rows="10">文字內容</textarea>
    </p>

    <!--    檔案域 上傳檔案-->
    <p>
        <input type="file" name="files"/>
        <input type="button" name="upload" value="上傳"/>
    </p>

    <!--    郵件驗證-->
    <p>郵箱：
        <input type="email" name="email"/>
    </p>

    <!--    URL驗證-->
    <p>URL：
        <input type="url" name="url"/>
    </p>

    <!--    數字驗證-->
    <p>商品數量：
        <input type="number" name="number" max="100" min="0" step="1"/>
    </p>

    <!--    滑塊-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2"/>
    </p>

    <!--    搜尋框-->
    <p>搜尋：
        <input type="search" name="search"/>
    </p>

<!--    增強滑鼠可用性，點選文字也可以進行輸入-->
    <p>
        <label for="mark">你點我試試</label>
        <input type="text" id="mark">
    </p>

<!--    自定義郵箱驗證
百度常用正則表示式-->
    <p>郵箱：
        <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表單">
    </p>

<!--    表單應用
value="admin" readonly 賦值並設定為只讀
value="123456" hidden 賦值並隱藏
 disabled 禁用
-->
<!--    表單驗證
placeholder 提示資訊
required  非空驗證
pattern 自定義驗證
-->
</form>

</body>
</html>

總結

學習視訊

學習視訊

相關推薦

用Vue封裝導航欄元件

前言：把一個功能模組使用元件化的思想充分封裝，如導航欄，這無論對我們的開發思想還是效率都有許多好處，在開發中，我們要儘量多得運用元件化的開發思想，不要把所有程式碼都寫在同一個.檔案中，這樣能大大提高程式

Vue 如何實現一個底部導航欄元件

參考網址:https://www.jianshu.com/p/088936b7b1bd/ Vue 如何實現一個底部導航欄元件 可以看到父元件是知道我點選了底部TabBar的哪個item的。

Vue3導航欄元件封裝實現方法

在3中封裝一個導航欄元件，並且實現，隨著滾動條滾動實現一個吸頂效果，供大家參考

vue+element-ui實現頭部導航欄元件

本文例項為大家分享了+element-ui實現頭部導航欄元件具體程式碼，供大家參考，具體內容如下

element-ui 左側導航欄元件

element-ui 左側導航欄的佈局實現，效果如下圖 涉及的元件： 　　App.vue 　　router.js

微信小程式自定義導航欄元件

1.首先,要在json檔案中設定為自定義的形式 \"navigationStyle\": \"custom\" 2.計算相關值

Vue實現導航欄選單

本文例項為大家分享了Vue實現導航欄選單的具體程式碼，供大家參考，具體內容如下

小程式開發-自定義導航欄元件

上一篇文章講到了小程式設定全屏，隱藏導航欄的方式。 主要是配置自定義導航欄"navigationStyle": "custom"

vue 封裝麵包屑元件教程

我看過一篇關於程式設計師寫部落格的文章，他說很多的程式設計師過了兩年寫了很多的程式碼，但是回想起來自己具體做了哪些技術點，遇到坑幾乎沒有印象，所以說文字是記錄的最好方式，好記性不如爛筆頭，可以方便自己

vue-部分導航欄在頁面公共出現或者單獨出現的處理方法

目錄結構： 公共元件-輪播圖 login/index.vue 1 <template> 2<div class=\'Imgroll\'>

微信小程式自定義頭部導航欄元件

技術標籤：筆記微信小程式jswxmlwxss 微信小程式自定義頭部導航欄元件 好久沒有更新微信小程式了，現在寫寫微信小程式的自定義頭部元件，首先我們需要建立一個元件存放的資料夾：在這裡面建立我們所需要的元件資

UNI-APP_uni-ap自動獲取狀態列高度，自定義導航欄元件

技術標籤：UNI-APP uni-ap自動獲取狀態列高度屬性 uni.getSystemInfoSync().statusBarHeight 元件定義：

vue 封裝 按鈕button元件

技術標籤：vue前端外掛Web前端 元件放專案目錄： src/components 下面 PlainButton元件

Vue封裝全域性toast元件的完整例項

目錄前言一. 藉助 -cli1. 定義 Toast 元件2. 在 main. 裡面配置3. 在其他元件內使用二、不借助 vue-cli1. 註冊 toast 元件2. 註冊 toast 外掛3. 在其他元件內使用總結前言

Vue封裝通用table元件的完整步驟記錄

目錄前言為什麼需要封裝table元件？第一步：定義通用元件第二步：父元件與子元件進行render通訊第三步：使用元件總結前言

Vue通過導航欄實現路由跳轉

導航欄的具體引用這裡不在多說了，具體用法可以參考vue官網 先把可以實現跳轉的程式碼貼上，然後說幾個注意點

微信小程式自定義底部導航欄元件

本文例項為大家分享了微信小程式底部導航欄元件的具體實現程式碼，供大家參考，具體內容如下

超詳細教程實現Vue底部導航欄TabBar

目錄專案介紹：專案目錄：TabBar效果預覽：TabBar實現思路一、如果在下方有一個單獨的TabBar元件，如何封裝二、TabBar中現實的內容由外界決定。三、自定義TabBarItem，可以傳入圖片和文字專案檔案目錄建立檔案目錄介

用vue封裝外掛併發布到npm

一、基於vue的國家區號列表 vue-flag-list包含了大部分國家的區號，點選右邊的三角形展開列表可以選擇國家區號，若列表中沒有區號，也可以自己輸入區號。

導航欄元件演示

對於input的表單來說，.value即是表單中的值 meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">