怎样高效地利用第三方UI组件

Posted 2020-12-06 zhuhuoxingguang

缘由

现代开发中，Vue和React使用率已经算是很高了，那么这个过程中就会产生另外一个需求，UI组件库的使用，至少我了解的情况是：使用Vue开发的时候，一般我们都会搭配一个UI框架，Element-ui也好，iview也罢，终归是需要这么一个框架的。而ant-design在React开发过程中，出镜率也很高了。

以element-ui来说，我们应该怎样更高效的利用这些框架呢？

从框架本身来说，是提供给更多人更多项目来应用的，在某些场景下，他就必须提供更多的参数传递，以方便用户自定义某些属性。

然而我们在项目当中，有一点很清晰的是，可能一个组件，在这一整个项目中，所需要的参数基本上都是一致的，那么我们是否有必要在每一次使用组件过程中，传递一大堆非必要的参数呢？

那应该怎么用

以组件Input为例，查看官方文档其属性，有23个之多，比如说clearable，默认属性是false，然而如果我们在项目中，想提供这么个属性，我们是不是必须在每一个使用el-input的时候，都添加属性clearable="true"呢？

我是觉得很烦的。

所以这就需要我们在使用UI组件的之前，进行二次封装。

以前，我认为封装组件就是自定义的一些组件，从来没有想过对这些已经封装好的UI组件进行二次封装，真真是……

怎么封装？

直接上代码吧，还是Input。

<template>
  <el-input
    v-bind="$attrs"
    v-on="$listeners"
    :placeholder="placeholder"
    v-model="current"
    :clearable="clearable"
  >
    <template slot="prepend">
      <slot name="prepend"/>
    </template>
    <template slot="append">
      <slot name="append"/>
    </template>
  </el-input>
</template>

<script>
export default {
  name: "VInput",
  props: {
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: "请输入"
    }
  },
  data() {
    const { value = "" } = this.$attrs
    return {
      current: value || ""
    }
  },
  watch: {
    "$attrs.value"(val) {
      this.current = val
    }
  }

}
</script>

发现什么了么？ 我明面上仅仅提供了两个props，clearable和placeholder，clearable主要是为了初始化其默认值为true，而placeholder一方面是提供初始值，另一方面确实占位字符多数情况下并不一样。

这里需要注意的点在哪里？

我们仅仅提供了两个props，那如果在某些场景下有特殊需求，是不是我们还得在回来改一下参数？

然而，并不是。

我们在模板当中，提供了v-bind="$attrs"和v-on="$listeners",一个是绑定所有props，一个是监听所有事件，是不是并不麻烦。

后面我们就可以在项目当中，任何一个地方使用组件v-input，他都是默认可以clearable的，如果你想自定义更多的属性，当然也可以，也就是添加几个props罢了。

当然，如果你想修改监听的事件，也是可以的，比如input组件默认监听input事件，你可以通过修改

model: {
	prop: "value",
	event: "change"
}

变成监听input组件的change事件。

这个例子仅仅是修改了一个默认属性，有时候未必能看出来多简便。

我们可以自己尝试一下类似于Select，DatePicker之类的更复杂一点的组件，也许我们就会感受到到底能节省多少字符了。

动手尝试一下吧！