在Inertia.js中使用Vue自定义指令的实现方法求助

当然可以实现，你之前的问题是错误地将自定义指令配置在了createInertiaApp的参数里——这个函数的配置项并不包含directive字段。正确的做法是在setup函数中创建Vue实例的链式调用里，直接调用directive方法来注册自定义指令。

修改后的初始化代码如下：

const app = createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            // 在这里注册自定义指令
            .directive('uppercase', {
                updated(el){
                    el.value = el.value.toUpperCase()
                }
            })
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

如果你的自定义指令数量较多，建议将它们抽离成单独的模块，比如创建一个directives.js文件：

// directives.js
export function registerDirectives(app) {
    app.directive('uppercase', {
        updated(el){
            el.value = el.value.toUpperCase()
        }
    });
    // 可以在这里添加更多自定义指令
    app.directive('lowercase', {
        updated(el){
            el.value = el.value.toLowerCase()
        }
    });
}

然后在app.js中引入并使用：

import { registerDirectives } from './directives';

const app = createInertiaApp({
    // ...其他配置
    setup({ el, App, props, plugin }) {
        const vueApp = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy);
        
        // 注册所有自定义指令
        registerDirectives(vueApp);
        
        return vueApp.mount(el);
    },
    // ...其他配置
});

这样既保持了代码的整洁性，也方便后续维护和扩展自定义指令。

内容的提问来源于stack exchange，提问作者JohnRugen