Можно ли извлечь правила vuetify во внешний файл, чтобы использовать его повторно? - PullRequest
Новая
       8

Можно ли извлечь правила vuetify во внешний файл, чтобы использовать его повторно?

0 голосов
/ 28 февраля 2019

Я использую vue + vuetify + typcript для создания формы входа / регистрации.Согласно официальной документации от vuetify https://vuetifyjs.com/en/components/forms#creating-rules возможно добавить пользовательские правила.

Мой вопрос: возможно ли извлечь эти правила в отдельные файлы в виде классов, функций и т. Д., Которые можно параметризовать изшаблон для его повторного использования?

1 Ответ

0 голосов
/ 28 февраля 2019

Вы можете записать свои правила во внешний файл.Вот пример, где правила находятся в переменной js: 

Vue.use(Vuetify)

// or : import externalRules from '@/rules/MyRules.js'
var externalRules = [
  v => !!v || 'Name is required',
  v => (v && v.length <= 10) || 'Name must be less than 10 characters'
]

new Vue({
  el: "#app",
  data: {
    valid: true,
    name: '',
    nameRules: externalRules
  },
  methods: {
    validate() {
      if (this.$refs.form.validate()) {
        this.snackbar = true
      }
    },
    reset() {
      this.$refs.form.reset()
    },
    resetValidation() {
      this.$refs.form.resetValidation()
    }
  }
})
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>

  <div id="app">
    <v-app>
      <v-form ref="form" v-model="valid" lazy-validation>
        <v-text-field v-model="name" :counter="10" :rules="nameRules" label="Name" required></v-text-field>

        <v-btn :disabled="!valid" color="success" @click="validate">
          Validate
        </v-btn>

        <v-btn color="error" @click="reset">
          Reset Form
        </v-btn>

        <v-btn color="warning" @click="resetValidation">
          Reset Validation
        </v-btn>
      </v-form>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
</body>
</html>
...