实现的效果图
实现代码
<!--
* @Author: [you name]
* @Date: 2021-10-13 14:27:18
* @LastEditors: [you name]
* @LastEditTime: 2021-10-14 16:21:38
* @Description:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
/* 个按钮设置款式 */
button{
width: 98px;
height: 40px;
margin-top: 30px;
border-radius: 5px;
border: 1px solid rgb(219, 214, 214);
}
</style>
</head>
<body>
<div id="app">
<!-- 应用自定义组件 el-button-->
<el-button type="default"> 默认按钮 </el-button>
<el-button type="success"> 胜利按钮 </el-button>
<el-button type="danger"> 危险按钮 </el-button>
<el-button type="info"> 信息按钮 </el-button>
<el-button type="warning"> 正告按钮 </el-button>
</div>
<script>
// 全局注册组件 并创立一个 component 实例
Vue.component('el-button', {
// 父传子 利用 props 传值
// 父组件通过属性绑定的形式将参数传递给子组件，子组件通过 props 申明冀望从父组件那里获取的参数。props: {
type: {
// 类型为 String
type: String,
// 带有默认值
default: '默认内容'
}
},
data() {
return {
// 设置可选款式
style: {
default:{
backgroundColor:'white',
color:'#333'
},
success: {
backgroundColor: '#67c23a',
color: 'white'
},
danger: {
backgroundColor: '#f56c6c',
color: 'white'
},
info: {
backgroundColor: '#909399',
color: 'white'
},
warning: {
backgroundColor: '#e6a23c',
color: 'white'
},
}
}
},
// 网页渲染
template: `
<div>
<button :style='style[type]'><slot></slot></button>
</div>
`,
})
let vm = new Vue({
el: '#app',
data: {},
methods: {},
created() {},
})
</script>
</body>
</html>