實現的效果圖
實現代碼
<!--
* @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>