fix: 🐛 修复升级vue到3.4.2.之后defineEmits位置不规范导致访问'emit'报错的问题

✅ Closes: #226

Author: xuqingkai

src/components/wd-privacy-popup/wd-privacy-popup.vue

@@ -48,12 +48,13 @@ interface Props {
   protocol?: string // 协议名称
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   title: '用户隐私保护提示',
   desc: '感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意',
   subDesc: '。当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。',
   protocol: '《用户隐私保护指引》'
 })
+const emit = defineEmits(['agree', 'disagree'])
 
 const showPopup = ref<boolean>(false) // 是否展示popup
 
@@ -64,8 +65,6 @@ const privacyHandler = (resolve: any) => {
   privacyResolves.value.add(resolve)
 }
 
-const emit = defineEmits(['agree', 'disagree'])
-
 onBeforeMount(() => {
   // 注册监听
   if ((wx as any).onNeedPrivacyAuthorization) {

src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue

@@ -76,6 +76,8 @@ import { actionSheetProps, type Panel } from './types'
 import { isArray } from '../common/util'
 
 const props = defineProps(actionSheetProps)
+const emit = defineEmits(['select', 'click-modal', 'cancel', 'closed', 'close', 'open', 'opened', 'update:modelValue'])
+
 const formatPanels = ref<Array<Panel> | Array<Panel[]>>([])
 
 const showPopup = ref<boolean>(false)
@@ -90,8 +92,6 @@ watch(
   { deep: true, immediate: true }
 )
 
-const emit = defineEmits(['select', 'click-modal', 'cancel', 'closed', 'close', 'open', 'opened', 'update:modelValue'])
-
 function isPanelArray() {
   return props.panels.length && !isArray(props.panels[0])
 }

src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue

@@ -71,11 +71,26 @@ const loadingIcon = (color = '#4D80F0', reverse = true) => {
   }"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`
 }
 const props = defineProps(buttonProps)
+const emit = defineEmits([
+  'click',
+  'getuserinfo',
+  'contact',
+  'getphonenumber',
+  'error',
+  'launchapp',
+  'opensetting',
+  'chooseavatar',
+  'agreeprivacyauthorization'
+])
 
 const hoverStartTime = ref<number>(20)
 const hoverStayTime = ref<number>(70)
 const loadingIconSvg = ref<string>('')
 
+const loadingStyle = computed(() => {
+  return `background-image: url(${loadingIconSvg.value});`
+})
+
 watch(
   () => props.loading,
   () => {
@@ -84,22 +99,6 @@ watch(
   { deep: true, immediate: true }
 )
 
-const loadingStyle = computed(() => {
-  return `background-image: url(${loadingIconSvg.value});`
-})
-
-const emit = defineEmits([
-  'click',
-  'getuserinfo',
-  'contact',
-  'getphonenumber',
-  'error',
-  'launchapp',
-  'opensetting',
-  'chooseavatar',
-  'agreeprivacyauthorization'
-])
-
 function handleClick(event: any) {
   if (!props.disabled && !props.loading) {
     emit('click', event.detail)

src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue

@@ -56,11 +56,14 @@ import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
 import { monthProps } from './types'
 
 const props = defineProps(monthProps)
+const emit = defineEmits(['change'])
 
 const { translate } = useTranslate('calendar-view')
 
 const days = ref<Array<CalendarDayItem>>([])
 
+const toast = useToast('wd-month')
+
 const itemClass = computed(() => {
   return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => {
     return getItemClass(monthType, value, type)
@@ -89,10 +92,6 @@ watch(
   }
 )
 
-const toast = useToast('wd-month')
-
-const emit = defineEmits(['change'])
-
 function setDays() {
   const dayList: Array<CalendarDayItem> = []
   const date = new Date(props.date)

src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue

@@ -69,6 +69,8 @@ import { useTranslate } from '../../composables/useTranslate'
 import type { CalendarItem } from '../types'
 
 const props = defineProps(monthPanelProps)
+const emit = defineEmits(['change', 'pickstart', 'pickend'])
+
 const { translate } = useTranslate('calendar-view')
 
 const scrollTop = ref<number>(0) // 滚动位置
@@ -78,6 +80,12 @@ const timeValue = ref<number[]>([]) // 当前选中的时分秒
 const timeType = ref<MonthPanelTimeType>('') // 当前时间类型，是开始还是结束
 const innerValue = ref<string | number | (number | null)[]>('') // 内部保存一个值，用于判断新老值，避免监听器触发
 
+const handleChange = debounce((value) => {
+  emit('change', {
+    value
+  })
+}, 50)
+
 // 时间picker的列数据
 const timeData = computed<Array<CalendarItem[]>>(() => {
   let timeColumns: Array<CalendarItem[]> = []
@@ -172,14 +180,6 @@ onMounted(() => {
   scrollIntoView()
 })
 
-const emit = defineEmits(['change', 'pickstart', 'pickend'])
-
-const handleChange = debounce((value) => {
-  emit('change', {
-    value
-  })
-}, 50)
-
 /**
  * 使当前日期或者选中日期滚动到可视区域
  */

src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue

@@ -58,7 +58,7 @@ import MonthPanel from './monthPanel/month-panel.vue'
 import { calendarViewProps, type CalendarViewExpose } from './types'
 
 const props = defineProps(calendarViewProps)
-
+const emit = defineEmits(['change', 'update:modelValue', 'pickstart', 'pickend'])
 const formatDefauleTime = ref<number[][]>([])
 
 const yearPanelRef = ref()
@@ -75,8 +75,6 @@ watch(
   }
 )
 
-const emit = defineEmits(['change', 'update:modelValue', 'pickstart', 'pickend'])
-
 /**
  * 使当前日期或者选中日期滚动到可视区域
  */

src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue

@@ -38,6 +38,8 @@ import { yearProps } from './types'
 import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
 
 const props = defineProps(yearProps)
+const emit = defineEmits(['change'])
+
 const toast = useToast('wd-year')
 const { translate } = useTranslate('calendar-view')
 
@@ -55,8 +57,6 @@ const yearTitle = computed(() => {
   }
 })
 
-const emit = defineEmits(['change'])
-
 watch(
   [() => props.type, () => props.date, () => props.value, () => props.minDate, () => props.maxDate, () => props.formatter],
   () => {

src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue

@@ -38,6 +38,7 @@ import Year from '../year/year.vue'
 import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
 const props = defineProps(yearPanelProps)
+const emit = defineEmits(['change'])
 
 const scrollTop = ref<number>(0) // 滚动位置
 const scrollIndex = ref<number>(0) // 当前显示的年份索引
@@ -63,8 +64,6 @@ const title = computed(() => {
   return formatYearTitle(years.value[scrollIndex.value].date)
 })
 
-const emit = defineEmits(['change'])
-
 onMounted(() => {
   scrollIntoView()
 })

src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue

@@ -200,6 +200,7 @@ const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarTy
 }
 
 const props = defineProps(calendarProps)
+const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm'])
 
 const pickerShow = ref<boolean>(false)
 const calendarValue = ref<null | number | number[]>(null)
@@ -211,6 +212,9 @@ const lastTab = ref<number>(0)
 const currentType = ref<CalendarType>('date')
 const lastCurrentType = ref<CalendarType>()
 const inited = ref<boolean>(false)
+const cell = useCell()
+const calendarView = ref()
+const calendarTabs = ref()
 
 const rangeLabel = computed(() => {
   const [start, end] = deepClone(isArray(calendarValue.value) ? calendarValue.value : [])
@@ -227,11 +231,6 @@ const showValue = computed(() => {
   }
 })
 
-const cell = useCell()
-
-const calendarView = ref()
-const calendarTabs = ref()
-
 watch(
   () => props.modelValue,
   (val, oldVal) => {
@@ -305,8 +304,6 @@ const range = computed(() => {
   }
 })
 
-const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm'])
-
 function scrollIntoView() {
   calendarView.value && calendarView.value && calendarView.value.$.exposed.scrollIntoView()
 }

src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue

@@ -65,6 +65,7 @@ import { FORM_KEY } from '../wd-form/types'
 import { cellProps } from './types'
 
 const props = defineProps(cellProps)
+const emit = defineEmits(['click'])
 
 const cell = useCell()
 
@@ -96,8 +97,6 @@ const isRequired = computed(() => {
   return props.required || props.rules.some((rule) => rule.required) || formRequired
 })
 
-const emit = defineEmits(['click'])
-
 /**
  * @description 点击cell的handle
  */