精华内容
下载资源
问答
  • 快速封装一个vue3的弹框组件

    宝子,你以为Vue3封装一个弹框组件很简单?

    大佬们好,我是季夏廿九,专业切图仔。🦞

    🌲🌲 前言

        之前一直没有自己去封装过一个弹框组件,但是觉得一个小小的弹窗组件那不是洒洒水小意思了。然后今天新项目中需要一个弹窗组件,所以我就做了一个。不做不要紧一做发现还是有很多不同的小问题,然后就把遇到的问题和大佬们分享一下。

        开始先回顾一下需求,一个全局使用的公共弹框组件。那么就有几个要点:公共、全局、弹框,下面我们就针对这几个要点去一点点实现弹框组件。

    🍬🍬公共🍬🍬

        公共这个简单,相信在座的各位大佬肯定都是手拿把掐,轻轻松松就实现了。

        先实现一个主体内容,我的方法就是使用插槽和参数传递。例子只是简单的传递两个参数,一个标题内容一个控制打开和关闭的布尔值。主要涉及到Vue3两个Api的使用defineProps,defineEmits还有插槽的使用。

    <template>
        <Mask @click="close" /> // 蒙板层
        <div class="modal_all" v-if="visible">
            <slot name="header"> // 方便页面增加定制头部
                <div class="modal_header">
                    <p class="modal_header_title">{{ title }}</p>
                    <p class="modal_header_img" @click="close"></p>
                </div>
            </slot>
            <div class="modal_content">
                <slot></slot> // 开放弹框内容使用
            </div>
        </div>
    </template>
    <script lang="ts" setup>
    defineProps({
        visible: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
        },
    });
    const emit = defineEmits(['update:visible']);
    const close = () => {
        emit('update:visible', false);
    };
    </script>
    // 样式省略
    

    🍬🍬全局🍬🍬

        基本布局差不多了,下面就是全局注册,目的是为了不用每次使用每次都要引入。

        vue2在注册全局组件的时候,直接Vue.component('名称', 组件)就可以了,那么在vue3中怎么批量注册全局组件呐?提供一个install方法,使用app.use()自动调用。

    import Modal from './Modal/Modal.vue';
    import Mask from './Modal/Mask.vue';
    
    // 在script setup不能写name,所以在这里加一个
    const coms = [
      {
        name: 'Modal', // 使用组件的名称
        compent: Modal,
      },
      {
        name: 'Mask',
        compent: Mask,
      },
    ];
    
    export default {
      install: (app) => {
        coms.forEach((item) => {
          app.component(item.name, item.compent);
        });
      },
    };
    
    // main.ts
    import Common from './common/index';
    const app = createApp(App);
    app.use(Common);
    

    🍬🍬弹框🍬🍬

        其实弹框组件写到这里已经差不多了,那为什么要把弹框这个单独列出来说一下呐?

        相信各位大佬在日常工作中也遇到过定位和层级的问题,如果我们把需要定位的组件嵌套在 Vue 的某个组件内部,因为css各种层的原因我们在处理嵌套的定位、层级 和样式就会变得很困难,一不小心就会出现一些奇奇怪怪的问题,那么怎么去避免这个问题?下面就要使用到Vue3中另外一个传送门Api:Teleport

    Tipes: Teleport就是将我们的组件挂载到属性 to 对应的DOM元素中,类似一个任意门。

    先上代码:

    <teleport to="#mask_modal" v-if="visible">
        <div class="modal_cent">
            <Mask @click="close" />
                <div class="modal_all">
                    <slot name="header">
                        <div class="header">
                            <p class="header_title">{{ title }}</p>
                            <p class="header_img" @click="close"></p>
                        </div>
                    </slot>
                <div>
                <slot></slot>
                </div>
            </div>
        </div>
    </teleport>
    

    我们来看一下这样写之后的层级:

    D82692AD-F438-4E2E-B0FE-8FA0854EC896.png

    9FBF6ACC-6AB9-4FB4-9855-6302BA74BC92.png

    通过 to 属性,指定弹框组件渲染的位置与layput组件同级,但是 teleport 的状态 visible 又是完全由我们调用的组件控制,就避免了我们在嵌套组件的时候定位层级样式的问题。

        🌼🌼 至此,一个简单的公共弹框组件已经写的差不多了。然后在写这个组件的过程中我还是遇到了几个不算问题的问题😅。

    ❗️❗️❗️1.script setup中没法写name属性:

        如果没有用ts的话,可以再写一个script标签,在里面导出然后写name。如果使用ts,那么这个方法就行不通就会报错。那么就利用我上面写的方法,自己重新定义一下写一个对象那样。

    ❗️❗️❗️2.直接给全局组件加一个class加样式不生效:

        其实我们正常写公共组件,在使用的地方想直接在外层控制内部容器的样式,我们可以直接在外面加一个类名去增加样式,但是我在写这个弹框组件的时候却一直不生效,找了半天后来才发现原来是因为我使用了teleport,所以在解析的时候class不能被继承。同样要是组件内没有一个根组件同样会出现这样的问题。这样其实也没关系,我们在插槽内写内容自动撑开就可以了,相信各位大佬肯定不会像我一样搞这么傻的操作,哈哈。

    截屏2021-12-07 下午8.56.49.png

    🎉🎉🎉结语:

        其实一个弹框组件的封装还是很简单的,不过也算是积累了一点经验,把自己的项目实施落地。后面去封装更加复杂的组件也会比较有思路。不积硅步无以至千里,加油各位大佬!

    最后祝各位大佬学习进步,事业有成!🎆🎆🎆

    展开全文
  • vue-cli中封装一个弹框组件

    千次阅读 2018-09-13 14:00:05
    vue-cli中封装一个移动端的弹出层组件 这是一个提示框和对话框,例:   这是一个组件 eject.vue &amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;div class='kz-cont' v-show='...

    vue-cli中封装一个移动端的弹出层组件

    这是一个提示框和对话框,例

    这里写图片描述     这里写图片描述


    这是一个组件 eject.vue

    <template>
      <div class='kz-cont' v-show='showstate'>
        <div class='kz-wrapper' >
          <div class='kz-text'>
            <strong><slot name='text' ></slot></strong>
          </div>
          <div class='footer'>
            <div @click='tocancel' class='kz-btn'>取消</div>
            <div class='kz-btn' @click='took'>确定</div>
          </div>
        </div>
      </div>
    </template>
    <script>
      export default{
        name:'eject',
        props:['type','showstate'],
        methods:{
          tocancel:function(){
            this.$emit('tocancel');
          },
          took:function(){
            this.$emit('took');
          }
        }
      }
    </script>
    <style scoped>
      .kz-cont{position:fixed;left:0;right: 0;top:0;bottom: 0;z-index: 500;background:rgba(0,0,0,0.3);text-align:center;overflow: hidden;white-space:nowrap;}
      .kz-cont:after{content:"";display:inline-block;width:0;height:100%;visibility: hidden;vertical-align:middle;}
      .kz-wrapper{display:inline-block;vertical-align:middle;background:#fff;color:#333333;border-radius: 5px;max-width:100%;}
      .kz-text{text-align:center;padding:20px 75px;}
      .footer{display:flex;border-top:1px solid #E5E5E5;color:#488BF1;}
      .kz-btn{flex:1;padding: 12px;}
      .kz-btn +.kz-btn{border-left:1px solid #E5E5E5;}
    </style>
    

    在子组件调用使用

    <script>
      import Eject from './eject'
      export default{
        name:'demo',
        components:{
          Eject
        },
        data(){
          return {
            showa:false,
            showc:false,
            msg:""
          }
        },
        methods:{
          alerts(){
            this.showa=true;
          },
          confirms(){
            this.showc=true;
            this.msg="这是一个对话的弹窗";
          },
          okfall(){
            this.showa=false;
          },
          cancelfall(){
            this.showc=false;
          },
          okfall2(){
            this.showc=false;
          }
        }
      }
    </script>

    html代码

    <template>
        <div class='zk-box'>
          <div class='zk-flex zk-pd'>
            <div class='zk-btn' @click='alerts'>提示框</div>
            <Eject  type='alert' @took='okfall' :showstate='showa'>
              <span slot='tlt'>提示</span>
              <div slot='text'>这是一个提示弹窗</div>
            </Eject>
          </div>
          <div class='zk-flex zk-pd'>
            <div class='zk-btn zk-blue' @click='confirms'>对话框</div>
            <Eject  type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
              <span slot='tlt'>确认</span>
              <div slot='text'>{{msg}}</div>
            </Eject>
          </div>
        </div>
    </template>

    整体代码

    <template>
        <div class='zk-box'>
          <div class='zk-flex zk-pd'>
            <div class='zk-btn' @click='alerts'>提示框</div>
            <Eject  type='alert' @took='okfall' :showstate='showa'>
              <span slot='tlt'>提示</span>
              <div slot='text'>这是一个提示弹窗</div>
            </Eject>
          </div>
          <div class='zk-flex zk-pd'>
            <div class='zk-btn zk-blue' @click='confirms'>对话框</div>
            <Eject  type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
              <span slot='tlt'>确认</span>
              <div slot='text'>{{msg}}</div>
            </Eject>
          </div>
        </div>
    </template>
    <script>
      import Eject from './eject'
      export default{
        name:'demo',
        components:{
          Eject
        },
        data(){
          return {
            showa:false,
            showc:false,
            msg:""
          }
        },
        methods:{
          alerts(){
            this.showa=true;
          },
          confirms(){
            this.showc=true;
            this.msg="这是一个对话的弹窗";
          },
          okfall(){
            this.showa=false;
          },
          cancelfall(){
            this.showc=false;
          },
          okfall2(){
            this.showc=false;
          }
        }
      }
    </script>
    <style>
      .zk-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:4.5rem 0;}
      .zk-flex{flex:1;}
      .zk-pd{padding:0.5rem 0.1rem;}
      .zk-btn{display:block;line-height:0.88rem;text-align:Center;color:#fff;border-radius: 0.12rem;background:#488BF1 ;}
      .zk-blue{background:#488BF1;}
    </style>
    

    这就是封装好了的组件和使用方法,哪里需要弹窗直接调用就可以了

    展开全文
  • 主要介绍了vue弹出框组件封装,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 1.新建一个组件命名命名为alertBox.vue一.dom结构提示{{Message}}否是二.scriptexport default {props: ["isshowAlert", "Message"],data() {return {isShowDialogs: true};},methods: {isShowRefruct() {this....

    1.新建一个新组件命名命名为alertBox.vue

    一.dom结构

    提示

    {{Message}}

    二.script

    export default {

    props: ["isshowAlert", "Message"],

    data() {

    return {

    isShowDialogs: true

    };

    },

    methods: {

    isShowRefruct() {

    this.isShowDialogs = false;

    this.$emit("replaceChecked", "replace");

    },

    isShowAgree() {

    this.isShowDialogs = false;

    this.$emit("sureChecked", this.Message);

    }

    },

    watch: {

    isshowAlert() {

    this.isShowDialogs = this.isshowAlert;

    }

    }

    };

    三样式

    .paymentdetail_compontents {

    position: fixed;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    z-index: 33333;

    background-color: rgba(0, 0, 0, 0.6);

    /* display: flex; */

    .paymentdetail_div_box {

    width: 300px;

    background-color: white;

    border-radius: 5px;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    .paymentdetail_div1 {

    height: 90px;

    text-align: center;

    margin-top: 20px;

    .paymentdetail_person_box {

    height: 50px;

    margin-top: 20px;

    color: #685c5c;

    }

    .paymentdetail_div1_warn {

    color: #000;

    font-family: bolder;

    }

    }

    .paymentdetail_div2 {

    border-top: 1px solid #eee;

    /* display: flex; */

    span {

    /* flex: 1; */

    height: 39px;

    line-height: 39px;

    color: #5077aa;

    text-align: center;

    width: 50%;

    }

    .paymentdetail_div2_span {

    border-right: 1px solid #eee;

    color: #685c5c;

    float: left;

    box-sizing: border-box;

    }

    .paymentdetail_div2_span1 {

    float: right;

    }

    }

    }

    }

    4.使用props接收从父组件中接收的值

    props: ["isshowAlert", "Message"],

    5.在watch中监听弹框是否出现

    isshowAlert() {

    this.isShowDialogs = this.isshowAlert;

    }

    6.父组件中引入组件

    1.import alertbox from "./alertBox";

    2. components: {

    alertbox

    },

    3.dom结构

    4.

    data() {

    return {

    showAlert: "",

    alertMessage: "你好"

    };

    }

    5.

    methods: {

    replace_checked() {

    console.log(2222222);

    },

    sure_checked() {

    console.log(1111111);

    }

    }

    展开全文
  • vue封装弹框组件

    千次阅读 2020-05-28 20:43:24
    vue封装弹框组件 1、引入弹框组件 <Popout v-show="isPrpout" v-on:confirm="onConfirm" v-on:cancel="onCancel" /> 2、点击显示弹框 <button @click="onClick">点击</button> 3、在组建内使用 ...

    vue封装弹框组件

    1、引入弹框组件

    <Popout v-show="isPrpout" v-on:confirm="onConfirm" v-on:cancel="onCancel" />
    

    2、点击显示弹框

    <button @click="onClick">点击</button>
    

    3、在组建内使用

    import Popout from './Popout'
    export default {
      components: {
        Popout
      },
      data () {
        return {
          isPrpout: false
        }
      },
      methods: {
      
      	// 点击显示弹框
        onClick () {
          this.isPrpout = true
        }
      
        // 点击确定隐藏
        onConfirm (val) {
          console.log(val)
          this.isPrpout = false
        },
        
        // 点击取消隐藏
        onCancel () {
          this.isPrpout = false
        }
      }
    }
    

    组件代码

    <template>
        <div class="popout">    <!-- 弹框组件 -->
            <div class="popout_box">
                <div class="popout_box_top">
                    <h1>内容</h1>
                </div>
                <div class="popout_box_bot">
                    <p v-on:click="onConfirm">确定</p>
                    <p v-on:click="onCancel">取消</p>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          isPrpout: true
        }
      },
      methods: {
        //  点击确定
        onConfirm () {
          this.$emit('confirm',"确定111")
        },
        // 点击取消
        onCancel () {
          this.$emit('cancel',"取消111")
        }
      }
    }
    </script>
    
    <style scoped>
    .popout{
        width: 100vw;height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        left: 0;top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .popout_box{
        width: 80%;height: 25%;
        background-color: white;
    }
    .popout_box_top{
        width: 100%;height: 75%;
        background-color: tomato;
    }
    .popout_box_bot{
        width: 100%;height: 25%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .popout_box_bot p{
      width: 15%;height: 75%;
      background-color: #E6E6E6;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    </style>
    

    @ cc

    展开全文
  • 但别人的实现原理我们还是有必要知道的,今天我就来分享一个我独立封装的toast弹框组件 1、首先可以创建一个toast文件夹,用来放toast组件和它的js文件 2、然后在main.js文件中引入toast的js文件, 并将toast插件安装...
  • 3.全局挂载到vue对象上,方便全局调用 4.调用 第步编写名为confirm的页面,弹框的样式可在此页面自定义 <template> <div class="modal" v-if="isShow"> <div class="main"> <p ...
  • = null) this.closeEvent = false this.parentFact = this.$parent }, methods: { closeTier () { this.parentFact.popUp = false } } } </script> 组件内部放置一个solt标签可以在外部插入元素自定义结构,另外...
  • 这是封装组件 <template> <div class="dialog"> <div class="dialog-box"> // 其调用的组件slot传值问题,没有的话是显示默认值 <slot name="title">如果没传默认title</slot> ...
  • 使用vue封装一个弹框

    2020-09-25 09:39:00
    使用vue封装一个弹出框 在我了解的vue中,一般封装主要就是用的就是组件通信,即父传子,子传父,兄弟传值。如果这点不懂,去看看我的博客:vue组件通信 下面就说说,怎么使用vue来封装一个弹出框 下面的是父组件...
  • 在列表累的页面中最常见的就是增删改查,其中删除需要慎重操作,因为数据一旦删除就是永久性的不可逆的,所以在执行此类操作的时候,都会使用弹框进行二次确认,真的确定删除在执行删除操作,增强用户体验
  • VUE报错】vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property...
  • Vue 组件封装之 Toast 弹框

    千次阅读 2020-05-18 17:03:38
    实现弹框功能。
  • 组件 &amp;lt;template&amp;gt; &amp;lt;el-dialog title=&quot;提示&quot; :visible.sync=&quot;dialogVisible&quot; width=&quot;30%&quot; :...
  • Tipes: 封装弹框组件使用了Teleport,避免了组件嵌套可能导致的定位层级的隐患,还使用了defineProps,defineEmits,插槽增加了组件的拓展性。 ???????? 前言: 之前一直没有自己去封装过一个弹框组件,但是觉得一个...
  • Vue全局弹框组件封装

    2021-10-15 11:05:42
    Vue全局弹框组件封装前言效果图弹框组件popup-dialog.jsmain.js引入popup-dialog.js需要使用的地方使用方法 前言 最近在项目中自己封装一个记录一下 效果图 弹框组件 popup/PopupDialog.vue <template> ...
  • Vue 弹出框组件的完整封装过程

    千次阅读 2020-12-23 09:04:58
    引言因为项目搬砖需要,笔者从 2019 年 11 月份...写作本文有两个原因,一是对这段时间学习 Vue.js 的过程做一个总结;另外就是完成自己 2019 下半年在 GitChat 的写作目标,8 月份曾在一个知识星球公布了下半年写...
  • vue封装一个日历组件

    2019-07-19 11:20:51
    封装组件的代码如下 <template> <div class="calendar"> <!-- 选择日历的弹出层 --> <div class="model_mask" v-show="showtimemask" @click="showmask1()"> </div> <...
  • vue封装dialog弹框组件

    千次阅读 2020-05-31 22:51:07
    vue封装dialog弹框组件 dialog.vue <template> <div class="dialog" v-show="showMask"> <div class="dialog-container"> <div class="dialog-title">{{title}}</div> <div ...
  • vue3手动封装弹出框组件message 封装组件 <template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式 --> <!-- ...
  • components/home.vue <template> <div> <el-button @click="showDia">显示</el-button> <dialog-custom :dialogVisible="isShow" @close="closeDialog"></dialog-custom> ...
  • vue封装弹框

    2020-09-24 15:40:43
    我总结了两种觉得用着不错的封装弹框方法,今天分享一下给大家 1.组件内使用,可以使用插槽改变值 封装的组件中 html中 <template> <div class="dialog"> <div class="dialog-box"> <!-- ...
  • 1,准备组件popup // components文件夹中popup组件 <template> <view> <view class="show-box-bg wx-login-box"> <view class="conten"> <view class="titl">{{ popupMsg....
  • 1、建一个components文件夹,里面建一个Toast.vue文件 <template> <div class="toast">{{message}}</div> </template> <script> import { reactive } from 'vue' export ...
  • vue 封装自定义弹框

    2021-07-02 15:29:47
    1、弹框封装 <template> <div class="all-model" v-if="isShow" v-move> <div class="model-panel" :style="popStyle"> <div class="panel-head"> <span class="head-tit">{{ ...
  • vue自定义全局组件-弹框案例

    千次阅读 2020-12-24 10:19:31
    因为ElementUI上已经提供了一个弹框组件,但觉得elementUI的组件内容有点多,所有自己就封装了全局组件。自己封装的参考了elementUI组件的源码。 主要步骤如下 1,创建一个文件夹my-dialog 2,在my-dialog文件夹下...
  • iView 是一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品。 1、iView的特性 1) 高质量、功能丰富 2) 友好的API ,自由灵活地使用空间 3) 细致、漂亮的 UI 4) 事无巨细的文档 5) 可自定义主题 2、...

空空如也

空空如也

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

vue封装一个弹框组件

vue 订阅