如何在 Laravel 和 Vue 中使用表单掩码

Posted 2023-03-15

【中文标题】如何在 Laravel 和 Vue 中使用表单掩码

【英文标题】：How to use form mask in Laravel with Vue

【发布时间】：2019-09-01 10:14:14

【问题描述】：

我正在尝试使用 https://vuejs-tips.github.io/vue-the-mask/ 在带有 Laravel 和 VueJS 的 Form 上使用掩码，我是 Vue 的新手，所以我寻找了一些使用掩码的方法，我最终找到了这个库。但是，我不知道如何使用该站点的示例，因为它没有显示完整的示例，只是代码的sn-ps。

显示第二个错误：

SyntaxError: import 声明只能出现在模块的顶层 inscriation: 62: 8 [Vue Warn]：编译模板出错：

[Vue 警告]：无法解析指令：掩码

（在 中找到）

我在blade.php中添加了代码

<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ script> 
<script>
     // Local Directive
         import mask from 'vue-the-mask'

         export default 
             directives: mask
         
</ script>

<template>
     <input type = "tel" v-mask = "'##/##/####'" />
</ template>

【问题讨论】：

原生JS不能导入，需要使用webpack或者laravel mix

【参考方案1】：

您不能在原生（浏览器）JS 中进行导入，您需要使用 laravel mix 或 webpack（或任何其他捆绑器）

最简单的解决方案：laravel-mix

npm install laravel-mix --save

然后打开（或者创建 webpack.mix.js 文件），输入这个（当然你需要指定你自己的路径）

var mix = require('laravel-mix');

mix.js('/resources/path_to_input_javascript', '/public/path_to_resulting_javascript')

在您的输入文件中创建简单的 vue 实例（并导入您的组件）

import Vue from 'vue';
import mask from 'path_to_component.vue'

var app = new Vue(
    el: "#root", //root element name
    components: 'x-mask': mask
);

并在您的组件中放置代码：

<script>
     // Local Directive
         import mask from 'vue-the-mask'

         export default 
             directives: mask
         
</script>

<template>
     <input type = "tel" v-mask = "'##/##/####'" />
</template>

只要你习惯了，它就不会那么复杂了。您应该阅读/观看有关捆绑程序的信息。