近期知识小结（三）

最新推荐文章于 2024-01-22 14:45:16 发布

sone_yoonyul

最新推荐文章于 2024-01-22 14:45:16 发布

阅读量377

点赞数

分类专栏：学习之路文章标签： html5 pdf vue

本文链接：https://blog.csdn.net/sone_yoonyul/article/details/78876553

版权

学习之路专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在写了相当一段时间的后端之后，主管决定磨练磨练我写前端的能力，故最近都会扑在js和vue上面，那么，就来梳理一下这些日子以来我遇到的前端的一些问题和解决的方法吧！

1.如何在页面上嵌入一个部分显示pdf文档

本来想用pdf.js来实现的，但是偶然发现，HTML5本身就支持这个功能，只需要一条语句就能实现：

<div class="article">
    <iframe id="showPdf" height="753px" width="745px"></iframe>
</div>

就是这个<iframe>标签的功劳啦！pdf文件的文件路径需要用src属性引入，但注意，最好不要直接在标签内写，因为ie11在这里有bug（在这里我要嫌弃它两秒钟），可能会显示不了，所以要在js语句中这么写：

$('#showPdf').attr('src','/static/pdf/河海云ER.pdf');

这样才能兼容所有浏览器。

2.vue中动态属性的写法

当我们需要在标签所带属性中添加一些变量值时，需要在属性名称前加一个:号

<span><img class="download-file" :src="downloadUrl"></span>

3.类似第2点，如果点击超链接跳转时的url需要带一个变量（如id等等），则再配置router时，应该这么写：

{
  path:'detail/:id',
  components: {
    default:_import('index/detail'),
    headnav:Headnav,
    bottom:Bottom
  },
  name:'详情'
}

4.如何去掉pdf展示插件的工具栏（不允许用户下载的时候要这么做）

原来是这样的：
这里写图片描述

去掉之后的效果：

这里写图片描述

有没有人像我一样，找遍了iframe的属性，前前后后弄了非常久，都无法实现这个功能，后来忽然发现，使用<embed>也可以展示pdf文件，并且它可以去掉工具栏！！！

<embed src = "/static/pdf/河海云ER.pdf#toolbar=0&navpanes=0&scrollbar=0" height="753px" width="745px" type="application/pdf"><!--type="application/pdf"这个属性要加上，否则会显示该插件无法加载-->

5.$nextTick()函数

我在写一个子目录展开功能时，需要对其div高度进行动态的判断，然而发现无论我怎么获取它的高度，都是上一次渲染之后的高度，而不是本次渲染完成之后的高度。后来发现，是因为我这个获取高度的函数写在methods里定义的函数中，这样是不可以的，因为每次执行这个函数的时候dom都尚未渲染完，所以获取的只能是上一次渲染的高度数值。这就需要用到$nextTick()函数了：

        this.$nextTick(function(){ //当dom渲染完成后执行的函数
          let childDiv = this.$refs.childElement;
          let height = childDiv.offsetHeight;
          if(height > 80){
            this.openBtn = true;
          }
        })

6.vue中数组的值改变与页面实时刷新

我在代码中需要将一组元素与数组中的值进行绑定，但发现只有刚进页面时值是改变的，无论我怎么修改数组中的值，页面都似乎没有进行刷新一样。这其实是一个坑：不熟悉vue的同学，肯定会认为既然一个普通类型的变量能够触发元素刷新，那么数组中的某个值发生改变，同理也能触发刷新。实际上并没有。
原因是：vue是通过检测get和set方法才知道数据是否更新，但数组没有，因此我们需要对数组的元素手动进行触发。

this.$set(this.hasmore, key, false);  //另一种写法是Vue.set(target,key,value);

这样就能进行实时刷新啦！

参考资料：
vue.js中$set与数组更新
 vue 绑定数组里面对象变化无法更新view

7.打印iframe中的内容

由于兼容性需要，后台上传的文档都要转换成.html文档在前端进行展示，然鹅在进行页面打印时，不能直接使用window.print()方法，因为它只能将整个页面打印下来，而我只想打印文档正文，那么打印的js语句可以这么写：

var iframe = document.getElementById('htmlFile');
iframe.contentWindow.focus();
iframe.contentWindow.print();

先获取iframe中的焦点，然后进行打印，就可以啦！！经测试可兼容ie11、chrome以及FF。

8.几个有用的css3样式

CSS3 background-size 属性
定义：background-size 属性规定背景图像的尺寸。
用法：background-size: length|percentage|cover|contain;
值及描述：
length—设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
percentage—以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
cover—把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain—把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

这个样式的主要作用是帮助我们设置div的背景图片的显示模式，以达到我们想要的效果。

CSS3 text-overflow 属性
定义： text-overflow 属性规定当文本溢出包含元素时发生的事情。
语法： text-overflow: clip|ellipsis|string;
值及描述：
clip—修剪文本。
ellipsis—显示省略符号来代表被修剪的文本。测试
string—使用给定的字符串来代表被修剪的文本。

有了这个属性之后，我们可以非常方便地实现多出的文本用”…”代替的功能，以前我只能使用if语句+substring(0,60)+“…”的方法，非常具有特定性而且修改起来很麻烦，那么知道这个属性之后，就能直接使用text-overflow:ellipsis;来使文字只截取在该div内的长度，并自动加上“…”啦，也不需要对文本长度进行判断，可以说是十分方便了。

参考资料：
CSS3 background-size 属性
 CSS3 text-overflow 属性

9.vue控制输入框的输入状态

有时候我们会想要根据某个操作来控制输入框是否允许输入，那么这个时候可以这样写：

<input type="text" :disabled="flag">
data:{
  flag:true
}

只要修改flag的值，input的disabled的值就会随之改变。

进阶版：根据复选框勾选的状态来控制输入框的状态。

<input type="checkbox" v-model="flag">
<input type="text" v-model="value" :disabled="!flag">
data:{
  flag:true,
  value:''
}

即当复选框勾选时，输入框的disabled属性值为false，允许输入。

10.bootstrap validator的callback函数

以前一直认为，bv的callback函数是只能用if-else函数来返回布尔值，并且message的值只能定义一次，但其实不是，callback函数提供多样的方式让我们得到想要的检查结果：
之前语句是这样写的：

callback:{
    message:'不能为负数'
    callback：function(value,validator){
        if(value<0){
            return false;
        }else{
            return true;
        }
    }
}

这种写法着实有弊端，当我要判断value既不能为负数，又要保留2位小数时，这个语句就不好写了，而且message只能返回“不能为负数”，这当然是不合理的。
我查了很多资料之后发现，其实官网早就写好了，并且非常简单：

callback:{
    callback：function(value,validator){
        if(value<0){
            return {
                valid:false,
                message:'不能为负数'
            }
        }
        if(!/正则表达式/.test(value)){
            return {
                valid:false,
                message:'只能保留两位小数'
            }
        }
        return true;
    }
}