برنامه نویسی

فیلد ورودی قابل استفاده مجدد در vue.js

کامپوننت InputField قابل استفاده مجدد

کامپوننت InputField را ایجاد کنید

<template>
    <input
        :placeholder="placeholder"
        :type="type"
        :required="required"
        :value="value"
        @input="$emit('update:value', $event.target.value)">
</template>

<script>
export default {
  props:{
    type: {
      type: String,
      default: 'text'
    },
    value: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  name: "InputField"
}
</script>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با استفاده از InputField قابل استفاده مجدد

<template>
    <InputField
        type="password"
        :value="value"
        :required="true"
        @update:value="(newValue) => (valye = newValue)"/>
</template>

<script>
    import InputField from "../../components/resusable/InputField.vue"
    export default {
      components:{
        InputField
      },
      data(){
        return {
          value: ""
        }
    },
}
</script>
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا