VUE使用element Ui dialog组件实现最大最小化，拖拽功能

已于 2024-01-11 17:42:34 修改
阅读量2.1k 收藏 14
点赞数 12
文章标签： vue.js
于 2024-01-11 14:30:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenbow_0619/article/details/135528543
版权

 最大化最小化在弹窗顶部使用按钮实现，提前下载icon图标

<template>
    <div class="app-container">
      <el-dialog
        v-dialogDrag
        class="ZDialog"
        :title="creditTitle"
        :modal="false"
        :fullscreen="isfullscreen"
        :visible="visible"
        :append-to-body="true"
        :show-close="false"
        width="86%"
        :close-on-click-modal="false"
        :class="isminimize ? 'isminimize' : ''"
        @close="closeDialog"
      >
        <div
          v-show="!isminimize"
          slot="title"
          class="medium"
          @dblclick="resetFull"
        >
          <div class="lefts">
            <span style="color: aliceblue;">{{ creditTitle }}</span>
          </div>
          <div class="icons">
            <i
              title="缩小"
              class="iconfont icon-zuixiaohua_huaban1"
              style="font-size: 24px"
              @click="minimize"
            ></i>&nbsp;
            <i
              title="关闭"
              class="iconfont icon-chahao"
              style="font-size: 24px"
              @click="closeDialog"
            ></i>
          </div>
        </div>
        <div v-show="isminimize" slot="title" class="horn" @dblclick="resetFull">
          <div class="lefts">
            <span style="color: aliceblue;">{{ creditTitle }}</span>
          </div>
          <div class="icons">
            <i
              title="还原"
              class="iconfont icon-huanyuan"
              style="font-size: 24px"
              @click="minimize"
            ></i>
          </div>&nbsp;
          <!-- <i
            title="关闭"
            class="iconfont icon-chahao"
            style="font-size: 24px"
            @click="closeDialog"
          ></i> -->
        </div>
        <div v-show="!isminimize" class="dialogBody">
          <slot name="body" solt="body">
            <el-tabs class="dialog-credit" v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane name="first">
                <span slot="label">
                  <span>信用承诺失信行为查询</span>
                </span>
                <div class="credit-title">
                  <div class="credit-left">
                    <el-input
                      size="small"
                      v-model="searchText"
                      placeholder="请输入投标单位名称"
                      class="search-area inputSearch"
                    >
                      <i class="el-icon-search" slot="suffix" @click="creditSearch"></i>
                    </el-input>&nbsp;
                    <span>提示：如果多次查询，系统显示最后一次查询结果；只查询投保金递交方式是投标保证金信用承诺函的投标人</span>
                  </div>
                  <div class="credit-reght">
                      <el-button type="primary" @click="queryBtn">查询</el-button>
                      <el-button type="primary" @click="PDFDownload">PDF下载</el-button>
                  </div>
                </div>
                <div class="credit-table">
                  <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%; min-height: 520px; max-height: 520px; overflow: auto;">
                    <el-table-column
                        type="selection"
                        align = 'center'
                        header-align = 'center'
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="creditId"
                        label="序号"
                        align = 'center'
                        header-align = 'center'
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="unitName"
                        label="投标单位名称"
                        align = 'center'
                        header-align = 'center'
                        width="260">
                    </el-table-column>
                    <el-table-column
                        prop="marginSubmit"
                        width="300"
                        align = 'center'
                        header-align = 'center'
                        label="保证金递交方式">
                    </el-table-column>
                    <el-table-column
                        prop="dishonestyIs"
                        width="300"
                        align = 'center'
                        header-align = 'center'
                        label="是否存在信用承诺失信行为">
                    </el-table-column>
                    <el-table-column
                        prop="Inquirer"
                        width="200"
                        align = 'center'
                        header-align = 'center'
                        label="查询人">
                    </el-table-column>
                    <el-table-column
                        prop="queryTime"
                        width="263"
                        align = 'center'
                        header-align = 'center'
                        label="查询时间">
                    </el-table-column>
                    <el-table-column
                        align = 'center'
                        header-align = 'center'
                        label="查看">
                        <template slot-scope="scope">
                            <i class="el-icon-search" @click="querySearch(scope.row.unitName)"></i>
                        </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="credit-pagination">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage4"
                      :page-sizes="[20, 30, 50, 100]"
                      :page-size="20"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="10">
                  </el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane
                v-if="$store.state.bid.bidInfo.collectType !== 0"
                name="second"
              >
                <span slot="label">   
                  <span>信用信息查询</span>
                </span>
                <div class="credit-title">
                  <div class="credit-left">
                    <el-input
                      size="small"
                      v-model="searchText"
                      placeholder="请输入投标单位名称"
                      class="search-area inputSearch"
                    >
                      <i class="el-icon-search" slot="suffix" @click="creditSearch"></i>
                    </el-input>&nbsp;
                    <span>提示：如果多次查询，系统显示最后一次查询结果；只查询投保金递交方式是投标保证金信用承诺函的投标人</span>
                  </div>
                  <div class="credit-reght">
                      <el-button type="primary" @click="queryBtn">查询</el-button>
                      <el-button type="primary" @click="PDFDownload">PDF下载</el-button>
                  </div>
                </div>
                <div class="credit-table">
                  <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%; min-height: 520px; max-height: 520px; overflow: auto;">
                    <el-table-column
                        type="selection"
                        align = 'center'
                        header-align = 'center'
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="creditId"
                        label="序号"
                        align = 'center'
                        header-align = 'center'
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="unitName"
                        label="投标单位名称"
                        align = 'center'
                        header-align = 'center'
                        width="260">
                    </el-table-column>
                    <el-table-column
                        prop="marginSubmit"
                        width="300"
                        align = 'center'
                        header-align = 'center'
                        label="保证金递交方式">
                    </el-table-column>
                    <el-table-column
                        prop="dishonestyIs"
                        width="300"
                        align = 'center'
                        header-align = 'center'
                        label="信用负面行为行为记录">
                    </el-table-column>
                    <el-table-column
                        prop="Inquirer"
                        width="200"
                        align = 'center'
                        header-align = 'center'
                        label="查询人">
                    </el-table-column>
                    <el-table-column
                        prop="queryTime"
                        width="263"
                        align = 'center'
                        header-align = 'center'
                        label="查询时间">
                    </el-table-column>
                    <el-table-column
                        align = 'center'
                        header-align = 'center'
                        label="查看">
                        <template slot-scope="scope">
                            <i class="el-icon-search" @click="querySearch(scope.row.unitName)"></i>
                        </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="credit-pagination">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage4"
                      :page-sizes="[20, 30, 50, 100]"
                      :page-size="20"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="10">
                  </el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </slot>
        </div>
        <!-- <div v-show="!isminimize" class="dialogFooter" v-if="isFooter">
            <slot name="footer" solt="footer">
            </slot>
        </div> -->
      </el-dialog>
    </div>
</template>
<script>
//   import "@/utils/dialogIndex"
  import "./icons/iconfont.css"
  export default {
    data() {
      return {
        isfullscreen: false, // 全屏
        isminimize: false, // 最小化
        creditTitle:'信用信息',
        queryState:false,
        activeName:'first',
        searchText:'',
        tableData:[
          {
              creditId: '1',
              unitName: 'XXXXXXXX投标人1',
              marginSubmit: '投标保证金信用承诺函',
              dishonestyIs: '否',
              Inquirer: '蝎子莱莱',
              queryTime: '2023-12-12 11:22:22',
          },{
              creditId: '2',
              unitName: 'XXXXXXXX投标人1',
              marginSubmit: '投标保证金信用承诺函',
              dishonestyIs: '否',
              Inquirer: '蝎子莱莱',
              queryTime: '2023-12-12 11:22:22',
          },{
              creditId: '3',
              unitName: 'XXXXXXXX投标人1',
              marginSubmit: '投标保证金信用承诺函',
              dishonestyIs: '否',
              Inquirer: '蝎子莱莱',
              queryTime: '2023-12-12 11:22:22',
          },{
              creditId: '4',
              unitName: 'XXXXXXXX投标人1',
              marginSubmit: '投标保证金信用承诺函',
              dishonestyIs: '否',
              Inquirer: '蝎子莱莱',
              queryTime: '2023-12-12 11:22:22',
          },
        ],
        currentPage4: 1,
      }
    },
    props:{
      isFooter:{ type: Boolean, default: false },
      visible:{ type: Boolean, default: false },
    },
    methods: {
      // 最小化
      minimize() {
        this.isminimize = !this.isminimize;
        if (this.isfullscreen) this.isfullscreen = !this.isfullscreen;
      },
      // 关闭弹窗
      closeDialog() {
        this.$emit('update:visible', false)
      },
      // 全屏
      IsFullscreen() {
        this.isfullscreen = !this.isfullscreen;
        if (this.isfullscreen) this.$emit("isfullscreen");
      },
      resetFull() {
      },
      handleClick(){
          
      },
      queryBtn(){},
      PDFDownload(){},
      handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
      },
      querySearch(val){
          window.open(`http://ggzy.yancheng.gov.cn/creditResult.html?wd=${val}`)
      },
      creditSearch(){
          console.log('qwqwq');
      },
    },
     watch: { 
    //   visible(val) {
    //     if (val) {
    //       const el = this.$refs[this.zDialogRef].$el.querySelector(".el-dialog");
    //       el.style.left = 0;
    //       el.style.top = 0;
    //     }
    //   },
    },
    directives: {
      dialogDrag: {
        bind(el, binding, vnode, oldVnode) {
          const dialogHeaderEl = el.querySelector(".el-dialog__header");
          const dragDom = el.querySelector(".el-dialog");

          dialogHeaderEl.style.cursor = "move";
          // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
          const sty =
            dragDom.currentStyle || window.getComputedStyle(dragDom, null);
          // const fixedX =
          // const fixedY =
          dialogHeaderEl.onmousedown = e => {
            // 判断当前是否为全屏状态
            const path =
              event.path || (event.composedPath && event.composedPath());
            const isFull = path.find(s => {
              if (s.className === undefined) {
                return false;
              } else {
                return s.className.indexOf("is-fullscreen") > -1;
              }
            });
            if (isFull !== undefined) {
              return;
            }
            const isMinix = path.find(s => {
              if (s.className === undefined) {
                return false;
              } else {
                return s.className.indexOf("isminimize") > -1;
              }
            });
            if (isMinix !== undefined) {
              return;
            }
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - dialogHeaderEl.offsetLeft;
            const disY = e.clientY - dialogHeaderEl.offsetTop;
  
            // 获取到的值带px 正则匹配替换
            let styL, styT;
  
            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
            if (sty.left.includes("%")) {
              styL =
                +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
              styT =
                +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
            } else {
              styL = +sty.left.replace("px", "");
              styT = +sty.top.replace("px", "");
            }
  
            document.onmousemove = function(e) {
              // 通过事件委托，计算移动的距离
              const l = e.clientX - disX;
              const t = e.clientY - disY;
              // 移动当前元素
              dragDom.style.left = `${l + styL}px`;
              dragDom.style.top = `${t + styT}px`;
            //   const dom = e.path.find(s => s.querySelector('.el-dialog')).children[0]
              
            //   if (dom.offsetTop < 0) {
            //     dragDom.style.top = `0px`
            //   }
            //   if (dom.offsetLeft < 0) {
            //     dragDom.style.left = `0px`
            //   }
  
            //   // 将此时的位置传出去
            //   binding.value({x:e.pageX,y:e.pageY})
            };
  
            document.onmouseup = function(e) {
              const dragDom = el.querySelector(".el-dialog");
              const offsetLeft = dragDom.offsetLeft;
              const offsetTop = dragDom.offsetTop;
              const left = Number(dragDom.style.left.replace("px", ""));
              const top = Number(dragDom.style.top.replace("px", ""));
              const windowWidth = window.innerWidth;
              const windowHeight = window.innerHeight - 50;
              const offsetRight = offsetLeft + dragDom.offsetWidth - windowWidth * 1.6;
              const offsetBottom =
                offsetTop + dragDom.offsetHeight - windowHeight * 1.6;
              if (offsetLeft < 0) {
                dragDom.style.left = left - offsetLeft + "px";
              }
              if (offsetTop < 0) {
                dragDom.style.top = top - offsetTop + "px";
              }
              if (offsetRight > 0) {
                dragDom.style.left = left - offsetRight + "px";
              }
              if (offsetBottom > 0) {
                dragDom.style.top = top - offsetBottom + "px";
              }
              document.onmousemove = null;
              document.onmouseup = null;
            };
          };
        }
      }
    },
  };
</script>
<style lang="scss">
  .el-dialog {
    margin-top: 10vh !important;
  }  
  .no_select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
  }
  // 覆盖层元素增加可穿透点击事件
  .el-dialog__wrapper{
      pointer-events:none !important;
    }
      
    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
    .el-dialog{
      pointer-events:auto !important;
    }
  .isminimize {
    left: 20px;
    bottom: 20px;
    top: auto;
    right: auto;
    overflow: hidden;
  
    .el-dialog {
      margin: 0 !important;
      width: 240px !important;
      height: 43px;
      top: 0 !important;
      left: 0 !important;
    }
    .el-dialog__header {
      cursor: auto !important;
  
      .el-dialog__headerbtn {
        display: none;
      }
    }
    .dialogFooter {
      position: absolute;
      bottom: 0;
    }
  }
  .ZDialog {
    overflow: hidden;
    .is-fullscreen {
      width: 100% !important;
      left: 0 !important;
      top: 0 !important;
      margin-top: 0 !important;
      overflow: hidden;
      position: relative;
      .el-dialog__header {
        cursor: auto !important;
      }
      .el-dialog__body {
        height: 100%;
        padding: 0px !important;
        .dialogBody {
            height: 100% !important;
            max-height: none !important;
            padding-bottom: 120px !important;
        }
      }
      .dialogFooter {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: #fff;
      }
    }
    .el-dialog {
      .el-dialog__header {
        width: 100%;
        padding: 10px 10px 10px !important;
        display: flex;
        border-bottom: 1px solid #ccc;
        @extend .no_select;
        cursor: auto;
        .medium {
          width: 100%;
          height: 100%;
          display: flex;
          div {
            flex: 1;
          }
          .lefts {
            margin-top: 3px;
            span {
              text-align: left;
              font-size: 16px;
              color: #606266;
            }
          }
          .icons {
            display: flex;
            justify-content: flex-end;
            i {
              color: #5f6368;
              font-size: 18px !important;
              display: block;
              padding: 3px;
            }
            i:hover {
              background: #dcdfe6;
              cursor: pointer;
            }
            .el-icon-close:hover {
              background: #f00;
              color: #fff;
            }
          }
        }
        .horn {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          div {
            i {
              color: #5f6368;
              font-size: 20px !important;
            }
          }
          .lefts {
            flex: 4;
            margin-top: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span {
              font-size: 16px;
              color: #606266;
            }
          }
          .icons {
            display: flex;
            justify-content: flex-end;
            i {
              color: #5f6368;
              font-size: 18px !important;
              display: block;
              padding: 3px;
            }
            i:hover {
              background: #dcdfe6;
              cursor: pointer;
            }
            .el-icon-close:hover {
              background: #f00;
              color: #fff;
            }
          }
          // .centers {
          //   flex: 1;
          // }
          // .rights {
          //   flex: 1;
          // }
          i:hover {
            cursor: pointer;
            color: #000;
          }
        }
        .el-dialog__headerbtn {
          top: 0;
          font-size: 24px;
        }
      }
      .el-dialog__body {
        padding: 0px !important;
        .dialogBody {
            // max-height: calc(80vh - 50px);
            height: 670px;
            // box-shadow: inset 0px -2px 10px 1px #b0b3b2;
            overflow: auto;
            padding: 20px 25px 20px;
            &::-webkit-scrollbar {
              width: 4px;
              height: 8px;
            }
            &::-webkit-scrollbar-thumb {
              background: transparent;
              border-radius: 4px;
            }
            &:hover::-webkit-scrollbar-thumb {
              background: hsla(0, 0%, 53%, 0.4);
            }
            &:hover::-webkit-scrollbar-track {
              background: hsla(0, 0%, 53%, 0.1);
            }       
            .dialog-credit{
                line-height: normal;
                .credit-title{
                    display: flex;
                    justify-content: space-between;
                    .credit-left{
                        color: red;
                        .inputSearch{
                            width: 250px;
                            vertical-align: middle;
                        }
                        span{
                            line-height: 30px;
                        }
                    }
                }
                .credit-table{
                    margin-top: 10px;
                }
                .credit-pagination{
                    display: flex;
                    justify-content: center;
                    margin:10px auto;
                }
            }
        }
        .dialogFooter {
          padding: 5px 15px;
          border-top: 1px solid #ccc;
          text-align: right;
          .el-button {
            padding: 7px 15px;
          }
        }
      }
    }
    .ZDialog {
      display: flex;
      justify-content: center;
      .el-select {
        width: 100%;
      }
      .el-date-editor {
        width: 100%;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .el-dialog {
    // 覆盖层元素增加可穿透点击事件
    ::v-deep.el-dialog__wrapper{
      pointer-events:none;
    }
      
    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
    ::v-deep.el-dialog{
      pointer-events:auto;
    }
  }
</style>

wenbow_0619
关注
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6933
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
自定义完整功能的模态框组件
嗯呐的博客
04-19 2575
el-dialog模态框组件实现自定义标题，全屏，最小化等常用功能
jquery ui Dialog 添加最大最小化按钮控制
12-24
两个版本：一个替换ui close按钮，对三个按钮设立同样css;一个不替换，修改ui的css文件；完美打开多个对话框，并可以分别控制最大最小关闭。jquery文件没有包含进来。
element+vue2项目el-dialog弹窗显示的同时操作页面其他内容
最新发布
wsdnnnnnnnnn的博客
07-29 365
项目中遇到一个需求就是在弹窗显示的同时，可以操作页面内的其他元素，比如点击其他元素，显示其他弹窗。在弹窗出现的时候不能点击其他区域，是因为弹窗外面包裹了一层z-index数值比较大的div盒子，想要点击首先需要给el-dialog的遮罩层去掉，并且点击遮罩层不让弹窗消失。将该div的z-index层级数值改的小一点就可以了。
element-ui el-dialog实现弹窗最小化
weixin_42576467的博客
01-05 782
在 element-ui 中，可以通过 el-dialog 组件的「minimizable」属性来实现弹窗最小化。 你可以在你的 template 中如下使用它： <el-dialog:visible.sync="dialogVisible" :minimizable="true" @minimize="minimizeDialog" ></el-dialog> ...
封装element Dialog实现全屏、最小、双击回复原状和拖拽功能
Queen-Shir的博客
07-28 2519
https://www.jianshu.com/p/fa36f0ed9222
el-dialog 设置可以最小化
weixin_35752122的博客
01-05 813
el-dialog 是一个 Vue.js 的组件，你可以通过给它设置一个属性来使它可以最小化。 你可以在 el-dialog 组件中添加一个属性： minimizable: true
vue element 使用el-dialog实现放大 缩小功能
a83370892的博客
04-29 8240
环境： vue:2.5.16 element-ui:2.3.4 效果图： 缩小后的样子： 放大后的样子 问题： el-dialog本身只支持标题栏右上角有关闭按钮，故需要使用slot="title" 重写覆盖原本的标题栏。 除了这个查询了下官方API文档，其他都是简单的逻辑代码而已。 组件代码： <template> <div class="big-and-small-view"> <el-dialog class="D.
element ui dialog最大化_一起学Vue：UI框架(elementui)
weixin_42529148的博客
01-19 962
目标使用Vue+ElementUI构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。效果页面比如我们要实现这样列表、新增、编辑三个页面：列表页面新增页面编辑页面安装element我们使用 vue-cli@3 进行安装vue add element列表组件(TodoListWithUI.vue)与我们上次讲的无UI的列表组件逻辑基本都是一样的，我们这里主要用到了el-tabl...
vue中实现element-ui dialog的弹窗拖拽+水平方向伸缩
热门推荐
一点一滴
03-29 2万+
import Vue from "vue"; // v-dialogDrag: 弹窗拖拽+水平方向伸缩 /* * 使用方法 * 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可； * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 * 给dialog设置 :close-on-click-mo...
vue 点开弹窗最大化_Vue实现弹窗拖动放大缩小
weixin_29193259的博客
12-24 3450
Vue实现弹窗拖动放大缩小写项目的时候，看到了别人项目里弹窗都可以拖动，可以放大缩小，很是眼馋(主要是交互很人性化)，近几天抽出时间实现了下，特来给分享下,因为官方的Element-Ui没有自带的拖动效果，所以，我们使用的是网友提供的方法。先来看下图片效果效果图里实现了拖动，上下放大和左右放大，双击头部会实现全屏，因为普通的弹窗标签会在我们点击弹窗之外的部分的时候自动关闭，所以我们需要给弹窗部分增...
vuejs-dialog：轻量级，基于承诺的警报，提示和确认对话框
02-06
Vuejs对话框插件 轻量级，基于承诺的警报，提示和确认对话框。 演示版 v1.xx版中的重要更新 对话框将始终使用对象来解析。 （即，继续进行的回调将始终收到一个对象） 对于指令用法，上面（1）中返回的对象将包含一个节点。 节点是指令绑定到的元素（请参阅问题 由于样式已被提取到单独的文件中，因此必须明确包含样式（请参阅问题 ） 如果全局启用了加载程序，并且通过没有回调的指令触发了对话框，则在单击“继续”时将忽略加载程序 父节点上的自定义类注入（请参阅问题 ） 能够注册自定义视图。 这允许自定义逻辑，自定义按钮等（请参阅问题 ， ， ） 用于通过HTML脚本标签安装 该库已分为两
vue组件开发之-可拖拽对话框
anderlaw的博客
06-26 7172
测试
【element ui】问题集锦
Beam
03-29 2115
现象： 在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed=“right”，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。 解决： 官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。 监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。 代码： watch: { '$attrs.data': { handler (val) { this.$refs.com
二次封装 el-dialog 实现 全屏和最小化 功能
哈
06-28 674
【代码】二次封装 el-dialog 实现 全屏和最小化 功能。
Vue2+ElementUI 弹窗全局拖拽 支持放大缩小
朝花夕拾的博客
02-02 1200
【代码】Vue2+ElementUI 弹窗全局拖拽 支持放大缩小。
element 弹窗 实现拖拽 放大 拉伸
qq_38935512的博客
11-10 1738
使用：直接引入js, 在el-dialog上只是使用v-dialogDrag 就可以了，斜角拉升 有点问题，建议注释掉，我下面已经注释了。自定义一个指令，下方代码直接使用，针对的是element 弹窗。
element ui dialog可拉伸放大缩小和拖动
李程程的博客
09-05 8771
鼠标放到对话框头部可拖动对话框、双击头部可放大、放两侧可以拖动宽度、放下边可拖动高度、右下角高度宽度可以同时缩放。
ElementUI 之 Dialog 自定义移动最大化
码小哥的专栏
10-11 654
自定义ElementUI弹窗可移动最大化，vue自定义指令
系统采用VUE框架结合Element UI组件实现查询表单
07-15
你可以使用Vue框架结合Element UI组件来实现查询表单。Vue是一个用于构建用户界面的渐进式JavaScript框架，而Element UI是一个基于Vue的组件库，提供了丰富的UI组件和样式。 首先，你需要安装Vue和Element UI。可以通过npm或者yarn来进行安装。 ```shell npm install vue npm install element-ui ``` 接下来，在你的Vue项目中，你需要在入口文件中引入Vue和Element UI，并注册Element UI的组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 然后，你可以在你的组件中使用Element UI的组件来构建查询表单。例如，你可以使用`el-form`和`el-input`组件来创建一个简单的查询表单。 ```html <template> <div> <el-form :model="form" label-width="80px"> <el-form-item label="关键词"> <el-input v-model="form.keyword"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">查询</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { keyword: '' } } }, methods: { submitForm() { // 在这里处理表单提交逻辑 } } } </script> ``` 以上代码展示了一个简单的查询表单，包含一个输入框和一个查询按钮。你可以根据自己的需求进行组件的选择和配置，以实现更复杂的查询功能。 希望这个例子能帮助你开始使用Vue框架结合Element UI组件来实现查询表单。如果你有任何其他问题，请随时提问！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值