我正在使用 vue + vuetify + typescript 构建登录/注册表单。 根据vuetify官方文档https://vuetifyjs.com/en/components/forms#creating-rules可以添加自定义规则。
我的问题是:是否可以将此规则提取到单独的文件中作为类、函数等...可以从模板进行参数化以重用它？
最佳答案
您可以将规则写入外部文件。以下是规则位于 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>关于vue.js - 是否可以在外部文件中提取 vuetify 规则以重用它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54924758/