el-skeleton-item 设置高度

element-plus 骨架屏中每一项的高度可以通过 el-skeleton-item 组件的 height 属性来设置。height 属性支持以下类型的值：

- Number：设置固定高度值，如 height="50"
- String：设置高度的百分比，如 height="50%"

你可以在使用 el-skeleton-item 组件时，通过设置 height 属性来更改其高度。例如：

<template>
  <el-skeleton>
    <el-skeleton-item :height="50"></el-skeleton-item>
  </el-skeleton>
</template>

上面的代码将 el-skeleton-item 组件的高度设置为 50px。如果你想将 el-skeleton-item 组件的高度设置为其父元素高度的一半，可以使用百分比来设置：

<template>
  <div style="height: 100px;">
    <el-skeleton>
      <el-skeleton-item :height="'50%'"></el-skeleton-item>
    </el-skeleton>
  </div>
</template>

上面的代码将 el-skeleton-item 组件的高度设置为其父元素高度的一半，即 50px。

相关问题

el-table如何使用el-skeleton

el-table是饿了么UI库中的一个表格组件，而el-skeleton是饿了么UI库中的一个骨架屏组件。在使用el-table时，我们可以结合el-skeleton来增强用户体验。具体实现方式如下：

1. 在el-table的外层包裹一个el-skeleton，并将其隐藏起来
2. 在数据加载前，显示el-skeleton，并隐藏el-table
3. 数据加载完成后，隐藏el-skeleton并显示el-table

以下是示例代码：

<template>
  <div>
    <el-skeleton :loading="loading" :animated="true">
      <el-table v-if="!loading" :data="tableData" style="width: 100%">
        <!-- table columns -->
      </el-table>
    </el-skeleton>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      tableData: []
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableData = [
        // table data
      ];
      this.loading = false;
    }, 2000);
  }
};
</script>

以上代码中，在组件加载时，我们设置了loading为true，并在mounted钩子函数中模拟了一个2秒钟的数据加载过程。在数据加载前，el-table是不可见的，而el-skeleton是可见的。当数据加载完成后，我们将el-table显示出来，并将el-skeleton隐藏。这样就可以实现在数据加载过程中显示一个骨架屏，增强用户体验。

docker run -d --name hyperf -v /mnt/hgfs/www/hyperf/:/hyperf-skeleton -p 9501:9501 -it --privileged -u root --entrypoint /bin/sh hyperf/hyperf:7.4-alpine-v3.11-swoole docker exec -it hyperf bash cd /hyperf-skeleton composer config -g repo.packagist composer https://mirrors.aliyun.com/composer composer create-project hyperf/hyperf-skeleton php /hyperf-skeleton/hyperf-skeleton/bin/hyperf.php start写个yaml文件

好的，以下是一个安装 Hyperf 框架的 `yaml` 文件示例：

stages:
  - install
  - start

install:
  stage: install
  image: docker:latest
  services:
    - docker:dind
  script:
    - docker run -d --name hyperf -v /mnt/hgfs/www/hyperf/:/hyperf-skeleton -p 9501:9501 -it --privileged -u root --entrypoint /bin/sh hyperf/hyperf:7.4-alpine-v3.11-swoole
    - docker exec -it hyperf sh -c "cd /hyperf-skeleton && composer config -g repo.packagist composer https://mirrors.aliyun.com/composer && composer create-project hyperf/hyperf-skeleton"
  artifacts:
    paths:
      - /mnt/hgfs/www/hyperf/hyperf-skeleton

start:
  stage: start
  image: docker:latest
  services:
    - docker:dind
  script:
    - docker start hyperf
    - docker exec -it hyperf sh -c "cd /hyperf-skeleton && php /hyperf-skeleton/bin/hyperf.php start"

这个 YAML 文件定义了两个阶段，第一个阶段为 `install`，用于在 Docker 容器中安装 Hyperf 框架及其相关依赖；第二个阶段为 `start`，用于在 Docker 容器中启动 Hyperf 框架。在 `install` 阶段中，我们使用了 `docker` 镜像，在 Docker 容器中执行了 `docker run` 命令来创建 Hyperf 容器，并执行了 `docker exec` 命令来执行安装 Hyperf 框架及其相关依赖的命令。在 `start` 阶段中，我们同样使用了 `docker` 镜像，在 Docker 容器中执行了 `docker start` 命令来启动 Hyperf 容器，并执行了 `docker exec` 命令来启动 Hyperf 框架。在 `install` 阶段中，我们还使用了 `artifacts` 关键字来指定将 Hyperf 框架所在的目录 `/mnt/hgfs/www/hyperf/hyperf-skeleton` 作为构建产物，以便在后续的阶段中使用。