<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之使用内容分发slot构建bootstrap面板panel</title>
<script src="vue.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="hdcms">
<form action="" class="form-horizontal">
<bs-panel>
<h4 slot="title">hdp开元框架</h4>
<bs-input title="标题" value="蓝天科技" slot="body"></bs-input>
<bs-input title="点击数" value="100" slot="body"></bs-input>
abc
</bs-panel>
</form>
</div>
<script typeof="text/x-template" id="bsPanel">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<slot name="title"></slot>
</h3>
</div>
<div class="panel-body">
<slot name="body"></slot>
</div>
<h1>
<slot></slot>
</h1>
</div>
</script>
<script typeof="text/x-template" id="bsInput">
<div class="form-group">
<label for="" class="col-sm-2 control-label">{{title}}</label>
<div class="col-sm-10">
<input type="text" class="form-control" :value="value"/>
</div>
</div>
</script>
<script>
var bsPanel = {
template: "#bsPanel"
};
var bsInput={
template: "#bsInput",
props:['title','value']
}
new Vue({
el: "#hdcms",
components: {bsPanel,bsInput},
});
</script>
</body>
</html>