<!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="./vue.js"></script>
</head>
<body>
<div id="app">
{ {msg}} <br>
<!-- 自定义属性type -->
<el-button type='success'>成功按钮</el-button>
<el-button type='error'>失败按钮</el-button>
</div>
<script>
let bt = {
props: {
// 接收父组件传递过来的type值并设置值类型
type: {
type: String,
default: '默认内容'
}
},
// :style动态获取data内的style样式
template: `
<button :style='style[type]' @mousedown='buttonDownAll(type)' @mouseup='buttonUpAll(type)' @mouseover='buttonOverAll(type)' @mouseleave='buttonLeaveAll(type)' >
<slot></slot>
</button>
`,
data() {
return {
style: {
// 成功按钮静态样式
最低0.47元/天 解锁文章
2857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
