<template>
  <div class="main">
    <div class="comp-list">
      <div class="item" v-for="(item,index) in tagData" :key="index" >
        <el-tag @click="item.click">{{item.name}}</el-tag>
      </div>
    </div>
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class DemoIndex extends Vue {
  tagData:Array<any> = [{
    name:'表单',
    click:()=>{
      (this as any).$router.push('/demo/form')
    }
  },{
    name:'表格',
    click:()=>{
      (this as any).$router.push('/demo/table')
    }
  },{
    name:'moduleView',
    click:()=>{
      (this as any).$router.push('/demo/moduleView')
    }
  },{
    name:'单据',
    click:()=>{
      (this as any).$router.push('/demo/bill')
    }
  },{
    name:'弹窗',
    click:()=>{
      (this as any).$router.push('/demo/dialog')
    }
  }]
}
</script>

<style scoped lang="scss">
.main{
  height: 100%;
  width: 100%;
  overflow: auto;
  .comp-list{
    display: flex;
    flex-wrap: wrap;
    .item{
      margin-bottom: 16px;
      cursor: pointer;
    }
  }
}
</style>