113 链接集11--ctrl+左键单击多选 vue中change事件阻止冒泡 flex布局 border 渐变 svg经过变颜色 $event实参

1.ctrl+左键单击多选，单击单选

精简代码

  <div class="model-list">
      <div
        @mousedown.prevent="handleClick(item, $event)"
        class="model-list-item"
        v-for="item in modelList"
        :key="item.id"
        :class="{ 'model-active': item.active }"
      >
        {{ item.name }}
      </div>
    </div>


//script

 public modelList = [
    {
      id: 0,
      name: '马栏山方案-HR-0001',
      active: false,
    },
    {
      id: 1,
      name: '马栏山方案-HR-0002',
      active: false,
    },
    {
      id: 2,
      name: '马栏山方案-HR-0003',
      active: false,
    },
  ];
  //单选 状态切换
  modelSelect(info: any) {
    this.modelList.forEach(item => {
      if (item.id === info.id) {
        item.active = !item.active;
      } else {
        item.active = false;
      }
    });
  }

  //多选状态为true
  multiSelect(info: any) {
    this.modelList.forEach(item => {
      if (item.id === info.id) {
        item.active = !item.active;
      }
    });
  }

  //判断是否多选操作
  handleClick(item: any, event: any) {
    // 检查是否按下了Ctrl键并是左键点击
    if (event.ctrlKey && event.button === 0) {
      this.multiSelect(item);
    } else {
      this.modelSelect(item);
    }
  }

<template>
  <!-- 数据编辑--合并 -->
  <CsDialog
    :width="580"
    @close="visibleDialog = false"
    @reduce="visibleDialog = false"
    @expend="visibleDialog = false"
    title="合并"
    :visible="visibleDialog"
  >
    <div class="row-item common-wrapper">提示：选择一个模型继承其属性</div>
    <div class="model-list">
      <div
        @mousedown.prevent="handleClick(item, $event)"
        class="model-list-item"
        v-for="item in modelList"
        :key="item.id"
        :class="{ 'model-active': item.active }"
      >
        {{ item.name }}
      </div>
    </div>

    <template slot="footer">
      <div class="end__operation">
        <CsButton @click="visibleDialog = false">确定</CsButton>
        <CsButton @click="visibleDialog = false">取消</CsButton>
      </div>
    </template>
  </CsDialog>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
  components: {},
})
export default class CombineDialog extends Vue {
  @Prop() visible!: any;

  get visibleDialog() {
    return this.visible;
  }
  set visibleDialog(val: any) {
    this.$emit('update:visible', val);
  }

  mounted() {}
  public modelList = [
    {
      id: 0,
      name: '马栏山方案-HR-0001',
      active: false,
    },
    {
      id: 1,
      name: '马栏山方案-HR-0002',
      active: false,
    },
    {
      id: 2,
      name: '马栏山方案-HR-0003',
      active: false,
    },
    {
      id: 3,
      name: '马栏山方案-HR-0004',
      active: false,
    },
    {
      id: 4,
      name: '马栏山方案-HR-0005',
      active: false,
    },
    {
      id: 5,
      name: '马栏山方案-HR-0006',
      active: false,
    },
    {
      id: 6,
      name: '马栏山方案-HR-0006',
      active: false,
    },
    {
      id: 7,
      name: '马栏山方案-HR-0006',
      active: false,
    },
    {
      id: 8,
      name: '马栏山方案-HR-0006',
      active: false,
    },
  ];

  modelSelect(info: any) {
    this.modelList.forEach(item => {
      if (item.id === info.id) {
        item.active = !item.active;
      } else {
        item.active = false;
      }
    });
  }
  multiSelect(info: any) {
    this.modelList.forEach(item => {
      if (item.id === info.id) {
        item.active = !item.active;
      }
    });
  }

  handleClick(item: any, event: any) {
    // 检查是否按下了Ctrl键并是左键点击
    if (event.ctrlKey && event.button === 0) {
      this.multiSelect(item);
    } else {
      this.modelSelect(item);
    }
  }
}
</script>

<style lang="scss" scoped>
.excavation-analysis {
  position: absolute;
  top: 0;
  left: 50%;
}
.end__operation {
  float: right;
  display: flex;
}

.el-radio-group {
  padding: 5px 8px;
  border-radius: 2px;
  border: 1px solid rgba(204, 212, 228, 1);
  background-color: #f9fafc;
  display: flex;
  align-items: center;
}
.row-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.common-wrapper {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(115, 123, 141, 1);
  padding: 5px 8px;
  border-radius: 2px;
  border: 1px solid rgba(204, 212, 228, 1);
  background-color: #f9fafc;
  font-family: PingFang SC;
}
.file-select {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.model-list {
  font-family: PingFang SC;
  font-size: 14px;
  color: rgba(115, 123, 141, 1);
  max-height: 300px;
  overflow-y: auto;
  .model-list-item {
    height: 32px;
    line-height: 32px;
    padding-left: 8px;
    &:nth-child(2n + 1) {
      background-color: rgba(245, 248, 253, 1);
    }
  }
  .model-active {
    background: rgba(203, 218, 255, 1) !important;
  }
}
</style>

2.vue中change事件阻止冒泡

问题：在点击选择颜色的时候，触发了父节点的点击事件，导致开启了背景颜色

解决办法

<template>
  <div class="special-effects">
    <div :class="['item', item.active ? 'active' : '']" v-for="item in specialList" @click.stop="clickBtn(item)" :key="item.id">
      <img :src="item.icon" alt="" />
      <span>{{ item.title }}</span>
      <div @click.stop>
        <el-color-picker @change="changeColor" show-alpha v-if="item.title == 'X光效'" v-model="color"></el-color-picker>
      </div>
    </div>
  </div>
</template>

给颜色选择器套一层，加上@click.stop

3.flex均分布局

错误写法写成flex:33%

4.border渐变设置

   box-sizing: border-box;
        width: 330px;
        height: 36px;
        padding: 6px 12px 6px 12px;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-image-slice: 1; /* 添加这一行来定义边框图片的切片方式 */
        border-image-source: linear-gradient(90deg, #496987 0.48%, rgba(77, 118, 142, 0.3) 47.32%);
        background: linear-gradient(90deg, rgba(36, 76, 120, 0.05) 0%, rgba(36, 76, 120, 0.5) 100%);


在Vue中设置渐变边框，您已经正确地使用了border-image-source属性配合linear-gradient来创建渐变边框。您的代码片段展示了一个使用线性渐变作为边框图像的例子，这是实现边框渐变的标准方法。这里是对您代码的一个简单解析和确认：

.file-list-header {
  /* 其他样式属性... */
  border-width: 1px;
  border-style: solid;
  border-image-source: linear-gradient(90deg, #496987 0.48%, rgba(77, 118, 142, 0.3) 47.32%);
  /* 注意：为了使渐变边框生效，还需要定义border-image-slice、border-image-repeat等属性 */
}

注意事项：
border-image-slice: 这个属性定义了边框图片如何被分割。默认情况下，边框图片可能不会按预期显示，因为它需要被切片并拉伸以适应边框。通常，可以设置为border-image-slice: 1;来简化处理，表示从图片的边缘向内切割1单位的宽度来创建边框片段。

border-image-repeat: 控制边框图片的平铺方式，如stretch（拉伸以填充边框）、repeat（重复）、round（重复并根据需要调整图像的大小以适合边框的长度）等。默认值是stretch，通常对于渐变边框来说已经足够。

.file-list-header {
  /* 其他样式属性... */
  border-width: 1px;
  border-style: solid;
  border-image-source: linear-gradient(90deg, #496987 0.48%, rgba(77, 118, 142, 0.3) 47.32%);
  border-image-slice: 1; /* 添加这一行来定义边框图片的切片方式 */
  border-image-repeat: stretch; /* 添加这一行来控制边框图片的重复方式，可选，默认是stretch */
}

5.svg经过变颜色

首先svg的fill属性设置为currentColor  ---fill="currentColor"

然后给svg的父级元素，或者本身设置color即可设置颜色

6.$event：实参

在vue中$event表示默认参数，例如：下拉菜单


//  等价于 @command="handleCommand($event)"

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">黄金糕</el-dropdown-item>
    <el-dropdown-item command="b">狮子头</el-dropdown-item>
    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
  }
</script>

因此如果想额外传值，则可以在括号后面他添加，来接受$event默认参数之外的其他参数