精华内容
下载资源
问答
  • Vue Bootstrap Modal是一个可重用的组件,您可以在需要显示简单的模式弹出窗口时在整个项目中使用。 因此,您不必每次都想使用引导程序模式时重复相同的html代码。 目录 开始吧 安装 npm install --save @...
  • <pre><code>window.SweetModalVue = require('sweet-modal-vue'); </code></pre> <p>in the app.js file first and then tried I tried using it in the bootstrap.js file. And after I compile and try inserting...
  • 引言页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种... import Modal from "....

    引言

    页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端.

      
    @click="openModal()">点击 :is_open="is_open" @close="close()"/>
    import Modal from "../components/Modal/Modal";//外部引入的弹出框组件export default { components: { Modal, }, data(){ return { is_open:false //控制弹出框关闭或打开 } }, methods: { openModal() { //显示弹出框 this.is_open = true; }, close(){ //子组件触发的事件,关闭弹出框 this.is_open = false; } },};

    Modal是外部引入的弹出框组件,父组件通过is_open来控制弹出框的隐藏和显示.仔细分析上述结构存在的问题如下.

    Modal组件被硬编码,强行在父组件的components里面注册并在父组件的模板中渲染.设想一下,一个弹出框组件就需要在父组件中写一次,5个弹出框也都要在父组件的模板里写五个.这样会让父组件的页面结构变的复杂不利于阅读,其次弹出框组件应该与父组件解耦,它不应该写死在父组件的模板中.父组件需要单独设置一个状态is_open来控制弹出框的显示和隐藏,假如父组件需要引入多个弹出框,那势必也要定义多个状态来对弹出框进行控制.

    为了实现弹出框和父组件的解耦,最理想的方式是运用函数式编程的思想,在父组件内只需要调用一个函数就可以让弹出框显示出来,接下来看一下如何实现.

    弹出框组件的处理

    我们接下来实现一个代码十分简单但功能强大的工具函数,借助它就可以将弹出框组件封装起来.如果父组件需要使用哪个弹出框组件直接调用函数就能轻松显示或者隐藏.

    实现

    import Vue from 'vue';export const createModal = (Component, props) => {  const vm = new Vue({    render: (h) =>      h(Component, {        props,      }),  }).$mount();  document.body.appendChild(vm.$el);  const ele = vm.$children[0];  ele.destroy = function() {    vm.$el.remove();    ele.$destroy();    vm.$destroy();  };  return ele;};

    Component就是父组件调用的弹出框组件,在这里作为参数传入.props是最终传递给弹出框组件内部的propsnew 一个 Vue实例,render属性对应的函数里,h的作用是将弹出框组件变成虚拟dom$mount一定要调用,它会将虚拟dom转换成真实的dom元素vm.$el就是对应到传入的弹出框组件Component所渲染的真实dom,将它挂载到body下面,此时页面就会显示出弹出框光显示出弹出框还不够,我们还需要给弹出框组件创建一个销毁方法destroy,其中vm.$children[0]对应的就是弹出框组件的vue实例,可以调用destroy方法销毁.最后将该实例返回供外部调用,外部通过该实例就可以调用弹出框组件内部的属性和方法.

    应用

    作为测试Demo,弹出框组件结构如下,模板内容十分简单.渲染一个头部标题title和内容content.定义两个方法show()hide()来操作is_open状态来控制弹出框的显示和隐藏.

      
    class="modal" v-if="is_open">
    class="content">

    class="close" @click="hide()">close

    class="title">{{ title }}

    {{ content }}
    export default { props: ["title", "content"], data() { return { is_open: false, }; }, methods: { show() { this.is_open = true; }, hide() { this.is_open = false; }, },};lang="scss" scoped>.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); .content { width: 200px; height: 200px; background-color: #fff; margin: 0px auto; margin-top: 200px; text-align: center; font-size: 14px; color: #333; padding: 5px; .title { margin-bottom: 20px; font-size: 16px; } .close { text-align: right; } }}

    页面组件

      
    class="test-v2"> @click="openModal()">点击
    import Modal from "../../components/Modal/Modal";import { createModal } from "../../util/Modal";export default { methods: { openModal() { this.ele = createModal(Modal, { title: "弹出框", content: "内容", }); this.ele.show(); } },};

    页面父组件通过调用createModal方法能获取到弹出框组件Modal的实例this.ele.通过this.ele就可以拿到弹出框组件内部的所有属性和方法,包括显示show()和隐藏hide().

    经过上方一改造,实现了弹出框组件和父组件之间的解耦.弹出框组件不需要在父组件中注册和模板内渲染.如果父组件需要传递数据给弹出框组件,可以借助createModal第二个参数对象,它最终会以props的形式注入到弹出框组件的内部.show()hide()方法都是弹出框内部定义的,父组件可以直接调用控制其显示隐藏.另外页面销毁时要调用一次this.ele.destroy(),防止内存泄漏.

    页面效果

    73a3cbfaf6bc66f623ebc59e6156b104.png
    在这里插入图片描述

    从最终的dom结构图可以清晰的看到弹出框挂载在body的下面,而非页面组件内部.这样在对弹出框定义一些与css定位相关的样式时就轻松方便的多,不会受到页面组件的影响和干扰.

    延伸

    通过上面对弹出框的讲解我们还可以在此基础做很多其他的事情,比如对消息提示框的处理.

    消息提示框也属于弹出框.最好的实践方式是,只需要写一行代码 Alert("Hello world"),页面上就会立马弹出消息提示 Hello world.效果如下.

    d957223d1348c4de5de29fa86f110cbe.gif
    在这里插入图片描述

    实现

    父页面结构如下,调用Alert()函数,页面就会显示提示框.

      
    class="test-v2"> @click="alert()">Alert
    import { Alert } from "../../util/Modal";export default { methods: { alert() { Alert("Hello world"); }, },};

    Alert函数实现如下.

    const alert_array = []; //用来存储弹出框的实例export const Alert = (msg, duration = 3000) => {  let top = 100; //默认距离顶部100px  if (alert_array.length > 0) {    const index = alert_array.length;    top = top + index * 50;  }  const ele = createModal(AlertComponent, {    title: msg,    top,  });  alert_array.push(ele);  const timer = setTimeout(() => {    clearTimeout(timer);    const index = alert_array.indexOf(ele);    index !== -1 && alert_array.splice(index, 1);    ele.destroy();  }, duration);};

    AlertComponent是自定义的消失提示框组件(需要引入),调用createModal()获取每个提示框的实例存储在数组alert_array中.点击一次按钮出现一个消息提示框,点击第二次按钮时,第二个提示框应该出现在第一个框的下面,因此需要根据数组alert_array动态计算绝对定位的top值,在创建弹出框实例时作为参数传进去.定时器控制默认3秒后移除弹出框.

    AlertComponent消息提示框组件内容如下.初始给top_value赋值this.top - 30,后来在mounted中再将this.top赋值一次,就是为了实现提示框出现时从上往下滑动的动画效果.

      
    class="alert-component" :style="{ top: `${top_value}px`, opacity: opacity }" > {{ title }}
    export default { props: ["title", "top"], data() { return { top_value: this.top - 30, opacity: 0, }; }, mounted() { const timer = setTimeout(() => { clearTimeout(timer); this.top_value = this.top; this.opacity = 1; }); },};.alert-component { height: 20px; border-radius: 4px; position: absolute; min-width: 300px; left: 50%; transform: translateX(-50%); background-color: #f0f9eb; color: #67c23a; align-items: center; padding: 10px 16px; transition: all 0.25s linear; opacity: 0;}

    结尾

    借助createModal工具函数,不仅可以做消息提示框,另外包括消息确认框,动态的表单模态框都可以实现进一步的封装简化处理.当弹出框与页面实现解耦后,整体的代码逻辑会变得更加清晰,对后期维护和扩展都有巨大的好处.

    展开全文
  • 开发Vue组件系列之模态框,主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出。使用命令行安装或下载npm install lcxModal -S...

    开发Vue组件系列之模态框,主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出。

    使用命令行安装或下载

    npm install lcxModal -S

    引入方式

    - import lcxModal from 'lcxModal';- const lcxModal = require('lcxModal');- 

    使用

    - Vue.use(lcxModal); - Vue.component('lcxModal', lcxModal); 

    项目结构

    ├── src # 项目源码。开发的时候代码写在这里。│ ├── lib # 组件目录 | | |--lcxModal # 模态框组件│ ├── App.vue # 项目根视图│ ├── main.js # 程序主入口

    部分截图

    be97eec490e6a4bd45e08b83ab280733.png
    966c91c21eff34af1cf81da56c206833.png
    980fbf4166b3c737e7336bfd4f58d74d.png

    modal组件模板

    使用 `transition` 可以为组件添加动效;对应的组件模板内容如下

    {{ title }} 关闭  
    {{ text }}
    {{ confirmBtnText }} {{ cancelBtnText }}

    添加组件属性及操作方法

    添加组件的属性,其中`duration`属性如果设定的数值小于10,则会乘以1000;否则按传递的数值计算

    展开全文
  • 全局component下建立Modal.vue文件3.代码结构:弹窗的结构很简单, 只需要三个view即可 // wrapper层可用于点击遮罩关闭弹窗交互 // content层可自定义宽高 // 插槽可自定义弹窗展示内容4.弹窗效果主要依赖于css样式....

    1.前端环境: 我的环境Taro + Vue 2.5+

    2.全局component下建立Modal.vue文件

    3.代码结构:

    弹窗的结构很简单, 只需要三个view即可

            // wrapper层可用于点击遮罩关闭弹窗交互        // content层可自定义宽高          // 插槽可自定义弹窗展示内容            
    4748cb1b21c085cd58bce1ace375669a.png
    3f8e6036cd53842ed302a880857ec168.png

    4.弹窗效果主要依赖于css样式

    efb2e0b5f185f1e1b990c30b8fde0108.png

    到这里一个弹窗组件模板就建立好了

    其实我们经常看到的Drawer抽屉组件, 它的书写模板也可以根据这个改造,

    只需要修改动画实现方式就可以, 转换成transform: translateX()或者translateY()

    至于是左滑还是右滑, 上滑还是下滑的起始位置, 可以用props动态传入

    展开全文
  • 安装和下载:# NPM$ npm install @melmacaluso/vue-modal --save使用:只需将其导入所需的vue组件中,如下所示:import Modal from "@melmacaluso/vue-modal";Props:Props类型评论btnText串模态按钮的文本...

    可重用的Modal组件,支持自己的自定义HTML,文本和类和/或传递组件。具有多个模式内容/按钮。

    安装和下载:

    # NPM

    $ npm install @melmacaluso/vue-modal --save

    使用:

    只需将其导入所需的vue组件中,如下所示:

    import Modal from "@melmacaluso/vue-modal";

    Props:

    Props

    类型

    评论

    btnText

    模态按钮的文本标签

    modalContent

    将您的html传递给模态主模态

    closeBtn

    布尔型

    有条件地添加关闭按钮

    closeBtn-content

    将此处的html传递给关闭按钮

    multiple

    布尔型

    在模式中允许多个按钮/内容

    modals

    数组

    在这里传递一个对象数组,它们在数组范围内保留相同的Prop,即。 .btnText

    showNav

    布尔型

    有条件地显示每个模态的导航 btnText

    showArrows

    布尔型

    有条件地显示基于箭头的导航

    showArrowsCloseBtn

    布尔型

    有条件显示上一个/下一个箭头之间的关闭按钮,它继承 closeBtn-content

    arrowNextContent

    将您的html传递给下一个箭头

    arrowPrevContent

    将您的html传递给上一个箭头

    @before-open

    功能

    在此处附加您的自定义函数,它将在模式打开之前被调用

    @before-close

    功能

    在此处附加您的自定义函数,该函数会在模式关闭之前被调用

    例子:

    内联HTML:

    btnText="Press me, senpai ?"

    modalContent="

    你好我是modal

    我喜欢说: 显而易见的

    现在,试试这个把戏: Ctrl + Shift + W ?

    "

    :closeBtn="true"

    closeBtn-content="

    X

    "

    />

    通过组件:

    btnText="Press me, senpai ?"

    :closeBtn="true"

    closeBtnHTML="X"

    >

    多个按钮和模式内容+自定义功能:

    :multiple="true"

    @before-open="yourOpenFn()"

    @before-close="yourCloseFn()"

    :modals="[

    {

    btnText: 'Press me 1',

    modalContent: 'This is the content 1'

    },

    {

    btnText: 'Press me 2',

    modalContent:

    ''

    },

    {

    btnText: 'Press me 3',

    modalContent: 'This is the

    content 3

    '

    }

    ]"

    :showNav="true"

    />

    通过Api / Json feed +上一个/下一个箭头:

    :multiple="true"

    :modals="formattedUsers"

    :showArrows="true"

    />

    export default {

    data: () => {

    return {

    users: []

    }

    },

    mounted(){

    fetch('https://jsonplaceholder.typicode.com/users')

    .then(res => res.json())

    .then(res => this.users = res)

    .catch(err => console.log(err))

    },

    computed: {

    formattedUsers: function() {

    return this.users.map(user => {

    return {

    btnText: `${user.name}`,

    modalContent: `

    Email:${user.email}

    Phone:${user.phone}

    `

    };

    });

    }

    }

    }

    展开全文
  • Vue组件通信方式父子 :props $children refs// childprops: { msg: String }// parent复制代码// parentthis.$children[0].xx = 'xxx'复制代码// parentmounted() {this.$refs.hw.xx = 'xxx'}复制代码子父:自定义...
  • vue2-bootstrap-modal Vue 2.x的Bootstrap模式组件 更新了软件包以排除bootstrap css和js,您需要安装bootstrap-loader 安装 npm install vue2-bootstrap-modal --save 用法 需要组件(全局或在另一个组件中) ...
  • 参数名类型说明visibleBoolean是否显示,默认falsetitleString标题update:visibleBoolean更新visible, 使用:visible.sync实现动态绑定Modal.vue{{title}}export default {name: "MyModal",props: {visible: {type: ...
  • 今天给大家推荐一款超美观的pc端vue.js弹窗组件VueJsModal。vue-js-modal 基于Vue构建...安装$ npm i vue-js-modal -S引入组件// 在main.js中引入import Vue from 'vue'import VModal from 'vue-js-modal'import 'v...
  • 为了能偷懒,思考了一下,能不能写一个组件,比如说使用Vue创建一个组件,一个Modal组件,让其能在各个Web页面或者应用上使用。在这篇文章中,学习一下如何使用transition和slots来创建可重用的Modal组件。Modal构成...
  • 项目环境@vue/cli 4.5.8最终效果需求分析显示/隐藏点击遮罩层能否关闭宽度和zIndex自定义标题栏 -显示标题和关闭按钮主体底部 -内置取消和确定功能实现过程搭建大体的html模版取消确定import { defineComponent } ...
  • 使用创建ModalVue组件。 项目设置 npm install --save @ocrv/vue-tailwind-modal 使用模态 全局安装 在您的主要js文件中: import VueTailwindModal from "@ocrv/vue-tailwind-modal" Vue . component ( ...
  • 而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以...
  • vue-thin-modal提供了薄但功能强大的模式组件。 它的样式,过渡和内容是完全可定制的。 安装 $ npm install --save vue-thin-modal # or $ yarn add vue-thin-modal 用法 导入VueThinModal并将其安装在Vue构造函数...
  • <p>ExampleComp.vue looks exactly like the one in the WIKI (only another path to the modal mixin) <p>Can you help me out?</p><p>该提问来源于开源项目:ctf0/Laravel-Media-Manager</p></div>
  • 所以我会设置一个全局 alert 方法( CoffeeScript ): Constructor = require './AlertDialog.vue' VueComponent = Vue.extend Constructor alert = (message, onOK) -> vm = new VueComponent().$...
  • _createApply(name){this.$refs[name].validate((valid) => {if (valid) {let addApply = Object.assign({},this.addApply)addApply.serviceEndDate = formatDate(new Date(addApply.serviceEndDate),'yyyy-MM-dd...
  • // bad // 每一个数据控制对应的Modal展示与隐藏 new Vue({ data() { return { modal1: false, modal2: false, modal3: false, } } }) // good // 当modalType为对应的值时 展示其对应的弹框 new Vue({ ...
  • Vue sweet-modal-vue 通用型的模态框

    千次阅读 2018-08-07 10:19:33
    场景 组件介绍 &amp;&amp; 优势 安装 用法 备注 用例 场景 模态框很很常见别的提示形式,多标签的模态框也... 组件名 adeptoas/sweet-modal-vue 组件地址 https://github.com/adeptoas/...
  • 而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以...
  • vue modal 组件 虚拟可爱模态 (vue-cute-modal) A simple and easy to use Modal component for Vue applications. Vue应用程序的一个简单易用的Modal组件。 View demo 查看演示 Download Source 下载源 特征 ...
  • <p>ERROR in C:\projects\webpanel\vsmWebPanel.Ui\node_modules\vue-modal-dialogs-ts\vue-modal-dialogs.d.ts (20,29): error TS2694: Namespace '"C:/projects/webpanel/vsmWebPanel.Ui/node_modules/vue...
  • vue 实现modal

    2018-01-31 14:28:00
    本文只是作为练习弹出框,弹框内部的东西需要进行自定义添加,主要对...Modal.vue文件 <template> <div id ="modalPopBox" v-if="innerAriaShow"> <div class="el-modal-wrapper"> ...
  • vue 可拖拽modal 介绍 (Introduction) Previously, I’ve written one article on how to build a reusable Vue modal, and it was one year ago. I’m grateful that many people read it, although it’s a little...
  • <div><p><img alt="Kapture 2020-07-30 at 20 56 39" src="https://img-blog.csdnimg.cn/img_convert/55e4200e53a1af9ffae80446813a0519.gif" /></p> <p>Here you can see, that if I ...sagalbot/vue-select</p></div>
  • https://github.com/woai3c/Front-end-articles​github.com一个弹窗组件通常包含两个部分,分别是遮罩层和内容层。遮罩层是背景层,一般是半透明或不透明的...div class="modal-bg" v-show="show"> <div ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,576
精华内容 630
关键字:

modalvue

vue 订阅