请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 父组件的slot内容的样式问题

2
回复
73
查看
[复制链接]

5

主题

10

帖子

75

积分

 楼主| 2019-8-5 10:13:37 显示全部楼层 |阅读模式
本帖最后由 yebin 于 2019-8-5 11:41 编辑

<import name="modal" src="./modal.ux"></import>

...
   <modal visible = {{visible}}  point="flex-end" >
      <div style="justify-content:center;width:300px;height:160px;background-color:#ffffff;border-radius: 15px;flex-direction:column;align-items:center;" >
        <text onclick="takePhoto" style="background-color:#4538fa;height:50px; width:100px;text-align:center;margin-bottom:20px;color:#ffffff;">相机</text>
        <text onclick="takepictrue" style="background-color:#4538fa;height:50px;width:200px;text-align:center;color:#ffffff">从图片中选择</text>
      </div>
    </modal>
...
上面的 style中的样式写到 <style></style> 里后,用id或者class 用到标签中不起作用。大家有碰到这样的情况吗?怎么解决?目前的样式都是直接写到代码里的    (用的华为ide调试,快应用的ide的预览没效果,貌似不支持)
这其中modal组件的代码:
<template>
    <div class = "{{visible? 'show' : 'hide'}}" style="position: fixed;top: 0px;" >
        <stack >
            <div class = "background" if = "{{mask}}" > </div>
            <div  style="width:100%;height:100%;justify-content:center;align-items:{{point}};" id="content" onclick="hide">  
                <slot ></slot>
            </div>
        </stack>
    </div>
</template>
<script>
export default {
    props: {
        point: {default : 'center'},
        visible: {default: true},
        mask:{default : true},
        maskClosable: {default: true}
    },
    hide(evt){
        if(this.maskClosable && evt.target.attr.id === 'content'){
            this.$dispatch('hideModel')
            evt.stopPropagation();
        }      
    },
}
</script>
<style>
.background{
    width:100%;
    height: 100%;
    background-color: #000000;
    opacity:0.6;
}
.hide{
    display: none;
    width: 0px;
    height: 0px
}
.show{
    display: flex;
}
</style>








回复

使用道具 举报

7

主题

117

帖子

620

积分

2019-8-9 14:57:29 显示全部楼层
我们子组件都是支持的。 没出现这种问题。建议你不用用敏感的词。 找到问题了吗
回复

使用道具 举报

5

主题

10

帖子

75

积分

 楼主| 5 天前 显示全部楼层
  打成rpk包,在手机上用快应用加载器打开,还是有问题~ 就上面的代码~
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册