介绍
@barebone/component-button-group-vertical 是一个基于 Vue.js 的简单垂直按钮组件，适用于前端开发人员快速搭建界面的需要。该组件可以很好地解决多个按钮垂直排列的问题，并可以自定义按钮样式。
本文将介绍如何使用 @barebone/component-button-group-vertical npm 包，以及其常用的属性，方法和示例代码，来帮助开发人员更好地了解和使用该组件。
安装
可以使用 npm 安装 @barebone/component-button-group-vertical：
npm install @barebone/component-button-group-vertical --save
或者使用 yarn 安装：
yarn add @barebone/component-button-group-vertical
使用
在 Vue.js 项目中引入组件：
import VerticalButtonGroup from '@barebone/component-button-group-vertical';
export default {
components: {
VerticalButtonGroup,
}
}在 Vue.js 模板中使用组件：
<vertical-button-group :buttons="buttons" :selected-button="selectedButton" @update:selected-button="updateSelectedButton"></vertical-button-group>
属性
@barebone/component-button-group-vertical 提供了多个属性，可以通过设置这些属性来实现更丰富的效果。
buttons
- 类型：Array
- 默认值：[]
组件中的所有按钮，其每个元素对象必须包含键值对：{ label, value }。
const buttons = [
{ label: 'Button 1', value: 1 },
{ label: 'Button 2', value: 2 },
{ label: 'Button 3', value: 3 },
];selectedButton
- 类型：Any
- 默认值：null
当前选中的按钮的值。
selectedButton: 2
buttonClass
- 类型：String
- 默认值：''
给按钮一个 class，以便自定义样式。
buttonClass: 'my-button-class'
事件
@barebone/component-button-group-vertical 还提供了一些事件监听器，可以在代码中使用这些监听器来触发相应的操作。
update:selected-button
- 类型：Function
按钮被选中时触发的事件。
methods: {
updateSelectedButton(selectedButton) {
this.selectedButton = selectedButton;
},
},示例代码
在以下示例中，展示了如何使用 @barebone/component-button-group-vertical 组件。
-- -------------------- ---- -------
----------
---------------------- ------------------ --------------------------------- -----------------------------------------------------------------------
-----------
--------
------ ------------------- ---- --------------------------------------------
------ ------- -
----------- -
--------------------
--
------ -
------ -
-------- -
- ------ ------- --- ------ - --
- ------ ------- --- ------ - --
- ------ ------- --- ------ - --
- ------ ------- --- ------ - --
--
--------------- --
--
--
-------- -
------------------------------------ -
------------------- - ---------------
--
--
--
---------
-------
---------------- -
------ ------
-
--------上述示例代码中，组件中共有 4 个按钮，其中选中的按钮是 value 为 2 的按钮。当我点击任意一个按钮时，组件将触发 update:selected-button 事件并更新 selectedButton 的值。
同时还定义了一个名为 my-button-class 的样式类，来自定义按钮的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556dd81e8991b448d3b87