实现后的效果图:
实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
*{margin:0;padding:0;}
#app{
width:1200px;
margin:auto;
}
</style>
</head>
<body>
<div id="app">
<panel v-for="(article,index) in articles" :key="index" :type="article.type" :sign="article.sign">
<h3 slot="title">{{article.title}}</h3>
<p slot="content" class="panel-body">{{article.content}}</p>
<p slot="author" v-if="article.author">作者:{{article.author}}</p>
</panel>
</div>
<template id="panel">
<div class="panel" :class="heaven">
<div class="panel-heading">
<slot name="title"></slot>
</div>
<div class="panel-body">
<slot name="content"></slot>
</div>
<div class="panel-footer">
<slot name="author">
<p>匿名</p>
</slot>
</div>
<div class="panel-footer">
<button class="btn btn-success" @click="fn">查看作者个性签名</button>
</div>
</div>
</template>
<script>
let panel = {
template:'#panel',
props:['type','sign'],
data(){
return{
insign:''
}
},
methods:{
fn(){
this.insign = this.sign? this.sign : '这家伙很懒,什么也没写'
alert(this.$el.children[2].innerText+'。个性签名:'+this.insign)
}
},
computed:{
heaven(){
return 'panel-' + this.type
}
}
}
let vm = new Vue({
el:'#app',
data:{
articles:[
{type:'success',title:'什么是vue',content:'vue文章',author:'小马',sign:'世界上有两种人,一种努力的,一种不努力的'},
{type:'warning',title:'什么是react',content:'react文章',author:'小强',sign:'宝剑锋从磨砺出,梅花香自苦寒来!'},
{type:'danger',title:'什么是js',content:'js文章'}
]
},
components:{
panel
}
})
</script>
</body>
</html>