使用自定义vue指令与惯性js

67up9zun  于 2023-03-24  发布在  Vue.js
关注(0)|答案(2)|浏览(205)

我正在使用Inertia.js和Vue 3创建一个laravel应用。我想添加一个我在另一个项目中创建的自定义vue指令(没有使用Inertia)。为此,我在我的app.js中添加了以下内容:

app.directive('uppercase',{
    updated(el){
        el.value = el.value.toUpperCase()
    }
});

然而,由于应用程序是这样初始化的,我不能添加相同的。

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)
            .mount(el);
    },
    directive:{
        uppercase:{
            updated(el){
                el.value = el.value.toUpperCase()
            } 
        }
    },
    progress: {
        color: '#4B5563',
    },
});

有可能吗?谢谢。

lsmd5eda

lsmd5eda1#

您可以按照以下步骤创建自定义指令

  • 在Vue应用程序的目录中创建一个名为directives.js的新文件。
  • 在这个文件中,使用Vue.directive方法定义自定义指令。
import Vue from 'vue'

Vue.directive('custom-directive', {
  bind: function (el, binding, vnode) {
  },
  update: function (el, binding, vnode) {
  },
  unbind: function (el, binding, vnode) {
  }
})
  • app.js中包含directives.js
des4xlb0

des4xlb02#

Vue示例需要register指令,而不是Inertia。createApp将创建Vue示例-使用directive方法链接它以使其全局可用

return createApp({ render: () => h(App, props) })
  .directive('uppercase',{
    updated(el){
      el.value = el.value.toUpperCase()
    }
  })
  .use(plugin)
  .use(ZiggyVue, Ziggy)
  .mount(el);

相关问题