Fe-interview: [vue] 你有二次封装过ElementUI组件吗？

[haizhilin2013]

[vue] 你有二次封装过ElementUI组件吗？

[wenyejie]

有啊! 类似于分页, 表格, 毕竟每个项目的这些东西, 比如pageSize, size, 这些在每个项目基本都是统一的,
设置起来会有四五个参数prop是固定的, 我不可能每次使用的时候都设置一次

[forever-z-133]

popover + button 的组件，点击该按钮后还有个二次确认或选择的交互。
InfiniteScroll 封装个简单的带触底加载的列表。

[zhuss]

价格输入框
功能: v-mode="1000" 单位分;输入框显示 10.00;手动输入100显示100.00;

[liuxsen]

价格输入框
功能: v-mode="1000" 单位分;输入框显示 10.00;手动输入100显示100.00;

你怎么封装的？

[zhuss]

价格输入框
功能: v-mode="1000" 单位分;输入框显示 10.00;手动输入100显示100.00;

你怎么封装的？

其实是简单的做了下处理，大概如下

<template>
  <el-input
    placeholder="价格"
    v-model="current"
    :disabled="disabled"
    :maxlength="8"
    @change="change"
  ></el-input>
</template>
<script>
export default {
  props: {
    value: Number,
    disabled: Boolean
  },
  data() {
    return {
      current: ""
    };
  },
  watch: {
    value(val) {
      if (val > 0) {
        this.current = (val / 100).toFixed(2);
      } else {
        this.current = "";
      }
    }
  },
  created() {
    if (this.value > 0) {
      this.current = (this.value / 100).toFixed(2);
    } else {
      this.current = "";
    }
  },
  methods: {
    change() {
      let value = this.current * 100 || 0;
      this.current = (value / 100).toFixed(2);
      this.$emit("input", value.toFixed(0) * 1);
    }
  }
};
</script>

[liuxsen]

嗯~ 这样有点问题，比如我输入 1 输入框的值就变成了 1.00 但是我想输入 10 ，导致我输入1之后，立马变成了 1.00

加一个函数防抖，感觉会好点😄

fnChnageValue() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        let value = this.current * 100 || 0
        this.current = (value / 100).toFixed(2)
        this.$emit('input', value.toFixed(0) * 1)
      }, 1000)
    }