组件用.vue还是.js_Windows类似Vue.js的模式组件

最新推荐文章于 2025-10-04 22:57:08 发布

翻译最新推荐文章于 2025-10-04 22:57:08 发布 · 230 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://vuejsexamples.com/windows-like-modal-component-for-vue-js/

标签

#vue #java #js #react #javascript

#ViewUI

收录于

本文介绍了一款用于Vue.js的简单模态窗口组件，该组件可在项目中作为弹窗使用，通过npm安装并初始化插件后，即可在代码中通过特定的属性设置其显示状态和标题等内容。

组件用.vue还是.js

窗口模式 (vue-window-modal)

Simple window like modal for Vue.js.

Vue.js模态之类的简单窗口。

Install

安装

npm install --save https://github.com/ropbla9/vue-window-modal

Init plugin

初始化插件

import  VueWindowModal  from  'vue-window-modal'

Vue.use(VueWindowModal)

Use

用

<vue-window-modal  :active="visibleFormCrud"  title="Client 1"  v-on:clickClose="visibleFormCrudUpdate(false)">
    FOO TEXT ON DEFAULT SLOT :DDDDD 1
</vue-window-modal>

<vue-window-modal  :active="visibleFormCrudTwo"  title="Client 2"  v-on:clickClose="visibleFormCrudUpdateTwo(false)">
    FOO TEXT ON DEFAULT SLOT :DDDDD 2
</vue-window-modal>

<vue-window-modal  :active="visibleFormCrudThree"  title="Client 3"  v-on:clickClose="visibleFormCrudThree = false">
	    FOO TEXT ON DEFAULT SLOT :DDDDD 3
    </vue-window-modal>

It's not well written but properly working. Feel free to pull request.

它写得不好，但是可以正常工作。随意拉请求。

PS: Since it's not pre-compiled you will need a blunder (webpack) to run into your project.

PS：由于尚未预编译，因此需要一个大问题(Webpack)才能运行到您的项目中。