Question

我试图使用https://vuejs-tips.github.io/vue-the-mask/在Laravel和VueJS上的Form上使用mask，我是Vue的新手，所以我寻找了使用mask的方法，最终找到了这个lib。但是，我不知道如何使用该网站的示例，因为它没有显示完整的示例，仅显示代码片段。

显示第二个错误：

SyntaxError：导入声明只能出现在模块指令的顶层：62：8 [Vue警告]：编译模板时出错：

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

（位于）

我在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>

Answer 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>

一旦习惯了，它并不那么复杂。您应该阅读/观看有关捆扎机的信息。

如何在Laravel和Vue中使用表格蒙版

1 个答案: