VUE3组件库-input组件

举报
vike 发表于 2021/10/29 17:14:20 2021/10/29
【摘要】 VUE3组件库-input组件大家好,今天一起来学习vue3实现input组件,希望对你有帮助目录预览基本使用朴素模式文本域模式基本使用效果失焦状态下- 聚焦状态下- 新建Input.vue文件用来存放input代码 - div样式上加个定位,以防label跑出盒子 - 给input框加上对应样式 并用v-model绑定值 ``` <template...

VUE3组件库-input组件

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

  • 目录预览

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

    • 效果

    • 失焦状态下

image-20210824101158054.png

-   聚焦状态下

image-20210824101215497.png

-   新建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样式 较为简单 可自行编写
  • 朴素模式

    • 效果预览

    • 失焦状态

image-20210824101450957.png

-   聚焦状态

image-20210824101525812.png

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

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

-   根据line的布尔值去判断底部边框是否展示
  • 文本域模式

    • 效果预览

    • 失焦状态

image-20210824102045468.png

-   聚焦状态

image-20210824102117927.png

-   文本域传入一个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表单中的组件
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。