使用Vue+Element UI实现复选框删除线效果

2026-03-27 12:27:01发布 0次浏览

详情描述

方法一：使用CSS类绑定（推荐）

<template>
  <div class="checkbox-container">
    <el-checkbox-group v-model="checkedItems">
      <el-checkbox 
        v-for="item in items" 
        :key="item.id" 
        :label="item.id"
        :class="{ 'checked-item': isChecked(item.id) }"
        @change="handleCheckboxChange"
      >
        <span :class="{ 'strikethrough': isChecked(item.id) }">
          {{ item.name }}
        </span>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项一' },
        { id: 2, name: '选项二' },
        { id: 3, name: '选项三' },
        { id: 4, name: '选项四' }
      ],
      checkedItems: [2, 4] // 默认选中项
    }
  },
  methods: {
    isChecked(id) {
      return this.checkedItems.includes(id)
    },
    handleCheckboxChange() {
      console.log('选中项:', this.checkedItems)
    }
  }
}
</script>

<style scoped>
/* 删除线样式 */
.strikethrough {
  text-decoration: line-through;
  color: #999;
  opacity: 0.7;
}

/* 可选：调整整个复选框的样式 */
.checked-item {
  /deep/ .el-checkbox__input {
    opacity: 0.7;
  }
}

.checkbox-container {
  padding: 20px;
}
</style>

方法二：使用自定义渲染（更灵活）

<template>
  <div class="checkbox-container">
    <div 
      v-for="item in items" 
      :key="item.id" 
      class="custom-checkbox-item"
      @click="toggleItem(item.id)"
    >
      <div class="checkbox-wrapper">
        <!-- 自定义复选框 -->
        <div class="custom-checkbox" :class="{ 'checked': isChecked(item.id) }">
          <i v-if="isChecked(item.id)" class="el-icon-check"></i>
        </div>

        <!-- 文本内容 -->
        <span class="checkbox-label" :class="{ 'strikethrough': isChecked(item.id) }">
          {{ item.name }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '购买牛奶' },
        { id: 2, name: '完成项目报告' },
        { id: 3, name: '健身房锻炼' },
        { id: 4, name: '阅读书籍' }
      ],
      checkedItems: [2]
    }
  },
  methods: {
    isChecked(id) {
      return this.checkedItems.includes(id)
    },
    toggleItem(id) {
      const index = this.checkedItems.indexOf(id)
      if (index === -1) {
        this.checkedItems.push(id)
      } else {
        this.checkedItems.splice(index, 1)
      }
    }
  }
}
</script>

<style scoped>
.checkbox-container {
  padding: 20px;
}

.custom-checkbox-item {
  margin-bottom: 12px;
  cursor: pointer;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.custom-checkbox.checked {
  background-color: #409eff;
  border-color: #409eff;
}

.custom-checkbox.checked i {
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.checkbox-label {
  font-size: 14px;
  color: #606266;
  transition: all 0.3s;
}

/* 删除线效果 */
.strikethrough {
  text-decoration: line-through;
  color: #c0c4cc !important;
  opacity: 0.7;
}

/* 悬停效果 */
.custom-checkbox-item:hover .custom-checkbox {
  border-color: #409eff;
}

.custom-checkbox-item:hover .checkbox-label:not(.strikethrough) {
  color: #409eff;
}
</style>

方法三：使用Element UI的Table组件（适合列表）

<template>
  <div class="table-container">
    <el-table
      :data="items"
      style="width: 100%"
    >
      <el-table-column width="50">
        <template #default="{ row }">
          <el-checkbox 
            v-model="row.checked" 
            @change="handleRowCheck(row)"
          />
        </template>
      </el-table-column>

      <el-table-column label="任务名称">
        <template #default="{ row }">
          <span :class="{ 'strikethrough': row.checked }">
            {{ row.name }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="120">
        <template #default="{ row }">
          <el-tag 
            :type="row.checked ? 'info' : 'primary'" 
            size="small"
          >
            {{ row.checked ? '已完成' : '待完成' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '设计原型图', checked: true },
        { id: 2, name: '编写组件文档', checked: false },
        { id: 3, name: '单元测试', checked: true },
        { id: 4, name: '代码审查', checked: false }
      ]
    }
  },
  methods: {
    handleRowCheck(row) {
      console.log(`${row.name}: ${row.checked ? '已完成' : '未完成'}`)
    }
  }
}
</script>

<style scoped>
.table-container {
  padding: 20px;
}

.strikethrough {
  text-decoration: line-through;
  color: #909399;
}

/deep/ .el-table .cell {
  transition: all 0.3s;
}
</style>

增强的删除线效果样式（可选）

/* 更丰富的删除线效果 */
.strikethrough {
  /* 基础删除线 */
  text-decoration: line-through;

  /* 渐变删除线 */
  background: linear-gradient(transparent 40%, #ff6b6b 40%, #ff6b6b 60%, transparent 60%);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* 文字样式 */
  color: #a0a0a0 !important;
  opacity: 0.7;
  text-shadow: none;

  /* 动画效果 */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 悬停时恢复效果 */
.strikethrough:hover {
  opacity: 1;
  color: #606266 !important;
  text-decoration: none;
  background: none;
}

/* 闪烁动画（选中时） */
@keyframes strike {
  0% { width: 0; }
  100% { width: 100%; }
}

.animate-strike {
  position: relative;
  display: inline-block;
}

.animate-strike::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ff6b6b;
  transform: translateY(-50%);
  animation: strike 0.3s ease-out forwards;
}