VUE弹框组件（dialog组件）封装（基础功能、可传富文本）

已于 2024-02-22 15:12:12 修改
阅读量663 收藏 10
点赞数 12
文章标签： vue.js javascript ecmascript
于 2024-02-22 14:18:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45447899/article/details/136232353
版权

VUE组件封装部分：Dialog.vue

<!-- 弹框组件组件 -->
<template>
  <div :class="dialogClass" class="warmPrompt">
    <van-dialog
      v-model="dialogShow"
      :closeOnClickOverlay="closeOnClickOverlay"
      :overlay="overlay"
      :show-confirm-button="false"
      width="3rem"
    >
      <div class="warmPrompt_content">
        <div class="warmPrompt_content_title">{{ title }}</div>

        <div ref="content_static_wrapper" :style="boxShadow" class="warmPrompt_content_text">
          <div ref="content_scroll_wrapper" :style="{'textAlign': textAlign}">
            <div v-if="text">{{ text }}</div>

            <div v-if="textMini !== ''" class="warmPrompt_content_text--mini">{{ textMini }}</div>

            <div v-if="textHtml" v-html="textHtml"></div>
          </div>
        </div>

        <div class="warmPrompt_content_button">
          <van-button v-if="cancelButtonShow"
                      :color="cancelBtnColor"
                      block
                      class="cancelButton"
                      plain
                      @click="cancel">
            {{ cancelButtonText }}
          </van-button>
          <van-button :color="confirmBtnColor"
                      block
                      class="confirmButton"
                      plain @click="confirm">
            {{ confirmButtonText }}
          </van-button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: '温馨提示'
    },

    text: {
      type: String,
      default: ''
    },

    textHtml: {
      type: String,
      default: ''
    },

    textMini: {
      type: String,
      default: ''
    },

    textAlign: {
      type: String,
      default: 'left'
    },

    confirmButtonText: {
      type: String,
      default: '确认'
    },

    cancelButtonShow: {
      type: Boolean,
      default: true
    },

    cancelButtonText: {
      type: String,
      default: '取消'
    },

    overlay: {
      type: Boolean,
      default: true
    },

    closeOnClickOverlay: {
      type: Boolean,
      default: false
    },

    closeOnPopstate: {
      type: Boolean,
      default: false
    },

    cancelBtnColor: {
      type: String,
      default: '#212634'
    },

    confirmBtnColor: {
      type: String,
      default: '#FF4536'
    },

    dialogClass: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      boxShadow: '' // 内容可滚动阴影
    }
  },
  computed: {
    dialogShow: {
      get () {
        return this.show
      },
      set (val) {
        this.$emit('update', val)
      }
    }
  },
  watch: {
    // 监控内容数据判断是否产生阴影
    textHtml: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            let height1 = this.$refs.content_static_wrapper.getBoundingClientRect()
              .height
            let height2 = this.$refs.content_scroll_wrapper.getBoundingClientRect()
              .height
            if (height2 > height1) {
              this.boxShadow = 'box-shadow: 0 -0.1rem 0.1rem -0.1rem #d3d4d6 inset;'
            } else {
              this.boxShadow = ''
            }
          })
        }
      },
      immediate: true
    },
    text: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            let height1 = this.$refs.content_static_wrapper.getBoundingClientRect()
              .height
            let height2 = this.$refs.content_scroll_wrapper.getBoundingClientRect()
              .height
            if (height2 > height1) {
              this.boxShadow = 'box-shadow: 0 -0.1rem 0.1rem -0.1rem #d3d4d6 inset;'
            } else {
              this.boxShadow = ''
            }
          })
        }
      },
      immediate: true
    },
    textMini: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            let height1 = this.$refs.content_static_wrapper.getBoundingClientRect()
              .height
            let height2 = this.$refs.content_scroll_wrapper.getBoundingClientRect()
              .height
            if (height2 > height1) {
              this.boxShadow = 'box-shadow: 0 -0.1rem 0.1rem -0.1rem #d3d4d6 inset;'
            } else {
              this.boxShadow = ''
            }
          })
        }
      },
      immediate: true
    }
  },

  // 方法集合
  methods: {
    // 点击确认按钮
    confirm () {
      this.$emit('click')
    },
    // 点击取消按钮
    cancel () {
      this.$emit('close')
    }
  }
}
</script>

<style lang='scss' scoped>
/* 使用$符号可以标识一个变量;@import url(); 引入公共css类 */
@import "src/styles/variable";

.warmPrompt {
  font-size: 0.14rem;
  text-align: center;
  line-height: 1;

  &_content {
    // padding: 0.2rem 0.2rem 0;
    ::-webkit-scrollbar {
      display: none;
    }

    &_title {
      font-size: 0.18rem;
      font-weight: 700;
      color: #212634;
      letter-spacing: 0.02rem;
      padding: 0.3rem 0.15rem 0.1rem;
    }

    &_text {
      font-size: 0.16rem;
      color: #7A7D85;
      letter-spacing: 0.0015rem;
      line-height: 1.5;
      max-height: 3.8rem;
      overflow-y: scroll;
      text-align: left;
      padding: 0 0.2rem;
      pointer-events: all;
      word-wrap: break-word;

      /deep/ p {
        margin: 0 0 0.1rem;
        // margin-block-start: 0.1rem;
        // margin-block-end: 0;
      }

      &--mini {
        margin-top: 0.1rem !important;
        font-size: 0.12rem;
        color: #666666;
        letter-spacing: 0.0013rem;
      }
    }

    &_button {
      padding: 0.16rem 0 0.06rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      /deep/ .van-button::before {
        background-color: unset;
      }

      /deep/ .van-button--block {
        height: 0.36rem;
        line-height: 0.36rem;
        font-size: 0.16rem;
        padding: 0;
      }
    }
  }
}

.newDialogClass {

  /deep/ .van-dialog {
    border-radius: 12 * $px3;
    width: 320 * $px3 !important;
  }

  .warmPrompt_content {
    &_title {
      padding: 30 * $px3 15 * $px3 10 * $px3;
      letter-spacing: 0;
    }

    &_text {
      color: #212634;
    }

    &_button {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      padding: 20 * $px3 0 30 * $px3;

      .confirmButton {
        height: 48 * $px3;
        width: 240 * $px3;
        background-image: linear-gradient(90deg, #FF3F3F 3%, #FB234D 100%);
        border-radius: 100 * $px3;
        font-size: 18 * $px3 !important;
        color: #FFFFFF !important;
        font-weight: 700;
      }

      .cancelButton {
        margin-top: 20 * $px3;
        height: 20 * $px3;
        width: 240 * $px3;
        font-size: 18 * $px3 !important;
        color: #7A7D85 !important;
        font-weight: 700;
      }
    }
  }
}
</style>

js封装部分：dialog-plugin.js

import Dialog from '@/components/WarmPrompt'

let $vm
const defaultOptions = {
  show: false,
  title: '温馨提示',
  text: '',
  textHtml: '',
  textMini: '',
  textAlign: '',
  confirmButtonText: '确认',
  cancelButtonText: '取消',
  cancelButtonShow: true,
  closeOnPopstate: true,
  overlay: true, // 是否展示遮罩层
  closeOnClickOverlay: false, // 是否在点击遮罩层后关闭弹窗
  onClick: null,
  onClose: null,
  bgColor: '#D23228',
  cancelBtnColor: '#212634', // 取消按钮颜色
  confirmBtnColor: '#FF4536', // 确认按钮颜色
  dialogClass: '' // 弹框类名（新的按钮弹框样式）
}

Dialog.install = function (Vue, options = {}) {
  Vue.component(Dialog.name, Dialog)
  if (!$vm) {
    const PropsData = Object.assign({}, defaultOptions, options)
    const {
      show,
      title,
      text,
      textHtml,
      textMini,
      textAlign,
      confirmButtonText,
      cancelButtonText,
      cancelButtonShow,
      closeOnPopstate,
      overlay,
      closeOnClickOverlay,
      bgColor,
      cancelBtnColor,
      confirmBtnColor,
      dialogClass
    } = PropsData

    $vm = new Vue({
      el: document.createElement('div'),
      data () {
        return {
          showAttr: show,
          titleAttr: title,
          textAttr: text,
          textHtmlAttr: textHtml,
          textMiniAttr: textMini,
          textAlignAttr: textAlign,
          confirmButtonTextAttr: confirmButtonText,
          cancelButtonTextAttr: cancelButtonText,
          cancelButtonShowAttr: cancelButtonShow,
          closeOnPopstateAttr: closeOnPopstate,
          overlayAttr: overlay,
          closeOnClickOverlayAttr: closeOnClickOverlay,
          bgColorAttr: bgColor,
          cancelBtnColorAttr: cancelBtnColor,
          confirmBtnColorAttr: confirmBtnColor,
          dialogClassAttr: dialogClass
        }
      },
      render (h) {
        const {
          showAttr,
          titleAttr,
          textAttr,
          textHtmlAttr,
          textMiniAttr,
          textAlignAttr,
          confirmButtonTextAttr,
          cancelButtonTextAttr,
          cancelButtonShowAttr,
          closeOnPopstateAttr,
          overlayAttr,
          closeOnClickOverlayAttr,
          onClick,
          onClose,
          bgColorAttr,
          cancelBtnColorAttr,
          confirmBtnColorAttr,
          dialogClassAttr
        } = this
        return h(Dialog, {
          attrs: {
            show: showAttr,
            title: titleAttr,
            text: textAttr,
            textHtml: textHtmlAttr,
            textMini: textMiniAttr,
            textAlign: textAlignAttr,
            confirmButtonText: confirmButtonTextAttr,
            cancelButtonText: cancelButtonTextAttr,
            cancelButtonShow: cancelButtonShowAttr,
            closeOnPopstate: closeOnPopstateAttr,
            overlay: overlayAttr,
            closeOnClickOverlay: closeOnClickOverlayAttr,
            bgColor: bgColorAttr,
            cancelBtnColor: cancelBtnColorAttr,
            confirmBtnColor: confirmBtnColorAttr,
            dialogClass: dialogClassAttr
          },

          on: {
            click: () => {
              if (onClick) onClick()
            },
            close: () => {
              this.showAttr = false
              if (onClose) onClose()
            },
            update: (val) => {
              this.showAttr = val
            }
          }
        })
      },
      methods: {
        show (opt = {}) {
          console.log('已经调用了show方法')
          const mergeObj = Object.assign({}, PropsData, { show: true }, opt)
          const {
            onClick,
            onClose,
            ...otherProps
          } = mergeObj
          Object.keys(otherProps).forEach(key => {
            this[`${key}Attr`] = otherProps[key]
          })

          this.onClick = onClick
          this.onClose = onClose
        },

        hide () {
          this.showAttr = false
        },

        isShow () {
          return this.showAttr
        },

        update (val) {
          this.showAttr = val
        }
      }
    })
    document.body.appendChild($vm.$el)
  }

  const { show, hide, isShow, update } = $vm

  Vue.dialog = Vue.prototype.$dialog = {
    show,
    hide,
    isShow,
    update
  }
}

export default Dialog

添加自定义组件：main.js

/* 添加自定义dialog插件 */
import Dialog from '@/plugins/dialog-plugin'
Vue.use(Dialog)

调用Dialog弹框组件

this.$dialog.show({
        title: '弹框名称',
        textHtml: `<div>
      <div style="font-size: 0.14rem; color: #222222; margin-top: 0.1rem; text-align: left">这是一段富文本</div>
    </div>`,
        confirmButtonText: '确认按钮',
        cancelButtonText: '取消按钮',
        onClick: () => {
        // 确认按钮点击操作
          this.$dialog.hide() // 隐藏弹框
        },
        onClose: () => {
          // 取消按钮点击操作
        }
      })
LJX丶小白
关注
  • 12
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue封装自己的组件库 02.封装dialog组件
begefefsef的博客
07-31 1468
title标题部分除了普通的标题内容外，也应该可以设置标题的样式，比如设置为h1红色的自定义标题内容，所以在这里我们就使用到了插槽，可以在使用时按照需求自定义标题内容和样式。4.2.0父子组件传值以及props验证不再赘述，之前内容已经介绍。4.3.1实现在组件调用时控制dialog组件的宽度以及位置。只需要在父组件中传递宽度和高度，并且在子组件中获取并且使用即可。top}">···。4.4.1在body中使用匿名组件...
vue3 表格组件封装复用
02-27
Vue3 实现表格业务封装，从底层的角度，去带着大家封装一个可编辑的表格。从而在基础的基础上，做一个层次的提升，增加面试通过的几率。帮助大家在开发过程中，提高代码的复用性。
vue移动端弹框组件的实例
10-17
今天小编就为大家分享一篇vue移动端弹框组件的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用VUE自定义组件封装数据字典实战
03-07
软件系统中，会有一些成组的常量值，来描述业务实体的属性，如性别、证件类型、审批状态等。我们通常称之为数据字典，作为系统后台管理的一个独立功能，来维护字典类型以及对应的字典值。后端功能和实现都比较简单，没什么好说的，本文档重点要说的是前端的封装。 对于数据字典，前端展现往往有三种常用的形式，下拉列表、单选按钮组和复选框组，其中，最常用是下拉列表，这里就以下拉列表的实现为例来说明，其他两种类似，不重复描述。 直接使用select组件，是不是可以呢？答案是可以用，但用起来比较繁琐，需要在页面加载的时候，调用后端API接口拿数据，在data中定义存放字典数据的变量，并且一个实体编辑页面，使用到字典属性往往不止一个，三五个也比较常见，这时候，需要定义多个变量来存放字典项以及加载数据，开发工作量变大且容易出错。 那有没有办法让使用变得更方便呢？答案也简单，就是自定义封装一个组件来实现。我们的目标是传入一个数据字典的类型编码，组件内部调用后端API，完成数据的加载与存储，在选择项变化时，自动更新绑定的对应的业务实体的属性值。同时，在业务实体的编辑页面，也能自动绑定和显示已选择的字典项。
Vue组件封装 ——dialog对话框组件
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-30 1万+
一、基础准备工作 1、创建一个基础的vue项目包 2、创建components文件夹，用于存放组件，新建dialog.vue组件，可以自己取个名字 <script> export default { name: "CatDialog", }; </script> 3、在main.js中引入组件 import CatDialog from "./components/dialog.vue"; Vue.component(CatDialog.name, CatDial.
element ui 对话框改 模仿苹果手机 预览视图
ZL3064436257的博客
11-16 811
图标可以自己自行替换 手机大小是写死的 可以自行修改。样式可以直接写在全局 也可以使用样式穿透写在组件中。
Vue组件解析：自定义弹窗组件ByDialog详解
weixin_48723799的博客
06-28 3862
在Vue.js前端开发中，弹窗组件是常见的交互元素之一。为了提高开发效率并保持代码的可维护性，我们可以创建自定义弹窗组件。本文将详细解析Vue.js结合ElementUi自定义弹窗组件ByDialog的实现原理和使用示例，并提供相关代码和注释。
Vue组件：自定义弹窗组件Dialog详解
工作的日常记录和平凡的生活分享
10-18 4144
项目中大量的模块因字段都比较少，因此添加和编辑用弹框的形式更加方便，但是UI的设计和现用的组件库的弹框组件差异比较大，只能自己动手封装这么一个组件了。通过自定义弹窗组件ByDialog，我们可以在Vue.js应用中创建高度定制化的弹窗功能。通过属性、事件和插槽的灵活运用，我们可以实现各种弹窗样式和交互效果。
Vue2对话框（Dialog）
Mr Dear的博客
07-21 1万+
整体样式模仿ant-design-vue Modal样式，同时阴影覆盖浏览器窗口，并可全屏显示
vue 封装一个Dialog组件
潇湘子的博客
09-11 636
基于element-plus封装一个Dialog组件。
vue2.0实现富文本编辑及文本内容展示
weixin_42477308的博客
07-30 1万+
vue2.0实现富文本编辑及文本内容展示
Vue v-model组件封装(类似弹窗组件)
10-15
主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
element tree封装为可控制只可选末级或都可选(1)
莫逸雪的博客
12-16 2197
要求一:只可选择末级节点的数据,所以采用了只有末级节点有checkdbox来控制. 要求二:选择末级节点情况下,是控制单选的,采用给每个节点加disabled属性,已选择时其他设置为不可选. 要求三:后台传的数据(共三级节点,有的只有二级影响checkedbox展示)需要拿到数据后进行过滤 要求四:实用性强,还需要满足节点都可选的业务,也就是说需要父组件传个flag值控制是都可选还是只有末节点可以传 封装的组件代码: <template> <vab-dialog ref="di
在vue中使用 dialog 弹窗
热门推荐
我的博客
12-16 4万+
使用弹窗进行交互可以提升用户体验度，使页面也变得简洁 官网介绍：http://element-cn.eleme.io/#/zh-CN/component/dialog#dialog-dui-hua-kuang  最简单的组成 1.  触发的按钮，此弹框一般都是点击按钮触发后弹出来的 &lt;el-button type="text" @click="dialogVisible = t...
VUE宝典之vue-dialog使用
最新发布
Kuangtian的博客
12-09 2163
Vue Dialog 是一个基于 Vue.js 的对话框插件，它让开发者可以在 Vue 项目中轻松地使用对话框。这个插件是在 Element UI 的基础上进行二次封装的，相比 Element UI，Vue Dialog 更加简洁、易于使用。
vue element dialog 弹窗单独组件
小小爪哇工程师的博客
12-16 2956
大家想要单独弹窗组件，我猜测应该是对表单的提交，这里演示表单弹窗，本人后端开发，有不对的地方勿喷。这就完成了一个弹窗单独组件的实现，至于父子组件传参可自行百度$refs和prop。//这里是控制弹窗是否显示的，可以看下哪里引用到了。'上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄'//用于改变弹窗子组件是否显示的属性。
vue el-dialog封装成子组件（组件化）
路虽远行则将至，事虽难做则必成。
10-18 2751
实际开发过程中我们经常听见组件化开发，但在实际开发过程中（没有人审查时）怎么方便来我们有时是因为时间不够，所以把所有代码写在一个页面。当业务逻辑复杂时可能会有1k多行虽然不能要求自己写出高效复用性高的组件，把dialog弹出框写成一个子组件抽走还是可以的当你把表单抽在就会发现代码少了很多。
vue3封装dialog弹框组件父组件点击显示
05-23
首先，你需要在父组件中引入 Dialog 弹框组件，并在父组件的 template 中添加一个触发显示弹框的按钮。例如： ```vue <template> <div> <button @click="showDialog">显示弹框</button> <Dialog v-model="dialogVisible"></Dialog> </div> </template> ``` 在上面的代码中，我们添加了一个按钮，当用户点击该按钮时，会触发 showDialog 方法。同时，我们引入了一个名为 Dialog 的组件，并将它的显示与隐藏与一个名为 dialogVisible 的变量绑定了起来。 接下来，在父组件的 script 中，我们需要定义 showDialog 方法以及 dialogVisible 变量。例如： ```vue <script> import Dialog from './Dialog.vue' export default { components: { Dialog }, data() { return { dialogVisible: false } }, methods: { showDialog() { this.dialogVisible = true } } } </script> ``` 在上面的代码中，我们首先引入了 Dialog 组件，然后在 data 中定义了 dialogVisible 变量，并将其默认值设置为 false。接着，我们定义了一个名为 showDialog 的方法，该方法将 dialogVisible 设置为 true，从而显示 Dialog 弹框组件。 最后，我们需要在 Dialog 弹框组件中添加一个关闭按钮，并将其与 dialogVisible 变量绑定起来。例如： ```vue <template> <div> <div class="dialog-mask" v-if="visible" @click="close"></div> <div class="dialog-wrapper" v-if="visible"> <div class="dialog-content"> <div class="dialog-header"> <h3 class="dialog-title">Dialog 标题</h3> <button class="dialog-close-btn" @click="close">×</button> </div> <div class="dialog-body"> <p>Dialog 内容</p> </div> </div> </div> </div> </template> <script> export default { props: { visible: { type: Boolean, required: true } }, methods: { close() { this.$emit('update:visible', false) } } } </script> ``` 在上面的代码中，我们添加了一个名为 close 的方法，该方法会将 dialogVisible 设置为 false，并通过 $emit 方法将更新后的值传递给父组件。同时，我们在弹框组件中添加了一个关闭按钮，并在按钮的 click 事件中调用 close 方法。 这样，当用户点击父组件中的按钮时，就会触发 showDialog 方法，从而显示 Dialog 弹框组件。当用户点击弹框中的关闭按钮时，会触发 close 方法，从而关闭弹框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值