封装element-plus的组件暴露原生属性和方法

问题：

正常封装element-plus的组件例如el-select，如果不处理下，会导致在具体页面使用时候，传递el-select原生属性和方法，在封装的组件内获取不到。

解决方案：

在封装组件时候，使用v-bind="$attrs" v-on="proxyEvents"接收属性和方法

  <div>$attrs：{{ $attrs }}</div>
  <el-select v-bind="$attrs" v-on="proxyEvents" style="width: 100%">
      <el-option v-for="item in list" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" />
  </el-select>


	// 属性处理
	const attrs = useAttrs() // 获取绑定值就是attrs.modelValue
	
	// 事件代理
	const proxyEvents = computed(() => {
	  const { on } = attrs
	  return Object.keys(on || {}).reduce((acc: Record<string, any>, key) => {
	    acc[key] = (...args: any[]) => (on as any)[key](...args)
	    return acc
	  }, {})
	})

使用组件时候，就按照原生的el-select方式传递属性和方法即可
v-model：绑定值
v-model:otherVal ：其他绑定值

    <MyScrollSelect
      @change="change"
      @focus="focus2"
      v-model="form.id"
      v-model:otherVal="form.name"
      placeholder="滚动加载或搜索-单选"
      clearable
      filterable
    />