源代码
<template>
<div>
<h2>SplitButton State</h2>
<div style="margin-bottom:20px">
<SwitchButton v-model="enabled" onText="Enabled" offText="Disabled" style="width:100px"></SwitchButton>
</div>
<Panel :bodyStyle="{padding:'5px'}">
<LinkButton :plain="true" :disabled="disabled">Home</LinkButton>
<SplitButton text="Edit" :plain="true" iconCls="icon-edit" :disabled="disabled">
<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>
</SplitButton>
<SplitButton text="Help" :plain="true" iconCls="icon-help" :disabled="disabled">
<Menu>
<MenuItem text="Help"></MenuItem>
<MenuItem text="Update"></MenuItem>
<MenuItem text="About"></MenuItem>
</Menu>
</SplitButton>
<MenuButton text="About" :plain="true" :disabled="disabled">
<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 {
enabled: true
};
},
computed: {
disabled() {
return !this.enabled;
}
}
};
</script>