美文网首页
vue 中父组件改变子组件样式,以iview组件为例

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

作者: 努力学习的小丸子 | 来源:发表于2019-06-17 19:07 被阅读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>
    

    相关文章

      网友评论

          本文标题:vue 中父组件改变子组件样式,以iview组件为例

          本文链接:https://www.haomeiwen.com/subject/vjmzfctx.html