vue2 element 弹出框拖拽会出现一层阴影问题解决方法

 更新时间:2024年01月11日 11:03:39   作者:凌霄玉阶非所愿  
这篇文章主要介绍了vue2 element 弹出框拖拽会出现一层阴影问题解决方法,因增加 draggable 属性导致我弹窗表单清空文本框时,从右向左选中字体会出现拖拽阴影效果,本文给大家介绍vue2 element 弹出框拖拽会出现一层阴影问题解决方法,感兴趣的朋友一起看看吧

问题如图所示:

因增加 draggable 属性导致我弹窗表单清空文本框时,从右向左选中字体会出现拖拽阴影效果

去掉 draggable 即可

<template>
  <div class="sys-jobTrigger-container">
    <el-dialog
      :visible.sync="state.isShowDialog"
      draggable
      :close-on-click-modal="false"
      width="900px"
    >
      <template #header>
        <div style="color: #fff;">
          <el-icon
            size="16"
            style="margin-right: 3px; display: inline; vertical-align: middle;"
          >
            <ele-Edit />
          </el-icon>
          <span> {{ props.title }} </span>
        </div>
      </template>
      <el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item
              label="触发器编号"
              prop="triggerId"
              :rules="[
                {
                  required: true,
                  message: '触发器编号不能为空',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="state.ruleForm.triggerId"
                placeholder="触发器编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="触发器类型">
              <el-select
                v-model="state.ruleForm.triggerType"
                style="width: 100%;"
              >
                <el-option
                  value="Furion.Schedule.PeriodTrigger"
                  label="间隔"
                ></el-option>
                <el-option
                  value="Furion.Schedule.CronTrigger"
                  label="Cron表达式"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :xs="24"
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
            class="mb20"

到此这篇关于vue2 element 弹出框拖拽会出现一层阴影问题的文章就介绍到这了,更多相关vue2 element 弹出框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-electron使用serialport时问题解决方案

    vue-electron使用serialport时问题解决方案

    这篇文章主要介绍了vue-electron使用serialport时问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 浅谈Vue父子组件和非父子组件传值问题

    浅谈Vue父子组件和非父子组件传值问题

    本篇文章主要介绍了浅谈Vue父子组件和非父子组件传值问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • vue3使用mitt.js实现各种组件间的通信

    vue3使用mitt.js实现各种组件间的通信

    在vue工程中,除开vue自带的什么父子间,祖孙间通信,还有一个非常方便的通信方式,类似Vue2.x 使用 EventBus 进行组件通信,而 Vue3.x 推荐使用 mitt.js,可以实现各个组件间的通信,所以本文给大家介绍了vue3使用mitt.js实现组件通信,需要的朋友可以参考下
    2024-05-05
  • vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    这篇文章主要介绍了vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单,本文给大家分享个例子,给大家及时的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-11-11
  • vue拖拽组件vuedraggable使用说明详解

    vue拖拽组件vuedraggable使用说明详解

    这篇文章主要为大家详细介绍了vue拖拽组件vuedraggable的使用说明,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue 目录树的展开与关闭的实现

    vue 目录树的展开与关闭的实现

    Vue作为一款流行的前端框架,提供了一种数据驱动的方式来实现目录树,本文主要介绍了vue 目录树的展开与关闭的实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • Vue组件之间的通信你知道多少

    Vue组件之间的通信你知道多少

    这篇文章主要为大家详细介绍了Vue组件之间的通信,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 使用Vue3实现倒计时器及倒计时任务的完整代码

    使用Vue3实现倒计时器及倒计时任务的完整代码

    文章介绍了如何使用Vue3和Element-plus开发一个倒计时器和倒计时任务管理界面,倒计时器具备手动设置、开始、暂停和重启功能,文章还提供了倒计时器的完整代码,包括HTML、JavaScript和CSS部分,感兴趣的朋友一起看看吧
    2024-11-11
  • Vue.js函数式组件的全面了解

    Vue.js函数式组件的全面了解

    函数式组件就是函数是组件,组件是函数,它的特征是没有内部状态、没有生命周期钩子函数、没有this(不需要实例化的组件),这篇文章主要给大家介绍了关于Vue.js函数式组件的相关资料,需要的朋友可以参考下
    2021-10-10
  • vue+django实现一对一聊天功能的实例代码

    vue+django实现一对一聊天功能的实例代码

    这篇文章主要介绍了vue+django实现一对一聊天功能,主要是通过websocket,由于Django不支持websocket,所以我使用了django-channels。,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-07-07

最新评论