面板 Panel

基本用法

面板 Panel - 图1

  1. <template lang="html">
  2. <div>
  3. <div class="demo-hidden">
  4. <za-panel>
  5. <za-panel-header title='普通' ></za-panel-header>
  6. <za-panel-body>
  7. <za-cell>body</za-cell>
  8. </za-panel-body>
  9. </za-panel>
  10. <za-panel>
  11. <za-panel-header title='带更多按钮'>
  12. <a slot='more' @click='handleClick'>更多</a>
  13. </za-panel-header>
  14. <za-panel-body>
  15. <za-cell>body</za-cell>
  16. </za-panel-body>
  17. </za-panel>
  18. <za-panel>
  19. <za-panel-header title='带底部' ></za-panel-header>
  20. <za-panel-body>
  21. <za-cell>body</za-cell>
  22. </za-panel-body>
  23. <za-panel-footer title="左侧文案" more="右侧文案" />
  24. </za-panel>
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. data() {
  31. return {
  32. }
  33. },
  34. methods: {
  35. handleClick() {
  36. alert('click me')
  37. }
  38. },
  39. };
  40. </script>

API

panel

属性类型默认值可选值/参数说明
prefixClsstringza-panel类名前缀

panel-header

属性类型默认值可选值/参数说明
prefixClsstringza-panel类名前缀
titleString标题,也可以用slot
moreString更多,也可以用slot

panel-footer

属性类型默认值可选值/参数说明
prefixClsstringza-panel类名前缀
titleString标题,也可以用slot
moreString更多,也可以用slot