Vue와 함께 순풍 사용

지난 몇 달 동안 Vue 생태계에서 시청Vue Formulate이 흡인력을 얻기 시작한 것은 정말 흥분된다.안타깝게도 우리는'순풍'세계의 공민 노력@apply이 그들이 좋아하는 스타일을 Vue의 내부 요소에 융합시키는 것을 보았다.2.4의 발표에 따라Tailwind(그리고 기타 클래스 기반 CSS 프레임워크)의 상황이 달라졌다고 기쁘게 발표합니다.
모바일 사용자: 본고의 설명은 코드sandboxbreaks on mobile에서 진행되었습니다.만약 네가 휴대전화에 있다면, 너는 아마도 데스크톱에서 다시 방문하고 싶을 것이다.

작업 일치

Tailwind에서'CSS가 아닌 HTML'을 작성하는 핵심 개념은 개발자의 체험을 개선하고 유지보수성을 높이며 개발자를 더욱 효율적으로 하기 위한 것이다.Tailwind는 클래스 이름을 둘러싼 의사결정 과정을 줄이고 양식과 그 사용을 긴밀하게 결합시키며 밑바닥 구조의 복잡성을 추상화함으로써 이를 실현한다.
이러한 목표는 웹 개발에서 가장 환영받지 못하는 또 다른 필수품인 폼을 어떻게 처리하는지와 거의 같다.Vue Formulate의 목표는 접근성, 검증, 오류 처리 등 소모되는 시간을 최소화함으로써 개발자에게 폼을 만드는 최고의 체험을 제공하는 것이다.
","에서 나는 Vue 생태계에서 어떻게 몇 가지 좋은 미리 존재하는 도구가 표의 각 방면을 처리하는지 묘사했다.그 중 일부는 핸들 검증이고, 일부는 핸들 폼 생성이며, 일부는 폼 귀속 - Vue Formulate는 모든 문제를 처리하기 위한 것이다.나는 그것들이 긴밀한 결합의 문제이기 때문에 긴밀한 결합의 해결 방안이 필요하다고 생각한다. 이것은Tailwind의 조형 방법과 다를 것이 없다.

약속을 어기는 것이 매우 중요하다

이런 결합은 표의 입력에 기존의 표기가 있다는 것을 의미한다.상자를 열면 바로 사용할 수 있는 DOM 구조는 시계 곡선 이외의 폼에 매우 적합하다. Vue Formulate는 범위가 넓은 슬롯과 (slot components"를 지원한다.하지만 위약이 중요하다.내 자신의 개발 생활에서, 나는 가능한 한 자주 '기본 설정 선호' 를 하는 것이 현명하다는 것을 알게 되었다. 필요할 때만 벗어날 수 있다는 것을. (내가 몇 번이나 누군가fish의 셸을 디버깅했는지 알려줄 수 없다. 왜냐하면 그들은 그것에 관한 아름다운 문장을 보았기 때문이다.)
Vue의 기본 설정에도 좋은 이유가 있습니다.사실 좋은 이유가 많다.

부가 가치 기능: 탭, 도움말 텍스트, 진도표 및 오류 메시지에 표시가 필요합니다.

액세스 가능성: 개발자가 도움말 텍스트를 얼마나 자주 연결aria-describedby하는지 기억합니까?

조형: 일부 요소는 현지에서 조형을 잘 할 수 없기 때문에 포장이나 장식이 필요하다.

일치성: 개발자는 프로젝트 폼을 얼마나 자주 작성합니까?Vue Formulate의 기본 태그 및 기능은 엄격한 테스트를 거쳤습니다.

개인적으로 가장 좋아하는 Vue Formulate 기능은 스타일과 사용자 정의 항목이 설정되면 이 폼을 작성하는 API가 항상 일치하는 것입니다.포장기 부품이 없고, 응용할 클래스가 발굴되지 않았음(음....form-control,.input,아니면.input-element🤪), 매번 역할 영역 슬롯을 정의할 필요가 없습니다.
그럼 단점은 뭘까요?지금까지는 내부 태그에 스타일을 추가하는 것이 지루했다. 특히Tailwind와 같은 실용 프로그램 프레임워크를 사용할 때였다.2.4의 업데이트가 어떻게 스타일링을 이전보다 간단하게 하는지 살펴보자.

당신의 클래스를 정의합니다(아이템!)

Vue 내부 태그의 각 DOM 요소는 이름이 지정됩니다.우리는 이 이름들을 element class keys 이라고 부른다. 사용자 정의 클래스를 사용할 정확한 요소를 확인하는 데 매우 유용하다.기본부터 시작합시다. 텍스트 입력입니다.기본 테마를 설치하지 않는 한 상자를 열 때 사용할 입력은 전혀 스타일이 없습니다.

<FormulateInput />

본 예에서 우리는 <input>원소 자체에 순풍마주를 첨가함으로써 이 원소의 흥미를 증가시키기를 바란다.<input>의 클래스 키는 input입니다.🙀. 현명한 묵인 - 뭐야!새로운 input-class prop을 정의해서 입력 요소에Tailwind 클래스를 추가합니다.

<FormulateInput
  input-class="w-full px-3 py-2 border border-gray-400 border-box rounded leading-none focus:border-green-500 outline-none"
/>

좋아요!이것은 시작이지만, 단지 이렇다면, Vue Formulate는 그다지 쓸모가 없을 것이다.조정할 때가 됐어.소량의 검증 논리를 가진 암호 리셋 폼을 만듭니다. 양식에 대해서는 위에서 정의한 input-class 도구를 사용합니다.

<FormulateForm v-model="values" @submit="submitted">
  <h2 class="text-2xl mb-2">Password reset</h2>
  <FormulateInput
    type="password"
    name="password"
    label="New password"
    help="Pick a new password, must have at least 1 number."
    validation="^required|min:5,length|matches:/[0-9]/"
    :validation-messages="{
      matches: 'Password must contain at least 1 number.'
    }"
    input-class="border border-gray-400 rounded px-3 py-2 leading-none focus:border-green-500 outline-none border-box w-full"
  />
  <FormulateInput
    type="password"
    name="password_confirm"
    label="Confirm password"
    help="Just re-type what you entered above"
    validation="^required|confirm"
    validation-name="Password confirmation"
    input-class="border border-gray-400 rounded px-3 py-2 leading-none focus:border-green-500 outline-none border-box w-full"
  />
  <FormulateInput type="submit"/>
</FormulateForm>

네, 분명히 더 많은 스타일링이 필요합니다.우리가 현재 처리하고 있는 DOM 요소는 텍스트 입력보다 훨씬 많다.다행히도 the documentation 우리의 원소 키에 대해 이런 원소들은 식별하기 쉽다.

그래서 우리도 outer, label, help와 error 키에 대한 스타일을 정의해야 할 것 같다.다시 한번 해보자.

<FormulateInput
  ...
  outer-class="mb-4"
  input-class="border border-gray-400 rounded px-3 py-2 leading-none focus:border-green-500 outline-none border-box w-full mb-1"
  label-class="font-medium text-sm"
  help-class="text-xs mb-1 text-gray-600"
  error-class="text-red-700 text-xs mb-1"
/>

좋아, 많이 좋아진 것 같아.비록 이것은 우리의 눈에 있어서 일종의 해탈이지만, 그것의 아름다움은 단지 천박할 뿐이다.이것들은 우리가 입력할 수 있도록 거친 교실 도구들이다. 우리는 그것을 복사하고 붙여야 한다.

클래스 정의(기본 클래스!)

그럼 추돌자는 어떻게 해야 하나요?더 높은 조립품으로 이 조립품들을 포장하는 거 맞죠!?아니, 제발 이러지 마.포장은 때때로 올바른 선택이지만 Vue Formulate는 분명히 FormulateInput 구성 요소의 반모드입니다.왜?이유는 많지만 몇 가지 예를 들자면

아이템을 예측할 수 없게 만든다.너는 그것들을 모두 한 번 전하는 것을 기억하니?새로 출시된 기능을 지원하기 위해 모든 HOC를 업데이트하시겠습니까?

양식 조합에는 더 이상 일관된 API가 없습니다.이제 사용자 정의 구성 요소를 이름 짓기, 기억하기, 실행해야 합니다.

generating forms에서는 모드 기본값을 사용할 수 없습니다.

그래서 우리는 이런 즉각적인 기술 채무를 피할 수 있다™ 대신 Vue의 글로벌 구성 시스템을 사용합니다.처음 Vue에 Vue를 등록하면 위의 모든 꼬리 바람 클래스를 정의할 수 있습니다.

import Vue from 'vue'
import VueFormulate from 'vue-formulate'

Vue.use(VueFormulate, {
  classes: {
    outer: 'mb-4',
    input: 'border border-gray-400 rounded px-3 py-2 leading-none focus:border-green-500 outline-none border-box w-full mb-1',
    label: 'font-medium text-sm',
    help: 'text-xs mb-1 text-gray-600',
    error: 'text-red-700 text-xs mb-1'
  }
})

이거 진짜 우리 입력 정리했어!

<FormulateInput
  type="password"
  name="password"
  label="New password"
  help="Pick a new password, must have at least 1 number."
  validation="^required|min:5,length|matches:/[0-9]/"
  :validation-messages="{
    matches: 'Password must contain at least 1 number.'
  }"
/>
<FormulateInput
  type="password"
  name="password_confirm"
  label="Confirm password"
  help="Just re-type what you entered above"
  validation="^required|confirm"
  validation-name="Password confirmation"
/>

CodeSandbox에서 작업 코드를 보았을 때, 우리는submit 단추에 있는 input-class 도구를 사용하고 있고, 도구 설정 종류를 사용하는 것이 조금도 격려받지 않는다는 것을 알 수 있을 것입니다.일반적인 경우, 모든 입력을 위한 기본 Tailwind 클래스를 미리 설정한 다음, 클래스 도구를 사용하여 선택적으로 덮어써야 합니다.
그러나 이 예에서, 우리가 비밀번호를 입력하는 데 필요한 스타일은 제출 단추와 완전히 다르다.이 점을 설명하기 위해서 우리는 classes.input 옵션을 문자열이 아닌 함수로 변경하여 상하문 정보에 따라 동적 응용 클래스를 허용할 수 있다.

import Vue from 'vue'
import VueFormulate from 'vue-formulate'

Vue.use(VueFormulate, {
  classes: {
    outer: 'mb-4',
    input (context) {
      switch (context.classification) {
        case 'button':
          return 'px-4 py-2 rounded bg-green-500 text-white hover:bg-green-600'
        default:
          return 'border border-gray-400 rounded px-3 py-2 leading-none focus:border-green-500 outline-none border-box w-full mb-1'
      }
    },
    label: 'font-medium text-sm',
    help: 'text-xs mb-1 text-gray-600',
    error: 'text-red-700 text-xs mb-1'
  }
})

제공된 객체에서 Vue Formulate의 분류를 사용하여 반환된 클래스를 변경할 수 있습니다.이러한 클래스 함수는 입력 (어떤 상태에서든) 생성된 클래스에 효율적이고 정확하며 수동적인 제어를 제공합니다.사용 방법에 대한 자세한 내용은 the documentation를 참조하십시오.
우리의 예시 폼은 이미 완전히 양식화되어 있으며, 입력에는 내연 클래스나 클래스 속성 성명이 전혀 포함되지 않습니다.어떤 추가 context 도 현재 기본 스타일이 있을 것이다.완전 성공!

읊다, 읊조리다

Vue의 새로운 과정 체계the documentation에는 사랑할 만한 점이 많다.모든 폼 입력의 클래스를 쉽게 리셋, 교체, 확장, 조작할 수 있습니다.클래스는 입력한 유형, 입력한 유효성 검사 상태 또는 값이 Adam Wathan과 같은지 여부에 따라 적용할 수 있습니다.가장 중요한 것은 프로젝트를 위해 실용 프로그램 종류를 찾으면 다른 프로젝트에서 다시 사용하거나 세계와 공유할 수 있도록 플러그인에 포장할 수 있다는 것이다.

마이크 내려주세요.

마지막 버스킹?위대하다'순풍'과 또 다른 Vue 팬들의 최애를 결합해보자. form generation.이 기능을 사용하면 폼을 데이터베이스나 CMS에 저장하고 간단한 모드와 코드 한 줄을 사용하여 폼을 동적으로 생성할 수 있습니다.첫 번째는 JavaScript 객체일 뿐입니다.

const schema = [
  {
    component: "h3",
    class: "text-2xl mb-4",
    children: "Order pizza"
  },
  {
    type: "select",
    label: "Pizza size",
    name: "size",
    placeholder: "Select a size",
    options: {
      small: "Small",
      large: "Large",
      extra_large: "Extra Large"
    },
    validation: "required"
  },
  {
    component: "div",
    class: "flex",
    children: [
      {
        name: "cheese",
        label: "Cheese options",
        type: "checkbox",
        validation: "min:1,length",
        options: {
          mozzarella: "Mozzarella",
          feta: "Feta",
          parmesan: "Parmesan",
          extra: "Extra cheese"
        },
        "outer-class": ["w-1/2"]
      },
      {
        name: "toppings",
        label: "Toppings",
        type: "checkbox",
        validation: "min:2,length",
        options: {
          salami: "Salami",
          prosciutto: "Prosciutto",
          avocado: "Avocado",
          onion: "Onion"
        },
        "outer-class": ["w-1/2"]
      }
    ]
  },
  {
    component: "div",
    class: "flex",
    children: [
      {
        type: "select",
        name: "country_code",
        label: "Code",
        value: "1",
        "outer-class": ["w-1/4 mr-4"],
        options: {
          "1": "+1",
          "49": "+49",
          "55": "+55"
        }
      },
      {
        type: "text",
        label: "Phone number",
        name: "phone",
        inputmode: "numeric",
        pattern: "[0-9]*",
        validation: "matches:/^[0-9-]+$/",
        "outer-class": ["flex-grow"],
        "validation-messages": {
          matches: "Phone number should only include numbers and dashes."
        }
      }
    ]
  },
  {
    type: "submit",
    label: "Order pizza"
  }
];

우리의 코드 한 줄:

<FormulateForm :schema="schema" />

다급하게!너의 양식이 준비되었다.
관심 있으면 계산해 주세요vueformulate.com.너는 트위터에서 나와 나의 공동 관리자를 주목할 수 있다.