VUE3组件库-input组件

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

VUE3组件库-input组件

大家好，今天一起来学习vue3实现input组件，希望对你有帮助

• 目录预览

  • 基本使用
  • 朴素模式
  • 文本域模式

• 基本使用

  • 效果

  • 失焦状态下

-   聚焦状态下

-   新建Input.vue文件用来存放input代码

    -   div样式上加个定位，以防label跑出盒子
    -   给input框加上对应样式 并用v-model绑定值

    ```
    <template>
      <div style="position: relative"> 
        <input
          class="simple-input"
          type="text"
          v-model="value"/>
          <label class="simple-input--label">{{ placeholder }}</label>
        </div>
        </template>
    ```

-   在App.vue文件中引入

    -   v-model绑定子组件的值

    ```
    <template>
      <simpleinput placeholder="请输入文本" v-model="values" />
    </template>
    <script setup>
    import simpleinput from "./components/Input.vue";
    import { ref } from "vue";
    const values = ref("");
    </script>
    ```

-   获取属性值

    -   在setup语法糖中，引入defineProps接收父级传进来的props

        -   接收placeholder，modelValue

        -   **注意**

            -   vue3中v-model传进来的值为modelValue

            ```
            import { defineProps, defineEmits, ref } from "vue";
            const props = defineProps({
              placeholder: String,
              modelValue: String,
            });
            ```

-   子组件属性与父级属性值同步

    -   在input框上定义@input方法，只要有输入就会触发

    -   引入defineEmits 并在@input方法内修改App.vue里的values

        ```
        const emits = defineEmits(["update:modelValue"]);
        let handleinput = () => {
          emits("update:modelValue", value.value);
        };
        ```

-   input框聚焦和失焦状态

    -   @focus 聚焦 将底部线变为蓝色 label文字变为蓝色并向上移加上动画效果
    -   @blur 失焦 将状态复原

-   Css样式 较为简单 可自行编写

• 朴素模式

  • 效果预览

  • 失焦状态

-   聚焦状态

-   朴素模式传入一个line属性

    ```
      <simpleinput placeholder="请输入文本" line v-model="values" />
    ```

-   根据line的布尔值去判断底部边框是否展示

• 文本域模式

  • 效果预览

  • 失焦状态

-   聚焦状态

-   文本域传入一个textarea属性

    ```
    <simpleinput placeholder="请输入文本" textarea v-model="values" />
    ```

-   在Input.vue里接收textarea属性 并用v-if进行判断 如果textarea存在则input框改为textarea

    ```
     <input
          v-if="!textarea"
          class="simple-input"
          :class="[
            show ? 'simple-input--focus' : '',
            line ? 'simple-input--line' : '',
          ]"
          type="text"
          v-model="value"
          @input="handleinput"
          @focus="handleFocus"
          @blur="handleBlur"
        />
    ​
        <textarea
          v-if="textarea"
          name=""
          id=""
          class="simple-input"
          :class="[
            textarea ? 'simple-textarea' : '',
            show ? 'simple-input--focus' : '',
          ]"
          rows="8"
          @input="handleinput"
          @focus="handleFocus"
          @blur="handleBlur"
        ></textarea>
    ```

-   文本框默认可伸缩 加上resize:none 可关闭伸缩

• 自定义指令 v-focus 自动聚焦

  • vue2写法 全局注册

    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })
    

  • vue3写法

    • inserted 替换成了mounted
    • 之后可在组件中使用v-focus指令

    const app = createApp(App)
    app.directive('focus', {
        mounted(el) {
            el.focus()
        }
    })
    app.mount('#app')
    

• 总结

  • 今日input组件完成
  • 下一篇我们继续讲解Form表单中的组件