IndexPage.vue

<!--
 * 动画2
 * https://www.youtube.com/@OnlineTutorialsYT/playlists
  -->
<script lang="ts">
export default {
  name: 'PAGE9',
};
</script>
<script setup lang="ts">
import { ref } from 'vue';
import TextVue from './element/TextVue.vue';
import WorkingDigitalClock from './element/WorkingDigitalClock .vue';
import SvgLineDrawingAnimation from './element/SvgLineDrawingAnimation.vue';
import FlyingTextAnimationEffects from './element/FlyingTextAnimationEffects.vue';
import TransformationAnimation from './element/TransformationAnimation.vue';
import AgGridStudy from './element/AgGridStudy2.vue';
import AgGridMaster from './element/AgGridMaster.vue';
import AgGridDetailGrids from './element/AgGridDetailGrids.vue';
import AgGridTreeData from './element/AgGridTreeData.vue';
import AgGridTreeFileBrowser from './element/AgGridTreeFileBrowser.vue';
import AgGridCustomDateComponent from './element/AgGridCustomDateComponent.vue';
import AgGridSelection from './element/AgGridSelection.vue';
import AgGridCheckboxSelection from './element/AgGridCheckboxSelection.vue';
import AgGridGroupSelection from './element/AgGridGroupSelection.vue';

const listData = [
  {
    title: '测试',
    name: 'text-vue',
  },
  {
    title: 'SVG 数字时钟',
    name: 'working-digital-clock',
  },
  {
    title: 'SVG 画线动画',
    name: 'svg-line-drawing-animation',
  },
  {
    title: '飞行文本动画效果 ',
    name: 'flying-text-animation-effects',
  },
  {
    title: '变形动画',
    name: 'transformation-animation',
  },
  {
    title: 'AG grid',
    name: 'ag-grid-study',
  },
  {
    title: 'AG grid 细节表格',
    name: 'ag-grid-master',
  },
  {
    title: 'Vue Data Grid: Master / Detail - Detail Grids',
    name: 'ag-grid-detail-grids',
  },
  {
    title: 'Ag Grid 表格树',
    name: 'ag-grid-tree-data',
  },
  {
    title: 'Ag Grid 表格树 文件浏览器例子',
    name: 'ag-grid-tree-file-browser',
  },
  {
    title: 'Ag Grid 自定义日期组件',
    name: 'ag-grid-custom-date-component',
  },
  {
    title: 'Ag Grid 选择',
    name: 'ag-grid-selection',
  },
  {
    title: 'Ag Grid 复选框选择',
    name: 'ag-grid-checkbox-selection',
  },
  {
    title: 'Ag Grid 组选择',
    name: 'ag-grid-group-selection',
  },
];
const isShow = ref(true);
const elementName = ref('ag-grid-group-selection');
const elementTitle = ref('Ag Grid 组选择');

function onclick(data: any) {
  elementTitle.value = data.title;
  elementName.value = data.name;
  isShow.value = true;
}
function goBack() {
  isShow.value = false;
}
</script>

<template>
  <div>
    <div v-if="isShow" class="main">
      <div class="action">
        <q-btn
          @click="goBack"
          round
          flat
          icon="bi-arrow-left"
          size="12px"
          style="color: #555"
        />
        <span>{{ elementTitle }}</span>
      </div>
      <div class="main-content">
        <text-vue v-if="elementName === 'text-vue'" />
        <working-digital-clock v-if="elementName === 'working-digital-clock'" />
        <svg-line-drawing-animation
          v-if="elementName === 'svg-line-drawing-animation'"
        />
        <flying-text-animation-effects
          v-if="elementName === 'flying-text-animation-effects'"
        />
        <transformation-animation
          v-if="elementName === 'transformation-animation'"
        />
        <ag-grid-study v-if="elementName === 'ag-grid-study'" />
        <ag-grid-master v-if="elementName === 'ag-grid-master'" />
        <ag-grid-detail-grids v-if="elementName === 'ag-grid-detail-grids'" />
        <ag-grid-tree-data v-if="elementName === 'ag-grid-tree-data'" />
        <ag-grid-tree-file-browser
          v-if="elementName === 'ag-grid-tree-file-browser'"
        />
        <ag-grid-custom-date-component
          v-if="elementName === 'ag-grid-custom-date-component'"
        />
        <ag-grid-selection v-if="elementName === 'ag-grid-selection'" />
        <ag-grid-checkbox-selection
          v-if="elementName === 'ag-grid-checkbox-selection'"
        />
        <ag-grid-group-selection
          v-if="elementName === 'ag-grid-group-selection'"
        />
      </div>
    </div>
    <div v-else>
      <ul class="list">
        <li
          @click="onclick(item)"
          v-for="(item, index) in listData"
          :key="index"
        >
          <p class="title">
            {{ item.title }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list {
  padding: 20px;
  li {
    list-style: none;
    .title {
      cursor: pointer;
      font-size: 16px;
      color: #555;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.main {
  .action {
    height: 40px;
    background-color: #fff;
    line-height: 40px;
    box-sizing: border-box;
  }
  .main-content {
    position: relative;
    height: calc(100vh - 90px);
  }
}
</style>