自定义 iViewUI <Tag> 组件

Question

我将iViewUI 用于我的标签组件，但我想自定义它的大小以及“X”关闭按钮的位置。

我可以通过简单地向标签添加一个类来更改宽度，但由于某种原因，即使我试图覆盖它的子图标，也根本没有响应更改，也没有应用它。检查浏览器，也没有添加它。

这是我到目前为止所做的：

<Tag class="Badge-tag" color="warning" closable @on-close="removeTag">{{ badge }}</Tag>

然后在less文件上我添加了以下内容：

.Badge-tag {
    width: 60px;
    position: relative;

    .ivu-icon.ivu-icon-ios-close {
        position: absolute;
        right: 2px;
        top: 4px;
    }
}

我一点运气都没有。不知道为什么不设置。

Answer 1

如果你把上面的 css 作为全局 css，我认为它应该可以工作。

我在jsfiddle here创建了一个demo，请查看

如果你使用scoped css，你可以尝试使用deep selector

.Badge-tag {
    width: 60px;
    position: relative;

    /deep/ .ivu-icon.ivu-icon-ios-close {
        position: absolute;
        right: 2px;
        top: 4px;
    }
}