ant design vue dropdown 属性及事件

Dropdown属性

属性	说明	类型	默认值
disabled	是否禁用菜单 <a-dropdown disabled="true" >...</a-dropdown>	boolean	false
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 topRight	string	bottomLeft
trigger	Array<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>

Dropdown.Button属性

属性	说明	类型	默认值
disabled	是否禁用菜单 <a-dropdown-button disabled="true" >...</a-dropdown-button>	boolean	false
overlay(slot-scope)	菜单	Menu
placement	弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRight	string	bottomLeft
trigger	Array<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">	string	default
type	default primary dashed danger link <a-dropdown-button type="primary" @click="handleButtonClick">	string	default

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>