# 12.11 毛玻璃组件
# midea-blur-view 毛玻璃组件
APP 内置组件，可直接在 template 中使用，不需要 import 导入和注册。
# 使用方法
通过 css样式 设置组件的宽高和位置，通过 data 传入毛玻璃配置即可使用。
初始数据从 data 的 map 中获取，更新时同样通过该对象传递。
# 实例 :
# 基础用法
<template>
<div>
<midea-blur-view ref="mycomponent" class="blurView" :data="componentData"></midea-blur-view>
</div>
</template>
<style scoped>
.blurView {
width: 600px;
top: 100px;
margin-left: 10px;
height: 600px;
left: 50px;
/* right: 50px; */
}
</style>
<script>
export default {
data() {
return {
componentData: {
url: 'https://fcmms.midea.com/ccrm-sit/exchangeorder/20210106/1383cb9e-6a44-473e-9f33-e955bbedaf4f.jpg',
alpha: 0.1,
style: 1,
},
}
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 属性
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
data | Object | Y | - | 毛玻璃组件配置对象 |
data 对象字段说明：
| 字段 | Type | Required | Default | Description |
|---|---|---|---|---|
url | String | Y | '' | 图片地址，支持网络图片 |
alpha | Number | N | 0.3 | 透明度，取值区间 0 ~ 1 |
style | Number | N | 1 | 毛玻璃样式：1 亮、2 暗、3 高亮 |
# 方法
暂无公开方法。
# 事件
暂无公开事件。