<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.btn {
margin: 30px auto;
font-size: 20px;
border: none;
border-radius: 3px;
outline: none;
width: 100px;
height: 35px;
color: #999;
cursor: pointer;
text-align: center;
/* border: 1px solid #ccc; */
}
.btn.warn {
background: orange;
color: #fff;
}
.btn.success {
background: green;
color: #fff;
}
.btn.primary {
background: blue;
color: #fff;
}
.btn.error {
background: red;
color: #fff;
}
.btn.small {
width: 60px;
height: 25px;
font-size: 14px;
}
.btn.middle {
width: 120px;
height: 50px;
font-size: 20px;
}
.btn.large {
width: 200px;
height: 50px;
font-size: 25px;
}
</style>
</head>
<body>
<!-- <slot></slot>
// 插槽 -->
<div id="app">
<btn type='warn' size="samll">登录</btn>
<btn type='success' size="middle">登录</btn>
<btn type='primary' size="large">登录</btn>
<btn type='error'>登录</btn>
<!-- <button class="btn warn">登录</button>
<button class="btn error">登录</button>
<button class="btn primary">登录</button>
<button class="btn success">登录</button> -->
</div>
<script>
Vue.component('btn', {
props:{
type:{
type:String,
},
size:{
size:String
}
},
data() {
return {
c:{
warn:this.type==='warn',
error:this.type==='error',
primary:this.type==='primary',
success:this.type==='success',
small:this.size==='small',
middle:this.size==='middle',
large:this.size==='large',
},
}
},
methods: {
handleClick(e){
this.$emit('click',e)
}
},
template:
` <button class="btn" :class="c" @click="handleClick">
<slot></slot>
</button>
`
})
let vm = new Vue({
el: "#app",
data() {
return {
}
},
methods: {
},
})
</script>
</body>
</html>
