精华内容
下载资源
问答
  • 1.国际化国际化插件:vue-i18n2.让多行内容显示一行,多余的用......显示宽高相等的图片,宽度为屏幕宽度,高度与宽度相等 .image-header position: relative width:100% height: 0 padding-top : ...

    1.国际化

    国际化插件:vue-i18n

    2.让多行内容显示一行,多余的用...表示

    white-space : nowrapoverflow: hiddentext-overflow : ellipsis复制代码

    3.显示宽高相等的图片,宽度为屏幕宽度,高度与宽度相等

    .image-header position: relative width:100% height: 0 padding-top : 100% img position: absolute left: 0 top: 0 width: 100% height: 100%复制代码

    重点是父元素的height设为0,padding-top设为100%

    4.转换时间的工具类

    /** * Created by solo on 2018/6/6. */export function formatDatetime(date, fmt) { if(/(y+)/.test(fmt)){ fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4-RegExp.$1.length)) } let obj = { "M+": date.getMonth() + 1, "d+": date.getDay(), "h+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds() } for(let key in obj){ if(new RegExp(`(${key})`).test(fmt)){ let str = obj[key] + '' fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)) } } return fmt}function padLeftZero(str) { return ("00" + str).substr(str.length)}复制代码

    使用

    let date = new Date(timestamp)let fmtDate = formatDatetime(date, 'yyyy-MM-dd hh:mm')复制代码

    5.给组件绑定原生事件

    复制代码

    只需要在@click后面加上.native就可以直接处理原生点击事件了

    6. vue中组件间传值

    6.1 父子组件间传值

    • 父组件给子组件传值,直接通过props传值
    复制代码
    • 子组件给父组件传值,通过 emit发送事件
    this.$emit('chooseType', type)复制代码

    父组件接收事件:

    复制代码

    6.2 非父子组件传值

    主要通过事件总线传值

    在根节点给 Vue 挂载一个空的 Vue 对象

    Vue.prototype.bus = new Vue();复制代码

    需要发送事件的组件里

    this.bus.$emit("change
    展开全文
  • vue中使用rem布局解析+大屏自适应 公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下。首先项目中,做过移动端的适配,也有现在的大屏需求,中间都离不开不一个单位rem,自适应看...

    vue中使用rem布局解析+大屏自适应
    公司内部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是没有认真的来总结下。
    首先项目中,做过移动端的适配,也有现在的大屏需求,中间都离不开不一个单位rem,自适应看起来就很麻烦,不过无惧困难,困难才会看到你说,哟,厉害了,我闪~,下面慢慢聊来。
    浅析rem
    首先rem是css单位,相比于px固定的像素单位,rem更加的灵活,还有现在也比较好的vm。如果从未了解过,可以先过过眼
    rem自适应。CSS3的REM设置字体大小
    font size of the root element.
    简单来说,rem就是根据html元素的字体大小来计算单位的。我们的需求就是说,根据不同的分辨率,我们元素的大小能够有所对应的变化,在视觉上能够做到很舒服的效果。想想我们在做pc端的时候,一般都是中间固定比如1200px像素,然后最小1200px,两边留白,这样我们无论放大缩小都不会影响效果。但是现在移动端各种屏幕的出现,适应性就更加的强烈。根据分辨率的不同让html的字体大小变化,我们在页面中写rem,由于rem是相对于根元素字体大小来计算的,那么就可以实现自适应的效果。
    移动端自适应——手淘flexible
    熟悉移动端的自适应方案的朋友对 rem 适应方案,肯定不陌生,最出名的就是阿里的 lib-flexible 方案。原理:flexible就是根据不同的屏幕算出html的font-size,通过js来动态写meta标签。
    事实上他做了这几样事情:

    • 动态改写<meta>标签
    • <html>元素添加data-dpr属性,并且动态改写data-dpr的值
    • <html>元素添加font-size属性,并且动态改写font-size的值

    比如我们在做移动端的时候,经常拿到的设计稿是640px或者750px。自己项目中就是640px,以此为例,自己在项目中为了计算方便,所以给html根元素设置的字体大小是100px,也就是在640px下面。这里注意,我们给html设置100px,这个是字体哦,所以最好在body设置一下字体大小。

    1. // 设置html元素的字体大小为100px
    2. // 所有的像素我们直接除以

    3. 640px —— 6.4rem

    4. 64px —— 0.64rem


    那么如果64px,对应我们写rem就是0.64rem,也不需要动用计算器去计算rem,需要多强的大脑呀(虽然有很多插件帮我们)
    修改flexible.js。640px下面的10就变成6.4

    v2-21e268c5714531607c9f4b76d1a9a15f_b.jpg


    这样,我们页面直接把px换算成rem,就可以实现自适应。(记住,自己这里以640px设计稿为基础,如果是750px就是除以7.5)。字号不使用rem
    我们都知道chrome的最小显示的字体是12px,如果字体用rem,计算出来小于12px,那么就也会以12px显示,而且我们不希望出现13px或者15px这样的奇葩尺寸,所以字体最好是用px来表示,至于适应,我们可以写媒体查询。
    vue中使用rem
    vue现在正是火的势头上,作者说明年估计3.0要出来了。那么在vue我们如果做移动端自适应怎么弄呢?安装flexible在命令行中运行如下安装:
    npm i lib-flexible --save-dev引入flexible在项目入口文件 main.js 里 引入 lib-flexible

    1. // main.js

    2. import 'lib-flexible'


    对于我们的index.html,最好是不要meta标签,flexible会自动添加上的,因为有一个判断。当然了,懒惰果然是最大的生产力,有的人觉得换算rem太麻烦,就出现了插件px2rem-loader,把px自动转化为对应的rem。但是呢,麻烦的就是如果引入外部的css文件,那么也会把px转化为rem。自己在项目中就是手动计算rem,用上面的方法,直接除以100,这个应该很简单吧,都是程序员,数学这个还是可以吧......
    大屏自适应
    你问我什么是大屏,当当当~

    v2-8f270223481d5e38a69c6ceef0e13ccf_b.jpg


    这个图片很熟悉吧,时刻数据的滚动,通俗的说就是在很大很大的屏上显示数据,怎么炫酷怎么来。
    我厂的效果类似于下面这样,但是更好看点,嗯,得自信不是。

    v2-fbbd224db225747d76251c6154199179_b.jpg


    这样的设计稿一般是1920*1080,然后需求就是大屏,放在大屏展示。其实实现的效果也是用的rem。当然之前也内部封装的缩放在body上来显示。
    心目中的理想效果就是无论窗口怎么变,我们的内容都保持原来的比例,并尽量占满窗口。大屏,你如果不希望展示更多的文本,还嫌麻烦,字体也可以使用rem,毕竟很方便。和上面移动端一样的方法rem+flexible就可以比较很好的展示了。这时候内部除以的数字就是19.2来计算html字体的大小了。
    终于写完了,本来想把大屏单独出来的,有很多的知识点,但是想想都是用的一样的技术,还是在一起吧,反正技术无好坏,就看怎样使用了。

    展开全文
  • 我们已经看到了Vue实例和组件的方法。计算属性类似于方法,但与方法相比有一些区别,我们将在本章中讨论。在本章的最后,我们将能够决定何时使用方法以及何时使用计算属性。让我们使用示例来了解计算属性。例 VueJs ...

    我们已经看到了Vue实例和组件的方法。计算属性类似于方法,但与方法相比有一些区别,我们将在本章中讨论。

    在本章的最后,我们将能够决定何时使用方法以及何时使用计算属性。

    让我们使用示例来了解计算属性。

             VueJs Instance
    FirstName :
    LastName :

    My name is {{firstname}} {{lastname}}

    Using computed method : {{getfullname}}

    vue_computeprops.js

    var vm = new Vue({   el: '#computed_props',   data: {      firstname :"",      lastname :"",      birthyear : ""   },   computed :{      getfullname : function(){         return this.firstname +" "+ this.lastname;      }   }})

    在这里,我们用名字和姓氏创建了.html文件。名和姓是一个使用属性名和姓绑定的文本框。

    我们正在调用计算方法getfullname,该方法返回输入的名字和姓氏。

    computed :{   getfullname : function(){      return this.firstname +" "+ this.lastname;   }}

    当我们在文本框中键入内容时,如果更改属性firstname或lastname,则函数会返回相同的内容。因此,在计算的帮助下,我们不必做任何特定的事情,例如记住要调用一个函数。通过计算,它会被自身调用,因为内部使用的属性会发生变化,即名和姓。

    在以下浏览器中也显示相同的内容。在文本框中输入文字,将使用计算功能更新该文字框。

    c5146045d02c497ebeb36cee71983f1f

    现在,让我们尝试了解方法和计算属性之间的区别。两者都是对象。内部定义了一些函数,这些函数返回一个值。

    在使用方法的情况下,我们将其称为函数,而将其称为属性。使用以下示例,让我们了解方法和计算属性之间的区别。

             VueJs Instance

    Random No from computed property: {{getrandomno}}

    Random No from method: {{getrandomno1()}}

    Random No from method : {{getrandomno1()}}

    Random No from computed property: {{getrandomno}}

    Random No from computed property: {{getrandomno}}

    Random No from computed property: {{getrandomno}}

    Random No from method: {{getrandomno1()}}

    Random No from method: {{getrandomno1()}}

    在上面的代码中,我们创建了一个名为getrandomno1的方法和一个带有函数getrandomno的计算属性。两者都使用Math.random()返回随机数。

    它显示在浏览器中,如下所示。多次调用方法和计算属性以显示差异。

    8569b88ad1904ee796a6189dc97d5112

    如果我们看一下上面的值,我们将看到从计算属性返回的随机数保持不变,而与调用它的次数无关。这意味着每次调用时,所有的最后一个值都会更新。而对于方法来说,它是一个函数,因此,每次调用它都会返回一个不同的值。

    获取/设置计算属性

    在本节中,我们将使用一个示例来了解计算属性中的获取/设置函数。

             VueJs Instance

    {{firstName}}

    {{lastName}}

    我们定义了一个绑定到fullname的输入框,fullname是一个计算属性。它返回一个名为get的函数,该函数给出了全名,即名字和姓氏。此外,我们将名字和姓氏显示为-

    {{firstName}}

    {{lastName}}

    让我们在浏览器中检查一下。

    86a1cf62a530414f83e54b813663b2fd

    现在,如果我们在文本框中更改名称,我们将看到以下屏幕快照中显示的名称中未包含相同的名称。

    4d81c967b8c14deb9a45261f2e5b8ab7

    让我们在全名计算属性中添加setter函数。

             VueJs Instance

    {{firstName}}

    {{lastName}}

    我们在全名计算属性中添加了set函数。

    computed :{   fullname : {      get : function() {         return this.firstName+" "+this.lastName;      },      set : function(name) {         var fname = name.split(" ");         this.firstName = fname[0];         this.lastName = fname[1]      }   }}

    它具有名称作为参数,除了文本框中的全名外,什么都没有。以后,它在空间上分割,并且姓和名被更新。现在,当我们运行代码并编辑文本框时,相同的内容将显示在浏览器中。由于设置了功能,名字和姓氏将被更新。如果编辑了任何内容,get函数将返回名字和姓氏,而set函数将对其进行更新。

    9c2631f5f978435bb44f1ee1f5fb9a45

    现在,文本框中键入的内容与上面的屏幕快照中显示的内容匹配。

    展开全文
  • 配置环境安装nodejs (https://nodejs.org)检验:node -vnpm -v创建项目vue init webpack business(目录名称)项目代码结构src 源码node_modules 第三方依赖config 项目统一配置build 项目构建单文件组件与vue中的路由...

    配置环境

    安装nodejs (https://nodejs.org)

    检验:

    node -v

    npm -v

    创建项目

    vue init webpack business(目录名称)

    项目代码结构

    • src 源码
    • node_modules 第三方依赖
    • config 项目统一配置
    • build 项目构建

    单文件组件与vue中的路由

    项目入口文件:main.js

    route:路由就是根据网址的不同,返回不同的内容给用户。

    :显示当前路由地址所对应的内容

    需求1:项目首页显示home.vue内容

    1,创建Home.vue组件,src/pages/home/Home.vue

    1c3bb6d26072422d8ec7c3ac45960b8b

    2,注册Home.vue组件

    src/router/index.js

    6813c42872e8432e863341b4d0d0b128

    需求2:当访问http://localhost:8080/list目录时,显示list组件内容

    需求3:组件间跳转,首页跳转到商品详细页

    d2c3111c6e5d4c3fa0188a6d87244a77

    使用标签实现组件间跳转。

    查看商品详情

    项目代码初始化

    开发移动端网页,需要配置以下内容:

    1,添加viewport标签

     

    禁止通过手指对页面放大或缩小,保证页面比例始终1:1

    2,引入reset.css

    重置页面的样式表,在不同的手机浏览器上默认的样式是不统一的,需要将不同手机的初始化样式做统一。

    main.js

     import './assets/styles/reset.css'

    3,引入border.css

    1像素边框问题,有些手机分辨率比较高,2倍屏或3倍屏。在css中写

    border 1px solid;这个1px指的是css像素,在2倍屏幕上它对应2个物理像素的高度...,为了解决这种多倍屏里1像素边框会被显示成多像素的问题,需要引入1像素边框的解决方案。

    main.js

     import './assets/styles/border.css'

    4,300ms点击延迟问题

    在移动端开发中,在某些机型上,某些浏览器上,当使用click事件时,click事件会延迟300ms执行,这样使用click事件体验就不好。解决方案:引入fastclick库。

    cnpm install fastclick --save

    将fastclick第三方包安装到项目依赖中

    --save:开发和生产环境都需要这个依赖包

    main.js

    import fastClick from 'fastClick'fastClick.attach(document.body)

    5.使用iconfont

    www.iconfont.cn 注册并登陆

    图标管理--->我的项目,创建项目

    59b7d5662ed6479aaf3793c307b8c781
    展开全文
  • 介绍今天文章重点介绍一些最佳的Vue.js开源项目。Vue.js是一个JavaScript框架,主要专注于在应用程序项目中开发用户界面。Vue是一个简单的最小核心,具有可逐步采用的堆栈,可以处理任何规模的应用程序。Vue从头开始...
  • 介绍今天文章重点介绍一些最佳的Vue.js开源项目。Vue.js是一个JavaScript框架,主要专注于在应用程序项目中开发用户界面。Vue是一个简单的最小核心,具有可逐步采用的堆栈,可以处理任何规模的应用程序。Vue从头开始...
  • 总的来说给我的第一映像就是有一点点像写react hook的感觉setup(props, this(上下文对象))该函数相当于一个生命周期函数,vue中过去的data,methods,watch等全部都用对应的新增api写在setup()函数中.执行时机在...
  • Vue获取屏幕高度

    万次阅读 2018-07-07 11:48:06
    1.data中定义 curHeight:0,//当前所需屏幕高度 /**获取屏幕高度 */  beforeMount() {  var h = document.documentElement.clientHeight || document.body.clientHeight;  var curHeight = h
  • 开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现。接下来我们一起看下它的配置及使用方式。首先我们先了解下他的配置参数:v-infinite-scroll="loadMore"表示回...
  • 项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把[removed]事件挂在到mounted mounted() { const that =...
  • VUE获取屏幕高度

    千次阅读 2020-08-18 09:39:36
    2.JS data() { return { clientHeight: '', ... // 获取浏览器可视区域高度 this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth; //console.log(self.cli
  • html: <div id="industrySectorScroll" :style="{ height: screenHeight + 'px' }"></div> js: export default { name: "industrySectorScroll", ... screenHeight: 0, // 屏幕高度
  • vue原生获取屏幕高度

    万次阅读 2018-07-09 16:09:44
    vue原生获取屏幕高度 1、全界面 2、组件中 vue原生获取屏幕高度 技术胖pos实战练习知识点 视频链接 1、全界面 .main{ float: left; width: 100%; height: 100%; background-color: rgb(240, 249, ...
  • vue中获取屏幕高度(封装使用) 我们js原生获取的方法在这里就不赘述了,有需要可以自行百度 在这里我们封装一个获取宽高的方法放在Vue实例上(方便我们在这个项目中进行引用),把下面这段代码放到main.js里即可...
  • vue 动态的获取屏幕高度

    千次阅读 2018-12-04 11:04:06
    大概的思路是,监听屏幕高度的变化,每当屏幕高度变化时,就重新获取屏幕高度,并且重新设置height. template &lt;div id="maindiv" :style="{height:(screenHeight-80)+'px'}" &...
  • 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...
  • pc端开发的时候,比如有个盒子需要跟着屏幕高度变化而变化,那么就需要设置他的高度 2.实现 在template中,以设置穿梭框的高度为例 <div> <span>选择收件角色</span> <el-transfer :...
  • 实现效果:方法:html:JS:&lt;script&gt; export default { data(){ return { clientHeight:'', } }, ... // 获取浏览器可视区域高度 this.clientHeight = `${document.documen...
  • 2.在mounted计算属性中给屏幕高度变量赋值 3.使用watch监听屏幕高度变化并调整自己想要改变div中的高度 这种方式仅针对于那种height属性百分比不生效,但是用具体的例如height:500px生效的结果 ...
  • Vue中div高度自适应

    千次阅读 2019-01-23 15:17:00
    Vue中尽量不使用dom的高度计算 <template>  <div :style="conheight"> </template> <script>  export default{  data(){  conheight:{ height:'' } ...
  • 当页面内容的高度不确定的时候 header 始终在顶部--- fixed。footer是随内容移动的 内容很少则footer在ye ian底部,当内容很多footer在内容的地步
  • 思路:1、先给 table 的高度绑定一个 值(height) 2、data中定义数据 ...3、获取高度计算自己需要的值),并赋值 4、钩子函数调用 <el-table :data="tableData" border style="width: 100%" :h...
  • Vue Iview table高度随浏览器窗口大小变化 在mounted中监听 <template> <div class="tables"> <Table class="table" :height="tableHeight" :columns="columns" :data="list" :loading=...
  • vue 获取屏幕宽高 width height

    千次阅读 2018-07-24 09:56:00
    * 获取屏幕宽高 */ Vue.prototype.getViewportSize =function(){ return{ width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, height: windo...
  • 先了解一下CSS3的相对长度单位(参考详细教程) :相对长度单位指定了一个长度相对于另一个长度的属性。...ex依赖于英文字母小 x 的高度ch数字 0 的宽度rem根元素(html)的 font-sizevwviewpoint width,视窗...
  • js和vue计算DOM元素距离底部的距离

    千次阅读 2020-09-29 16:12:39
    当前元素与底部的距离 = 可视区窗口高度 + 文档滚动高度 - 当前元素与页面顶部距离 - 当前元素高度 vue: window.innerHeight - e.target.getBoundingClientRect().y -e.target.getBoundingClientRect().height e是...
  • 作为前端人员,为了适配各种型号的电脑、手机,我们往往离不开屏幕分辨率的适配; 那么如何做好屏幕分辩率的适配呢,我总结了以下几点: 1.使用amfe-flexible,将px转换为rem,用于适配不同宽度的屏幕 ...最后在vue.c
  • 前言 示例版本为 Element-ui 2.13.1 + Vue 2.6.11 本人是做后台开发的,由于公司业务要求需要将前后台模块进行分离,两年...Element-UI 中的 el-table 提供了设置高度的选项,在代码中设置 height 属性就可以现在表格

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,248
精华内容 1,299
关键字:

vue计算屏幕高度

vue 订阅