列表

1. 生成一个列表

1.1. 示例

wechat_20250805_142309_766.png

点击展开代码

<template>
  <div>
    <div class="list-container">
      <ul class="list">
        <li
            v-for="(item, index) in items"
            :key="index"
            :class="{ selected: selectedIndex === index }"
            @click="selectItem(index)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selectedIndex: undefined,
        items: ['选项 1', '选项 2', '选项 3', '选项 4']
        // key: value
      }
    },
    methods: {
      selectItem(index) {
        this.selectedIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
  .capsule-btn {
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .capsule-btn:hover {
    background-color: #0056b3;
  }

  .list-container {
    width: 300px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
  }

  .list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
  }

  .list li {
    padding: 12px 20px;
    cursor: pointer;
    background-color: white;
    transition: background-color 0.2s ease, border-left-color 0.2s ease;
    border-left: 4px solid transparent; /* 左侧边框占位 */
  }

  .list li:hover {
    background-color: #f5f5f5;

  }

  /* 选中状态样式 */
  .list li.selected {
    background-color: #e0e0e0; /* 灰色背景 */
    border-left-color: #000; /* 黑色左侧边框 */
    font-weight: bold;
  }
</style>