el‐select - daniel-qa/Vue GitHub Wiki

el-select

  • 範例
<template>
  <div>
    <el-select
      v-model="selectedValue"
      placeholder="請選擇"
      clearable
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <p>選擇的值: {{ selectedValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 選擇框的值
const selectedValue = ref('')

// 選項列表
const options = [
  { value: 'School', label: '學校' },
  { value: 'ID', label: 'ID' }
]
</script>

<style scoped>
/* 可以根據需求自定義樣式 */
</style>

關於高度

如果想要调整 el-select 占用的版面高度，可以通过修改 height、padding、line-height、font-size 等属性来实现。

el-select 在 Element Plus 裡默认的样式

el-select 在 Element Plus 中有一些默认的样式，这些样式会影响它的外观和布局。以下是一些常见的默认样式：

1. 宽度和高度

默认情况下，el-select 的宽度是自动适应其父容器的宽度，而高度大约为 32px 左右（这个值可能根据主题和其他因素有所变化）。

2. 边框和圆角

默认的 el-select 组件具有：

边框：一个 1px 的浅灰色边框。 圆角：默认具有圆角，通常是 4px。

3. 阴影和聚焦效果

el-select 在获得焦点时，会显示出一个轻微的蓝色阴影，提示当前输入框处于选中状态。这个效果通常由 box-shadow 样式实现。

4. 输入框样式

默认的输入框背景是白色，并且有一个内边距以使文本不至于紧贴边框，通常是 8px。

5. 下拉框样式

el-select 的下拉框有默认的背景色和阴影效果，且选项会根据需要动态调整高度。

6. 默认文本颜色和字体

默认的文本颜色和字体大小是：

文本颜色：#606266（一种灰色） 字体大小：通常为 14px

示例默认样式：

这些默认样式是由 Element Plus 自动应用的，你不需要手动设置它们，但如果想查看或覆盖它们，你可以查看浏览器的开发者工具（F12）来查看其详细的 CSS 样式。以下是一些可能的默认样式：

/* el-select 的输入框样式 */
.el-select {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dcdfe6; /* 默认边框颜色 */
  border-radius: 4px;        /* 默认圆角 */
  background-color: #fff;    /* 背景色 */
  color: #606266;            /* 字体颜色 */
  font-size: 14px;           /* 字体大小 */
  line-height: 32px;         /* 行高与高度一致 */
}

/* 聚焦时的样式 */
.el-select.is-focus .el-select__input {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* 聚焦时的阴影 */
  border-color: #409eff;                           /* 聚焦时的边框颜色 */
}

/* 下拉框样式 */
.el-select-dropdown {
  max-height: 300px;
  overflow-y: auto;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 下拉框阴影 */
}

自定义样式的影响：

当你手动设置 style 属性（如：width: 200px; height: 40px;），它会覆盖默认的 width 和 height 样式，其他的默认样式（如边框、圆角、阴影等）则不会受到影响，除非你显式地在 CSS 中进行修改。

例如：

<el-select v-model="value" style="width: 200px; height: 40px;">
  <el-option label="Option 1" value="1"></el-option>
  <el-option label="Option 2" value="2"></el-option>
</el-select>

这段代码会将 el-select 的宽度设置为 200px，高度设置为 40px，但其他默认样式（例如边框、圆角、字体等）将保持不变，除非你进一步调整。

总结：

el-select 确实有默认样式，包括宽度、边框、圆角、阴影等。如果你指定了 style 属性来覆盖宽度和高度，它会按照你指定的样式进行渲染，其他默认样式则会继续应用。如果你想要进一步定制它的外观，可以通过 CSS 进行覆盖。

⚠️ **GitHub.com Fallback** ⚠️