自定义 iViewUI <Tag> 组件

Question

我正在为我的 Tag 组件使用 iViewUI，但我想自定义其大小以及 "X" 关闭按钮的位置。

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

这是我目前所做的：

<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上创建了一个演示，请查看

如果您使用范围 css，您可以尝试使用 deep selector

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

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

自定义 iViewUI <Tag> 组件

Customize iViewUI <Tag> component

vue.js

iview