按钮图标写法优化建议

[erguotou520]

当按钮中图标在文字左侧时写法是这样的

<el-button type="primary" icon="search">搜索</el-button>

当按钮中图标在文字右侧时写法又是这样的

<el-button type="primary">上传<i class="el-icon-upload el-icon-right"></i></el-button>

写法上有些不统一，建议右侧时可以改成这样

<el-button type="primary" icon.right="search">上传</el-button>

[QingWei-Li]

属性不支持修饰符，不过可能考虑加个 icon-right 属性，不过感觉怪怪的 @baiyaaaaa

[erguotou520]

属性的话可以传对象，如果是指令可以v-icon.right="search"

[jingsam]

建议参考下iview, 他们的组件接口要比element ui好太多

    <Button-group>
        <Button type="primary">
            <Icon type="chevron-left"></Icon>
            前进
        </Button>
        <Button type="primary">
            后退
            <Icon type="chevron-right"></Icon>
        </Button>
    </Button-group>

[QingWei-Li]

@jingsam 这种并不好，不过 Element 也可以这么写，有 el-icon 组件的，只是文档上没写。
https://github.com/ElemeFE/element/blob/master/packages/icon/src/icon.vue

[erguotou520]

我也觉得这个api并不好啊

[jingsam]

例如在Element UI中：

<el-button type="text" :disabled="true">文字按钮</el-button>

我不明白为什么不能这么写：

<el-button type="text" disabled>文字按钮</el-button>

[baiyaaaaa]

@erguotou520 Button 组件里的 icon 属性只是方便用户快速地使用图标，图标默认放在左侧是考虑到这个位置是比较常见的，如果需要其他位置就只能直接使用图标组件了

<el-button-group>
        <el-button type="primary">
            <el-icon name="chevron-left"></el-icon>
            前进
        </el-button>
        <el-button type="primary">
            后退
            <el-icon name="chevron-right"></el-icon>
        </el-button>
    </el-button-group>

[Leopoldthecoder]

@jingsam 可以这样写。
从 Vue 的角度说，两种写法都可以，因此在 Element 上这两种写法都是支持的。