Vue Material div 添加水波纹效果

Vue Material Card 组件点击出现水波纹效果

<md-card class="md-primary" md-theme="orange-card" md-with-hover>
  <md-ripple>
    <md-card-header>
      <div class="md-title">Orange primary color</div>
      <div class="md-subhead">With hover and ripple effects</div>
    </md-card-header>

    <md-card-content>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
    </md-card-content>
  </md-ripple>
</md-card>

给自定义的 div 添加水波纹点击效果, 使用 <md-ripple> 标签

template

<div class="container">
  <md-ripple>
    div  
  </md-ripple>
</div>

style

.container {
  width: 100px;
  height: 100px;
  background-color: #eeeeee;
}