ant design vue dropdown 属性及事件

ant design vue dropdown 属性及事件

Dropdown属性

属性说明类型默认值
disabled是否禁用菜单
<a-dropdown  disabled="true"  >...</a-dropdown>
booleanfalse
getPopupContainer菜单渲染父节点。默认渲染到 body ,如遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。
<a-dropdown  :getPopupContainer=" triggerNode => {return triggerNode.parentNode || document.body; }">
或者
<a-dropdown   :getPopupContainer="{()=>document.querySelector('.itxst')}"> 
Function(triggerNode)() => document.body
overlay(slot-scope)菜单Menu
overlayClassName
注意直接引用JS的是
overlay-class-name
下拉菜单根元素的样式表类名称
<a-dropdown  overlayClassName="red" >浏览器引用JS方式如下
<a-dropdown  overlay-class-name="red" >
在线试一试
string
-
overlayStyle
注意直接引用JS的是overlay-style
下拉菜单根元素的样式
 <a-dropdown  :overlayStyle='{"background-color":"red  !important" }'>
浏览器引用JS方式如下
  <a-dropdown  :overlay-style='{"background-color":"red  !important" }'>
object-
placement弹出位置:bottomLeft bottomCenter bottomRight topLeft topCenter topRightstringbottomLeft
triggerArray<click|hover|contextmenu>
<a-dropdown  placement="bottomLeft" trigger="['click','contextmenu']">
触发下拉的行为, 移动端不支持 hover
visible(v-model)菜单是否显示
 <a-dropdown :visible="false">
boolean-

dropdown事件

//以下代码在vscode node.js环境中开发
<template>
  <a-dropdown @visibleChange="changex">
    <a class="ant-dropdown-link" href="javascript:void(0)">
      Hover me
      <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <a href="javascript:;">1st menu item</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;">2nd menu item</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;">3rd menu item</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods: {
   //隐藏显示事件
    changex: function(visible) {
      debugger;
      console.log(visible);
    }
  }
};
</script>

ant design vue dropdown 属性及事件

Dropdown.Button属性

属性说明类型默认值
disabled是否禁用菜单
<a-dropdown-button  disabled="true"  >...</a-dropdown-button>
booleanfalse
overlay(slot-scope)菜单Menu
placement弹出位置:bottomLeft bottomCenter bottomRight topLeft topCenter topRightstringbottomLeft
triggerArray<click|hover|contextmenu>
<a-dropdown-button  placement="bottomLeft" trigger="['click','contextmenu']">
触发下拉的行为, 移动端不支持 hover
visible(v-model)菜单是否显示
 <a-dropdown :visible="false">
boolean-
size
大小 small large default 
<a-dropdown-button size="small" @click="handleButtonClick">
stringdefault
typedefault primary dashed danger link
<a-dropdown-button type="primary" @click="handleButtonClick">
stringdefault

Dropdown.Button事件

//以下代码在vscode node.js环境中开发
 <div id="app">
    <a-dropdown-button size="small" type="danger" @click="handleButtonClick" @visibleChange="changex">
        Dropdown
        <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"><a-icon type="user"></a-icon>1st menu item</a-menu-item>
            <a-menu-item key="2"><a-icon type="user"></a-icon>2nd menu item</a-menu-item>
            <a-menu-item key="3"><a-icon type="user"></a-icon>3rd item</a-menu-item>
        </a-menu>
    </a-dropdown-button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            bottom: 200
        },
        methods: {
            handleButtonClick(e) {
                console.log('click left button', e);
            },
            handleMenuClick(e) {
                console.log('click', e);
            }, changex(e) {
                alert(1)
            }
        }
    });
</script>