fix(components): empty icon component judgment (#4178)

* fix(components): empty icon component judgment * revert: globals components * fix(components): el-icon missing import * fix: use shallowRef for icon components * refactor: remove shallowRef * fix: remove unused code * fix: social-link icon size * fix: time picker icon * fix: v-if judge
2025-01-18 10:59:10 +08:00 · 2021-11-05 17:44:02 +08:00 · 2021-11-05 17:44:02 +08:00 · f78407a409
commit f78407a409
parent c72ea9c1a1
28 changed files with 85 additions and 155 deletions
--- a/docs/.vitepress/vitepress/components/navbar/vp-social-link.vue
+++ b/docs/.vitepress/vitepress/components/navbar/vp-social-link.vue
@ -16,7 +16,7 @@ defineProps<{
    rel="noreferrer noopener"
    class="social-link"
  >
-    <ElIcon :size="20">
+    <ElIcon v-if="icon" :size="20">
      <component :is="icon" />
    </ElIcon>
  </a>
--- a/docs/examples/button/basic.vue
+++ b/docs/examples/button/basic.vue
@ -36,18 +36,6 @@
    <el-button type="danger" :icon="Delete" circle></el-button>
  </el-row>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { Search, Edit, Check, Message, Star, Delete } from '@element-plus/icons'
-export default {
-  data() {
-    return {
-      Search,
-      Edit,
-      Check,
-      Message,
-      Star,
-      Delete,
-    }
-  },
-}
 </script>
--- a/docs/examples/button/group.vue
+++ b/docs/examples/button/group.vue
@ -12,21 +12,6 @@
    <el-button type="primary" :icon="Delete"></el-button>
  </el-button-group>
 </template>
-<script lang="ts">
-import { ElIcon } from '@element-plus/components/icon'
+<script setup lang="ts">
 import { ArrowLeft, Edit, Share, Delete, ArrowRight } from '@element-plus/icons'
-export default {
-  components: {
-    ElIcon,
-    ArrowRight,
-  },
-  data() {
-    return {
-      ArrowLeft,
-      Edit,
-      Share,
-      Delete,
-    }
-  },
-}
 </script>
--- a/docs/examples/button/icon.vue
+++ b/docs/examples/button/icon.vue
@ -7,21 +7,6 @@
    Upload<el-icon class="el-icon--right"><Upload /></el-icon>
  </el-button>
 </template>
-<script lang="ts">
-import { ElIcon } from '@element-plus/components/icon'
+<script setup lang="ts">
 import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons'
-export default {
-  components: {
-    ElIcon,
-    Upload,
-  },
-  data() {
-    return {
-      Edit,
-      Share,
-      Delete,
-      Search,
-    }
-  },
-}
 </script>
--- a/docs/examples/button/size.vue
+++ b/docs/examples/button/size.vue
@ -18,13 +18,6 @@
    <el-button :icon="Search" size="mini" circle></el-button>
  </el-row>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { Search } from '@element-plus/icons'
-export default {
-  data() {
-    return {
-      Search,
-    }
-  },
-}
 </script>
--- a/docs/examples/descriptions/sizes.vue
+++ b/docs/examples/descriptions/sizes.vue
@ -75,7 +75,8 @@
  </el-descriptions>
 </template>

-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue'
 import {
  User,
  Iphone,
@ -84,18 +85,5 @@ import {
  OfficeBuilding,
 } from '@element-plus/icons'

-export default {
-  components: {
-    User,
-    Iphone,
-    Location,
-    Tickets,
-    OfficeBuilding,
-  },
-  data() {
-    return {
-      size: '',
-    }
-  },
-}
+const size = ref('')
 </script>
--- a/docs/examples/input/mixed-input.vue
+++ b/docs/examples/input/mixed-input.vue
@ -29,20 +29,13 @@
  </div>
 </template>

-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 import { Search } from '@element-plus/icons'
-export default defineComponent({
-  setup() {
-    return {
-      Search,
-      input1: ref(''),
-      input2: ref(''),
-      input3: ref(''),
-      select: ref(''),
-    }
-  },
-})
+const input1 = ref('')
+const input2 = ref('')
+const input3 = ref('')
+const select = ref('')
 </script>

 <style>
--- a/docs/examples/input/with-icon.vue
+++ b/docs/examples/input/with-icon.vue
@ -36,26 +36,13 @@
  </div>
 </template>

-<script lang="ts">
-import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 import { Calendar, Search } from '@element-plus/icons'
-
-export default defineComponent({
-  components: {
-    Calendar,
-    Search,
-  },
-  setup() {
-    return {
-      Calendar,
-      Search,
-      input1: ref(''),
-      input2: ref(''),
-      input3: ref(''),
-      input4: ref(''),
-    }
-  },
-})
+const input1 = ref('')
+const input2 = ref('')
+const input3 = ref('')
+const input4 = ref('')
 </script>

 <style>
--- a/docs/examples/popconfirm/customize.vue
+++ b/docs/examples/popconfirm/customize.vue
@ -12,13 +12,6 @@
  </el-popconfirm>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { InfoFilled } from '@element-plus/icons'
-
-export default defineComponent({
-  setup() {
-    return { InfoFilled }
-  },
-})
 </script>
--- a/docs/examples/popconfirm/trigger-event.vue
+++ b/docs/examples/popconfirm/trigger-event.vue
@ -14,22 +14,13 @@
  </el-popconfirm>
 </template>

-<script lang="ts">
+<script setup lang="ts">
 import { InfoFilled } from '@element-plus/icons'

-export default {
-  data() {
-    return {
-      InfoFilled,
-    }
-  },
-  methods: {
-    confirmEvent() {
-      console.log('confirm!')
-    },
-    cancelEvent() {
-      console.log('cancel!')
-    },
-  },
+const confirmEvent = () => {
+  console.log('confirm!')
+}
+const cancelEvent = () => {
+  console.log('cancel!')
 }
 </script>
--- a/docs/examples/switch/custom-icons.vue
+++ b/docs/examples/switch/custom-icons.vue
@ -1,27 +1,20 @@
 <template>
-  <el-switch v-model="value1" :active-icon="active" :inactive-icon="inactive">
+  <el-switch v-model="value1" :active-icon="Check" :inactive-icon="Close">
  </el-switch>
  <br />
  <el-switch
    v-model="value2"
    style="margin-left: 24px"
    inline-prompt
-    :active-icon="active"
-    :inactive-icon="inactive"
+    :active-icon="Check"
+    :inactive-icon="Close"
  >
  </el-switch>
 </template>

-<script lang="ts">
+<script setup lang="ts">
+import { ref } from 'vue'
 import { Check, Close } from '@element-plus/icons'
-export default {
-  data() {
-    return {
-      value1: true,
-      value2: true,
-      active: Check,
-      inactive: Close,
-    }
-  },
-}
+const value1 = ref(true)
+const value2 = ref(true)
 </script>
--- a/docs/examples/timeline/custom-node.vue
+++ b/docs/examples/timeline/custom-node.vue
@ -18,10 +18,11 @@
 </template>

 <script lang="ts">
+import { defineComponent } from 'vue'
 import { MoreFilled } from '@element-plus/icons'

-export default {
-  data() {
+export default defineComponent({
+  setup() {
    return {
      activities: [
        {
@ -54,5 +55,5 @@ export default {
      ],
    }
  },
-}
+})
 </script>
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@ -6,7 +6,11 @@
      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
      role="alert"
    >
-      <el-icon v-if="showIcon" class="el-alert__icon" :class="isBigIcon">
+      <el-icon
+        v-if="showIcon && iconComponent"
+        class="el-alert__icon"
+        :class="isBigIcon"
+      >
        <component :is="iconComponent" />
      </el-icon>
      <div class="el-alert__content">
--- a/packages/components/breadcrumb/src/breadcrumb-item.vue
+++ b/packages/components/breadcrumb/src/breadcrumb-item.vue
@ -24,6 +24,7 @@ import {
  onMounted,
  getCurrentInstance,
 } from 'vue'
+import ElIcon from '@element-plus/components/icon'
 import { elBreadcrumbKey } from '@element-plus/tokens'
 import { breadcrumbItemProps } from './breadcrumb-item'

@ -34,6 +35,10 @@ const COMPONENT_NAME = 'ElBreadcrumbItem'
 export default defineComponent({
  name: COMPONENT_NAME,

+  components: {
+    ElIcon,
+  },
+
  props: breadcrumbItemProps,

  setup(props) {
--- a/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-date-range.vue
@ -248,6 +248,7 @@ import {
  extractTimeFormat,
  TimePickPanel,
 } from '@element-plus/components/time-picker'
+import ElIcon from '@element-plus/components/icon'
 import { isValidDatePickType } from '@element-plus/utils/validators'
 import {
  DArrowLeft,
@ -269,6 +270,7 @@ export default defineComponent({
    DateTable,
    ElInput,
    ElButton,
+    ElIcon,
    DArrowLeft,
    ArrowLeft,
    DArrowRight,
--- a/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
+++ b/packages/components/date-picker/src/date-picker-com/panel-month-range.vue
@ -103,6 +103,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref, watch, inject } from 'vue'
 import dayjs from 'dayjs'
+import ElIcon from '@element-plus/components/icon'
 import { useLocaleInject } from '@element-plus/hooks'
 import { DArrowLeft, DArrowRight } from '@element-plus/icons'
 import MonthTable from './basic-month-table.vue'
@ -111,7 +112,7 @@ import type { PropType } from 'vue'
 import type { Dayjs } from 'dayjs'

 export default defineComponent({
-  components: { MonthTable, DArrowLeft, DArrowRight },
+  components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },

  props: {
    unlinkPanels: Boolean,
--- a/packages/components/dropdown/src/dropdown-item.vue
+++ b/packages/components/dropdown/src/dropdown-item.vue
@ -15,12 +15,14 @@
 </template>
 <script lang="ts">
 import { defineComponent, getCurrentInstance } from 'vue'
+import ElIcon from '@element-plus/components/icon'
 import { buildProps, definePropType } from '@element-plus/utils/props'
 import { useDropdown } from './useDropdown'
 import type { Component } from 'vue'

 export default defineComponent({
  name: 'ElDropdownItem',
+  components: { ElIcon },
  props: buildProps({
    command: {
      type: [Object, String, Number],
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@ -90,7 +90,7 @@
          </span>
        </span>
        <el-icon
-          v-if="validateState"
+          v-if="validateState && validateIcon"
          class="el-input__icon el-input__validateIcon"
        >
          <component :is="validateIcon" />
--- a/packages/components/page-header/src/page-header.vue
+++ b/packages/components/page-header/src/page-header.vue
@ -3,7 +3,7 @@
    <div class="el-page-header__left" @click="handleClick">
      <div v-if="icon || $slots.icon" class="el-page-header__icon">
        <slot name="icon">
-          <el-icon><component :is="icon" /></el-icon>
+          <el-icon v-if="icon"><component :is="icon" /></el-icon>
        </slot>
      </div>
      <div class="el-page-header__title">
--- a/packages/components/popconfirm/src/popconfirm.vue
+++ b/packages/components/popconfirm/src/popconfirm.vue
@ -10,7 +10,7 @@
    <div class="el-popconfirm">
      <div class="el-popconfirm__main">
        <el-icon
-          v-if="!hideIcon"
+          v-if="!hideIcon && icon"
          class="el-popconfirm__icon"
          :style="{ color: iconColor }"
        >
--- a/packages/components/result/src/index.vue
+++ b/packages/components/result/src/index.vue
@ -2,7 +2,11 @@
  <div class="el-result">
    <div class="el-result__icon">
      <slot name="icon">
-        <component :is="resultIcon.component" :class="resultIcon.class" />
+        <component
+          :is="resultIcon.component"
+          v-if="resultIcon.component"
+          :class="resultIcon.class"
+        />
      </slot>
    </div>
    <div v-if="title || $slots.title" class="el-result__title">
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@ -205,13 +205,14 @@
          </span>
          <span class="el-select-v2__suffix">
            <el-icon
+              v-if="iconComponent"
              v-show="!showClearBtn"
              :class="['el-select-v2__caret', 'el-input__icon', iconReverse]"
            >
-              <component :is="iconComponent" v-if="iconComponent" />
+              <component :is="iconComponent" />
            </el-icon>
            <el-icon
-              v-if="showClearBtn"
+              v-if="showClearBtn && clearIcon"
              class="el-select-v2__caret el-input__icon"
              @click.prevent.stop="handleClear"
            >
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@ -161,13 +161,14 @@
            </template>
            <template #suffix>
              <el-icon
+                v-if="iconComponent"
                v-show="!showClose"
                :class="['el-select__caret', 'el-input__icon', iconReverse]"
              >
                <component :is="iconComponent" />
              </el-icon>
              <el-icon
-                v-if="showClose"
+                v-if="showClose && clearIcon"
                class="el-select__caret el-input__icon"
                @click="handleClearClick"
              >
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@ -37,13 +37,17 @@
        @mouseleave="onMouseLeave"
      >
        <template #prefix>
-          <el-icon class="el-input__icon" @click="handleFocus">
+          <el-icon
+            v-if="triggerIcon"
+            class="el-input__icon"
+            @click="handleFocus"
+          >
            <component :is="triggerIcon"></component>
          </el-icon>
        </template>
        <template #suffix>
          <el-icon
-            v-if="showClose"
+            v-if="showClose && clearIcon"
            class="el-input__icon clear-icon"
            @click="onClearIconClick"
          >
@ -66,7 +70,11 @@
        @mouseleave="onMouseLeave"
        @keydown="handleKeydown"
      >
-        <el-icon class="el-input__icon el-range__icon" @click="handleFocus">
+        <el-icon
+          v-if="triggerIcon"
+          class="el-input__icon el-range__icon"
+          @click="handleFocus"
+        >
          <component :is="triggerIcon"></component>
        </el-icon>
        <input
@ -97,6 +105,7 @@
          @change="handleEndChange"
        />
        <el-icon
+          v-if="clearIcon"
          class="el-input__icon el-range__close-icon"
          :class="{
            'el-range__close-icon--hidden': !showClose,
--- a/packages/components/time-select/src/time-select.vue
+++ b/packages/components/time-select/src/time-select.vue
@ -22,7 +22,7 @@
      :disabled="item.disabled"
    />
    <template #prefix>
-      <el-icon class="el-input__prefix-icon">
+      <el-icon v-if="prefixIcon" class="el-input__prefix-icon">
        <component :is="prefixIcon" />
      </el-icon>
    </template>
--- a/packages/components/transfer/src/transfer-panel.vue
+++ b/packages/components/transfer/src/transfer-panel.vue
@ -24,7 +24,7 @@
        @mouseleave="inputHover = false"
      >
        <template #prefix>
-          <el-icon class="el-input__icon" @click="clearQuery">
+          <el-icon v-if="inputIcon" class="el-input__icon" @click="clearQuery">
            <component :is="inputIcon" />
          </el-icon>
        </template>
@ -62,6 +62,7 @@
 import { computed, defineComponent, reactive, toRefs } from 'vue'
 import { useLocaleInject } from '@element-plus/hooks'
 import { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'
+import ElIcon from '@element-plus/components/icon'
 import ElInput from '@element-plus/components/input'
 import { CircleClose, Search } from '@element-plus/icons'
 import { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'
@ -73,6 +74,7 @@ export default defineComponent({
    ElCheckboxGroup,
    ElCheckbox,
    ElInput,
+    ElIcon,
    OptionContent: ({ option }) => option,
  },

--- a/packages/components/tree-v2/src/tree-node.vue
+++ b/packages/components/tree-v2/src/tree-node.vue
@ -22,6 +22,7 @@
      :style="{ paddingLeft: `${(node.level - 1) * indent}px` }"
    >
      <el-icon
+        v-if="icon"
        :class="[
          {
            'is-leaf': node?.isLeaf,
--- a/packages/components/tree/src/tree-node.vue
+++ b/packages/components/tree/src/tree-node.vue
@ -30,6 +30,7 @@
      :style="{ paddingLeft: (node.level - 1) * tree.props.indent + 'px' }"
    >
      <el-icon
+        v-if="tree.props.icon || CaretRight"
        :class="[
          {
            'is-leaf': node.isLeaf,