demo.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <div class="demo">
  3. <div class="title">类型</div>
  4. <div class="card">
  5. <nut-button type="primary">主要按钮</nut-button>
  6. <nut-button type="success">成功按钮</nut-button>
  7. <nut-button type="default">默认按钮</nut-button>
  8. <nut-button type="warning">警告按钮</nut-button>
  9. <nut-button type="danger">危险按钮</nut-button>
  10. </div>
  11. <div class="title">通栏</div>
  12. <div class="card">
  13. <nut-button block>通栏按钮 Normer</nut-button>
  14. <nut-button block>通栏按钮 Pressed</nut-button>
  15. <nut-button block disabled>通栏按钮 Disabled</nut-button>
  16. </div>
  17. </div>
  18. </template>
  19. <script lang="ts">
  20. import Button from "@/packages/button/index.vue";
  21. import { createDemoComponent } from "@/utils/create";
  22. export default createDemoComponent("button")({
  23. props: {
  24. text: String
  25. },
  26. components: { "nut-button": Button },
  27. emits: ["click"],
  28. setup(props, { emit, slots }) {
  29. console.log(props);
  30. }
  31. });
  32. </script>
  33. <style lang="scss" scoped>
  34. .nut-button {
  35. margin-bottom: 21px;
  36. &:last-child {
  37. margin-bottom: 0;
  38. }
  39. }
  40. </style>