前情
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.lengthlists.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>
