Print Page - how to toggle 'panel' collapse or expand

How the parent component calls the subcomponent 'panel' to toggle the collapse or expand
(请问下，怎么在父组件设置panel状态。折叠或者展开)

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI for Vue</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/vue.css">
<script src="http://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/babel.min.js"></script>
<style type="text/css">
body{
padding: 20px;
}
h2{
margin: 0 0 20px 0;
}
.mycontainer{
min-width: 700px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var demobasic={
template: `
<div>
<h2>Basic Panel</h2>
<Panel ref="panelRef" title="Panel Title" :collapsible="true" :bodyStyle="{padding:'20px'}" style="height:200px">
<p>Panel Content.</p>
</Panel>
<LinkButton @click="toggle">折叠切换</LinkButton>
</div>
`,
methods: {
toggle() {
alert('toggle panel collapseState')
}
}
}
var app = new Vue({
el: '#app',
template: `<demobasic class="mycontainer"></demobasic>`,
components: {
demobasic:demobasic
}
})
</script>

</body>
</html>

EasyUI Forum

General Category => EasyUI for Vue => Topic started by: fengdie on October 04, 2018, 09:39:19 AM