Как расширить vuejs Сценарий API композиции? - PullRequest
Новая
       36

Как расширить vuejs Сценарий API композиции?

1 голос
/ 01 февраля 2020

У меня есть несколько компонентов (textField, radioField, numberField, ...), которые разделяют часть logi c, например: 

//baseInputField.ts
import {createComponent} from "@vue/composition-api";
import {
  useInputFieldComposition,
  inputFieldProps
} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/inputField.composition";
import {ComponentPropsOptions} from "@vue/composition-api/dist/component/componentProps";

export default createComponent({
  props: inputFieldProps as ComponentPropsOptions,
  setup(props, context) {
    const {inputField, updateValue} = useInputFieldComposition(props, context);
    return {
      inputField, updateValue
    }
  }
});

в настоящее время я использую sr c в теге script для каждый компонент, который нуждается только в базовом компоненте, как показано ниже, и он работает (, но похоже на разделение объекта, а не нового, что делает выбранные параметры похожими на textField, чего я не хочу ): 

//numberField.vue
<script lang="ts" src="../scripts/inputFieldScriptTag.ts">
</script>

и для таких, как radioField. vue, который имеет немного больше кода (здесь просто " colorStateCheck ", как вы можете видеть в приведенном ниже коде), чем baseInputField.ts, я не мог правильно его расширить и использовать. 

//radioField.vue
  import {createComponent} from "@vue/composition-api";
  import {
    useInputFieldComposition,
    inputFieldProps
  } from "@/mixins/Helpers/FormGeneratorInputFieldHelper/inputField.composition";
  import {ComponentPropsOptions} from "@vue/composition-api/dist/component/componentProps";
  import {FormGeneratorInputFieldsLabelValuePairs} from "@/types";

  export default createComponent({
    name: "RadioField",
    props: inputFieldProps as ComponentPropsOptions,
    setup(props, context) {
      const {inputField, updateValue} = useInputFieldComposition(props, context);
      const colorStateCheck = (item: FormGeneratorInputFieldsLabelValuePairs) => {
        if (inputField.inputValue === item.value) {
          if (item.value === false) {
            return 'color:red';
          } else {
            return 'color:#84CE95';
          }
        }
        return ''
      };
      return {
        inputField, updateValue, colorStateCheck
      }

    }
  });

есть ли какой-нибудь правильный способ сделать это?

.....

(если вы хотите go этот путь от опции api к композиции API и исправить ваши проблемы, вы можете следовать этому запросу странные проблемы в Convert Vuejs Параметры Typescript для композиции Api , который я сделал на этом шаге здесь в этом запросе)

...