fix: fixing code in accordance with the latest vue eslint rules

packages/alert/Alert.vue

@@ -82,7 +82,7 @@ export default {
   },
   emits: ['close'],
   setup(props, { emit, slots }) {
-    const { title, description, type } = toRefs(props)
+    const { description, type } = toRefs(props)
 
     const visible = ref(true)
     const close = () => {
@@ -107,9 +107,6 @@ export default {
     })
 
     return {
-      title,
-      description,
-      type,
       visible,
       typeClass,
       iconClass,

packages/autocomplete/src/autocomplete-suggestions.vue

@@ -56,7 +56,7 @@ export default {
   },
 
   updated() {
-    this.$nextTick((_) => {
+    this.$nextTick(() => {
       this.popperJS && this.updatePopper()
     })
   },
@@ -74,6 +74,8 @@ export default {
   },
 
   created() {
+    // TODO $on 已经废弃了
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('visible', (val, inputWidth) => {
       this.dropdownWidth = inputWidth + 'px'
       this.showPopper = val

packages/autocomplete/src/autocomplete.vue

@@ -15,21 +15,21 @@
       @focus="handleFocus"
       @blur="handleBlur"
       @clear="handleClear"
-      @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
-      @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
-      @keydown.enter.native="handleKeyEnter"
-      @keydown.native.tab="close"
+      @keydown.up.prevent="highlight(highlightedIndex - 1)"
+      @keydown.down.prevent="highlight(highlightedIndex + 1)"
+      @keydown.enter="handleKeyEnter"
+      @keydown.tab="close"
     >
-      <template slot="prepend" v-if="$slots.prepend">
+      <template v-slot:prepend v-if="$slots.prepend">
         <slot name="prepend"></slot>
       </template>
-      <template slot="append" v-if="$slots.append">
+      <template v-slot:append v-if="$slots.append">
         <slot name="append"></slot>
       </template>
-      <template slot="prefix" v-if="$slots.prefix">
+      <template v-slot:prefix v-if="$slots.prefix">
         <slot name="prefix"></slot>
       </template>
-      <template slot="suffix" v-if="$slots.suffix">
+      <template v-slot:suffix v-if="$slots.suffix">
         <slot name="suffix"></slot>
       </template>
     </el-input>
@@ -217,7 +217,7 @@ export default {
       this.activated = false
       this.$emit('clear')
     },
-    close(e) {
+    close() {
       this.activated = false
     },
     handleKeyEnter(e) {
@@ -230,7 +230,7 @@ export default {
         this.select(this.suggestions[this.highlightedIndex])
       } else if (this.selectWhenUnmatched) {
         this.$emit('select', { value: this.value })
-        this.$nextTick((_) => {
+        this.$nextTick(() => {
           this.suggestions = []
           this.highlightedIndex = -1
         })
@@ -239,7 +239,7 @@ export default {
     select(item) {
       this.$emit('input', item[this.valueKey])
       this.$emit('select', item)
-      this.$nextTick((_) => {
+      this.$nextTick(() => {
         this.suggestions = []
         this.highlightedIndex = -1
       })
@@ -288,6 +288,8 @@ export default {
   },
   mounted() {
     this.debouncedGetData = debounce(this.debounce, this.getData)
+    // TODO $on 已经废弃
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('item-click', (item) => {
       this.select(item)
     })
@@ -300,7 +302,7 @@ export default {
       `${this.id}-item-${this.highlightedIndex}`
     )
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$refs.suggestions.$destroy()
   }
 }

packages/breadcrumb/BreadcrumbItem.vue

@@ -26,23 +26,22 @@ export default {
     replace: Boolean
   },
   setup(props) {
-    const { to, replace } = toRefs(props)
+    const { replace } = toRefs(props)
     const separator = inject('separator')
     const separatorClass = inject('separatorClass')
     const link = ref(null)
     const { ctx } = getCurrentInstance()
     onMounted(() => {
       link.value.setAttribute('role', 'link')
       link.value.addEventListener('click', () => {
-        if (!to || !ctx.$router) return
-        replace ? ctx.$router.replace(to) : ctx.$router.push(to)
+        if (!props.to || !ctx.$router) return
+        replace ? ctx.$router.replace(props.to) : ctx.$router.push(props.to)
       })
     })
     return {
       separator,
       separatorClass,
-      link,
-      to
+      link
     }
   }
 }

packages/calendar/Calendar.vue

@@ -101,7 +101,7 @@ export default {
     }
   },
   emits: ['input', 'update:modelValue'],
-  setup(props, { attrs, emit, slots }) {
+  setup(props, { emit }) {
     const instance = getCurrentInstance()
 
     provide('elCalendar', instance)
@@ -167,8 +167,8 @@ export default {
         if (realSelectedDay.value) {
           const d = state.selectedDay.split('-')
           return new Date(d[0], d[1] - 1, d[2])
-        } else if (validatedRange.length) {
-          return validatedRange[0][0]
+        } else if (validatedRange.value.length) {
+          return validatedRange.value[0][0]
         }
         return state.now
       } else {

packages/calendar/DateTable.vue

@@ -26,7 +26,7 @@ export default {
     firstDayOfWeek: Number
   },
 
-  setup(props, { attrs, emit, slots }) {
+  setup(props, { emit }) {
     const { selectedDay, date, hideHeader, firstDayOfWeek } = toRefs(props)
     const WEEK_DAYS = ref(getI18nSettings().dayNames)
 

packages/carousel/Carousel.vue

@@ -245,7 +245,6 @@ export default {
       items,
       activeIndex,
       hover,
-      loop,
       arrowDisplay,
       handleButtonEnter,
       handleButtonLeave,
@@ -383,7 +382,7 @@ const useIndicator = (props, initData) => {
       'el-carousel__indicators',
       'el-carousel__indicators--' + props.direction
     ]
-    if (hasLabel) {
+    if (hasLabel.value) {
       classes.push('el-carousel__indicators--labels')
     }
     if (props.indicatorPosition === 'outside' || props.type === 'card') {

packages/cascader-panel/src/cascader-menu.vue

@@ -77,14 +77,14 @@ export default {
       hoverZone.innerHTML = ''
     },
 
-    renderEmptyText(h) {
+    renderEmptyText() {
       return (
         <div class="el-cascader-menu__empty-text">
           {this.t('el.cascader.noData')}
         </div>
       )
     },
-    renderNodeList(h) {
+    renderNodeList() {
       const { menuId } = this
       const { isHoverMenu } = this.panel
       const events = { on: {} }

packages/cascader-panel/src/cascader-node.vue

@@ -119,7 +119,7 @@ export default {
       return null
     },
 
-    renderCheckbox(h) {
+    renderCheckbox() {
       const { node, config, isDisabled } = this
       const events = {
         on: { change: this.handleMultiCheckChange },
@@ -141,7 +141,7 @@ export default {
       )
     },
 
-    renderRadio(h) {
+    renderRadio() {
       let { checkedValue, value, isDisabled } = this
 
       // to keep same reference if value cause radio's checked state is calculated by reference comparision;
@@ -163,19 +163,19 @@ export default {
       )
     },
 
-    renderCheckIcon(h) {
+    renderCheckIcon() {
       return <i class="el-icon-check el-cascader-node__prefix"></i>
     },
 
-    renderLoadingIcon(h) {
+    renderLoadingIcon() {
       return <i class="el-icon-loading el-cascader-node__postfix"></i>
     },
 
-    renderExpandIcon(h) {
+    renderExpandIcon() {
       return <i class="el-icon-arrow-right el-cascader-node__postfix"></i>
     },
 
-    renderContent(h) {
+    renderContent() {
       const { panel, node } = this
       const render = panel.renderLabelFn
       const vnode = render ? render({ node, data: node.data }) : null

packages/cascader-panel/src/cascader-panel.vue

@@ -57,7 +57,7 @@ const getSibling = (el, distance) => {
   return null
 }
 
-const getMenuIndex = (el, distance) => {
+const getMenuIndex = (el) => {
   if (!el) return
   const pieces = el.id.split('-')
   return Number(pieces[pieces.length - 2])
@@ -132,7 +132,7 @@ export default {
       return this.config.expandTrigger === 'hover'
     },
     renderLabelFn() {
-      return this.renderLabel || this.$scopedSlots.default
+      return this.renderLabel || this.$slots.default
     }
   },
 
@@ -230,15 +230,17 @@ export default {
       const { target, keyCode } = e
 
       switch (keyCode) {
-        case KeyCode.up:
+        case KeyCode.up: {
           const prev = getSibling(target, -1)
           focusNode(prev)
           break
-        case KeyCode.down:
+        }
+        case KeyCode.down: {
           const next = getSibling(target, 1)
           focusNode(next)
           break
-        case KeyCode.left:
+        }
+        case KeyCode.left: {
           const preMenu = this.$refs.menu[getMenuIndex(target) - 1]
           if (preMenu) {
             const expandedNode = preMenu.$el.querySelector(
@@ -247,7 +249,8 @@ export default {
             focusNode(expandedNode)
           }
           break
-        case KeyCode.right:
+        }
+        case KeyCode.right: {
           const nextMenu = this.$refs.menu[getMenuIndex(target) + 1]
           if (nextMenu) {
             const firstNode = nextMenu.$el.querySelector(
@@ -256,6 +259,7 @@ export default {
             focusNode(firstNode)
           }
           break
+        }
         case KeyCode.enter:
           checkNode(target)
           break

packages/cascader/src/cascader.vue

@@ -50,7 +50,7 @@
           :options="options"
           :props="config"
           :border="false"
-          :render-label="$scopedSlots.default"
+          :render-label="$slots.default"
           @expand-change="handleExpandChange"
           @close="toggleDropDownVisible(false)"
         ></el-cascader-panel>
@@ -319,7 +319,7 @@ export default {
         this.$nextTick(this.updateStyle)
       }
     },
-    filtering(val) {
+    filtering() {
       this.$nextTick(this.updatePopper)
     }
   },
@@ -356,7 +356,7 @@ export default {
     addResizeListener(this.$el, this.updateStyle)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     removeResizeListener(this.$el, this.updateStyle)
   },
 
@@ -559,14 +559,16 @@ export default {
         case KeyCode.enter:
           target.click()
           break
-        case KeyCode.up:
+        case KeyCode.up: {
           const prev = target.previousElementSibling
           prev && prev.focus()
           break
-        case KeyCode.down:
+        }
+        case KeyCode.down: {
           const next = target.nextElementSibling
           next && next.focus()
           break
+        }
         case KeyCode.esc:
         case KeyCode.tab:
           this.toggleDropDownVisible(false)

packages/checkbox-button/CheckboxButton.vue

@@ -69,7 +69,7 @@ export default {
 
   emits: ['update:modelValue', 'change'],
 
-  setup(props) {
+  setup() {
     const state = reactive({
       focus: false
     })

packages/checkbox/Checkbox.vue

@@ -78,7 +78,7 @@ export default {
 
   emits: ['update:modelValue', 'change'],
 
-  setup(props, ctx) {
+  setup() {
     const state = reactive({
       focus: false
     })

packages/col/Col.vue

@@ -21,7 +21,7 @@ export default {
     lg: [Number, Object],
     xl: [Number, Object]
   },
-  setup(props, { attrs, emit, slots }) {
+  setup(props, { slots }) {
     const { tag } = toRefs(props)
     const gutter = computed(() => {
       let { parent } = getCurrentInstance()

packages/collapse/src/collapse.vue

@@ -68,6 +68,8 @@ export default {
   },
 
   created() {
+    // TODO $on 已经废弃
+    // eslint-disable-next-line vue/no-deprecated-events-api
     this.$on('item-click', this.handleItemClick)
   }
 }