Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
  <div>
	<h2>Menu Align</h2>
	<div style="margin-bottom:20px">
		<Label for="c1">Alignment:</Label>
		<ComboBox inputId="c1" :data="alignments" v-model="menuAlign" :editable="false" :panelStyle="{height:'auto'}"></ComboBox>
	</div>
	<Panel :bodyStyle="{padding:'5px'}">
		<LinkButton :plain="true">Home</LinkButton>
		<MenuButton text="Edit" :menuAlign="menuAlign" :plain="true" iconCls="icon-edit">
			<Menu>
				<MenuItem text="Undo" iconCls="icon-undo"></MenuItem>
				<MenuItem text="Redo" iconCls="icon-redo"></MenuItem>
				<MenuSep></MenuSep>
				<MenuItem text="Cut"></MenuItem>
				<MenuItem text="Copy"></MenuItem>
				<MenuItem text="Paste"></MenuItem>
				<MenuSep></MenuSep>
				<MenuItem text="Toolbar">
					<SubMenu>
						<MenuItem text="Address"></MenuItem>
						<MenuItem text="Link"></MenuItem>
						<MenuItem text="Navigation Toolbar"></MenuItem>
						<MenuItem text="Bookmark Toolbar"></MenuItem>
						<MenuSep></MenuSep>
						<MenuItem text="New Toolbar..."></MenuItem>
					</SubMenu>
				</MenuItem>
				<MenuItem text="Delete" iconCls="icon-remove"></MenuItem>
				<MenuItem text="Select All"></MenuItem>
			</Menu>
		</MenuButton>
		<MenuButton text="Help" :menuAlign="menuAlign" :plain="true" iconCls="icon-help">
			<Menu>
				<MenuItem text="Help"></MenuItem>
				<MenuItem text="Update"></MenuItem>
				<MenuItem text="About"></MenuItem>
			</Menu>
		</MenuButton>
		<MenuButton text="About" :menuAlign="menuAlign" :plain="true">
			<Menu :noline="true">
				<div style="padding:10px">
					<img src="https://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
				</div>
			</Menu>
		</MenuButton>
	</Panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuAlign: "left",
      alignments: [
        { value: "left", text: "Left" },
        { value: "right", text: "Right" }
      ]
    };
  }
};
</script>