「Vu組件」創建菜單的導航組件

nt Design Vue Menu 組件是一個用于在 Vue 應用程序中創建菜單的導航組件。它是一個功能豐富的組件，可用于創建各種不同樣式的菜單，包括水平菜單、垂直菜單和子菜單。

Ant Design Vue Menu 的主要功能:

靈活定制: 您可以自定義菜單的外觀以匹配您的應用程序品牌。

易于使用: Menu 組件易于使用，并具有完善的文檔記錄的 API。

響應式: Menu 組件是響應式的，并會自動調整其布局以適應不同屏幕尺寸。

可訪問性: Menu 組件是可訪問的，可供殘障人士使用。

Menu 組件結構

Menu 組件由以下元素組成：

Menu: 菜單的主容器。

MenuItem: 菜單中的單個項目。

SubMenu: 一組可以嵌套在其他菜單項中的菜單項。

Menu 組件屬性

Menu 組件具有許多屬性，可用于自定義其外觀和行為。一些最重要的屬性包括：

mode: 菜單的模式。可以是 horizontal、vertical、inline 或 submenu 之一。

theme: 菜單的主題。可以是 light 或 dark 之一。

defaultOpenKeys: 指定哪些子菜單項應默認打開的鍵數組。

defaultSelectedKeys: 指定哪些菜單項應默認選定的鍵數組。

openKeys: 指定哪些子菜單項當前打開的鍵數組。

selectedKeys: 指定哪些菜單項當前選定的鍵數組。

onClick: 當菜單項被單擊時調用的回調函數。

創建菜單

要創建菜單，可以使用以下代碼：

HTML

選項 1

選項 2

選項 3

選項 4

選項 5

此代碼將創建一個垂直菜單，其中包含三個菜單項和一個子菜單。第一個菜單項默認選中，第一個子菜單項默認打開。

自定義菜單

您可以使用以下屬性自定義菜單的外觀：

style: 您可以使用 style 屬性將自定義 CSS 樣式添加到菜單。

className: 您可以使用 className 屬性將自定義 CSS 類添加到菜單。

添加事件

您可以使用以下屬性向菜單添加事件：

onClick: 當菜單項被單擊時調用。

onOpenChange: 當子菜單項的打開狀態發生變化時調用。

onSelectChange: 當菜單項的選中狀態發生變化時調用。

使用 Menu 與路由器

您可以將 Menu 組件與路由器一起使用來為您的應用程序創建導航欄。為此，您需要在 a-menu-item 和 a-sub-menu-item 組件上使用 router-link 指令。

以下是如何使用 Menu 與路由器的示例：

HTML

主頁

關于

聯系方式

此代碼將創建一個水平菜單，其中包含三個鏈接。當單擊鏈接時，將激活相應的路由。

可訪問性

Menu 組件是可訪問的，可供殘障人士使用。菜單可通過鍵盤導航，并且菜單項具有 ARIA 標簽。

以下是一些有關如何使 Ant Design Vue Menu 組件可訪問的額外提示：

使用 aria-label 屬性為菜單項和子菜單項提供描述性標簽。

使用 aria-haspopup 屬性指示子菜單項是否包含子菜單。

使用 aria-expanded 屬性指示子菜單項是否打開。

拉菜單的屬性

length 表示選項<option>的個數

selected 布爾值,表示選項<option>是否被選中

SelectedIndex 被選中的選項序號,如果沒有被選中則為-1,對于多選下拉菜單而言,返回被選中的第一個選項序號。從0開始計數

text 選項的文本(它是option專有的屬性)

value 選項的value值

type 下拉菜單的類型。單選返回select-one,多選返回select-multiple

options 獲取選項的數組，列如oSelectBox.options[2]表示下拉菜單oSelectBox中的第3項

訪問選中項

下拉菜單(單選):

<html>
<head>
<title>下拉菜單，單選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
-->
</style>
<script language="javascript">
function checkSingle(){
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.constellation;
    var iChoice = oSelectBox.selectedIndex; //獲取選中項
    alert("您選中了" + oSelectBox.options[iChoice].text); //下拉菜單，單選
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看選項" />
</form>
</body>
</html>

下拉菜單(多選):

<html>
<head>
<title>下拉菜單，多選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
margin:0px; padding:2px;
}
-->
</style>
<script language="javascript">
function checkMultiple(){
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var aChoices = new Array();
//遍歷整個下拉菜單
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被選中
aChoices.push(oSelectBox.options[i].text); //壓入到數組中,可以用于單選的情況;
alert("您選了：" + aChoices.join()); //輸出結果
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation" multiple="multiple" style="height:180px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="查看選項" />
</form>
</body>
</html>

通用的訪問下拉菜單選中項的方法:

<script language="javascript">
function getSelectValue(Box){ //Box參數select標簽的ID值
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.elements[Box]; //根據參數相應的選擇下拉菜單
    if(oSelectBox.type == "select-one"){ //判斷是單選還是多選
    var iChoice = oSelectBox.selectedIndex; //獲取選中項
    alert("單選，您選中了" + oSelectBox.options[iChoice].text);
    }else{
    var aChoices = new Array();
    //遍歷整個下拉菜單
    for(var i=0;i<oSelectBox.options.length;i++)
    if(oSelectBox.options[i].selected) //如果被選中
    aChoices.push(oSelectBox.options[i].text); //壓入到數組中
    alert("多選，您選了：" + aChoices.join()); //輸出結果
    }
}
</script>

函數使用方法:

<select id="constellation1" name="constellation1">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚</option>
</select>
<input type="button" onclick="getSelectValue('constellation1')" value="查看選項" />

添加、替換、刪除選項

通過構造函數Option()直接添加value、text等信息，相當方便

var oOption = new Option(text,value,defaultSelected,selected)

defaultSelected為布爾型值:1(true)設置下拉式表單默認值,

selected為布爾值:1(true)表示被選中

最后兩項默認值為0,如果不希望添加的選項被默認選中則可以忽略,添加選項時通常將<select>列表的第length項直接設置為新的選項,即在末尾增加。

添加選項：

<html>
<head>
<title>添加選項</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box){ //添加選項，參數為<select>標簽的ID值
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    oBox.options[oBox.options.length] = oOption; //在菜單末尾添加選項
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball');" />
</form>
</body>
</html>

替換選項

如果下拉菜單中的序號為已經存在了的選項,添加時則會自動替換原有的選項

oBox.options[iNum]=oOption;//替換iNum個選項

<html>
<head>
<title>替換選項</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function ReplaceOption(Box,iNum){ //替換選項,參數Box為<select>的ID值,iNum為替換的選項序號;
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[iNum] = oOption; //替換第iNum個選項
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="籃球替換為乒乓球" onclick="ReplaceOption('ball',1);" />
</form>
</body>
</html>

添加選項到具體位置

<html>
<head>
<title>添加到具體位置</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box,iNum){
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball',1);" />
</form>
</body>
</html>

以上代碼IE7中雖然在正確的位置插入了選項,但內容卻沒有顯示出來(bug問題)

兼容性更好的代碼,使用方法與以上相同;

<script language="javascript">
function AddOption(Box,iNum){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    //兼容IE7，先添加選項到最后，再移動
    oBox.options[oBox.options.length] = oOption;
    oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>

注意：IE9已經解決了bug問題

刪除下拉菜單的選項:

刪除下拉菜單中的某個選項時相對最簡單的,只需要將這個選項設置為null即可

bBox.options[iNum]=null;

天這篇文章我們來說一下css的浮動屬性（float），給塊狀元素添加float屬性可以使其轉變為行內元素，也就是我們所說標簽對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。

（1）float使用語法

css的float主要有3個屬性值none、left、right，默認為none；具體的使用如下所示：

float:none; （不使用浮動）

float:left; （靠左浮動）

float:right; （靠右浮動）

（2）float使用案例

我們通過案例來實際演練一下float元素的使用技巧。

1、float:left的使用練習

我們這里創建一個導航條，導航條包含首頁、關于我們、新聞中心、案例展示等欄目名稱。具體的網頁代碼以及顯示效果就如下圖所示：

由上圖可以看出默認的樣式是豎排顯示的，但是我們常見的網頁導航條都是橫排顯示的，這時候我們就可以使用float屬性來使塊狀元素轉變為行內元素，并讓居左顯示。

這里我們創建一個寬度為980px的導航條，給子元素（li）添加float的屬性并對齊進行填充（padding）以及外間距（margin）的潤色。具體的網頁代碼以及顯示效果就如下圖所示：

網頁中的顯示效果：

2、float:right的使用練習

float:right顧名思義用于元素靠右對齊，我們來看下面的一個例子，我們隨意寫一篇文字，然后文字中插入一張圖片并使圖片右對齊。

我們再網頁中可以看到圖片已經浮動到網頁的右側中去了。

好了，本篇文章就給大家說到這里，大家可以注意看下我們使用float之后會出現什么問題，下邊文章我們會給大家講解如何清除float帶來的負面影響。

每日金句：你不能拼爹的時候，你就只能去拼命！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

在線咨詢

上一篇：React:表單元素處理
下一篇：離機管理文件資料方便查

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「Vu組件」創建菜單的導航組件

（1）float使用語法

（2）float使用案例

您的項目需求