itboos
commented
6 years ago Open itboos opened 6 years ago
itboos
commented
6 years ago itboos
commented
6 years ago 描述: 在用户输入手机号和验证码时，我们希望仅仅是调起九宫格的数字键盘
<input type="number" class="phone-input" placeholder="请输入手机号" v-model="tell">但是上面的那种写法， 安卓上是数字键盘， 但是在IOS 上，还是会看到文字（逼死强迫症） 解决办法: 方法1： 利用html 5 ，input type = 'tel' 这样写，ios和安卓调起的都是默认只有 数字键盘 输入电话号码的控件
<input type="tel" class="phone-input" placeholder="请输入手机号" v-model="tell">方法2： 在type = number 的输入框上加上 正则，pattern="\d*"
<input type="number" class="phone-input" pattern="\d*" placeholder="请输入手机号" v-model="tell">参考链接: html5 input框默认调用九宫格数字键盘 论如何优雅的在手机端 input 框输入数字
上面的方式只能在IOS 上只能调起数字键盘， 没有小数点，不能输入小数， 目前还没找到既能显示数字键盘，又带有小数点输入的方法
itboos
commented
6 years ago 1.设置 input 类型的输入框， placeholder 的文字颜色: 实质, input , video 内部都使用了shadow dom ，可以设置 placeholder 元素的字体颜色来设置
/ * placeholder */
<div pseudo="-webkit-input-placeholder" id="placeholder"
style="display: block !important; text-overflow: clip;">请输入验证码</div>通过chrome 浏览器，我们可以看到包裹 placeholder 的元素， 给它设置类名就可以了
.user_withdraw input::-webkit-input-placeholder {
color: red;
}
这时我们会发现，placeholder 的字体颜色就是红色了
input 样式重置
input {
outline: none; // 去除outline
background: none;
-webkit-appearance: none; // 去除输入框的内阴影
user-select: auto;
&::-webkit-input-placeholder {
font-size: 14px
color: #999;
}
} // 阻止a 链接跳转：
// e.preventDefault, herf = "#"
// 带有给href 属性的a 链接阻止默认事件
a[href="http://example.com"] {
pointer-events: none;
}问题描述： Pc端可以获得焦点，移动端无法获得焦点，也无法输入 原因： css 样式里：
* {
box-sizing: border-box;
/*禁用文字选中*/
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}其中，禁止了所有元素选中的， 这使得input 也无法选中，导致无法输入
解决办法： 使input 可以选中， 设置：
input {
-webkit-user-select: auto;
user-select: auto;
} 自己遇到的情况， 顶部 tabBar 固定, 中间内容自动滚动，没有设置高度
当打开弹窗蒙层时，给元素添加一个类名，设置 中间内容设置成高度 100%， overflow: hidden
当关闭蒙层时， 去除这个类
同时，会发现 内容滚动了最顶端，我们想要关闭蒙层时， 滚动条的位置在一开始的位置
设置：
点击蒙层时： 保存滚动条位置
const scrollY = window.scrollY
关闭蒙层时，手动滚动到一开始的位置：
// 回到原来的位置
setTimeout(() => {
window.scrollTo(0, this.state.scrollY)
}, 100)
itboos
commented
5 years ago 参考： Pure CSS for multiline truncation with ellipsis
单行文本溢出显示省略号,元素有时需要设置宽度
.one-line{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}下面的方法对部分浏览器无效
.m-ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; // 行数
-webkit-box-orient: vertical;
}1. 在项目的根目录建立一个.env文件，里面指定端口号
PORT=3006
2. 使用 cross-env ，在启动脚本里注入端口号
"scripts": {
"start": "cross-env PORT=3006 react-scripts start",
}
https://www.npmjs.com/package/cross-env
<div className=" m-ellipsis" style={{"WebkitBoxOrient": "vertical"}}>{props.description}</div>失效的原因： Postcss to add CSS prefixes removing property (-webkit-box-orient: vertical) 原issue： How to configure Postcss autoprefixer not to remove css property
Postcss Postcss autoprefixer 会把 -webkit-box-orient 属性给移除, 这应该是他们的一个bug.
目前解决方案就是： 在需要用到这个属性的元素上内联这个样式。
itboos
commented
5 years ago "homepage": ".", // 使用相对路径， 即资源引入时使用 ./aaa/xxxa
不配置的话，默认是 根路径
还可以这样：
"homepage": "localhost:3000/app"
这样，打包出来的资源的路径就是：
/myapp/static/js/2.0bbfd4a8.chunk.js
问题： 如果想要资源使用另一个cdn 地址如何配置？
即： https://xxx.com/myapp/static/js/2.0bbfd4a8.chunk.jsCreate React App 通过 Proxy 在本地跨域请求 API package.json 加：
"proxy": "https://api-domain.com"配置多个：
如果需要区分多个 API，我们 proxy 的值需要是个对象：
"proxy": {
"/aapi": {
"target": "https://a.api-domain.com",
"secure": false,
"changeOrigin": true
},
"/bapi": {
"target": "https://b.api-domain.com",
"secure": false,
"changeOrigin": true
}
}由于我们的 API 是 HTTPS 协议的，所以我们每个 API 配置需要加这两个字段： "secure": false, "changeOrigin": true
然后发请求就可以直接不用跟域名直接请求接口路径了，比如 fetch('/bapi/list') 这样写来请求数据
itboos
commented
5 years ago history 路由
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
// 使用bashname, 根据当前地址来设置 basename, 这样就可以在服务器上随意放位置了
const positon = window.location.pathname.lastIndexOf('/');
const relativePath = window.location.pathname.substring(0, positon);
// https://github.com/itboos/accumulation/issues/10 ->
https://github.com/itboos/accumulation/issues
// console.log('relativePath:', relativePath)
return (
<div className="app">
<Router basename={relativePath}>
<Switch>
<Route path="/home" exact component={Home}/>
<Route path="/ticket" exact component={Ticket} />
<Route component={Home} />
</Switch>
</Router>
</div>
);
- hash 路由
[Hash-Router](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md)
```jsx
import { HashRouter, Route, Switch } from 'react-router-dom'
<HashRouter>
<Switch>
<Route path="/home" exact component={Home}/>
<Route path="/ticket" exact component={Ticket} />
<Route component={Home} />
</Switch>
</HashRouter> const pathObj = {
pathname: `/ticket`,
state: data,
}
// history 模式
// this.props.history.push(pathObj.path, pathObj.state);
console.log(' this.props.history:', this.props.history)
// hash 模式
this.props.history.replace(pathObj);Production deploy - How to remove/disable webpack source-map
npm run build, how to remove webpack source map ?
"build": "react-scripts build && rm build/static/js/*.map",.vue 文件使用了 vetur插件，它支持配置自定义语法高亮块 https://vuejs.github.io/vetur/highlighting.html#custom-block
itboos
commented
5 years ago itboos
commented
4 years ago 产生此问题的原因是： The HTTP Referrer Policy stop-link-from-sending-referrer-to-destination
当个网页全局解决： 在 head 里添加 <meta 标签 >
<meta name="referrer" content="no-referrer">某个元素解决：
<a href="example.com" rel="noreferrer">link</a>Also, if you want to apply it to audio, img, link, script, or video tags which require a crossorigin attribute, prefer crossorigin="anonymous" where possible, so that only the absolute minimum (the Origin header) will be shared. <img crossorigin="anonymous" src="">
document.querySelector("#22id"); 不能以数字开头，后面有数字可以支持
这个将导致错误： document.getElementById('#id22') 这个则可以
对于css 2: 该值在元素的主子树中的所有ID中必须是唯一的，并且必须至少包含一个字符。该值不能包含任何空格字符。
身份证可以采用什么形式没有其他限制; 特别是，ID可以只包含数字，以数字开头，以下划线开头，仅包含标点符号等。
但是，querySelector方法使用CSS3选择器来查询DOM，CSS3不支持以数字开头的ID选择器：
在CSS中，标识符（包括元素名称，类和选择器中的ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及连字符（ - ）和下划线_）; 他们不能以数字，两个连字符或连字符后跟数字开头。
使用类似于b22ID属性的值，并且您的代码将起作用。 原文链接: https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document