index.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <div class="main">
  3. <div class="comp-list">
  4. <div class="item" v-for="(item,index) in tagData" :key="index" >
  5. <el-tag @click="item.click">{{item.name}}</el-tag>
  6. </div>
  7. </div>
  8. <transition name="fade-transform" mode="out-in">
  9. <router-view />
  10. </transition>
  11. </div>
  12. </template>
  13. <script lang="ts">
  14. import { Component, Prop, Vue, Watch } from "vue-property-decorator";
  15. @Component
  16. export default class DemoIndex extends Vue {
  17. tagData:Array<any> = [{
  18. name:'表单',
  19. click:()=>{
  20. (this as any).$router.push('/demo/form')
  21. }
  22. },{
  23. name:'表格',
  24. click:()=>{
  25. (this as any).$router.push('/demo/table')
  26. }
  27. },{
  28. name:'moduleView',
  29. click:()=>{
  30. (this as any).$router.push('/demo/moduleView')
  31. }
  32. },{
  33. name:'单据',
  34. click:()=>{
  35. (this as any).$router.push('/demo/bill')
  36. }
  37. },{
  38. name:'弹窗',
  39. click:()=>{
  40. (this as any).$router.push('/demo/dialog')
  41. }
  42. }]
  43. }
  44. </script>
  45. <style scoped lang="scss">
  46. .main{
  47. height: 100%;
  48. width: 100%;
  49. overflow: auto;
  50. .comp-list{
  51. display: flex;
  52. flex-wrap: wrap;
  53. .item{
  54. margin-bottom: 16px;
  55. cursor: pointer;
  56. }
  57. }
  58. }
  59. </style>