vue 中父组件改变子组件样式,以iview组件为例

2019-06-17  本文已影响0人  努力学习的小丸子

在组件中需要使用本地样式,即scoped样式文件。在该文件中,父组件无法修改子组件的样式,选择器只能找到子组件的根类。可以使用深度选择器达到目的。
官网方法地址 : https://vue-loader.vuejs.org/zh/guide/scoped-css.html
其中深度作用选择器有三个连接符 : >>> 、/deep/和::v-deep。
如果样式文件是scss、sass等格式,需使用 /deep/。其他两个不生效。
实例:

<script>
<div class="content">
            <Form ref="form" :model="form" :rules="rules" :label-width="80" label-position="left">
                <FormItem label="账  户:" prop="username">
                    <Input type="text" size="large" v-model="form.username" placeholder="请输入用户名" :maxlength="10" autofocus="autofocus">
                    </Input>
                </FormItem>
                <FormItem label="密  码:" prop="pwd">
                    <Input type="password" size="large" v-model="form.pwd" placeholder="请输入密码">
                    </Input>
                </FormItem>
                <Button type="primary" @click="login" class="mybutton">登录</Button>
            </Form>
        </div>
</script>
<style lang="scss" scoped>
.ivu-form /deep/ .ivu-form-item-label {
            color: white;
            font-size: 18px;
        }
        .ivu-form /deep/ .ivu-input {
            height: 42px;
            width: 20vw;
        }
        .ivu-form /deep/ .ivu-btn {
            height: 42px;
            width: 100px;
        }
</style>
上一篇下一篇

猜你喜欢

热点阅读