利用vue中的组件通信原理封装类似element-ui的按钮组件

最新推荐文章于 2022-05-29 17:10:48 发布

原创最新推荐文章于 2022-05-29 17:10:48 发布 · 167 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文档展示了一个使用Vue.js封装的自定义组件，该组件实现了按钮的动态样式，包括成功和失败两种类型。组件通过props接收父组件传递的type值，并根据type值动态改变按钮的样式，如背景颜色、边框、文字颜色等。同时，按钮在鼠标按下、抬起、移入和移出时有不同的样式效果。

<!DOCTYPE html>

<head>

<title>document</title>

</head>

<body>

{{msg}} <br>

<el-button type='success'>成功按钮</el-button>

<el-button type='error'>失败按钮</el-button>

</div>

let bt = {

props: {

// 接收父组件传递过来的type值并设置值类型

type: {

type: String,

default: '默认内容'

}

// :style动态获取data内的style样式

template: `

</button>

data() {

return {

style: {

// 成功按钮静态样式

success: {

// 圆角边框(驼峰命名法 border-radius———>borderRadius)

// 本人样式设置的不好还请自行更改样式

borderRadius: '3px',

backgroundColor: 'green',

color: 'white',

border: '1px solid white',

height: '40px',

width: '100px'

// 失败按钮默认样式

error: {

borderRadius: '3px',

backgroundColor: 'red',

color: 'white',

border: '1px solid white',

height: '40px',

width: '100px'

}

}, methods: {

// 鼠标按下事件

// 传入type值通过swith case判断执行谁的样式

buttonDownAll(type) {

switch (type) {

case 'success':

this.style.success = {

borderRadius: '3px',

backgroundColor: 'green',

color: 'white',

opacity: 0.8,

border: '1px solid white',

height: '40px',

width: '100px'

}

break;

case 'error':

this.style.error = {

borderRadius: '3px',

backgroundColor: 'red',

color: 'white',

border: '1px solid white',

height: '40px',

width: '100px',

opacity: 0.6,

}

break;

default:

console.log('没有该类型按钮');

break;

}

// 鼠标抬起事件(恢复默认样式)

buttonUpAll(type) {

switch (type) {

case 'success':

this.style.success = {

borderRadius: '3px',

backgroundColor: 'green',

color: 'white',

opacity: 0.6,

border: '1px solid white',

height: '40px',

width: '100px'

}

break;

case 'error':

this.style.error = {

borderRadius: '3px',

backgroundColor: 'red',

color: 'white',

border: '1px solid white',

height: '40px',

width: '100px'

}

break;

default:

console.log('没有该类型按钮');

break;

}

// 鼠标移入事件

buttonOverAll(type) {

switch (type) {

case 'success':

this.style.success = {

borderRadius: '3px',

backgroundColor: 'green',

color: 'white',

opacity: 0.6,

border: '1px solid white',

height: '40px',

width: '100px'

}

break;

case 'error':

this.style.error = {

borderRadius: '3px',

backgroundColor: 'red',

color: 'white',

border: '1px solid white',

height: '40px',

width: '100px',

opacity: 0.6,

}

break;

default:

console.log('没有该类型按钮');

break;

}

// 鼠标移出事件(恢复默认样式)

buttonLeaveAll(type) {

switch (type) {

case 'success':

this.style.success = {

borderRadius: '3px',

backgroundColor: 'green',

color: 'white',

border: '1px solid white',

height: '40px',

width: '100px'

}

break;

case 'error':

this.style.error = {

borderRadius: '3px',

backgroundColor: 'red',

color: 'white',

border: '1px solid white',

height: '40px',

width: '100px'

}

break;

default:

console.log('没有该类型按钮');

break;

}

// Vue.component('el-button', bt)

const vm = new Vue({

el: '#app',

data: {

msg:'-----封装的组件按钮-----'

methods: {

components:{

'el-button':bt,

}

})

</script>

</body>

</html>

利用vue中的组件通信原理 封装类似element-ui的按钮组件

利用vue中的组件通信原理封装类似element-ui的按钮组件