|
本帖最后由 yebin 于 2019-8-5 11:41 编辑
<import name="modal" src="./modal.ux">import>
...
<modal visible = {{visible}} point="flex-end" >
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>
modal>
...
上面的 style中的样式写到 里后,用id或者class 用到标签中不起作用。大家有碰到这样的情况吗?怎么解决?目前的样式都是直接写到代码里的 (用的华为ide调试,快应用的ide的预览没效果,貌似不支持)
这其中modal组件的代码:
class = "{{visible? 'show' : 'hide'}}" style= "position: fixed;top: 0px;" >
<stack >
class = "background" if = "{{mask}}" >
style="width:100%;height:100%;justify-content:center;align-items:{{point}};" id="content" onclick="hide">
>
stack>
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>
.background{
width:100%;
height: 100%;
background-color: #000000;
opacity:0.6;
}
.hide{
display: none;
width: 0px;
height: 0px
}
.show{
display: flex;
}
</style>
|
|