精华内容
下载资源
问答
  • Vue.directive("move", { // inserted指令所在标签,被插入网页就触发 inserted(el) { // el是需要拖动盒子的标签 let father = el.parentNode; // 获取当前页面宽度减去盒子宽高度 let mx_ = father....
    // 哪个盒子需要移动给哪个盒子的标签添加v-move
    Vue.directive("move", {
      // inserted指令所在标签,被插入网页就触发
      inserted(el) {
        // el是需要拖动盒子的标签
        let father = el.parentNode;
        // 获取当前页面宽度减去盒子宽高度
        let mx_ = father.offsetWidth - el.offsetWidth;
        let my_ = father.offsetHeight - el.offsetHeight;
        el.onmousedown = function (e) {
          // 鼠标点击里面盒子获取x,y坐标
          let x = e.offsetX;
          let y = e.offsetY;
          father.onmousemove = function (e) {
            // 点击盒子里面触发鼠标移动事件获取x,y坐标
            let mx = e.clientX - x;
            let my = e.clientY - y;
            // 禁止移动盒子超出页面
            mx = mx > mx_ ? mx_ : mx;
            my = my > my_ ? my_ : my;
            mx = mx < 0 ? 0 : mx;
            my = my < 0 ? 0 : my
            // 赋值
            el.style.left = mx + 'px';
            el.style.top = my + 'px';
          }
        }
        // 鼠标松开
        el.onmouseup = function() {
          father.onmousemove = null;
        }
      },
    });
    // 复制直接拿走就用

    展开全文
  • vue自定义全局设置

    2020-03-05 14:57:34
    vue2.x中在static下新建一个serverConfig.js,vue3中在public下新建一个serverConfig.js const win = window || global win.apiConfig = { developmentURL: 'http://192.168.0.101:8080/wx/', productionURL: '...

    vue2.x中在static下新建一个serverConfig.js,vue3中在public下新建一个serverConfig.js

    const win = window || global
    win.apiConfig = {
      developmentURL: 'http://192.168.0.101:8080/wx/', 
      productionURL: 'http://xxxxx.cn/api'
    }

    然后在index.html页面里面引入js.

    在axios全局设置js里,设置baseURL

    // import axios from 'axios';
    import Nprogress from '@/plugin/Nprogress'
    import store from 'store/'
    import router from '@/framework/router'
    
    axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
    let apiURL = ''
    if (process.env.NODE_ENV === 'production') {
      apiURL = window.apiConfig.productionURL
    } else if (process.env.NODE_ENV === 'development') {
      apiURL = window.apiConfig.developmentURL
    } else {
      apiURL = window.apiConfig.textURL
    }
    
    axios.defaults.baseURL = apiURL;
    
    axios.defaults.withCredentials = true;
    
    axios.interceptors.request.use(
      config => {
        //根据参数判断是否在header添加Authorization/token
        config.headers.token = store.state.token || '';
        config.headers.userclient = '1';
        Nprogress.start();
        return config
      }, error => {
        return Promise.reject(error);
      }
    );
    axios.interceptors.response.use(response => {
      // 统一处理返回状态
      Nprogress.done();
      if (response.data.code == -3) {
        sessionStorage.clear();
        router.push('/');
        return;
      }
      return response.data;
    }, error => {
      console.log(error)
      // let err = error.response.data;
      Nprogress.done();
      /* if(document.querySelector('.notify')){
           return;
       }*/
    
    });
    export default axios;

    这样就不需要设置跨域了,

    // 跨域服务器代理 ^ 5.0.3
    // app.use(
    //   '/api', proxy(
    //     {
    //       target: 'http://xx.cn/api',
    //       changeOrigin: true,
    //       pathRewrite: {
    //         '^/api': ''
    //       }
    //     }
    //   ));

    以后如果需要修改服务器域名,就只需要设置serverConfig.js。

    展开全文
  • vue设置表格高度自适应

    千次阅读 2020-04-01 19:05:44
    20,section的padding:15,底部footer的高度39,顶部header的高度50 //设计原理为文档显示区的高度=(分页类的高度)+table高度+section的padding+底部footer的高度+顶部header的高度 this.gloable_tableHeight = n - ...
     <el-table
            size="medium"
            :default-sort="defaultSort"
            :data="tableList"
            ref="tab"
            class="mt20"
            :style="{'width':'100%'}"
            :height="gloable_tableHeight"
            v-loading="isLoading"
            @sort-change="changeTable"
          ></el-table>
    
    
    data(){
            return {
                gloable_screenHeight: 0,//浏览器窗口的文档显示区的高度
                gloable_tableHeight: null,//table的高度
            }
        },
        watch: {
            // '$data': {
            //     handler(newVal, oldVal) {
            //         let param = {
            //             path    : window.location.href,
            //             data    : this.$data
            //         }
            //         this.$store.dispatch('setCache',param);
            //     },
            //     // immediate: true,
            //     deep: true
            // },
            gloable_screenHeight: {
                handler(n, o) {
                    
                  // 初始化表格高度
                  if (n) {//监听窗口的ping文档显示区的高度的变化(90,15,39,50)分别代表分页的高度+padding:20+margin:20,section的padding:15,底部footer的高度39,顶部header的高度50
                     //设计原理为文档显示区的高度=(分页类的高度)+table高度+section的padding+底部footer的高度+顶部header的高度
                this.gloable_tableHeight =
                      n -
                      90-15-39-50+
                      "px";
                  }
                },
                  immediate: true,
                  deep: true
              }
        },
        mounted() {//第一次获取文档显示区的高度的变化
            this.gloable_screenHeight = window.innerHeight;
        },
        updated(){//实时监测文档显示区的高度的变化
            window.onresize = () => {
            return (() => {
              this.gloable_screenHeight = window.innerHeight;
            })();
          };
        },

     

    展开全文
  • vue设置页面的高度100%

    2020-11-03 10:52:37
    1.设置全局页面高度vuecli init的默认工程里面,App.vue 页面中加 //App.vue 页面中 <style> html,body,#app{ height: 100%; background:rgba(38, 24, 49,.6); } </style> 2.设置单个页面的...

    1.设置全局页面高度

    在vuecli init的默认工程里面,App.vue 页面中加 

     

    //App.vue 页面中
    <style>
      html,body,#app{
      height: 100%;
      background:rgba(38, 24, 49,.6);
    }
    </style>

    2.设置单个页面的高度100%

     

    用css3 的相对于视口的高度 vh

     

    <template>
    
        <div class="dataScreen " >
              <div style="height:100vh;" ></div>
        </div>
    
    </template>

     

    展开全文
  • vue 动态设置组件高度 虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play) 高度可定制,易于使用的优雅星级评定组件(类似于...
  • 一、首先我们先看vue项目中引入全局过滤器的方式: 1、先在src文件夹下新建JS文件夹,用来存放我们新建的js文件 2、在我们新建的JS文件夹下新建filters.js文件,存放过滤器的代码 // 时间戳转年月日时分秒 ...
  • vue全局引入less变量

    千次阅读 2018-11-09 08:18:37
    在项目中我们经常用less来定义一些全局变量,比如字体大小颜色,背景颜色,边框颜色,标题高度,按钮大小等等。 我们把这些less变量定义在const.less文件中,并在main.js,发现并不起作用。 解决方法为: 1、安装 ...
  • 设置 <style lang="less" scope> :root{ --themeColor:#00D98F; } </style> 使用 <style lang="less" scope> .test{ background-color: var(--themeColor); } </style> 通过JS改变 ...
  • 一,先看看全局组件的引用,就拿最常用的全局的暂无数据来举例,看看全局的是如何实现的。 Step1,首先在components创建一个公共的目录,NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面,index....
  • 开发移动端 当设置100vh时,在各个浏览器计算高度不同,Chrome和Safari浏览器会计算底部tabbar和顶部url地址栏,所以产生比预期高的值, 至此 可借助vh-check来帮助适配各个浏览器的兼容 使用方法 npm install ...
  • 在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托管在GitHub中,供下载并理解。 vue项目自动...
  • vue单页面设置高度100%全屏

    千次阅读 2020-04-23 19:25:54
    很多时候我们给单页面设置高度100%永远不会全屏 效果图 高度都是靠内容撑起来的 解决很简单 创建一个css html, body, #app{ height: 100%; margin: 0; padding: 0; } 然后引入全局 (引入到min.js) 现在看效果 ...
  • vue 使用less全局变量

    2019-06-26 17:12:51
    我们经常用less定义一些全局变量,比如头部的高度,比如主题的颜色,比如侧边栏的宽度,这时我们定义less 全局文件是有必要的,那如何在vue中使用呢? 我首先尝试着把common.less文件,放在main.js中,发现并不起...
  • 我们在使用这些变量的时候如果在每个组件中import引用的显得特别麻烦,而且感觉很蠢QAQ,但是全局引用的时候又会报错。这时就需要用到sass-resources-loader插件并进行相应的配置就可以解决问题,具体配置如下:1....
  • 项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把[removed]事件挂在到mounted mounted() { const that =...
  • vue 监听屏幕高度

    万次阅读 2017-12-08 11:18:25
    项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把window.onresize事件挂在到mounted mounted() { const ...
  • vue 全局样式指令

    2021-04-23 13:26:49
    // 设置元素的框类型 display: { inserted: (el, binding) => { el.style.display = binding.value }, update: (el, binding) => { el.style.display = binding.value } }, // 设置元素宽度 width:...
  • vue全局滚动条css

    2021-05-22 21:12:30
    全局样式APP.vue的style中设置如下代码: //App.vue /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 3px; /*滚动条宽度*/ height: 3px; /*滚动条高度*/ background-...
  • ant design vue的table表格高度设置

    千次阅读 2020-10-29 10:54:01
    因为有时候数据的不足会导致ant design vue的table表格撑不起来,影响美观,所以我通过/deep/来修改他的高度固定值让其有个足够的固定高度,从而解决问题。 /deep/ .ant-table-body{ min-height: 500px; } //或者 /...
  • Cascader 高度过长问题解决方案 // 可以在全局的公共 css 样式中设置为 .el-cascader-panel 添加固定高度 .el-cascader-panel { height: 300px; } 通过加了固定高度就可以恢复正常 一个小坑
  • 这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要使用calc来设置高度,然后给表格设置:height="tableH"的属性 <div class="table-wrapper" ref="tableWrapper" v-...
  • vue 获取元素高度

    千次阅读 2019-09-18 18:55:19
    <div ref="getheight"></div> <...// 获取高度值 (内容高+padding+边框) letheight=this.$refs.getheight.offsetHeight; // 获取元素样式值 (存在单位) letheight = window....
  • 播放器高度,可形如’100%’或者’100px’ width String 320px 播放器宽度,可形如’100%’或者’100px’ cover String 播放器默认封面图片,请填写正确的图片url地址Flash播放器封面也需要开启允许跨域访问 ...
  • vue监听浏览器高度变化

    千次阅读 2019-10-14 15:41:45
    1、设置变量: data() { return { clientHeight: document.documentElement.clientHeight } } 2、页面初始化时给onresize函数赋值: mounted() { window.onresize = () => { this.clientHeight = d...
  • vue设置背景占满全屏

    2021-06-26 21:55:58
    vue设置背景占满全屏 示例:如下图的顶部和左侧的空白区域: 解决背景图片占满全屏的问题如下: 1、首选要新建一个全局样式表global.css文件,代码如下: /* 全局样式表 */ html, body, #app { height: 100%; ...
  • vue设置局部水印

    2020-04-20 19:37:19
    局部水印设置,记得设置定位元素的高,或者js获取元素的宽高,再添加给加水印元素的父级元素,这里我只简单在行内写了个样式 页面布局 <template> <div class="table" ref="directrecordwp"> <...
  • 主要介绍了Vue 自适应高度表格的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 1、问题场景page1,page2都使用flexible移动端...}但是在page2引用的self.less里面设置了基准,竟然没有生效2、问题分析scoped属性在引用self.less的时候,使用了属性scopedvue中引入了scoped这个概念,设计思想...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,761
精华内容 2,704
关键字:

vue设置全局高度

vue 订阅