044——VUE中组件之使用内容分发slot构建bootstrap面板panel

最新推荐文章于 2023-11-29 16:05:14 发布

weixin_33875839

最新推荐文章于 2023-11-29 16:05:14 发布

阅读量105

点赞数

文章标签： javascript ViewUI

<!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>