wzszjy2-CSDN博客

原创 vue中使用swiper的注意事项

由于swiper各版本有差异，如果不注意版本很容易出现配置不生效、报错等问题，另外在vue中使用vue-awesome-swiper要先安装swiper，否则无法使用。使用的时候也不一定按官方文档，需要根据版本导入。 import {Swiper, SwiperSlide} from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' ...

2020-08-27 17:44:13 153

原创 PC浏览器小字体设置方法

大部分PC浏览器对于12px以下的文字都不再缩小，而是以12px大小显示，因为小于12px的文字已经影响了人们的阅读。所以一般在PC上不宜显示小于12px的文字，如果确实需要显示，现在一般用CSS的transform属性进行缩放。如：要显示10px，则scale值为10/12≈0.83，CSS样式为transform: scale(0.83)。transform默认以几何中心点缩放，如何需要以其他位置为中心缩放可以设置transform-origin的值。谷歌新版本已经不支持私有属性-webkit-te

2020-08-19 09:30:21 456

原创 CSS3图片自适应object-fit

css3中的object-fit属性可以设置图片相对于自身尺寸的适应方式。目前有fill（填充）、contain（包含）、cover（覆盖）、none（无）、scale-down（最小比例）、initial（默认）等属性值。在使用当中可以根据需要进行设置。细心的人可能会发现，这些值不一定能满足我们的项目需求，所以还需要配合object-position指定位置。 ...

2020-08-15 11:41:44 440

原创 input输入框默认placeholder修改方法

谷歌等webkit内核浏览器可以使用-webkit-input-placeholder伪元素方式修改input输入框默认的placeholder样式。如：要修改文字颜色input::-webkit-input-placeholder { color: #ebfada;}。

2020-08-14 17:55:23 554

原创微信小程序switch样式修改

微信小程序结合了H5、自有组件和原生组件，所以有很多地方不能像普通H5一样对待。对于表单组件switch，直接修改样式不生效，可以全用.wx-switch-input进行设置。 switch开关组件由于不能靠简单的input实现，所以还需要::before和::after分别设置覆盖背景和开关按钮（仅可设置部分样式）。具体代码如下： .wx-switch-input { width: 102rpx !important; height: 62rpx !important; backgroun

2020-08-10 11:37:30 1694

原创 vue中的v-cloak

cloak大概是遮盖的意思。在vue源码中可以看到如下代码： var baseDirectives = { on: on, bind: bind$1, cloak: noop } 可见vue并不处理这个指令。所以一般用来解决当数据未解析完时页面出现vue模板代码的问题。事实上也可以使用其他指令代替v-cloak，只要不是vue会处理的指令都可以实现。如v-loading，然后在css中设置对应的样式。 ...

2020-08-07 17:12:42 252

原创 CSS文字溢出显示省略号

在CSS中，通过text-overflow规定当文本溢出边界时的表现形式，ellipsis表示显示省略号。但是很多新手试了不行，原因是单是这样设置没有触发溢出，单行显示的时候还要同时使用white-space: nowrap;限定文字不换行，同时配合overflow: hidden;隐藏溢出才能真正生效。具体代码如下： white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 要在多行文字中，还需要改变元素的显示方式，webkit内核

2020-08-06 15:48:07 205

原创微信小程序中textarea的层级问题

微信小程序中textarea是原生组件，因些并不能完全像普通html中的textarea一样使用。使用过这个组件的人都会发现，部分htm属性l和css设置现阶段是无效的。

2020-07-30 18:06:57 848

原创前端地址解析

前端地址解析本文说的地址解析是把用户的整段地址进行拆分，分离出省市区（县）镇详细地址等，常见于商城和快递项目。对于地址解析，新手们容易着急，因为如果用判断来把这些内容分离出来不是件容易的事情。但稍有经验的人肯定会想到使用正则表达式，前端可以使用String对象的match方法。对于规范的地址，其实使用正则表达式完全可以准确分离出来，只要匹配省市区（县）等关键词就可以了，前提是你需要了解各级的所有名称。关键代码如下：在这里插入代码片 ...

2020-07-29 18:00:07 757

wzszjy2的博客