DCloud_UNI_Trust
DCloud_UNI_Trust
  • 发布:2019-01-28 16:25
  • 更新:2019-01-28 16:25
  • 阅读:209

在 H5 平台组件特有的 class 属性生效的办法

分类:uni-app

以 input 组件为例,设置 placeholder-class 属性生效的办法。

在 H5 平台,组件的样式都是 scoped 模式,因此直接在页面中设置相关的 class,样式不会生效。

方案一

使用 scoped+透传

<template>  
    <view>  
        <input class="input" type="text" value="" placeholder="placeholder text" placeholder-class="custom-placeholder-class" />  
    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style scoped>  
    .input {  
        border: 1px solid #999999;  
    }  
    .input >>> .custom-placeholder-class {  
        color: #FF3333;  
    }  
</style>  

方案二

将自定义的 class 声明在 App.vue 文件中,同样可以生效。

1 关注 分享
Arsenal

要回复文章请先登录注册