buttom-group.js

chouzhan9715

于 2017-10-30 18:07:00 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3288561/blog/1558268

本文详细解析了Vue中自定义的cc-button-group组件代码，展示了如何通过props设置按钮组的大小和垂直布局，并使用createElement渲染按钮组样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


// 依赖button.js组件

Vue.component("cc-button-group", {
    functional: true,
    props: {
        size: {
            type: String,
            validator: function (value) {
                var arr = ["large", "small"];
                return arr.indexOf(value) > -1
            }
        },
        vertical: {
            type: Boolean,
            default: false
        }
    },
    render: function (createElement, context) {
        function getClassType() {
            var defaultClass = "cc-btn-group",
                result = defaultClass;
            if (context.props.size) {
                result += " " + defaultClass + "-" + this.size
            }
            if (context.props.vertical) {
                result += " " + defaultClass + "-vertical"
            }
            return result
        }
        return createElement(
            "div", {
                class: getClassType()
            },
            context.children
        )
    }
});

转载于:https://my.oschina.net/u/3288561/blog/1558268