开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情

前言

这是三年前的一篇文章，记录在笔记本里了，发现当时自己也是有记录习惯的，但是没有一个载体，很多东西记着记着就找不到了。现在创建一个专栏，应该可以忘不记了

一、展开和收起并入最后一行同一行

跟在文字后面的不设置定位【设置两个展开文本（一个绝对定位，一个不定位）】
省略号放在展开before（伪元素）中
可以使用元素的scrollHeight获取当前内容高度

二、复制粘贴

两种方式：

插件：npm i clipboard

API: document.execCommand()

使用：

vue:

引入 import Clipboard from 'clipboard'

创建实例：const clip = new Clipboard (dom,{ text: () => text})

问题：点击事件第一次无法复制，之后都可以？

说明：在点击时先创建实例，不操作复制内容。第二次及以后会进行复制

解决：首先在mounted中进行new Clipboard 创建

JS: (移动端无问题方式)

html：
<input type="text" name="test" id="test" value="nihao" />

js：


var test = document.getElementById('test');  
test.select();  
test.setSelectionRange(0, test.value.length);  
document.execCommand('Copy');

三、音频显示进度条

需求：需显示进度条但是进度条不可拖动

vue-audio 插件【本地改造】

 <div class="audio-right">
            <div
              class="slider"
              id="slider"
              ref="slider"
              @mousedown="drag($event, 0)"
            >。。。。。
        

<script>  /** @description 音频进度条拖拽条
     *  */
    drag(event, flag) {
      return;
    ....
  }
</script>

四、从下往上弹出层

五、100% 100vh 区别

IOS里底部有安全区域时例如iPhone X 已上（底部有横线）使用100%，页面会自动减去安全区域，使用100vh则不会。

外层设置100%不会撑起div高度，只会由内部内容撑满；设置高度：100vh，高度为整个屏幕的高度。

六、滚动加载下一页

1、原生js

2、vue组件=====better-scroll

3、自定义指令

七、特殊样式集合

可滚动却不显示滚动条

不加时：安卓正常不显示，但是ios会出现滚动条，随后再消失，如下图

解决方法：全局样式可以加::-webkit-scrollbar {display: none;} 可以隐藏滚动条且可以滚动

八、scss使用特性

div {
  font: {
      weight: bold;
      size: 20px;
    } 
}

//变量
$width: 200px;

div {
	width: $width;
}

九、height 相关

max-height < height => max-height 重载 height

min-height > height => min-height 重载 height

min-height > max-height => min-height 重载 max-height

十、统一jquery标识符

let jq$ = jQuery.noConflict();

十一、 openinstall

www.openinstall.io/doc/

需求：

需要在极速版中发标按钮位置下载app

计划：

秉持着不发版的前提，将其调用功能安排到前端实现

通过openinstall 可以调用起app ，若没有app提示去应用中心下载

问题：

ios 调试过程中，发现极速版不能跳转到app，需要客户端修改内容

安卓没有app情况下不能跳转到去下载

讨论：

因为openinstall文档中没有支持安卓方面的api且ios也需要客户端修改

更改方案：

将openinstall方法放在客户端实现，暴露出一个方法，前端通过点击事件 postMessage方法调用

十二、ios 事件委托

点击事件放在body上,或者document委托事件，点击事件不会生效

解决：

委托事件需要添加到非html body的父级元素上

事件添加到可以点击的标签上（不要乱放）

十三、css3 动画

目的：弹窗消失术

C端可以做的酷炫一点，点击关闭弹窗可以一边缩放一边消失

transform: translate(-50%, 90%) scale(0)

translate 和scale 不能颠倒位置，会出现不一样的效果！！！

工作中遇到的问题总结

前言