网络编程 
首页 > 网络编程 > 浏览文章

elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用:

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- import CSS -->
 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <style media="screen" type="text/css">
  #appLoading {
   width: 100%;
   height: 100%;
  }
  #appLoading span {
   position: absolute;
   display: block;
   font-size: 50px;
   line-height: 50px;
   top: 50%;
   left: 50%;
   width: 200px;
   height: 100px;
   -webkit-transform: translateY(-50%) translateX(-50%);
   transform: translateY(-50%) translateX(-50%);
  }
 </style>
</head>
<body>
<div id="appLoading">
 <span>Loading...</span>
</div>
<div id="app" style="display: none">
 <el-dialog title="提示" width="50%" :visible.sync="startUsingDialog" v-dialog_drag>
  <span> 您是否确定启用次记录"footer" class="dialog-footer">
   <el-button @click="startUsingSubmit()" type="danger" :loading="startUsingLoading">启用</el-button>
   <el-button @click="startUsingDiglog=false">取消</el-button>
  </span>
 </el-dialog>
</div>
<!-- import Vue before Element -->
<script src="/UploadFiles/2021-04-02/vue.js">

elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo


elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

ps:下面看下vue-elementUI 弹出框

<div class="dial-header">
   <el-dialog title="请选择适配器" :visible.sync="showFlag" style="width:900px">
   <div style="text-align: left; margin: 0;width:400px;" >
    <div class="adp" v-for="adapter in adapters" style="width:300px;height:30px;line-height:30px;border-top:none;margin:0px 0px 0px 40px">
    <el-radio :label="adapter.ip" style="width:200px;padding-left:40px" v-model="radio"></el-radio>
    <div style="display: inline-block;width:30px"><img v-if="!adapter.val" src="/UploadFiles/2021-04-02/grey.png">

总结

以上所述是小编给大家介绍的elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

上一篇:使用vue实现各类弹出框组件
下一篇:使用微信SDK自定义分享的方法
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。