精华内容
下载资源
问答
  • Vue点击按钮弹出页面

    千次阅读 2020-06-05 18:30:10
    先在data里面定义变量 visible:false, id:'', 来个a标签 <a @click="inpect(record)">核查</a> methods中的方法 inspect(record){ ...a-modal title="数据核查" v-model="visible" @ok="hand

    先在data里面定义变量

    visible:false,
    id:'',
    

    来个a标签

    <a @click="inpect(record)">核查</a>
    

    methods中的方法

          inspect(record){
            this.visible = true;
            this.id = record.id;
          },
    

    给个model

        <a-modal title="数据核查" v-model="visible" @ok="handleOk2()">
          <a-row :gutter="20">
            <a-col :span="18">
              <a-form-item label="核查状态">
                <j-dict-select-tag type="list" v-model="zhuang" style="width: 100%;" dictCode="verification_status" placeholder="请选择核查砖头"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="18">
              <a-form-item label="上传证明材料">
                <j-upload v-model="materials" :trigger-change="true"></j-upload>
              </a-form-item>
            </a-col>
          </a-row>
    
        </a-modal>
    

    好了,接着就是handleOk2方法了,后台根据id更新这条数据

          handleOk2(){
            var aaa = this.zhuang;
            var bbb = this.materials;
            var id = this.theid;
            this.axios.get('/basicdataverification/basicDataVerification/verification', { params: { 'id': id,'status': aaa,'materials':bbb } }).then((response)=>{
              console.log("返回的结果",response)
            })
    
            this.visible = false;
          },
    
    展开全文
  • 主要介绍了使用vue实现点击按钮面板的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下
  • 其次点击右箭头和外面的阴影部分以及任何一个路由,会使得从左侧移动过来的页面再移动回去。 核心代码: 附上所有代码 <template> <div> <mt-header fixed title="后台管理系统" class="m-...

    首先看效果:

    其次点击右箭头和外面的阴影部分以及任何一个路由,会使得从左侧移动过来的页面再移动回去。

    核心代码:

    附上所有代码 

    <template>
        <div>
            <mt-header fixed title="后台管理系统" class="m-header">
         <el-button icon="el-icon-s-operation" slot="left" class="m-icon" @click="nav=true"></el-button>
         <el-button icon="el-icon-more-outline" slot="right" class="m-icon"></el-button>
      </mt-header>
       <div class="m-navbar" v-if="nav" @click="nav=false"> </div>
      <transition name="nav">
            <div class="m-navba" v-if="nav">
                <dl>
                    <dt><span>后台管理系统</span><i class="el-icon-arrow-left" @click="nav=false"></i></dt>
                    <dd>
                        <router-link to="/robot/" >
                            <i class="el-icon-user" @click="nav=false"></i>
                            <span @click="nav=false">机器人</span>
                        </router-link>
                    </dd>
                    <dd>
                        <router-link to="/sensar/">
                            <i class="el-icon-user" @click="nav=false"></i>
                            <span @click="nav=false">楼宇</span>
                        </router-link>
                    </dd>
                    <dd>
                        <router-link to="/electricMeter/">
                            <i class="el-icon-user" @click="nav=false"></i>
                            <span @click="nav=false">电表</span>
                        </router-link>
                    </dd>
                    <dd>
                        <router-link to="/switch/">
                            <i class="el-icon-user" @click="nav=false"></i>
                            <span @click="nav=false">路灯</span>
                        </router-link>
                    </dd>
                    <dd>
                        <router-link to="/meteorological/">
                            <i class="el-icon-user" @click="nav=false"></i>
                            <span @click="nav=false">气象站</span>
                        </router-link>
                    </dd>
                </dl>            
            </div>
         </transition>
        </div>
    </template>
    
    <script>
     export default {
        data() {
            return {
                nav: false,
            }
        },
         methods: {
         }
     }
    </script>
    
    <style scoped lang="scss">
    .m-header {
        height: 86px;
        font-size: 36px;
        .m-icon {
          background: #26a2ff;
          border: #26a2ff;
          font-size: 43px;
          color: white;
        }
    }
    .m-navbar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: #000;
        opacity: 0.5;
        z-index: 2;
    }
    .m-navba {
        position: absolute;
        left: 0;
        right: 134px;
        top: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 1000;
        dl {
            color: black;
            dt {
                font-size: 40px;
                background: #D2E4F7;
                height: 120px;
                line-height: 120px;
                font-size: 45px;
                margin-top: -26px;
                span {
                    margin-left: 20px;
                }
                i {
                    margin-left: 160px;
                }
    
            }
            dd {
                height: 90px;
                line-height: 90px;
                font-size: 30px;
                margin-left: 20px;
                margin-right: 20px;
                margin-top: 10px;
                border-radius:16px;
                a {
                    text-decoration: none;
                    i {
                        margin-left: 20px;
                    }
                    span {
                        color: #08185E;
                        margin-left: 30px;
                    }
                }
            }
            dd:nth-child(2n) {
                background: #EFF3F7;
                // opacity: 0.3;
                border: 2px solid #EFF3F7;
            }
            dd:nth-child(2n+1) {
                background: #EFF3F7;
                // opacity: 0.5;
                border: 2px solid #EFF3F7;
            }
        }
    }
    .nav-leave {
      /* 定义 出场动画的 起始状态 */
      /* 只停留一帧 */
      transform: translateX(0px);
    }
    .nav-leave-active {
      /* 定义 出场动画 过程 */
      transition: all .4s ease;
    }
    .nav-leave-to {
      /* 定义 出场动画 结束状态(即:该动画要达到的目标状态) */
      transform: translateX(-600px);
    }
    /* 定义  入场动画 */
    .nav-enter {
      /* 定义 入场动画 的起始状态 */
      transform: translateX(-600px);
    
    }
    .nav-enter-active {
      /* 定义 入场动画 过程 */
      transition: all .4s ease;
    }
    .nav-enter-to {
      /* 定义 入场动画 过程 */
      /* 只停留一帧 */
      transform: translateX(0px);
    }
    </style>

    注意点:

    1. 点击按钮使得页面来回切换的核心原理是使用vue的 v-if属性,通过给对用的DOM节点添加click属性使v-if为true或者false来实现切换效果。
    2. 使用transition包裹的目的是为了实现动画的缓慢效果。
    3.  实现这种效果需要两个画布,第一个是类名为m-navbar,其position设置为fixed,设置半透明作为基层画布。第二个是类名为m-navba,其position设置为absolute,作为视图层画布(最上面的白色画布)(需要展现的内容都写在这个上面)。
    4. 页面从什么方向进来是由设置的动画决定的。
    5. 还有一个需要注意的点:基层画布不可使用transition包裹,否则会使得视图画布无法显示出来。

     

    展开全文
  • html: 详情: styles={top:> <Table class=task-table columns=columnsName4 data=taskDetailList></Table> ()>点击弹窗按钮 js: [removed] import http from
  • 今天小编就为大家分享一篇vue点击input弹出带搜索键盘并监听该元素的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • jQuery点击图标按钮弹出表单代码
  • vue点击按钮弹出视频

    千次阅读 2019-09-28 16:18:55
    vue点击button按钮弹出视频 <div> <button @click='checkVideoFun(item.video)'>点此观看完整视频</button> //外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗 <div class='mask' ...

    vue中点击button按钮弹出视频

    <div>
    	<button @click='checkVideoFun(item.video)'>点此观看完整视频</button>
    	//外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗
    	<div class='mask' v-if='videoState == true' @click='masksCloseFun'></div>
    	//弹窗
    	<div class="videomasks" v-if="videoState == true">
    	//视频:h5的视频播放video
    		<video :src='videoSrc' controls='controls' autoplay>
    		您的浏览器不支持 video 标签。
    		</video>
    	</div>
    </div>
    <script>
    	export default {
    		 data() {
       			 return {
       			 videoSrc:'',
          		 videoState:false,
       			 }
       		},
       		methods:{
       		//点击按钮出现弹窗播放视频
       			checkVideoFun(videos){
       			this.videoState = true;
       			this.videoSrc = videos;
       			},
       			masksCloseFun(){
       			this.videoState = false;
       			}
       		}
    	}
    </script>
    <style scoped>
    .mask{
    	position:fixed;
    	top:0;
    	left:0;
    	bottom:0;
    	right:0;
    	z-index:10;
    	background-color: #000000;
        opacity: .6;
    }
    // 内容层 z-index要比遮罩大,否则会被遮盖
    .videomasks{
        max-width: 1200px;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 20;
        transform: translate(-50%,-50%);
      }
      .videomasks video{
        width: 100%;
        height: 100%;
      }
    </style>
    

    知识点总结一:

    • v-if条件判断指令
    <div id="app">
        <p v-if="seen">现在你看到我了</p>
        <template v-if="ok">
          <p>哈哈哈!!!</p>
        </template>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        seen: true,
        ok: true
      }
    })
    </script>
    
    
    • v-else不能单独使用,必须紧跟在v-if 或者 v-else-if 的元素后面。
    <div id="app">
        <p v-if="ok">看不到我</p>
        <p v-else>可以看到我 哈哈哈哈</p>
    </div>
    <script>
        var i=new Vue({
            el:"#app",
            data:{
                ok:false
            }
        })
    </script>
    
    • v-else-if跟在v-if指令后的条件判断,它可以连续多块使用。
    <div id="app">
        <div v-if="type === 'A'">
          A
        </div>
        <div v-else-if="type === 'B'">
          B
        </div>
        <div v-else-if="type === 'C'">
          C
        </div>
        <div v-else>
          Not A/B/C
        </div>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
    </script>
    

    知识点总结二:h5的video标签

    <video src="movie.ogg" controls="controls">
    您的浏览器不支持 video 标签。
    </video>
    

    在这里插入图片描述

    展开全文
  • 接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中;  本次实现基于vuecli3 接下来,具体实现:  首先,我们先写一个demo组件  在点击出现弹出框的元素上把事件对象数据传递一下,以便...
  • 1. 效果图 2. 实现步骤 给最外层的div加个点击事件 @click="screenRule=false" 给点击的元素上面加上:@click.stop="screenRule=!...设置页面最外层(当用户点击页面内所有地方都会触发,把 div...

    1. 效果图

    在这里插入图片描述

    2. 实现步骤

    1. 给最外层的div加个点击事件 @click="screenRule=false"
    2. 给点击的元素上面加上:@click.stop="screenRule=!screenRule" 或者 @click.stop="screenRule=true"

    3. 步骤截图

    1. 初始化一个值,控制 div 显示和隐藏
      在这里插入图片描述
    2. 设置页面最外层(当用户点击页面内所有地方都会触发,把 div 隐藏)
      在这里插入图片描述
    3. 设置页面最外层(当用户点击该按钮时,是隐藏就显示,是显示就隐藏)
      在这里插入图片描述
    展开全文
  • window.open(‘excel.html’)
  • 文章目录概述实现过程Step1: 父组件设置Button按钮Step2: 这里使用了...需求:需要在先有的页面上增加一个“查看处理人”的按钮点击查看处理人,弹出子组件,将参数传递给子组件,初始化的时候onCre...
  • 所以只能在弹出页面点击取消实现关闭隐藏弹出框。这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏。然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在...
  • vue ant design点击弹出Mod页面 样图 第一步:创建list页面 <template> <a-row :gutter="24"> <div> <!-- <a @click="test()" style="padding-left: 5%">测试页面</a>--> &...
  • 移动端页面适配时,点击按钮弹出隐藏菜单或者下拉菜单的几种方式。
  • 这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 网上搜到的解决方案有两种, 一种是监听页面高度(我采用的这种) 一种是监听软键盘事件(ios和安卓实现方式不同,未采用) 下面是实现代码 ...
  • 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用,因为这里是路由页面,根据网上的思路,吊起输入键盘的时候页面的高度是变化的,监听[removed],判断...
  • 这其实是一个很常见的弹出层效果,鼠标点击按钮切换弹出层的显示,点击其他区域弹出层消失,用javascript绑定事件可能几行代码就搞定了,但是vue.js的状态驱动模式和javascript的事件驱动模式是不同的,下面是使用...
  • vue 点击按钮打开新的页面

    万次阅读 2018-11-29 17:18:48
    methods: { let details = this.$router.resolve({ name: "details", query: params, params:{catId:params.catId} }); window.open(details.href, "_blank") } ... 
  • 点击按钮弹出模态框实现详情:https://blog.csdn.net/qq_20565303/article/details/78734592 结果: 代码: <template> <div class="content"> <table class="layui-table"> <thead> ...
  • vue项目,弹出框把底部按钮顶上去

    千次阅读 2018-12-27 17:26:47
    vue项目,如下页面点击新增会出现个弹出框,在ios真机操作,弹出框出现后,背景会往上滑。 上图是在pc调试的,并不是有bug的页面,bug页面请参照上文描述。 如果你的页面上滑已经被你解决了(例如给背景设置固定...
  • 集成activiti,怎样在模态框内显示流程设计器的静态页面
  • 一、点击按钮弹框,然后传进值id 在button里面加一个点击事件@click="changedtime(scope.row.id,scope.row)" <el-table-column prop="change" label="采样时间修改"> <template v-slot="scope">&...
  • 前阶段做页面用到了这一块,其实网上有很多现成的组件可以使用,我这个是自己手写的,就此记录一下,我这里只提供该部分实现,因为每个人的需求不同,仅供参考: <!DOCTYPE html> <html> <head> ...
  • 1.mask层的层级(z-index)要比弹出的pop的层级低。 2.wow,写完啦,就是这么简单.... 完整代码: < template > < div > < div class ="mask" v-if ="showModal" @click ="showModal=false" > div >...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,883
精华内容 3,153
关键字:

vue点击按钮弹出页面

vue 订阅