实现的效果图
实现代码
<!-- * @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>