| 提交 | 用户 | age | ||
| 2e79c9 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="Ripple示例"> |
| 56a966 | 3 | <div class="demo-box" v-ripple>content</div> |
| 31ff05 | 4 | </PageWrapper> |
| 2e79c9 | 5 | </template> |
| V | 6 | <script lang="ts"> |
| 7 | import { defineComponent } from 'vue'; | |
| 8 | import RippleDirective from '/@/directives/ripple'; | |
| 31ff05 | 9 | import { PageWrapper } from '/@/components/Page'; |
| V | 10 | |
| 2e79c9 | 11 | export default defineComponent({ |
| 31ff05 | 12 | components: { PageWrapper }, |
| 2e79c9 | 13 | directives: { |
| V | 14 | Ripple: RippleDirective, |
| 15 | }, | |
| 16 | }); | |
| 17 | </script> | |
| 18 | ||
| 19 | <style lang="less" scoped> | |
| 20 | .demo-box { | |
| 21 | display: flex; | |
| 22 | width: 300px; | |
| 23 | height: 300px; | |
| 24 | font-size: 24px; | |
| 25 | color: #fff; | |
| 2cdf2c | 26 | background-color: #408ede; |
| 2e79c9 | 27 | border-radius: 10px; |
| V | 28 | justify-content: center; |
| 29 | align-items: center; | |
| 30 | } | |
| 31 | </style> | |
