element-plus / element-plus

🎉 A Vue.js 3 UI Library made by Element team
https://element-plus.org
MIT License
24.58k stars 16.66k forks source link

[Component] [select, dialog] 给dialog设置打开时的动画效果后,dialog里面的select组件无法正常显示所选label #17275

Open co2color opened 4 months ago

co2color commented 4 months ago

Bug Type: Component

Environment

Reproduction

Related Component

Reproduction Link

Element Plus Playground

Steps to reproduce

<script setup lang="ts">
import { ref } from "vue";

const visible = ref(false);
const value = ref<string[]>(["123"]);
const options = [
  {
    value: "123",
    label: "123's label",
  },
];
function open() {
  visible.value = true;
}
</script>

<template>
  <div>
    <p>
      Question: After setting open animation for dialog, el-select can't show
      the label.
    </p>
    <p>
      问题: 给dialog加了动画效果,打开dialog后, select组件显示不出来对应的label
    </p>
    <el-dialog v-model="visible" title="dialog" destroy-on-close append-to-body>
      <div>
        <p>↓↓↓no label here</p>
        <div>
          <el-select style="width: 200px" v-model="value" multiple>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </el-dialog>
    <el-button type="primary" @click="open">open</el-button>
  </div>
</template>

<style>
@keyframes dialog-open {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dialog-close {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

.dialog-fade-enter-active {
  .el-dialog {
    animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
  }
}

.dialog-fade-leave-active {
  .el-dialog {
    animation: dialog-close 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
}
</style>

What is Expected?

打开dialog后,select组件正常显示所选label

What is actually happening?

打开dialog后,select组件 无法 正常显示所选label

Additional comments

.el-selectselection.el-selectselected-item.el-tag : 该span标签会动态设置css [style="max-width: px;"] ,可能是设置出错导致的?

co2color commented 4 months ago

useSelect.ts

  const tagStyle = computed(() => {
    const gapWidth = getGapWidth()
    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1
        ? states.selectionWidth - states.collapseItemWidth - gapWidth
        : states.selectionWidth
    return { maxWidth: `${maxWidth}px` }
  })

可能是这儿set错了