写了一个组件,h5、模拟器能正常显示,但是打包成Android包安装到手机上会导致整个页面都白屏了,没法正常显示,已经定位到就是该组件的问题,把组件改写去掉动态插槽打包后就没问题,但是代价就是组件通用性不高,可能需要根据业务定制不同的组件(绝大部分代码差不多),请问有没有啥办法处理这问题?
tags 如下:
<template>
<view class="list-wrapper">
<view class="tag-common" @click="handleClick(t)" v-for="t in list" :key="t[keyName]" :class="[t[keyName] == selected ? 'active' : '', mode == 'list' ? 'tag-list' : 'tag']">
<slot :name="t[keyName]" :data='t'>{{ t.label }}</slot>
</view>
</view>
</template>
<script>
export default {
name: 'tags',
model: {
prop: 'selected',
event: 'change'
},
props: {
selected: {
type: [String, Number],
default: null
},
items: { //格式要求 [{value: 1, label: ''}]————label内容不能重复
type: Array,
default: () => {
return []
}
},
mode: {
type: String,
default: 'tag' // tag、list
},
keyName: {
type: String,
default: 'value'
}
},
watch: {
items: {
handler(val) {
this.list = JSON.parse(JSON.stringify(this.items))
},
immediate: true,
deep: true
},
},
data () {
return {
list: []
}
},
methods: {
handleClick(tag) {
this.$emit('change', tag[this.keyName])
},
},
}
</script>
<style lang="scss" scoped>
.list-wrapper{
padding: 0 10px;
padding-left: 0;
background: #fff;
.tag-common {
display: inline-block;
padding: 6px;
cursor: pointer;
box-sizing: border-box;
// border-radius: 5px;
// margin: 2px;
position: relative;
}
.tag{
&.active {
// background: #DCDFE6;
color: #409eff;
}
&.active::after{
content: " ";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: #409eff;
// border-bottom: 2px solid #409eff;
}
&:hover{
// background: #DCDFE6;
color: #409eff;
}
}
.tag:not(:last-child) {
margin-right: 10px;
}
.tag-list{
display: block;
// height: 40px;
// line-height: 40px;
// padding: 0 4px;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 5px;
&.active {
background: #DCDFE6;
}
&:hover{
background: #DCDFE6;
}
}
}
</style>
使用方式:
<tags mode="list" class="tagsList" :items="pers" v-model="currentEmployeeId">
<template v-for="(v, idx) in pers" :slot="v.value" slot-scope="scope">
<view class="flex" :key="idx">
<text class="name omit uni-mx-2">{{ v.label }}</text>
</view>
</template>
</tags>
data() {
return {
currentEmployeeId: '1111',
pers: [
{value: '1111', label: '张三'},
{value: '2222', label: '李四'},
]
}
},
更新后的使用方式:
组件:
使用:
仍然不行,显示的始终是组件里面的默认插槽内容。
参看