前端早茶的博客_Node.js,React,Vue(8)

vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题

背景在项目使用lib-flexible还有postcss-px2rem实现移动端适配，当我们引入第三方的样式组件库，发现一个问题。那些组件库的样式都变小了。问题原因变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸 <meta name="viewport" conte

css

解决方案

项目创建

原创 2022-05-12 17:33:11 1254 阅读

js计算textarea输入文字的长度

前言日常开发过程中，有些时候我们想使用textarea，然后限制输入的长度，在textarea末尾显示剩余可输入的字节数。如下图：解决方法：常用的有三种方法： 1、通过判断charCodeAt，区分字母与中文，然后计算字符串的长度。 2、通过使用charCodeAt 和 0xff00区分中

字符串

i++

指定位置

原创 2022-05-12 17:32:12 1712 阅读

gRPC-Web正式发布

前言： gRPC-Web是一个JavaScript客户端库，可以使Web应用程序直接与后端gRPC服务进行通信，而无需HTTP服务器充当中介。这意味着可以通过使用.proto文件定义客户端和服务器端数据类型和服务接口，轻松构建真正的端到端gRPC应用程序体系结构。因此，gRPC-Web为Web开发

客户端

服务器

应用程序

原创 2022-05-12 17:32:02 888 阅读

Vue.Draggable拖拽效果

1.下载包：npm install vuedraggable 配置：package.json "dependencies": { "vuedraggable": "^2.11.0" }, 2.在你的组件中引进依赖： import draggable from 'vuedraggable' 3.注册：

html模板

json

原创 2022-05-12 17:31:50 643 阅读

根据城市获取天气

获取城市的城市代码了 function curl($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch,

xml

html

数据

转载 2022-05-12 17:31:32 829 阅读

TypeScript----接口和泛型

接口 TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。泛型软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够

typescript

泛型

ide

原创 2022-05-12 17:30:55 148 阅读

TypeScript----数据类型

TypeScript 简介 TypeScript 由 Microsoft开发和维护的一种开源编程语言。它支持 JavaScript 的所有语法和语义，同时通过作为 ECMAScript 的超集来提供一些额外的功能，如类型检测和更丰富的语法。下图显示了 TypeScript 与 ES5，ES2015，

赋值

数组

typescript

原创 2022-05-12 17:30:42 142 阅读

TypeScript----函数与类

TypeScript中的类传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员

typescript

javascript

ecmascript

原创 2022-05-12 17:30:32 82 阅读

vue 短信验证

直接贴代码： HTML CSS .tip{ font-size: torem(28px); color: #000000; width: torem(260px); position: relative; float: left; overflow: hidden; white-space: now

验证码

重发

html

原创 2022-05-12 17:29:49 150 阅读

移动端和PC端页面常用的弹出层

我们在页面的时候，很多时候用到了弹出层，消息提醒，确认框等等，统一样式的弹出框可以使页面更加优美。在此，我整理一下我们项目的移动端和PC端页面常用的弹出层。一、移动端我们需在页面引入弹出框的样式和js 1、提示语 1）加载 2）成功 3）失败 2、确认框说明：第一个参数：题目第二个参数：

回调函数

弹出层

提示框

原创 2022-05-12 17:29:19 1585 阅读

ESLint常见命令（规则表）

4常用规则类别描述 Possible Errors 可能的错误或逻辑错误 no-cond-assign 禁止条件表达式中出现模棱两可的赋值操作符 no-console 禁用console no-constant-condition 禁止在条件中使用常量表达式 no-debugger 禁用 debu

操作符

字面量

赋值

原创 2022-05-12 17:28:58 1583 阅读

父组件向子组件传递事件或者调用其事件

父组件： export default{ data () { return { who: 'aboutUs', // 切换弹框 bindSuccess: false // 关于我们状态 } }, data () { return { who: 'aboutUs', // 切换弹框 bindSucce

网页

原创 2022-05-12 17:28:44 292 阅读

js在微信、微博、QQ、Safari唤起App的解决方案

首先看下完整的流程：简单说下universal link 在iOS9之前，唤起方式和现在安卓是一个的，都是使用scheme进行唤起，这种方式有个小问题，每次唤起，都会给个提示：是否打开xx应用，这样从体验上来讲，又让用户多一步操作。universal link会直接跳转，不会在页面做停留，条件就是

safari

iphone

微信

原创 2022-05-12 17:28:18 330 阅读

vue组件内部引入远程js文件

之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。第一种操作 Dom引入js：第二种使用 createElement 方法：第三种封装一个组件：使用:<remote-jssrc="你的需要的js

文件地址

javascript

技术交流

原创 2022-05-12 17:28:02 2020 阅读

js根据ip自动获取地址（省市区）

HTML： JS：如果你看懂了上面的代码，就不用往下看了讲解：我们远程引入全局的一个js文件(这里也可以局部引入) 这个文件返回的数据如下：参数讲解：好啦，你已经获取到你想要的省市区了。

html

php

5e

原创 2022-05-12 17:27:53 2565 阅读

css行内省略号、垂直居中

应用场景分析：一、当你的文字限定行数，超出部分的文字用省略号显示。（有两个使用场景：1、单行 2、多行）二、当你的高度不定要垂直居中时，这里我们用盒模型布局。（这里要对盒模型做兼容性处理,不然有些手机系统不兼容的。切记~~~~~~~）

safari

chrome

firefox

原创 2022-05-12 17:27:39 1077 阅读

iOS 10的两个坑

iOS 10出现白屏幕，其他机型不会。一个bug 手机连上电脑，在电脑端的Safari里，看到了如下的错误：可是你没有写过这样的代码，你怎么可能把一个名为e的变量定义两次？你打开代码，看到了这样美丽的代码：况且很显然，这段代码不是人写的，而是我们在执行npm run build的时候编译产生的

safari

ios

for循环

原创 2022-05-12 17:27:32 262 阅读

技术资源分享

1.ps 链接: https://pan.baidu.com/s/1mjYbcJA(pqdt) 1.ps 链接: https://pan.baidu.com/s/1mjYbcJA(pqdt) 2.HTML5+CSS3从入门到精通.iso 链接: https://pan.baidu.com/s/1cU

视频教程

v8

php

原创 2022-05-12 17:27:23 247 阅读

js创建并下载文件

先上代码：直接调用这个方法，传入文件名和文件内容，程序新建 a 标签，新建 Blob 对象，将文件名赋给 a 标签，同时将 Blob 对象作为 Url 也赋给 a 标签，模拟点击事件，自动下载成功，最后再回收内存。 Blob 对象 Blob 对象是一个字节序列。拥有 size 和 type 等属性

文件名

点击事件

模拟点击

原创 2022-05-12 17:27:13 579 阅读

小程序wepy.js框架总结

wepy.js借鉴了Vue的语法风格和功能特性，对官方提供的框架进行了封装，更贴近于MVVM架构模式，让开发者更加容易上手，增加开发效率。(脏数据处理--是否有标识、是否有响应) 前端开发的对组件化开发应该都都很熟悉，我们就讲精华的部分：首先我们需要输入下面的命令：完成上面的命令后，你会看到类似

wepy

xml

小程序

原创 2022-05-12 17:27:08 678 阅读

css3 animation(左右摆动) (放大缩小)

左右摆动： -webkit-animation: roundRule 2.5s ease-in-out infinite; -webkit-transform-origin: top center; 放大缩小： -webkit-animation: scale 2.5s ease-in-out in

放大缩小

原创 2022-05-12 17:26:51 2790 阅读

Array.prototype.reduce()

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。返回值最后一次调用回调函数返回的结果 reduce是如何工作的 reduce 的返回值是回调函数最后一次被调用的返回值（10）。如果把初始值作为第二个参数传入 reduce

数组

回调函数

扁平化

原创 2022-05-12 17:26:44 124 阅读

兼容IphoneX

兼容IphoneX的显示，一般有两种方法，一种通过css的media来做兼容，一种是通过js来做兼容。一、我们先讲CSS的方法，我们要做两步即可： 1. 全屏覆盖，html使用 2.通过对底部上移或者顶部下移进行处理二、通过js来对IphoneX进行兼容通过判断设配的宽度高度还有设备的像素是否

iphone

css

全屏

原创 2022-05-12 17:26:37 187 阅读

原生js设置rem

使用rem是为了界面响应不同尺寸的手机，引入下面的方法就可以使用rem了。使用这个方法的代码：

JS

原创 2022-05-12 17:26:29 679 阅读

一些很容易被忘记的css

一些很偏门的css，用过一两次，很难记得牢，这里，我总结一些。 outline 当input选中的时候会出现一个边框 contenteditable 规定元素内容是否可编辑 webkit-playsinline video 都可以在页面中播放，而不是全屏播放 clearfix 清除浮动 user-s

3d

ide

safari

原创 2022-05-12 17:26:19 103 阅读

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入

命名空间

辅助函数

运算符

原创 2022-05-12 17:26:09 206 阅读

react混合开发APP，资源分享

第一个：链接：https://pan.baidu.com/s/1KdIs8EUcB9YTuK9VW1dC7g 密码：b68m 第二个：链接：https://pan.baidu.com/s/1mi7jZcs 密码：nkp0 第三个：链接：https://pan.baidu.com/s/1pZceJ

前端开发

原创 2022-05-12 17:25:49 69 阅读

Crypto加密解密

crypto 模块提供了加密功能，包含对 OpenSSL 的哈希、HMAC、加密、解密、签名、以及验证功能的一整套封装。我们这里讲crypto AES算法加密一、使用步骤 1.引入Crypto 1.1 使用Crypto，有两种形式。一种是是在script便签直接引入，例如： 1.2 还有一种通过n

数据

ico

md5加密

原创 2022-05-12 17:25:33 1182 阅读

编程心得体会

编程其实跟做数学题一样的：做数学题，我们首先要读懂题意，清楚出题者要我们做出什么样的结果。然后要知道做出这道题，需要什么定义，什么方法。最后把题目完整的解答出来。编程也是这样，首先我们要知道需求，然后想完成这个需求，我们需要用到什么技术，需要多久能完成。最后把这个需求实现

编程

原创 2022-05-12 17:24:49 541 阅读

ios点击输入框，界面放大解决方案

当我们编写的input宽度没有占满屏幕宽度，而且又没有申明meta，就会出现点击输入框，界面放大这个问题。下面我直接给出解决方案：在head中加入以上meta声明,就可以了这里顺便说下，ios的select、input、样式显示的跟安卓不一样，可以用-webkit-appearance:non

ios

scala

屏幕宽度

原创 2022-05-12 17:24:35 1648 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

陈泽锋博客

vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题

js计算textarea输入文字的长度

gRPC-Web正式发布

Vue.Draggable拖拽效果

根据城市获取天气

TypeScript----接口和泛型

TypeScript----数据类型

TypeScript----函数与类

vue 短信验证

移动端和PC端页面常用的弹出层

ESLint常见命令（规则表）

父组件向子组件传递事件或者调用其事件

js在微信、微博、QQ、Safari唤起App的解决方案

vue组件内部引入远程js文件

js根据ip自动获取地址（省市区）

css行内省略号、垂直居中

iOS 10的两个坑

技术资源分享

js创建并下载文件

小程序wepy.js框架总结

css3 animation(左右摆动) (放大缩小)

Array.prototype.reduce()

兼容IphoneX

原生js设置rem

一些很容易被忘记的css

vuex

react混合开发APP，资源分享

Crypto加密解密

编程心得体会

ios点击输入框，界面放大解决方案

欢迎