1. 场景有多个按钮，一个个的写并且一个个绑定事件代码很冗余，所以就循环，绑定一个事件，传不同的参数即可2. 实现我这里有两种button，由于一些原因，“全部”按钮没有放在循环里面data里面methods3. 效果...
Vue
Floating Action
Button
:red_heart::red_heart::red_heart::red_heart: a beautiful Floating Action
Button
:red_heart::red_heart::red_heart::red_heart:
支持iconfont以及material icons
Features
支持多种动画
支持滚动/手势自动显示/隐藏
支持Material Design ICON
支持阿里巴巴iconfont.cn
支持
点击
空白处自动隐藏
动画流畅复刻Material Design
0依赖 体积小 min + gzip打包后 仅5.8KB
Installation and use
$ yarn add
vue
-float-action-
button
$ npm install
vue
-float-action-
button
import App from './App.
vue
'
import
Vue
Fab from '
vue
-float-action-
button
'
导入组件：
import { Toggle
Button
} from '
vue
-js-toggle-
button
'
Vue
. component ( 'Toggle
Button
' , Toggle
Button
)
< toggle-
button
@change= " onChangeEventH
v-for="(
button
, index) in
button
s"
:key="index"
:class="{ 'is-active': active
Button
Index === index }"
@click="active
Button
Index = index"
{{
button
}}
</
el
-
button
>
3. 在样式中定义 .is-active 类的样式，用来表示当前被选中的
按钮
：
.is-active {
background-color: #409EFF;
color: #fff;
这样就可以实现
循环
渲染
el
-
button
，默认第一个
按钮
高亮，
点击
哪个
按钮
那个
按钮
高亮的效果。
