double-ui-vue/es/input/index.js

基于vue框架的ui库

import { defineComponent, inject, computed, ref, watch, createVNode, withDirectives, vModelDynamic } from "vue";
var style = "";
const Input = defineComponent({
  name: "DInput",
  props: {
    type: {
      type: String,
      default: "text"
    },
    maxlength: {
      type: Number,
      default: 20
    },
    placeholder: {
      type: String,
      default: "placeholder"
    },
    value: {
      type: String,
      default: ""
    },
    errText: {
      type: String,
      default: ""
    }
  },
  emits: ["update:value", "change"],
  setup(props, {
    emit
  }) {
    const name = inject("name");
    const formErrText = inject("formErrText");
    const errText = computed(() => formErrText.value || props.errText);
    const inputValue = ref(props.value);
    watch(() => props.value, (n, o) => {
      if (n === o)
        return;
      inputValue.value = n;
    });
    watch(() => inputValue.value, (n, o) => {
      if (n === o)
        return;
      if (formErrText == null ? void 0 : formErrText.value)
        formErrText.value = "";
      emit("update:value", n);
    });
    const change = (e) => {
      const {
        value
      } = e.target;
      emit("change", value);
    };
    return () => createVNode("span", {
      "class": "d-input-inline"
    }, [withDirectives(createVNode("input", {
      "class": ["d-input", errText.value && "d-input-err"],
      "name": name,
      "type": props.type,
      "placeholder": props.placeholder,
      "maxlength": props.maxlength,
      "onUpdate:modelValue": ($event) => inputValue.value = $event,
      "onChange": change
    }, null), [[vModelDynamic, inputValue.value]]), errText.value && createVNode("i", {
      "class": "d-input-err-text"
    }, [errText.value])]);
  }
});
export { Input as default };