# 二.数据输入（输入框）

前言 --> 输入框组件特点

下拉菜单组件应该由两部分组成：
它的主要功能包括：

# 1.目录结构

├── button
│   ├── button-group.vue
│   ├── button.vue
│   └── index.js

1
2
3
4

# 2.组件封装

源代码

<template>
  <input
    class="input"
    type="text"
    :value="currentValue"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>

<script>
import Emitter from "../../emitter.js";
export default {
  name: "VueInput",
  mixins: [Emitter],
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      currentValue: this.value,
    };
  },
  watch: {
    value(value) {
      this.currentValue = val;
    },
  },
  methods: {
    handleInput(event) {
      const value = event.target.value;
      this.currentValue = value;
      this.$emit("input", value);
      this.dispatch("VueFormItem", "on-form-change", value);
    },
    handleBlur() {
      this.dispatch("VueFormItem", "on-from-blur", this.currentValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.input{
  height: 20px;
  width: 100%;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 3.使用案例

刷新

全屏/自适应

总结

通过对前端组件的分析，需要重点关注组件中易变性对组件封装的影响，它会对组件的可复用性、可扩展性产生很大影响

← 二.数据输入（表单）二.数据输入（单/复选框） →