vue封装button组件,vue封装组件方法
这篇文章主要为大家详细介绍了某视频剪辑软件自定义封装按钮组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件按钮组件的自定义封装代码，供大家参考，具体内容如下
封装按钮组件button.vue
模板
button class= button ellipsis :class=[size，type]
插槽/
/按钮
/模板
脚本
导出默认值{
名称：按钮，
道具：{
大小：{
类型：字符串，
默认值："中间"
},
类型：{
类型：字符串，
默认："默认"
}
}
}
/脚本
样式范围语言=少。按钮{
外观：无；
边框：无；
大纲：无；
背景：# fff
文本对齐：居中；
边框：1px纯色透明；
边框-半径：4px
光标：指针；
}。大的
宽度：240像素
高度：50px
字体大小：16px
}。中间{
宽度：180像素
高度：50px
字体大小：16px
}。小型{
宽度：100像素
高度：32px
字体大小：14px
}。迷你{
宽度：60px
高度：32px
字体大小：14px
}。默认{
边框颜色：# e4e4e4
颜色：# 666;
}。主要{
边框颜色：# 27BA9B
背景：# 27BA9B
颜色：# fff
}。普通的
边框颜色：# 27BA9B
颜色：# 27BA9B
背景：减轻(# 27BA9B，50%)；
}。灰色{
边框颜色：# ccc
背景：# ccc
颜色：# fff
}
/风格
封装组件的使用
button type= primary style= margin-top:20px；自定义按钮名字/按钮
button type= primary style= margin-top:20px；加入购物车/按钮
实现效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。