57 lines
1.3 KiB
Markdown
57 lines
1.3 KiB
Markdown
# 与vue项目相关
|
|
|
|
---
|
|
## 具名作用域插槽
|
|
* 具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到
|
|
```
|
|
<MyComponent>
|
|
<template #header="headerProps">
|
|
{{ headerProps }}
|
|
</template>
|
|
|
|
<template #default="defaultProps">
|
|
{{ defaultProps }}
|
|
</template>
|
|
|
|
<template #footer="footerProps">
|
|
{{ footerProps }}
|
|
</template>
|
|
</MyComponent>
|
|
```
|
|
* 传入props
|
|
```
|
|
<slot name="header" message="hello"></slot>
|
|
```
|
|
* 是由插件传回父组件，如上面的message会被headerProps收到，可以根据此进行进一步的处理。
|
|
---
|
|
|
|
# style相关
|
|
* 组件样式穿透中遇到需要修改样式的组件在组件外部的可以通过再创建一个```<style>```标签且不使用scope来实现。其中必须指定class防止样式污染。
|
|
example:
|
|
```scss
|
|
<style lang="scss">
|
|
.replay-result-card-pop-class {
|
|
.result-card-share {
|
|
...
|
|
.result-card-share-text {
|
|
...
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
```
|
|
* 组件：
|
|
```html
|
|
<el-popover
|
|
popper-class="replay-result-card-pop-class"
|
|
>
|
|
<template #default>
|
|
<div class="result-card-share" ref="shareRef">
|
|
<div class="result-card-share-qrcode">
|
|
...
|
|
</div>
|
|
<div class="result-card-share-text">扫码分享</div>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
``` |