vue 中 组件封装 一个div 多个style对象 怎么写
时间: 2024-05-01 18:22:10 浏览: 112
可以使用对象合并语法来实现一个 div 组件多个 style 对象的封装。
具体实现步骤如下:
1. 定义一个组件,使用 props 接收 style 对象数组。
```javascript
<template>
<div :style="mergedStyle"></div>
</template>
<script>
export default {
props: {
styles: {
type: Array,
default: () => [],
},
},
computed: {
mergedStyle() {
return Object.assign({}, ...this.styles);
},
},
};
</script>
```
2. 在组件中定义一个 computed 属性 mergedStyle ,用来将传入的多个 style 对象进行合并。
3. 在 mergedStyle 中使用 Object.assign() 方法将所有的 style 对象合并成一个对象,最终返回合并后的结果。
4. 在模板中使用 :style 绑定 mergedStyle 属性即可。
使用时,可以将多个 style 对象封装到一个数组中,然后通过 props 传递给组件。
```html
<template>
<div>
<my-div :styles="[style1, style2]"></my-div>
</div>
</template>
<script>
import MyDiv from './MyDiv.vue';
export default {
components: {
MyDiv,
},
data() {
return {
style1: {
background: 'red',
color: 'white',
},
style2: {
fontSize: '16px',
lineHeight: '1.5',
},
};
},
};
</script>
```
这样,就可以将多个 style 对象传递给组件,组件内部会将它们合并成一个对象并应用到 div 元素上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)