精华内容
下载资源
问答
  • Vue Bootstrap Modal是一个可重用的组件,您可以在需要显示简单的模式弹出窗口时在整个项目中使用。 因此,您不必每次都想使用引导程序模式时重复相同的html代码。 目录 开始吧 安装 npm install --save @...
  • vue3-bootstrap-5-modal-component使用引导程序5的vue 3的简单模态组件 依存关系: 该组件需要安装Bootstrap 5和Popper npm install bootstrap@next npm install @popperjs/core 然后可以将它们包含在main.js...
  • Vue组件通信方式父子 :props $children refs// childprops: { msg: String }// parent复制代码// parentthis.$children[0].xx = 'xxx'复制代码// parentmounted() {this.$refs.hw.xx = 'xxx'}复制代码子父:自定义...

    Vue组件

    通信方式

    父子 :props $children refs

    // child

    props: { msg: String }

    // parent

    复制代码

    // parent

    this.$children[0].xx = 'xxx'

    复制代码

    // parent

    mounted() {

    this.$refs.hw.xx = 'xxx'

    }

    复制代码

    子父:自定义事件

    // child

    this.$emit('add', good)

    // parent

    复制代码

    任意组件:事件总线 vuex

    // Bus:事件派发、监听和回调管理 class Bus {

    constructor(){

    this.callbacks = {}

    }

    $on(name, fn){

    this.callbacks[name] = this.callbacks[name] || []

    this.callbacks[name].push(fn)

    }

    $emit(name, args){

    if(this.callbacks[name]){

    this.callbacks[name].forEach(cb => cb(args))

    }

    } }

    // main.js

    Vue.prototype.$bus = new Bus()

    // child1

    this.$bus.$on('foo', handle)

    // child2

    this.$bus.$emit('foo')

    复制代码解析:Bus实现了Vue的

    emit

    兄弟组件: $parent $root

    // brother1

    this.$parent.$on('foo', handle)

    // brother2

    this.$parent.$emit('foo')

    复制代码

    跨组件通信 provide/inject

    // ancestor

    provide() {

    return {foo: 'foo'}

    }

    // descendant

    inject: ['foo']

    inject: {

    bar1: {

    from: 'bar',

    default: 'barrrrrrrr'

    }

    },

    复制代码

    ⾮prop特性 $attrs/$listeners

    包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当一个组件没有 声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

    // child:并未在props中声明msg

    // parent

    @foo="onFoo">

    复制代码

    插槽

    匿名插槽

    具名插槽

    作用域插槽

    组件创建 Vue.component Vue.extend template

    Vue.extend 使用 Vue 构造器

    Vue.extend 属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去关注的。

    cn.vuejs.org/v2/api/#Vue…

    应用场景

    (1)从接口动态渲染组件

    (2)要实现类似于window.alert()的提示组件,要求像JS函数一样调用它。

    import Vue from 'vue'

    // 传入一个组件配置

    // 创建它的实例,并且将它挂载到body上

    // 返回组件实例

    export default function create(Component, props) {

    //Component:传入的组件

    //props:组件需要的参数

    const Ctor = Vue.extend(Component)

    const comp = new Ctor()

    Object.keys(props).forEach(item=>{

    comp[item] = props[item]

    })

    const vm = comp.$mount()

    document.body.appendChild(vm.$el)

    vm.remove = ()=>{

    document.body.removeChild(vm.$el)

    vm.$destroy()

    }

    return vm

    // extend方式二

    const Ctor = Vue.extend(Component)

    const comp = new Ctor({propsData:props})

    console.log(comp)

    const vm = comp.$mount()

    document.body.appendChild(vm.$el)

    vm.remove = ()=>{

    document.body.removeChild(vm.$el)

    vm.$destroy()

    }

    return vm

    }

    复制代码template

    v-modal

    v-model是一个指令,限制在 input,textarea,select,components中使用

    修饰符 .lazy(取代input监听change事件)、.number(输入字符串转为有效数字)

    她其实是一个语法糖

    Vue 常见实例方法

    $mount()、$destroy、$watch、$forceUpdate()

    $mount():挂载,(vue的作用范围)

    let vm = new Vue({

    data:{

    message:"张三"

    }

    }).$mount("#app")

    let vm = new Vue({

    data:{

    message:"张三"

    }

    }).$mount() //将vdom变成dom

    // vm.$el上有生成的dom

    document.body.appendChild(vm.$el)

    复制代码$destroy():手动销毁

    $watch() 监听

    $forceUpdate() 强制跟新 (react也有)

    展开全文
  • 而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,...
  • vue3:modal组件开发

    2020-12-30 07:27:59
    项目环境@vue/cli 4.5.8最终效果需求分析显示/隐藏点击遮罩层能否关闭宽度和zIndex自定义标题栏 -显示标题和关闭按钮主体底部 -内置取消和确定功能实现过程搭建大体的html模版取消确定import { defineComponent } ...

    项目环境

    @vue/cli 4.5.8

    最终效果

    需求分析

    显示/隐藏

    点击遮罩层能否关闭

    宽度和zIndex自定义

    标题栏 -显示标题和关闭按钮

    主体

    底部 -内置取消和确定功能

    实现过程

    搭建大体的html模版

    import { defineComponent } from "vue";

    export default defineComponent({

    name: "Modal",

    props: {},

    emits: [],

    setup() {

    return { };

    },

    });

    添加props和mehtods和css

    import { defineComponent } from "vue";

    export default defineComponent({

    name: "Modal",

    props: {

    modelValue: Boolean,

    title: String,

    footerHide: Boolean,

    width: {

    type: String,

    default: "500px",

    },

    maskClosable: {

    type: Boolean,

    default: true,

    },

    zIndex: {

    type: Number,

    default: 1000,

    },

    },

    emits: ["ok", "close", "update:modelValue"], // 方便TS推断

    setup(props, { emit }) {

    const closeModal = (type: string) => {

    // 关闭Modal 并触发自定义事件‘close-有参数方便区分点击右上方的关闭按钮还是点击底部的取消’

    };

    const maskClose = () => {

    // 通过点击mask层关闭Modal

    };

    const sure = () => {

    // 点击确定按钮关闭Modal并添加自定义事件‘ok’

    };

    return { closeModal, sure, maskClose };

    },

    });

    .modal {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1000;

    &-mask {

    width: 100vw;

    height: 100vh;

    background-color: rgba($color: #000000, $alpha: 0.4);

    }

    &-content {

    width: 500px;

    position: absolute;

    top: 8vh;

    left: 50%;

    margin-left: -250px;

    background-color: #fff;

    border-radius: 8px;

    z-index: 1;

    font-size: 14px;

    }

    &-header {

    padding: 12px 16px;

    border-bottom: 1px solid #e4e7ed;

    }

    &-footer {

    padding: 12px 16px;

    border-top: 1px solid #e4e7ed;

    text-align: right;

    }

    &-body {

    padding: 16px;

    }

    &-close {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 16px;

    height: 16px;

    cursor: pointer;

    &::before,

    &::after {

    content: "";

    display: block;

    position: absolute;

    left: 8px;

    top: 0;

    width: 1px;

    height: 16px;

    background-color: #999;

    border-radius: 0.5px;

    transform: rotate(-45deg);

    z-index: -1;

    }

    &::before {

    transform: rotate(45deg);

    }

    &:hover::before,

    &:hover::after {

    background-color: #444;

    }

    }

    &-button {

    line-height: 1em;

    font-size: 14px;

    padding: 8px 20px;

    border: 1px solid #dcdfe6;

    outline: none;

    display: inline-block;

    border-radius: 4px;

    cursor: pointer;

    background-color: #fff;

    transition: 0.1s;

    &:hover {

    color: #409eff;

    border-color: #c6e2ff;

    background-color: #ecf5ff;

    }

    & + & {

    margin-left: 10px;

    }

    &-primary {

    background-color: #2d8cf0;

    border-color: #2d8cf0;

    color: white;

    &:hover {

    background: #66b1ff;

    border-color: #66b1ff;

    color: #fff;

    }

    }

    }

    }

    添加closeModal, sure, maskClose的具体实现--setup具体的实现

    ...

    setup(props, { emit }) {

    const closeModal = (type: string) => {

    emit("update:modelValue", false);

    emit("close", type);

    };

    const maskClose = () => {

    if (props.maskClosable) closeModal("close");

    };

    const sure = () => {

    emit("update:modelValue", false);

    emit("ok");

    };

    return { closeModal, sure, maskClose };

    },

    ...

    完整的代码在github

    展开全文
  • 所以我会设置一个全局 alert 方法( CoffeeScript ): Constructor = require './AlertDialog.vue' VueComponent = Vue.extend Constructor alert = (message, onOK) -> vm = new VueComponent()...

    匿名用户

    1级

    2017-07-07 回答

    弹出型的组件,无论是 Dialog、Notification、Toast 还是其它的,都有一些共通的问题需要解决:
    1. 多个弹层同时出现时,z-index 的顺序
    2. 多个弹层同时出现时,共享遮罩层
    3. 是否可以自我管理,典型的,定时或者点击遮罩层关闭弹层。
    4. 有些弹层需要保留状态,比如你编辑某篇文章,不小心点叉了,再打开还在;而有些需要每次打开都是新的,比如后台中创建某个条目的弹出式表单,你创建过一个条目,下一次再开这个弹层,不应该保留上一个条目的信息
    5. 组件放在哪,是否单例,这个和第4点放一起说
    6. 如何支持快捷方式,比如喜闻乐见的挂在一个全局方法上,用时创建一个,关闭后销毁
    7. 模态,阻止滚动
    这些都是之前自己写组件库时遇到的问题,分享一点自己的实践~
    1. z-index 的管理
    通过设置 position 为 fixed 或 absolute 的方式制作弹层,多个弹层同时打开时,默认是以 dom 树中的位置来确定遮照次序的。当然,我们可以手动设置 z-index,但这麻烦不说,还容易出错。
    我的做法是设置一个弹层基类组件,比如叫 Popup,更上层的 Dialog、Toast 之类都是基于它开发的。这个 Popup 组件保持一个单例计数器,比如这样
    <script lang="coffe">
    $count = 0
    module.exports =
    props:
    # 控制打开还是关闭
    open:
    type: Boolean
    default: false
    mounted: ->
    # 装载时递增
    if @open
    $count++
    @zIndex = $count
    watch:
    open: (open) ->
    # open 变化时,如果是打开就递增,否则递减
    if open
    $count++
    @zIndex = $count
    else
    $count--
    </script>
    这样一来所有基于 Popup 的组件的 z-index 都是自动计算的,后打开的总是在前面。
    2. 共享遮罩层
    如果所有对话框实例都有自己的半透明遮照,同时打开后层层叠加会很难看(不过,也许有的设计师就喜欢这种效果?)。为了解决这个问题,可以在 Popup 上设置一个单例遮照层。也就是说,若两个以上 Dialog 打开时,Popup 判断已经有一个遮罩层了,那么自动将后面 Dialog 的透明度设为 0。
    这里需要注意的是,并不是所有基于 Popup 的弹层式组件都有相同的透明度(比如有的是0.4,有的是 0.8),这里应该设置一个单例变量 maxOpacity,记录并设置为最深的遮照。
    3. 外部触发与自我触发的折中
    拿最常见的需求来说,Dialog 需要能够点击遮罩层关闭。Vue 1.0 中通过 sync 修饰符很容易做到内外部共享状态,但 2.0 中已经取消了 sync,可能是为了更清晰的状态变化管理,但我觉得 sync 在一些特殊场合确实很有用。
    那么现在,一个典型的做法是完全交由外部来控制 Dialog 的开关,比如父组件通过 prop 设置一个布尔值 open,Dialog 发觉遮照被点击时,可以向上抛出个 click-mask 事件,由父组件来决定是否可以关闭。
    其实通过 v-model 也可以实现类似 sync 的功效,我不确定语义上是否一定准确,点击遮照关闭对话框也算是用户输入,触发一个 input 事件是合理的,但类似 Toast 2 秒后关闭,这可能说不通。但是共享状态后,内外部都可以控制,实在是很方便,这个可以权衡?
    4. 弹层每次打开,是否应该重绘。
    我的做法是暴露一个 prop 布尔值 auto-reset 让使用者决定。如果需要每次都重回,就将 open 绑在 v-if 上,否则绑在 v-show 上:
    <template lang="jade">
    .soil-popup(
    v-if="reset? open: true",
    v-show="open"
    )
    slot
    </template>
    5. 组件放在哪,是否单例
    这个根据弹层的功能需求决定。比如后台运营系统里,点击条目列表弹出个条目编辑框,这种天然高内聚的需求,可以与条目列表放在一个条目管理者组件中。而像 AlertDialog、ConfirmDialog 之类则适合放在全局位置。
    单例也是看需求,像模态化的 AlertDialog 就一个出口,你肯定得先关闭一个再打开另一个,只需单例。其他需要同时存在的弹层类型,就要考虑多个了。这也是我不喜欢用声明式的写法去调用弹层的原因,看第6点。
    6. 挂一个快捷方法,用时创建一个弹层,用完销毁。
    很多弹层需要几个同时存在是不确定的( Notification、Toast 等 ),而且对于通用型的弹层,会在很多疙瘩角落里调用…… 我觉得虽然快捷方法违反 Vue 状态化管理组件的特性,但特殊需求还是应该特殊对待。
    所以我会设置一个全局 alert 方法( CoffeeScript ):
    Constructor = require './AlertDialog.vue'
    VueComponent = Vue.extend Constructor
    alert = (message, onOK) ->
    vm = new VueComponent().$mount()
    vm.message = message
    vm.$on 'ok', onOK if onOK
    vm.$on 'ok', ->
    vm.open = false
    document.body.removeChild(vm.$el)
    setTimeout (-> vm.$destroy()), 0
    document.body.appendChild(vm.$el)
    vm.open = true
    记得销毁实例前要设置 open = false,因为要通知那个全局 z-index 计数器去递减
    7. 模态,阻止滚动

    展开全文
  • Vue-js-modal使用

    千次阅读 2019-10-06 19:50:03
    npm install vue-js-modal --save Include plugin in yourmain.jsfile import VModal from 'vue-js-modal' Vue.use(VModal, { dynamic: true, injectModalsContainer: true, dynamicDefaults: { clickTo...

    安装:

    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>

    运行效果:

    参考文献:

    https://www.npmjs.com/package/vue-js-modal 

    展开全文
  • vue-ya-semantic-modal Vue2的另一个语义UI模态组件,不带Jquery,但具有纯Vue转换该组件仅提供一个框架vue-ya-semantic-modal,另一个Vue-ya-semantic-modal组件,不带Jquery,但具有纯净的Vue Vue过渡该组件仅提供...
  • 在实际开发工程化vue项目时,基本都是使用单文件组件形式,即每个.vue文件都是一个组件。最基本的就是UI组件了,我们一般会根据自己的喜好和项目的需要选择一个成熟的组件库来使用,iView组件库、饿了么的Element...
  • 父组件的代码(打开模态窗口的代码): <template> <div class="hello">...button @click="toggleModal">打开Modal对话框<...Modal v-show="showModal" v-on:closeme="closeme"></Mod...
  • vue-thin-modal提供了薄但功能强大的模式组件。 它的样式,过渡和内容是完全可定制的。 安装 $ npm install --save vue-thin-modal # or $ yarn add vue-thin-modal 用法 导入VueThinModal并将其安装在Vue构造函数...
  • 使用创建ModalVue组件。 项目设置 npm install --save @ocrv/vue-tailwind-modal 使用模态 全局安装 在您的主要js文件中: import VueTailwindModal from "@ocrv/vue-tailwind-modal" Vue . component ( ...
  • ant design vue modal实现拖拽

    千次阅读 2020-11-02 10:03:12
    1、globalModal.vue <template> <a-modal v-if="footer" :class="[modalClass, simpleClass]" :visible="showModal" :title="title" @ok="handleOk" @cancel="handleCancel" :width="width == '...
  • ant design vue a-modal实现拖拽弹窗

    千次阅读 2021-01-19 16:09:17
    index.vue 文件 <template> <a-modal :class="[modalClass, simpleClass]" :visible="visible" v-bind="$props" :footer="null" :bodyStyle="{padding:0}" @ok="handleOk" @cancel="handleCancel"&...
  • Web3Modal 适用于所有电子钱包的单个Web3 /以太坊提供商解决方案 介绍 Web3Modal是一个易于使用的库,可帮助开发人员通过简单的可自定义配置在其应用程序中添加对多个提供程序的支持。 默认情况下,Web3Modal库...
  • npm install sweet-modal-vue 例子 有关示例,请参阅。 浏览器兼容性 SweetModal应该可以在大多数主流浏览器上运行: Safari 9+ Firefox 20+ Chrome20+ 歌剧15+ 微软Edge 贡献 分叉存储库 运行npm install ...
  • vue使用弹出框a-Modal

    千次阅读 2020-11-23 21:07:15
    j-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭" > <j-modal/>
  • a-modal :title="title" :width="modalWidth" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" cancelText="关闭" :closable="closable" :keyboard="keyboard" :maskClosable...
  • 基于vuemodal实现(仿monday.com的modal) 写modal要有一个父组件,一个子组件。父组件中点击打开modal,子组件中关闭nodal. 这里通过v-if来实现modal的打开和关闭。 父组件 mondayModal.vue &lt;template&...
  • 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...
  • modal中传入数据至页面,并且页面刷新。 我在网上看到了 vue的几种页面传值方式, 下面展示一些 内联代码片。 //$ router this.$router.push({ query: { ids: record.id } }) 这种方式会刷新整个页面 // router-...
  • 主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • ant-vue modal框实现滚动条

    千次阅读 2021-04-09 14:15:21
    vue项目中,使用了ant-vue Ui组件库 需求是在列表展示的时,需要在modal框里遍历未知的多条信息 如果信息过多的话就很很长,效果如下:
  • vue2-bootstrap-modal Vue 2.x的Bootstrap模式组件 更新了软件包以排除bootstrap css和js,您需要安装bootstrap-loader 安装 npm install vue2-bootstrap-modal --save 用法 需要组件(全局或在另一个组件中) ...
  • 按道理modal是不影响后面页面的样式。 这是原先的样式 这是点击跳出modal后的样式 仔细看了控制台代码, 这是点击前的控制台截图 这是点击后控制台的截图 无缘无故多了个div! 最后发现,其实是我在table中写了v-...
  • 手写Vue弹窗Modal

    2020-12-20 18:05:18
    而同时因为其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 下载源 特征 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,309
精华内容 4,123
关键字:

modalvue

vue 订阅