前情
uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验非常棒，公司项目就是主推uni-app。
坑位
最近因UI有别的事忙，导致手上暂时没什么活了，我于是抽时间优化项目代码，第一件事就是抽取复用组件。正好项目中有多处用到uView的上传组件，上传要处理的逻辑不少，值得封装一下多处复用，在抽组件的过程中我想修改uView的上传组件的样式，对于这种跨组件的样式修改的，当然是用样式穿透了，但另人崩溃的是怎么都不起作用。
Why?
一开始以为是我样式穿透的方式不对，查了文挡，对于uniapp的样式穿有如下几条规则：
- 如果你使用的是css，没有使用css预处理器，则可以使用>>>，/deep/，::v-deep。
- 如果你使用的是less或者node-sass，那么可以使用/deep/，::v-deep都可以生效。
- 如果你使用的是dart-sass，那么就不能使用/deep/，而是使用::v-deep才会生效。
我项目中使用的scss，而且用的是node-scss，我选用是::v-deep，按理说应该是正常的，而且我全局搜了下，我在没有抽组件的另一个页面是成功样式穿透成功的，就排除了是样式穿透的方式不对问题。
经过多翻了解后，是因为我当前开发的是微信小程序端，uniapp最终会把代码转换成微信的wxml/wxss文件跑在微信端，而微信小程序有一个限制，自定义组件的样式只受到自定义组件wxss的影响。
解决方案
在想做样式穿透的组件里增加一个options配置，解除子组件中样式隔离，这样就能样式穿透了。
官方介绍文挡：自定义组件 / 组件模板和样式 (qq.com)
示例代码：
<template>
<view class="upload-item">
<u-upload
:fileList="fileList"
@afterRead="afterRead"
@delete="deletePic"
uploadIcon="plus"
multiple
:maxCount="maxCount"
width="128rpx"
height="128rpx"
/>
</view>
</template>
<script>
export default {
// 解除子组件样式隔离
options: {
styleIsolation: 'shared'
},
name:"uploadItem",
props: {
maxCount: {
type: Number,
default: 5
}
},
data() {
return {
fileList: []
};
},
watch: {
fileList(newVal, oldVal){
console.log('---- newVal ----: ', newVal);
const filterList = newVal.filter((upload) => upload.status === 'success');
this.$emit('change', filterList);
}
},
methods: {
async afterRead(event) {
console.log('---- afterRead ----: ', event);
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this.fileList.length
lists.map((item) => {
this.fileList.push({
...item,
status: 'uploading',
message: '上传中'
})
})
// 上传图片
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this.fileList[fileListLen]
this.fileList.splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
/**
* 图片上传
* @param { string } url
*/
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
// let a = uni.uploadFile({
// url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
// filePath: url,
// name: 'file',
// formData: {
// user: 'test'
// },
// success: (res) => {
// setTimeout(() => {
// resolve(res.data.data)
// }, 1000)
// }
// });
})
},
deletePic(event) {
console.log('---- deletePic ----: ', e);
this.fileList.splice(event.index, 1);
},
}
}
</script>
<style lang="scss" scoped>
.upload-item{
::v-deep{
.u-upload__wrap__preview {
margin:0 8rpx 8rpx 0!important;
}
.u-upload__button {
margin:0!important;
}
}
}
</style>
