From b4c84cc00a2f904c077d0fe712d13317841d0cbd Mon Sep 17 00:00:00 2001
From: Caaalabash <1121062986@qq.com>
Date: Thu, 22 Oct 2020 14:02:28 +0800
Subject: [PATCH] fix(autocomplete): popper usage (#429)

* fix(autocomplete): dropdownWidth

* fix: el-popper usage

* test: change test file

* fix: remove storybook doc dir

* test: sleep time
---
 .../__tests__/autocomplete.spec.ts            |  62 ++++---
 packages/autocomplete/src/index.vue           | 175 ++++++++++--------
 packages/color-picker/doc/basic.vue           |  35 ----
 packages/color-picker/doc/index.stories.ts    |   5 -
 packages/element-plus/package.json            |   2 +
 packages/message/doc/basic.vue                |  42 -----
 packages/message/doc/centered.vue             |  17 --
 packages/message/doc/closeable.vue            |  41 ----
 packages/message/doc/html.vue                 |  20 --
 packages/message/doc/index.stories.ts         |  10 -
 packages/message/doc/manual_close.vue         |  40 ----
 packages/message/doc/types.vue                |  35 ----
 packages/popconfirm/doc/basic.vue             |  39 ----
 packages/popconfirm/doc/index.stories.ts      |   6 -
 packages/tree/doc/basic.vue                   |  94 ----------
 packages/tree/doc/basic10.vue                 | 104 -----------
 packages/tree/doc/basic2.vue                  |  60 ------
 packages/tree/doc/basic3.vue                  |  40 ----
 packages/tree/doc/basic4.vue                  |  59 ------
 packages/tree/doc/basic5.vue                  |  49 -----
 packages/tree/doc/basic6.vue                  |  92 ---------
 packages/tree/doc/basic7.vue                  | 127 -------------
 packages/tree/doc/basic8.vue                  |  78 --------
 packages/tree/doc/basic9.vue                  |  62 -------
 packages/tree/doc/index.stories.ts            |   6 -
 packages/tree/doc/index.vue                   |  77 --------
 packages/upload/doc/basic.vue                 |  42 -----
 packages/upload/doc/drop-to-upload.vue        |  17 --
 packages/upload/doc/index.stories.ts          |   7 -
 packages/upload/doc/manual.vue                |  32 ----
 30 files changed, 132 insertions(+), 1343 deletions(-)
 delete mode 100644 packages/color-picker/doc/basic.vue
 delete mode 100644 packages/color-picker/doc/index.stories.ts
 delete mode 100644 packages/message/doc/basic.vue
 delete mode 100644 packages/message/doc/centered.vue
 delete mode 100644 packages/message/doc/closeable.vue
 delete mode 100644 packages/message/doc/html.vue
 delete mode 100644 packages/message/doc/index.stories.ts
 delete mode 100644 packages/message/doc/manual_close.vue
 delete mode 100644 packages/message/doc/types.vue
 delete mode 100644 packages/popconfirm/doc/basic.vue
 delete mode 100644 packages/popconfirm/doc/index.stories.ts
 delete mode 100644 packages/tree/doc/basic.vue
 delete mode 100644 packages/tree/doc/basic10.vue
 delete mode 100644 packages/tree/doc/basic2.vue
 delete mode 100644 packages/tree/doc/basic3.vue
 delete mode 100644 packages/tree/doc/basic4.vue
 delete mode 100644 packages/tree/doc/basic5.vue
 delete mode 100644 packages/tree/doc/basic6.vue
 delete mode 100644 packages/tree/doc/basic7.vue
 delete mode 100644 packages/tree/doc/basic8.vue
 delete mode 100644 packages/tree/doc/basic9.vue
 delete mode 100644 packages/tree/doc/index.stories.ts
 delete mode 100644 packages/tree/doc/index.vue
 delete mode 100644 packages/upload/doc/basic.vue
 delete mode 100644 packages/upload/doc/drop-to-upload.vue
 delete mode 100644 packages/upload/doc/index.stories.ts
 delete mode 100644 packages/upload/doc/manual.vue

diff --git a/packages/autocomplete/__tests__/autocomplete.spec.ts b/packages/autocomplete/__tests__/autocomplete.spec.ts
index 7301c7b4dd..eb736e9f0e 100644
--- a/packages/autocomplete/__tests__/autocomplete.spec.ts
+++ b/packages/autocomplete/__tests__/autocomplete.spec.ts
@@ -50,19 +50,23 @@ describe('Autocomplete.vue', () => {
   })
 
   test('triggerOnFocus', async () => {
-    const wrapper = _mount()
+    const fetchSuggestions = jest.fn()
+    const wrapper = _mount({
+      debounce: 10,
+      fetchSuggestions,
+    })
 
     await wrapper.setProps({ triggerOnFocus: false })
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.findAll('li').length).toBe(0)
+    await sleep(30)
+    expect(fetchSuggestions).toHaveBeenCalledTimes(0)
 
     await wrapper.find('input').trigger('blur')
 
     await wrapper.setProps({ triggerOnFocus: true })
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.findAll('li').length).toBe(4)
+    await sleep(30)
+    expect(fetchSuggestions).toHaveBeenCalledTimes(1)
   })
 
   test('popperClass', async () => {
@@ -87,19 +91,14 @@ describe('Autocomplete.vue', () => {
   })
 
   test('popperAppendToBody', async () => {
-    const wrapper = _mount()
-
-    await wrapper.setProps({ popperAppendToBody: true })
-    expect(wrapper.find('.el-popper').exists()).toBe(false)
-
-    await wrapper.setProps({ popperAppendToBody: false })
-    expect(wrapper.find('.el-popper').exists()).toBe(true)
+    _mount({ popperAppendToBody: false })
+    expect(document.body.querySelector('.el-popper__mask')).toBeNull()
   })
 
   test('debounce / fetchSuggestions', async () => {
     const fetchSuggestions = jest.fn()
     const wrapper = _mount({
-      debounce: 500,
+      debounce: 10,
       fetchSuggestions,
     })
 
@@ -110,20 +109,23 @@ describe('Autocomplete.vue', () => {
     await wrapper.find('input').trigger('focus')
     await wrapper.find('input').trigger('blur')
     expect(fetchSuggestions).toHaveBeenCalledTimes(0)
-    await sleep(600)
+    await sleep(30)
     expect(fetchSuggestions).toHaveBeenCalledTimes(1)
     await wrapper.find('input').trigger('focus')
-    await sleep(600)
+    await sleep(30)
     expect(fetchSuggestions).toHaveBeenCalledTimes(2)
   })
 
   test('valueKey / modelValue', async () => {
     const wrapper = _mount()
+    const target = wrapper.findComponent({ ref: 'autocomplete' }).vm as any
+
+    await target.select({ value: 'Go', tag: 'go' })
+    expect(wrapper.vm.state).toBe('Go')
 
     await wrapper.setProps({ valueKey: 'tag' })
-    await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    await wrapper.findAll('li')[1].trigger('click')
+
+    await target.select({ value: 'Go', tag: 'go' })
     expect(wrapper.vm.state).toBe('go')
   })
 
@@ -131,36 +133,42 @@ describe('Autocomplete.vue', () => {
     const wrapper = _mount({
       hideLoading: false,
       fetchSuggestions: NOOP,
+      debounce: 10,
     })
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.find('.el-icon-loading').exists()).toBe(true)
+    await sleep(30)
+    expect(document.body.querySelector('.el-icon-loading')).toBeDefined()
     await wrapper.setProps({ hideLoading: true })
-    expect(wrapper.find('.el-icon-loading').exists()).toBe(false)
+    expect(document.body.querySelector('.el-icon-loading')).toBeNull()
   })
 
   test('selectWhenUnmatched', async () => {
     const wrapper = mount(Autocomplete, {
       props: {
         selectWhenUnmatched: true,
+        debounce: 10,
       },
     })
     wrapper.vm.highlightedIndex = 0
     wrapper.vm.handleKeyEnter()
-    await sleep(500)
+    await sleep(30)
     expect(wrapper.vm.highlightedIndex).toBe(-1)
   })
 
   test('highlightFirstItem', async () => {
-    const wrapper = _mount({ highlightFirstItem: false })
+    const wrapper = _mount({
+      highlightFirstItem: false,
+      debounce: 10,
+    })
 
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.find('.highlighted').exists()).toBe(false)
+    await sleep(30)
+    expect(document.body.querySelector('.highlighted')).toBeNull()
 
     await wrapper.setProps({ highlightFirstItem: true })
+
     await wrapper.find('input').trigger('focus')
-    await sleep(500)
-    expect(wrapper.find('.highlighted').text()).toBe('Java')
+    await sleep(30)
+    expect(document.body.querySelector('.highlighted')).toBeDefined()
   })
 })
diff --git a/packages/autocomplete/src/index.vue b/packages/autocomplete/src/index.vue
index 956f4adb2d..5e34dc9b00 100644
--- a/packages/autocomplete/src/index.vue
+++ b/packages/autocomplete/src/index.vue
@@ -1,90 +1,93 @@
 <template>
-  <div
-    v-clickoutside="close"
-    class="el-autocomplete"
-    role="combobox"
-    aria-haspopup="listbox"
-    :aria-expanded="suggestionVisible"
-    :aria-owns="id"
+  <el-popper
+    ref="popper"
+    v-model:visible="suggestionVisible"
+    :placement="placement"
+    :popper-class="popperClass"
+    :append-to-body="popperAppendToBody"
+    :offset="6"
+    pure
+    manual-mode
+    effect="light"
+    trigger="click"
   >
-    <el-input
-      ref="inputRef"
-      v-bind="$attrs"
-      :model-value="modelValue"
-      @input="handleInput"
-      @change="handleChange"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @clear="handleClear"
-      @keydown.up.prevent="highlight(highlightedIndex - 1)"
-      @keydown.down.prevent="highlight(highlightedIndex + 1)"
-      @keydown.enter.prevent="handleKeyEnter"
-      @keydown.tab.prevent="close"
-    >
-      <template v-if="$slots.prepend" #prepend>
-        <slot name="prepend"></slot>
-      </template>
-      <template v-if="$slots.append" #append>
-        <slot name="append"></slot>
-      </template>
-      <template v-if="$slots.prefix" #prefix>
-        <slot name="prefix"></slot>
-      </template>
-      <template v-if="$slots.suffix" #suffix>
-        <slot name="suffix"></slot>
-      </template>
-    </el-input>
-    <el-popper
-      class="el-autocomplete-suggestion"
-      :placement="placement"
-      :popper-class="popperClass"
-      :append-to-body="popperAppendToBody"
-      :visible="suggestionVisible"
-      :show-arrow="false"
-      pure
-      effect="light"
-      trigger="click"
-    >
-      <template #trigger>
-        <transition name="el-zoom-in-top">
-          <div
-            v-show="suggestionVisible"
-            ref="regionRef"
-            :class="{ 'is-loading': suggestionLoading }"
-            style="outline: none"
-            role="region"
+    <template #trigger>
+      <div
+        v-clickoutside="close"
+        class="el-autocomplete"
+        role="combobox"
+        aria-haspopup="listbox"
+        :aria-expanded="suggestionVisible"
+        :aria-owns="id"
+      >
+        <el-input
+          ref="inputRef"
+          v-bind="$attrs"
+          :model-value="modelValue"
+          @input="handleInput"
+          @change="handleChange"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @clear="handleClear"
+          @keydown.up.prevent="highlight(highlightedIndex - 1)"
+          @keydown.down.prevent="highlight(highlightedIndex + 1)"
+          @keydown.enter.prevent="handleKeyEnter"
+          @keydown.tab.prevent="close"
+        >
+          <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend"></slot>
+          </template>
+          <template v-if="$slots.append" #append>
+            <slot name="append"></slot>
+          </template>
+          <template v-if="$slots.prefix" #prefix>
+            <slot name="prefix"></slot>
+          </template>
+          <template v-if="$slots.suffix" #suffix>
+            <slot name="suffix"></slot>
+          </template>
+        </el-input>
+      </div>
+    </template>
+    <template #default>
+      <transition name="el-zoom-in-top" @after-leave="doDestroy">
+        <div
+          v-show="suggestionVisible"
+          ref="regionRef"
+          :class="['el-autocomplete-suggestion', suggestionLoading && 'is-loading']"
+          :style="{ width: dropdownWidth, outline: 'none' }"
+          role="region"
+        >
+          <el-scrollbar
+            tag="ul"
+            wrap-class="el-autocomplete-suggestion__wrap"
+            view-class="el-autocomplete-suggestion__list"
           >
-            <el-scrollbar
-              tag="ul"
-              wrap-class="el-autocomplete-suggestion__wrap"
-              view-class="el-autocomplete-suggestion__list"
-            >
-              <li v-if="suggestionLoading">
-                <i class="el-icon-loading"></i>
+            <li v-if="suggestionLoading">
+              <i class="el-icon-loading"></i>
+            </li>
+            <template v-else>
+              <li
+                v-for="(item, index) in suggestions"
+                :id="`${id}-item-${index}`"
+                :key="index"
+                :class="{'highlighted': highlightedIndex === index}"
+                role="option"
+                :aria-selected="highlightedIndex === index"
+                @click="select(item)"
+              >
+                <slot :item="item">{{ item[valueKey] }}</slot>
               </li>
-              <template v-else>
-                <li
-                  v-for="(item, index) in suggestions"
-                  :id="`${id}-item-${index}`"
-                  :key="index"
-                  :class="{'highlighted': highlightedIndex === index}"
-                  role="option"
-                  :aria-selected="highlightedIndex === index"
-                  @click="select(item)"
-                >
-                  <slot :item="item">{{ item[valueKey] }}</slot>
-                </li>
-              </template>
-            </el-scrollbar>
-          </div>
-        </transition>
-      </template>
-    </el-popper>
-  </div>
+            </template>
+          </el-scrollbar>
+        </div>
+      </transition>
+    </template>
+  </el-popper>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, onMounted, nextTick, PropType } from 'vue'
+import { defineComponent, ref, computed, onMounted, nextTick, PropType, watch } from 'vue'
 import { NOOP } from '@vue/shared'
 import debounce from 'lodash/debounce'
 import { ClickOutside } from '@element-plus/directives'
@@ -159,11 +162,13 @@ export default defineComponent({
   setup(props, ctx) {
     const suggestions = ref([])
     const highlightedIndex = ref(-1)
+    const dropdownWidth = ref('')
     const activated = ref(false)
     const suggestionDisabled = ref(false)
     const loading = ref(false)
     const inputRef = ref(null)
     const regionRef = ref(null)
+    const popper = ref(null)
 
     const id = computed(() => {
       return `el-autocomplete-${generateId()}`
@@ -176,6 +181,10 @@ export default defineComponent({
       return !props.hideLoading && loading.value
     })
 
+    watch(suggestionVisible, () => {
+      dropdownWidth.value = `${inputRef.value.$el.offsetWidth}px`
+    })
+
     onMounted(() => {
       inputRef.value.inputOrTextarea.setAttribute('role', 'textbox')
       inputRef.value.inputOrTextarea.setAttribute('aria-autocomplete', 'list')
@@ -288,15 +297,20 @@ export default defineComponent({
       highlightedIndex.value = index
       inputRef.value.inputOrTextarea.setAttribute('aria-activedescendant', `${id.value}-item-${highlightedIndex.value}`)
     }
+    const doDestroy = () => {
+      popper.value.doDestroy()
+    }
 
     return {
       suggestions,
       highlightedIndex,
+      dropdownWidth,
       activated,
       suggestionDisabled,
       loading,
       inputRef,
       regionRef,
+      popper,
 
       id,
       suggestionVisible,
@@ -313,6 +327,7 @@ export default defineComponent({
       focus,
       select,
       highlight,
+      doDestroy,
     }
   },
 })
diff --git a/packages/color-picker/doc/basic.vue b/packages/color-picker/doc/basic.vue
deleted file mode 100644
index 53bac19322..0000000000
--- a/packages/color-picker/doc/basic.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <el-color-picker v-model="color" :predefine="predefineColors" @active-change="actChange" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      color: '#20A0FF',
-      predefineColors: [
-        '#ff4500',
-        '#ff8c00',
-        '#ffd700',
-        '#90ee90',
-        '#00ced1',
-        '#1e90ff',
-        '#c71585',
-        'rgba(255, 69, 0, 0.68)',
-        'rgb(255, 120, 0)',
-        'hsv(51, 100, 98)',
-        'hsva(120, 40, 94, 0.5)',
-        'hsl(181, 100%, 37%)',
-        'hsla(209, 100%, 56%, 0.73)',
-      ],
-    }
-  },
-  methods: {
-    actChange(colorString) {
-      console.log(colorString)
-    },
-  },
-}
-</script>
diff --git a/packages/color-picker/doc/index.stories.ts b/packages/color-picker/doc/index.stories.ts
deleted file mode 100644
index 614e27bfe2..0000000000
--- a/packages/color-picker/doc/index.stories.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  title: 'Color-picker',
-}
-
-export { default as BasicUsage } from './basic.vue'
diff --git a/packages/element-plus/package.json b/packages/element-plus/package.json
index 95d88eaa49..b9d1360a5a 100644
--- a/packages/element-plus/package.json
+++ b/packages/element-plus/package.json
@@ -25,6 +25,8 @@
     "@element-plus/timeline": "^0.0.0",
     "@element-plus/divider": "^0.0.0",
     "@element-plus/icon": "^0.0.0",
+    "@element-plus/input": "^0.0.0",
+    "@element-plus/input-number": "^0.0.0",
     "@element-plus/layout": "^0.0.0",
     "@element-plus/link": "^0.0.0",
     "@element-plus/progress": "^0.0.0",
diff --git a/packages/message/doc/basic.vue b/packages/message/doc/basic.vue
deleted file mode 100644
index 8ced309a83..0000000000
--- a/packages/message/doc/basic.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="wrapper">
-    <el-button class="item" @click="onClick">Show Message</el-button>
-    <el-button class="item" @click="onClickVNode">VNode</el-button>
-    <el-button class="item" @click="onClickGlobal">Global Method</el-button>
-    <el-button class="item" @click="onClickClose">Close All</el-button>
-  </div>
-</template>
-
-<script lang="ts">
-import Message from '../src/message'
-import { createVNode } from 'vue'
-
-export default {
-  methods: {
-    onClick(): void {
-      Message({ message: 'This is a message' })
-    },
-    onClickVNode(): void {
-      const h = createVNode
-      const vnode = h('p', null, [
-        h('span', null, 'Message can be a '),
-        h('i', { style: 'color: teal' }, 'VNode'),
-      ])
-      Message({ message: vnode })
-    },
-    onClickGlobal(): void {
-      this.$message('Using global method')
-    },
-    onClickClose(): void {
-      this.$message.closeAll()
-    },
-  },
-}
-</script>
-
-<style scoped>
-.wrapper {
-  position: absolute;
-  bottom: 10px;
-}
-</style>
diff --git a/packages/message/doc/centered.vue b/packages/message/doc/centered.vue
deleted file mode 100644
index 29e47582f2..0000000000
--- a/packages/message/doc/centered.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <el-button class="item" @click="onClick">Centered text</el-button>
-  </div>
-</template>
-
-<script lang="ts">
-import Message from '../src/message'
-
-export default {
-  methods: {
-    onClick(): void {
-      Message({ message: 'Centered text', center: true })
-    },
-  },
-}
-</script>
diff --git a/packages/message/doc/closeable.vue b/packages/message/doc/closeable.vue
deleted file mode 100644
index 38a59a004a..0000000000
--- a/packages/message/doc/closeable.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="wrapper">
-    <el-button class="item" @click="onClickSuccess">success</el-button>
-    <el-button class="item" @click="onClickWarning">warning</el-button>
-    <el-button class="item" @click="onClickMessage">message</el-button>
-    <el-button class="item" @click="onClickError">error</el-button>
-  </div>
-</template>
-
-<script lang="ts">
-import Message from '../src/message'
-
-export default {
-  methods: {
-    onClickSuccess(): void {
-      Message({
-        message: 'Congrats, this is a success message',
-        type: 'success',
-        showClose: true,
-      })
-    },
-    onClickWarning(): void {
-      Message({
-        message: 'Warning, this is a warning message',
-        type: 'warning',
-        showClose: true,
-      })
-    },
-    onClickMessage(): void {
-      Message({ message: 'This is a message', showClose: true })
-    },
-    onClickError(): void {
-      Message({
-        message: 'Error, this is an error message',
-        type: 'error',
-        showClose: true,
-      })
-    },
-  },
-}
-</script>
diff --git a/packages/message/doc/html.vue b/packages/message/doc/html.vue
deleted file mode 100644
index e25913886d..0000000000
--- a/packages/message/doc/html.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div>
-    <el-button class="item" @click="onClick">Use HTML String</el-button>
-  </div>
-</template>
-
-<script lang="ts">
-import Message from '../src/message'
-
-export default {
-  methods: {
-    onClick(): void {
-      Message({
-        message: '<strong>This is <i>HTML</i><strong>',
-        dangerouslyUseHTMLString: true,
-      })
-    },
-  },
-}
-</script>
diff --git a/packages/message/doc/index.stories.ts b/packages/message/doc/index.stories.ts
deleted file mode 100644
index 1118344744..0000000000
--- a/packages/message/doc/index.stories.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export default {
-  title: 'Message',
-}
-
-export { default as BaseMessage } from './basic.vue'
-export { default as TypeMessages } from './types.vue'
-export { default as CloseableMessages } from './closeable.vue'
-export { default as CenteredMessages } from './centered.vue'
-export { default as HTMLMessages } from './html.vue'
-export { default as ManualClose } from './manual_close.vue'
diff --git a/packages/message/doc/manual_close.vue b/packages/message/doc/manual_close.vue
deleted file mode 100644
index 48dac8c903..0000000000
--- a/packages/message/doc/manual_close.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <el-button class="item" @click="handleOpen">Show Message</el-button>
-    <el-button class="item" @click="handleClose">Close Message</el-button>
-  </div>
-</template>
-
-<script lang="ts">
-import Message from '../src/message'
-import type { IMessageHandle } from '../src/types'
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const messageBanner = ref<IMessageHandle>(null)
-
-    // methods
-    const handleOpen = () => {
-      if (messageBanner.value) return
-
-      messageBanner.value = Message({
-        message: "This won't close automatically",
-        duration: 0,
-      })
-    }
-    const handleClose = () => {
-      if (messageBanner.value) {
-        messageBanner.value.close()
-        messageBanner.value = null
-      }
-    }
-
-    return {
-      messageBanner,
-      handleOpen,
-      handleClose,
-    }
-  },
-}
-</script>
diff --git a/packages/message/doc/types.vue b/packages/message/doc/types.vue
deleted file mode 100644
index 8454cbe163..0000000000
--- a/packages/message/doc/types.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="wrapper">
-    <el-button class="item" @click="onClickSuccess">success</el-button>
-    <el-button class="item" @click="onClickWarning">warning</el-button>
-    <el-button class="item" @click="onClickMessage">message</el-button>
-    <el-button class="item" @click="onClickError">error</el-button>
-  </div>
-</template>
-
-<script lang="ts">
-import Message from '../src/message'
-
-export default {
-  methods: {
-    onClickSuccess(): void {
-      Message({
-        message: 'Congrats, this is a success message',
-        type: 'success',
-      })
-    },
-    onClickWarning(): void {
-      Message({
-        message: 'Warning, this is a warning message',
-        type: 'warning',
-      })
-    },
-    onClickMessage(): void {
-      Message({ message: 'This is a message' })
-    },
-    onClickError(): void {
-      Message({ message: 'Error, this is an error message', type: 'error' })
-    },
-  },
-}
-</script>
diff --git a/packages/popconfirm/doc/basic.vue b/packages/popconfirm/doc/basic.vue
deleted file mode 100644
index 2f754a9abb..0000000000
--- a/packages/popconfirm/doc/basic.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-popconfirm
-    confirm-button-text="OK"
-    cancel-button-text="NO"
-    icon="el-icon-info"
-    icon-color="red"
-    title="Are you sure to delete this?？"
-    confirm-button-type="success"
-    cancel-button-type="info"
-    @confirm="onConfirm"
-    @cancel="onCancel"
-  >
-    <template #reference>
-      <el-button>delete</el-button>
-    </template>
-  </el-popconfirm>
-</template>
-
-<script>
-export default {
-  name: 'Basic',
-  setup(){
-    const onConfirm = () => {
-      console.log('Confirm button clicked')
-    }
-    const onCancel = () => {
-      console.log('Cancel button clicked')
-    }
-    return {
-      onConfirm,
-      onCancel,
-    }
-  },
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/packages/popconfirm/doc/index.stories.ts b/packages/popconfirm/doc/index.stories.ts
deleted file mode 100644
index 65b79affc9..0000000000
--- a/packages/popconfirm/doc/index.stories.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  title: 'Popconfirm',
-}
-
-export { default as BasicUsage } from './basic.vue'
-
diff --git a/packages/tree/doc/basic.vue b/packages/tree/doc/basic.vue
deleted file mode 100644
index 860a589040..0000000000
--- a/packages/tree/doc/basic.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div class="block">
-    <el-tree
-      ref="tree"
-      :data="data"
-      :props="defaultProps"
-      show-checkbox
-      node-key="id"
-      default-expand-all
-    />
-
-    <button @click="test">test</button>
-  </div>
-</template>
-
-<script lang='ts'>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data() {
-    return {
-      count: 1,
-      defaultExpandedKeys: [1, 3],
-      data: [{
-        id: 1,
-        label: '一级 1',
-        children: [{
-          id: 11,
-          label: '二级 1-1',
-          children: [{
-            id: 111,
-            label: '三级 1-1',
-          }],
-        }],
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 21,
-          label: '二级 2-1',
-        }, {
-          id: 22,
-          label: '二级 2-2',
-        }],
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 31,
-          label: '二级 3-1',
-        }, {
-          id: 32,
-          label: '二级 3-2',
-        }],
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-    }
-  },
-  methods: {
-    loadNode(node, resolve) {
-      if (node.level === 0) {
-        return resolve([{ label: 'region1', id: this.count++ }, { label: 'region2', id: this.count++ }])
-      }
-      if (node.level > 2) return resolve([])
-      setTimeout(() => {
-        resolve([{
-          label: 'zone' + this.count,
-          id: this.count++,
-        }, {
-          label: 'zone' + this.count,
-          id: this.count++,
-        }])
-      }, 50)
-    },
-    handleCheck(...a) {
-      console.log(...a)
-    },
-    test() {
-      console.log(111)
-      //   this.$refs.tree.updateKeyChildren(1, [{
-      //   id: 111,
-      //   label: '三级 1-1'
-      // }]);
-
-    },
-    handleNodeClick(data) {
-      console.log(data)
-    },
-  },
-})
-</script>
diff --git a/packages/tree/doc/basic10.vue b/packages/tree/doc/basic10.vue
deleted file mode 100644
index bc1ebeabbd..0000000000
--- a/packages/tree/doc/basic10.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <el-tree
-    :data="data"
-    node-key="id"
-    default-expand-all
-    draggable
-    :allow-drop="allowDrop"
-    :allow-drag="allowDrag"
-    @node-drag-start="handleDragStart"
-    @node-drag-enter="handleDragEnter"
-    @node-drag-leave="handleDragLeave"
-    @node-drag-over="handleDragOver"
-    @node-drag-end="handleDragEnd"
-    @node-drop="handleDrop"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      data: [{
-        id: 1,
-        label: '一级 1',
-        children: [{
-          id: 4,
-          label: '二级 1-1',
-          children: [{
-            id: 9,
-            label: '三级 1-1-1',
-          }, {
-            id: 10,
-            label: '三级 1-1-2',
-          }],
-        }],
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 5,
-          label: '二级 2-1',
-        }, {
-          id: 6,
-          label: '二级 2-2',
-        }],
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 7,
-          label: '二级 3-1',
-        }, {
-          id: 8,
-          label: '二级 3-2',
-          children: [{
-            id: 11,
-            label: '三级 3-2-1',
-          }, {
-            id: 12,
-            label: '三级 3-2-2',
-          }, {
-            id: 13,
-            label: '三级 3-2-3',
-          }],
-        }],
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-    }
-  },
-  methods: {
-    handleDragStart(node) {
-      console.log('drag start', node)
-    },
-    handleDragEnter(draggingNode, dropNode) {
-      console.log('tree drag enter: ', dropNode.label)
-    },
-    handleDragLeave(draggingNode, dropNode) {
-      console.log('tree drag leave: ', dropNode.label)
-    },
-    handleDragOver(draggingNode, dropNode) {
-      console.log('tree drag over: ', dropNode.label)
-    },
-    handleDragEnd(draggingNode, dropNode, dropType) {
-      console.log('tree drag end: ', dropNode && dropNode.label, dropType)
-    },
-    handleDrop(draggingNode, dropNode, dropType) {
-      console.log('tree drop: ', dropNode.label, dropType)
-    },
-    allowDrop(draggingNode, dropNode, type) {
-      if (dropNode.data.label === '二级 3-1') {
-        return type !== 'inner'
-      } else {
-        return true
-      }
-    },
-    allowDrag(draggingNode) {
-      return draggingNode.data.label.indexOf('三级 3-2-2') === -1
-    },
-  },
-}
-</script>
diff --git a/packages/tree/doc/basic2.vue b/packages/tree/doc/basic2.vue
deleted file mode 100644
index 370c90ab93..0000000000
--- a/packages/tree/doc/basic2.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <el-tree
-    :props="props"
-    :load="loadNode"
-    lazy
-    show-checkbox
-    @check-change="handleCheckChange"
-  />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      props: {
-        label: 'name',
-        children: 'zones',
-      },
-      count: 1,
-    }
-  },
-  methods: {
-    handleCheckChange(data, checked, indeterminate) {
-      console.log(data, checked, indeterminate)
-    },
-    handleNodeClick(data) {
-      console.log(data)
-    },
-    loadNode(node, resolve) {
-      if (node.level === 0) {
-        return resolve([{ name: 'region1' }, { name: 'region2' }])
-      }
-      if (node.level > 3) return resolve([])
-
-      var hasChild
-      if (node.data.name === 'region1') {
-        hasChild = true
-      } else if (node.data.name === 'region2') {
-        hasChild = false
-      } else {
-        hasChild = Math.random() > 0.5
-      }
-
-      setTimeout(() => {
-        var data
-        if (hasChild) {
-          data = [{
-            name: 'zone' + this.count++,
-          }, {
-            name: 'zone' + this.count++,
-          }]
-        } else {
-          data = []
-        }
-
-        resolve(data)
-      }, 500)
-    },
-  },
-}
-</script>
diff --git a/packages/tree/doc/basic3.vue b/packages/tree/doc/basic3.vue
deleted file mode 100644
index 274be4454a..0000000000
--- a/packages/tree/doc/basic3.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <el-tree
-    :props="props"
-    :load="loadNode"
-    lazy
-    show-checkbox
-  />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      props: {
-        label: 'name',
-        children: 'zones',
-        isLeaf: 'leaf',
-      },
-    }
-  },
-  methods: {
-    loadNode(node, resolve) {
-      if (node.level === 0) {
-        return resolve([{ name: 'region' }])
-      }
-      if (node.level > 1) return resolve([])
-
-      setTimeout(() => {
-        const data = [{
-          name: 'leaf',
-          leaf: true,
-        }, {
-          name: 'zone',
-        }]
-
-        resolve(data)
-      }, 500)
-    },
-  },
-}
-</script>
diff --git a/packages/tree/doc/basic4.vue b/packages/tree/doc/basic4.vue
deleted file mode 100644
index 983b52b5e5..0000000000
--- a/packages/tree/doc/basic4.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <el-tree
-    :data="data"
-    show-checkbox
-    node-key="id"
-    :default-expanded-keys="[2, 3]"
-    :default-checked-keys="[5]"
-    :props="defaultProps"
-    check-on-click-node
-    highlight-current
-  />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      data: [{
-        id: 1,
-        label: '一级 1',
-        children: [{
-          id: 4,
-          label: '二级 1-1',
-          children: [{
-            id: 9,
-            label: '三级 1-1-1',
-          }, {
-            id: 10,
-            label: '三级 1-1-2',
-          }],
-        }],
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 5,
-          label: '二级 2-1',
-        }, {
-          id: 6,
-          label: '二级 2-2',
-        }],
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 7,
-          label: '二级 3-1',
-        }, {
-          id: 8,
-          label: '二级 3-2',
-        }],
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-    }
-  },
-}
-</script>
diff --git a/packages/tree/doc/basic5.vue b/packages/tree/doc/basic5.vue
deleted file mode 100644
index 89d42c839b..0000000000
--- a/packages/tree/doc/basic5.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <el-tree
-    :data="data"
-    show-checkbox
-    node-key="id"
-    :default-expanded-keys="[2, 3]"
-    :default-checked-keys="[5]"
-  />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      data: [{
-        id: 1,
-        label: '一级 2',
-        children: [{
-          id: 3,
-          label: '二级 2-1',
-          children: [{
-            id: 4,
-            label: '三级 3-1-1',
-          }, {
-            id: 5,
-            label: '三级 3-1-2',
-            disabled: true,
-          }],
-        }, {
-          id: 2,
-          label: '二级 2-2',
-          disabled: true,
-          children: [{
-            id: 6,
-            label: '三级 3-2-1',
-          }, {
-            id: 7,
-            label: '三级 3-2-2',
-            disabled: true,
-          }],
-        }],
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-    }
-  },
-}
-</script>
diff --git a/packages/tree/doc/basic6.vue b/packages/tree/doc/basic6.vue
deleted file mode 100644
index cc6983eae0..0000000000
--- a/packages/tree/doc/basic6.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <el-tree
-    ref="tree"
-    :data="data"
-    show-checkbox
-    default-expand-all
-    node-key="id"
-    highlight-current
-    :props="defaultProps"
-    check-on-click-node
-  />
-
-  <div class="buttons">
-    <el-button @click="getCheckedNodes">通过 node 获取</el-button>
-    <el-button @click="getCheckedKeys">通过 key 获取</el-button>
-    <el-button @click="setCheckedNodes">通过 node 设置</el-button>
-    <el-button @click="setCheckedKeys">通过 key 设置</el-button>
-    <el-button @click="resetChecked">清空</el-button>
-  </div>
-</template>
-
-<script>
-export default {
-
-  data() {
-    return {
-      data: [{
-        id: 1,
-        label: '一级 1',
-        children: [{
-          id: 4,
-          label: '二级 1-1',
-          children: [{
-            id: 9,
-            label: '三级 1-1-1',
-          }, {
-            id: 10,
-            label: '三级 1-1-2',
-          }],
-        }],
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 5,
-          label: '二级 2-1',
-        }, {
-          id: 6,
-          label: '二级 2-2',
-        }],
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 7,
-          label: '二级 3-1',
-        }, {
-          id: 8,
-          label: '二级 3-2',
-        }],
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-    }
-  },
-  methods: {
-    getCheckedNodes() {
-      console.log(this.$refs.tree.getCheckedNodes())
-    },
-    getCheckedKeys() {
-      console.log(this.$refs.tree.getCheckedKeys())
-    },
-    setCheckedNodes() {
-      this.$refs.tree.setCheckedNodes([{
-        id: 5,
-        label: '二级 2-1',
-      }, {
-        id: 9,
-        label: '三级 1-1-1',
-      }])
-    },
-    setCheckedKeys() {
-      this.$refs.tree.setCheckedKeys([3])
-    },
-    resetChecked() {
-      this.$refs.tree.setCheckedKeys([])
-    },
-  },
-}
-</script>
diff --git a/packages/tree/doc/basic7.vue b/packages/tree/doc/basic7.vue
deleted file mode 100644
index 1f4fc3a7b2..0000000000
--- a/packages/tree/doc/basic7.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div class="custom-tree-container">
-    <div class="block">
-      <p>使用 render-content</p>
-      <el-tree
-        :data="data"
-        show-checkbox
-        node-key="id"
-        default-expand-all
-        :expand-on-click-node="false"
-        :render-content="renderContent"
-      />
-    </div>
-    <div class="block">
-      <p>使用 scoped slot</p>
-      <el-tree
-        :data="data"
-        show-checkbox
-        node-key="id"
-        default-expand-all
-        :expand-on-click-node="false"
-      >
-        <template #default="{ node, data: innerData }">
-          <span class="custom-tree-node">
-            <span>{{ node.label }}</span>
-            <span>
-              <el-button
-                type="text"
-                size="mini"
-                @click="append(innerData)"
-              >
-                Append
-              </el-button>
-              <el-button
-                type="text"
-                size="mini"
-                @click="remove(node, innerData)"
-              >
-                Delete
-              </el-button>
-            </span>
-          </span>
-        </template>
-      </el-tree>
-    </div>
-  </div>
-</template>
-<script>
-let id = 1000
-
-export default {
-  data() {
-    const data = [{
-      id: 1,
-      label: '一级 1',
-      children: [{
-        id: 4,
-        label: '二级 1-1',
-        children: [{
-          id: 9,
-          label: '三级 1-1-1',
-        }, {
-          id: 10,
-          label: '三级 1-1-2',
-        }],
-      }],
-    }, {
-      id: 2,
-      label: '一级 2',
-      children: [{
-        id: 5,
-        label: '二级 2-1',
-      }, {
-        id: 6,
-        label: '二级 2-2',
-      }],
-    }, {
-      id: 3,
-      label: '一级 3',
-      children: [{
-        id: 7,
-        label: '二级 3-1',
-      }, {
-        id: 8,
-        label: '二级 3-2',
-      }],
-    }]
-    return {
-      data: JSON.parse(JSON.stringify(data)),
-    }
-  },
-
-  methods: {
-    append(data) {
-      const newChild = { id: id++, label: 'testtest', children: [] }
-      if (!data.children) {
-        data.children = []
-      }
-      data.children.push(newChild)
-      this.data = [...this.data]
-    },
-
-    remove(node, data) {
-      const parent = node.parent
-      const children = parent.data.children || parent.data
-      const index = children.findIndex(d => d.id === data.id)
-      children.splice(index, 1)
-      this.data = [...this.data]
-    },
-
-    renderContent(h) {
-      return h('div', { class: 'custom-tree-node' }, ['haha'])
-    },
-  },
-}
-</script>
-
-<style>
-.custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-}
-</style>
diff --git a/packages/tree/doc/basic8.vue b/packages/tree/doc/basic8.vue
deleted file mode 100644
index 752121312f..0000000000
--- a/packages/tree/doc/basic8.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <input
-    v-model="filterText"
-    placeholder="输入关键字进行过滤"
-  >
-
-  <el-tree
-    ref="tree"
-    class="filter-tree"
-    :data="data"
-    :props="defaultProps"
-    default-expand-all
-    :filter-node-method="filterNode"
-  />
-</template>
-
-
-<script>
-export default {
-
-  data() {
-    return {
-      filterText: '',
-      data: [{
-        id: 1,
-        label: '一级 1',
-        children: [{
-          id: 4,
-          label: '二级 1-1',
-          children: [{
-            id: 9,
-            label: '三级 1-1-1',
-          }, {
-            id: 10,
-            label: '三级 1-1-2',
-          }],
-        }],
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 5,
-          label: '二级 2-1',
-        }, {
-          id: 6,
-          label: '二级 2-2',
-        }],
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 7,
-          label: '二级 3-1',
-        }, {
-          id: 8,
-          label: '二级 3-2',
-        }],
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-    }
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val)
-    },
-  },
-
-  methods: {
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-  },
-}
-</script>
diff --git a/packages/tree/doc/basic9.vue b/packages/tree/doc/basic9.vue
deleted file mode 100644
index 887d88df6f..0000000000
--- a/packages/tree/doc/basic9.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <el-tree
-    :data="data"
-    :props="defaultProps"
-    accordion
-    @node-click="handleNodeClick"
-  />
-</template>
-
-
-<script>
-export default {
-  data() {
-    return {
-      data: [{
-        label: '一级 1',
-        children: [{
-          label: '二级 1-1',
-          children: [{
-            label: '三级 1-1-1',
-          }],
-        }],
-      }, {
-        label: '一级 2',
-        children: [{
-          label: '二级 2-1',
-          children: [{
-            label: '三级 2-1-1',
-          }],
-        }, {
-          label: '二级 2-2',
-          children: [{
-            label: '三级 2-2-1',
-          }],
-        }],
-      }, {
-        label: '一级 3',
-        children: [{
-          label: '二级 3-1',
-          children: [{
-            label: '三级 3-1-1',
-          }],
-        }, {
-          label: '二级 3-2',
-          children: [{
-            label: '三级 3-2-1',
-          }],
-        }],
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label',
-      },
-    }
-  },
-  methods: {
-    handleNodeClick(data) {
-      console.log(data)
-    },
-  },
-}
-</script>
diff --git a/packages/tree/doc/index.stories.ts b/packages/tree/doc/index.stories.ts
deleted file mode 100644
index 8aa47eb28c..0000000000
--- a/packages/tree/doc/index.stories.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as BasicUsage } from './index.vue'
-
-export default {
-  title: 'Tree',
-}
-
diff --git a/packages/tree/doc/index.vue b/packages/tree/doc/index.vue
deleted file mode 100644
index 11da14c70d..0000000000
--- a/packages/tree/doc/index.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="item">
-    <div class="title">1</div>
-    <Basic />
-  </div>
-  <div class="item">
-    <div class="title">2</div>
-    <Basic2 />
-  </div>
-  <div class="item">
-    <div class="title">3</div>
-    <Basic3 />
-  </div>
-  <div class="item">
-    <div class="title">4</div>
-    <Basic4 />
-  </div>
-  <div class="item">
-    <div class="title">5</div>
-    <Basic5 />
-  </div>
-  <div class="item">
-    <div class="title">6</div>
-    <Basic6 />
-  </div>
-  <div class="item">
-    <div class="title">7</div>
-    <Basic7 />
-  </div>
-  <div class="item">
-    <div class="title">8</div>
-    <Basic8 />
-  </div>
-  <div class="item">
-    <div class="title">9</div>
-    <Basic9 />
-  </div>
-  <div class="item">
-    <div class="title">10</div>
-    <Basic10 />
-  </div>
-</template>
-
-<script>
-import Basic from './basic.vue'
-import Basic2 from './basic2.vue'
-import Basic3 from './basic3.vue'
-import Basic4 from './basic4.vue'
-import Basic5 from './basic5.vue'
-import Basic6 from './basic6.vue'
-import Basic7 from './basic7.vue'
-import Basic8 from './basic8.vue'
-import Basic9 from './basic9.vue'
-import Basic10 from './basic10.vue'
-export default {
-  components: {
-    Basic,
-    Basic2,
-    Basic3,
-    Basic4,
-    Basic5,
-    Basic6,
-    Basic7,
-    Basic8,
-    Basic9,
-    Basic10,
-  },
-}
-</script>
-
-<style>
-.item {
-    border: 2px solid #eee;
-    padding: 10px;
-    margin-bottom: 15px;
-}
-</style>
diff --git a/packages/upload/doc/basic.vue b/packages/upload/doc/basic.vue
deleted file mode 100644
index 170df2bcff..0000000000
--- a/packages/upload/doc/basic.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <el-upload
-    class="upload-demo"
-    action="https://jsonplaceholder.typicode.com/posts/"
-    :on-preview="handlePreview"
-    :on-remove="handleRemove"
-    :before-remove="beforeRemove"
-    :multiple="multiple"
-    :limit="3"
-    :on-exceed="handleExceed"
-    :file-list="fileList"
-  >
-    <el-button size="small" type="primary">Click to upload</el-button>
-    <template #tip>
-      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
-    </template>
-  </el-upload>
-</template>
-<script lang="ts">
-export default {
-  data() {
-    return {
-      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
-    }
-  },
-  methods: {
-    handleRemove(file, fileList) {
-      console.log(file, fileList)
-    },
-    handlePreview(file) {
-      console.log(file)
-    },
-    handleExceed(files, fileList) {
-      this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`)
-    },
-    beforeRemove(file, fileList) {
-      console.log(`Cancel the transfert of ${ file.name } ?`)
-      console.log(fileList)
-    },
-  },
-}
-</script>
diff --git a/packages/upload/doc/drop-to-upload.vue b/packages/upload/doc/drop-to-upload.vue
deleted file mode 100644
index 9bd13a097b..0000000000
--- a/packages/upload/doc/drop-to-upload.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <el-upload
-    class="upload-demo"
-    drag
-    action="https://jsonplaceholder.typicode.com/posts/"
-    :on-preview="handlePreview"
-    :on-remove="handleRemove"
-    :file-list="fileList"
-    multiple
-  >
-    <i class="el-icon-upload"></i>
-    <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
-    <template #tip>
-      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
-    </template>
-  </el-upload>
-</template>
diff --git a/packages/upload/doc/index.stories.ts b/packages/upload/doc/index.stories.ts
deleted file mode 100644
index 0c0748e0c9..0000000000
--- a/packages/upload/doc/index.stories.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  title: 'Upload',
-}
-
-export { default as BasicUsage } from './basic.vue'
-export { default as ManualUpload } from './manual.vue'
-export { default as DropToUpload } from './drop-to-upload.vue'
diff --git a/packages/upload/doc/manual.vue b/packages/upload/doc/manual.vue
deleted file mode 100644
index 62401e6664..0000000000
--- a/packages/upload/doc/manual.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <el-upload
-    ref="upload"
-    class="upload-demo"
-    action="https://jsonplaceholder.typicode.com/posts/"
-    :auto-upload="false"
-  >
-    <template #trigger>
-      <el-button size="small" type="primary">select file</el-button>
-    </template>
-    <el-button
-      style="margin-left: 10px;"
-      size="small"
-      type="success"
-      @click="submitUpload"
-    >
-      upload to server
-    </el-button>
-    <template #tip>
-      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
-    </template>
-  </el-upload>
-</template>
-<script>
-export default {
-  methods: {
-    submitUpload() {
-      this.$refs.upload.submit()
-    },
-  },
-}
-</script>