是否可能在外部文件中提取vuetify规则将其重用

我正在使用vue vuetify Typescript来构建登录/寄存器表单。根据Vuetify的官方文档，可能会添加自定义规则。

我的问题是：是否可以在单独的文件中提取此规则作为类，功能等...可以从模板中进行参数以重复使用？

您可以将规则写入外部文件。这是一个在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>

相关内容

最新更新

热门标签：