「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使用案例

您的项目需求