vue-js-modal使用

安装：

npm install vue-js-modal --save

Include plugin in your main.js file

import VModal from 'vue-js-modal'Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } });

main.js

import Vue from 'vue';
import router from './router'
import App from './App.vue';
import store from './store'
// 导入 table 和 分页组件
import { VTable, VPagination } from 'vue-easytable'
//vue-js-modal
import VModal from 'vue-js-modal'// 注册到全局
Vue.component(VTable.name, VTable);
Vue.component(VPagination.name, VPagination);//vue-js-modal
Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickToClose: true } });Vue.config.productionTip = true;Vue.filter('capitalize', function(value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)
});new Vue({router: router,store,render: h => h(App)
}).$mount('#app');

Home.vue

<template><div><SignedInUser /><router-link :to="{name:'welcome'}">to welcome</router-link><br/><router-link :to="{name:'table'}">to vuetable-2</router-link><br/><button v-on:click="showModal">showModal</button><br/><div>Name:<input type="text" v-model="product.name"><div><span>{{product.name | capitalize}}</span></div></div><div>Leves:<label>高</label> <input type="checkbox"  value="H" v-model="product.leves"/><label>中</label> <input type="checkbox"  value="M" v-model="product.leves"/><label>低</label> <input type="checkbox"  value="L" v-model="product.leves"/></div><div><button v-on:click="show">show</button>  <br/> <button v-on:click="request">requestApi</button></div><h1>Lazy</h1><div><div><input type="text" v-model="product.price" lazy debounce="5000"></div><div>showPrice:{{product.price}}</div><div>ComputedResult:{{total}}</div></div><ul v-for="(item, index) in product.leves " :key="index"><li >{{index}}{{item}}</li></ul></div></template><script>import SignedInUser from './SignedInUser.vue'import axios from '../config/axios.js'import ModalDemo from './ModalDemo.vue'export default {name: 'Home',components: {SignedInUser},data() {return {product: {name: "xiaomi",leves: ["M", "L"],price: 100}}},methods: {show: function() {alert(JSON.stringify(this.product));},showModal() {this.$modal.show(ModalDemo, {text: 'This text is passed as a property'}, {draggable: true,clickToClose: false})},request: function() {axios.get('/values').then(function(response) {console.info(response);}).catch(function(error) {console.debug(error);});axios.post('/values', JSON.stringify({name: "hiword"})).then(function(response) {console.info(response);}).catch(function(error) {console.debug(error);});axios.put('/values/123', JSON.stringify({name: "hiword"})).then(function(response) {console.info(response);}).catch(function(error) {console.debug(error);});axios.delete('/values/123').then(function(response) {console.info(response);}).catch(function(error) {console.debug(error);});}},computed: {total: function() {return this.product.price * 0.283;}}};
</script><style scoped></style>

ModalDemo.vue

<template><div>Close using this button: <button v-on:click="$emit('close')">Close</button></div>
</template>
<script>export default {}
</script><style scoped></style>

运行效果：

参考文献：

vue-js-modal - npm

vue-js-modal使用相关推荐

分享5个超好用的Vue.js库
开发人员最好的朋友和救星就是这些第三方库,无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.借助开源库加速Vue项目的开发进度是现代前端开发比较常见的方式,这几个 Vue.js库,建议尽早用上, ...
modal ajax,在Modal中调用Vue.js AJAX
我正在尝试弹出一个信用卡详细信息的模式.详细信息来自AJAX请求.由于某种原因,根Vue实例正在更新,但组件实例不是.这就是我目前所拥有的 - HTML: × View Card Details Cl ...
Today：基于 Electron 和 Vue.js 的 GTD 应用
这是我的一个 side project.今天发布了第一个预览版本 v0.0.2,欢迎访问 GitHub 上面的 Repo 获取试用下载(目前仅为 Mac 用户提供 build),并提供你们的宝贵意见和 ...
input js 离开事件_听说你熟练使用Vue.js，这9种Vue技术你掌握了吗？
现在,Vue.js已成为前端开发的热门框架.有很多工程师利用Vue.js的便利性和强大功能.但是,我们完成的某些解决方案可能未遵循最佳做法.好吧,让我们看一下那些必备的Vue技术. 1. 函数组件函 ...
Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
vue js 对象下的原型_如何使用Vue.js和Pusher创建实时原型反馈应用程序
vue js 对象下的原型 by Neo Ighodaro 由新Ighodaro 如何使用Vue.js和Pusher创建实时原型反馈应用程序 (How to create a realtime pro ...
antd vue关闭模态对话框_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
bootstrap 打印组件_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计 ...
Vue.js 组件编码规范
目标本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能更容易使 ...

vue-js-modal使用

vue-js-modal使用相关推荐

最新文章

热门文章