vue3-test-ui v0.0.3-alpha.2

安装

  $ pnpm install vue3-test-ui or yarn i vue3-test-ui

案例演示

<script setup lang="ts">
  import { Grid, GridItem } from "vue3-test-ui";
</script>
<template>
  <Grid cols="4" x-gap="10px" y-gap="10px">
    <GridItem class="btn">1</GridItem>
    <GridItem class="btn">2</GridItem>
    <GridItem class="btn">3</GridItem>
    <GridItem class="btn">+</GridItem>
    <GridItem class="btn">4</GridItem>
    <GridItem class="btn">5</GridItem>
    <GridItem class="btn">6</GridItem>
    <GridItem class="btn">-</GridItem>
    <GridItem class="btn">7</GridItem>
    <GridItem class="btn">8</GridItem>
    <GridItem class="btn">9</GridItem>
    <GridItem class="btn">/</GridItem>
    <GridItem colspan="3" class="btn">0</GridItem>
    <GridItem class="btn">=</GridItem>
  </Grid>
</template>
<style lang="scss">
.btn {
  color: white;
  padding: 12px;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #1890ff;
  background-color: #1890ff;
  font-weight: bold;
  font-size: 18px;
  &:active {
    opacity: 0.8;
  }
}
</style>