12px、1px、滚动行为、vue中数组，对象设置问题

「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」

如何设置小于12px的字体

• 可以使用transform的scale属性，这是一个缩放属性，要注意的是它缩放的是整个元素的大小
• 如果没有明确的要求可以使用图片来代替那些小于12px的文字内容

移动端1px边框处理问题

• 拿到devicePixelRatio，直接设置为1/devicePixelRatio.
• 使用为元素来代替原目标元素，然后通过缩放功能来间接达到目的。具体步骤就是通过定位把伪元素定位到目标元素上方，宽高都是目标元素的2倍，边框设置为1px，在通过transform:scale(0.5)缩放为原来的一半即可，这时候就可以了（注意：这里是以二倍屏来做的解释，所以缩小为原来的一半，其它倍数的屏自行调整）
• 直接设置viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

a标签的骚操作

在日常开发中有时候会遇到点击某个按钮跳转到某个页面，这时候用户可能会想在新的标签页或者新窗口中打开目标内容，这时我们的这个按钮就可以用a标签来写，这时因为浏览器会通过a标签的herf属性来展示在新标签页或者新窗口中打开页面等内容：如下图

这里进入操控就是用a标签写的，右键即会出现上图内容，代码如下

 <a :href="`/control/${record.patrolExecutionNum}`">进入操控</a>

注意：herf的内容就是你要跳转的路由

滚动行为

• 用于路由切换想保持再某一位置的时候，写法如下

const router = new VueRouter({
    routes,
    scrollBeahvior(to,from,savedPosition){
        console.log(savePosition) //当点击浏览器上的前进后退时候会记录上个页面的位置
        return savedPosition ?savedPosition : {x:0,y:0}
    }
})

|| 和 && 运算符

a || b a为真则为a，a为假则为b

a && b a为真则为b，a为假则为a

通过this.$parent.XXX 可以获取到父组件中data中的值

ctrl+D多选，同时修改多个字段，ctrl+u去掉多选的字段

给组件绑定原生事件时，需要使用.native修饰符，如果不写，则表示这个事件是自定义事件（this.$on('click',function(){...})） <z-button @click.native="clickHandler">按钮

当操作数组或者对象的时候可能出现新增和删除一个项并没有响应式的情况，这是因为新增的项没有set和get方法，这是就要使用如下方法来解决

Vue.set(对象，'属性名'，值)
或者
this.$set(对象，'属性名'，值)
或者直接覆盖原对象
this.对象名 = {
    ...this.对象名，
    新属性：'属性值'
}