(1)组件文件
<template>
<div v-if="loading" class="testclass1">
<div class="testclass2">
<div v-if="title"> 内容</div>
</div>
</div>
<div v-else class="test">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'CCtest',
props: {
loading: {
type: Boolean,
default: true
},
title: {
type: Boolean,
default: true
}
}
}
</script>
<style scoped >
</style>
（2）页面使用组件
<template>
<div class="page-container">
<div class="skeleton-container">
<Cmcctest :row="2" :loading="isLoading" :avatar="false">
<div class="page-content">
<div class="content-title">关于ui</div>
<div class="content-desc">助力开发者快速搭建小程序应用。</div>
</div>
</Cmcctest>
</div>
</div>
</template>
<script>
import CCtest from '../../components/CCtest/index'
export default {
components: {
CCtest
},
data() {
return {
isLoading:true
}
},
mounted() {
this.isLoading=false
},
methods: {
}
}
</script>
<style >
.page-container {
display: flex;
flex-direction: column;
padding-bottom: 20px;
}
.page-content {
display: flex;
padding: 0 16px;
flex-direction: column;
}
.content-title {
margin: 0;
font-size: 18px;
line-height: 20px;
}
.content-desc {
margin: 13px 0 0;
font-size: 14px;
line-height: 20px;
}
</style>
FEIAFEI
- 发布：2023-05-16 16:21
- 更新：2023-05-16 16:48
- 阅读：540
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： mac
HBuilderX类型： 正式
HBuilderX版本号： 3.8.1
手机系统： iOS
手机系统版本号： iOS 14
手机厂商： 苹果
手机机型： iphone11
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
直接复制上述代码即可复现
直接复制上述代码即可复现
预期结果：
在页面中写的slot插槽样式生效
在页面中写的slot插槽样式生效
实际结果：
slot插槽样式不生效，必须在页面使用插槽样式的地方添加/deep/属性，或者修改页面引入组件的参数:loading="isLoading"为:loading="false"，或者修改组件中的参数v-if="title"，进行去掉，即可生效
slot插槽样式不生效，必须在页面使用插槽样式的地方添加/deep/属性，或者修改页面引入组件的参数:loading="isLoading"为:loading="false"，或者修改组件中的参数v-if="title"，进行去掉，即可生效
bug描述：
写一个组件，组件中包含插槽slot，页面在引用该组件的时候编写具体的slot内容，slot中的样式不生效，样式写在页面中
1 个回复
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群：120594820，代表作灵感实用工具小程序
试试本地运行到h5端有没有什么问题，从代码看没有什么问题