demo(old)css
let data
if(myObj && myObj.firstProp && myObj.firstProp.secondProp && myObj.firstProp.secondProp.actualData) data = myObj.firstProp.secondProp.actualData複製代碼
demo(new)html
const data = myObj?.firstProp?.secondProp?.actualData複製代碼
demo(old實現方式)git
const shortenText = shortenText(capitalize("This is a long text"));function capitalize(text) {
return text.charAt(0).toUpperCase() + text.slice(1);
}function shortenText(text) {
return text.substring(0, 8).trim();
}複製代碼
demo(new) anmazing!!!github
const shortenText = "This is a long text"
|> capitalize
|> shortenText;
//This is複製代碼
裝插件,.babelrc增長配置api
{
"plugins": [["@babel/plugin-proposal-pipeline-operator", {
"proposal": "minimal" }]]
}複製代碼
用到的僞類bash
:placeholder-shown(:placeholder-shown
CSS 僞類 在 <input>
或 <textarea>
元素顯示 placeholder text 時生效,能夠設置首次聚焦光標,以後輸入後,此樣式不生效)babel
:valid input正則驗證成功後樣式 反之 :invalidsvg
組合:invalid:not(:focus):not(:placeholder-shown) 函數
:invalid:focus:not(:placeholder-shown) 實時驗證
效果圖
requried-fields
valid-fields
demo
html
<form action="#0">
<div>
<!-- placeholder=" "是hack,爲了以後輸入的後,利用:not:placeholder-shown選中-->
<input type="text" id="first_name" name="first_name" required placeholder=" " />
<label for="first_name">First Name</label>
</div>
<div>
<input type="text" id="last_name" name="last_name" required placeholder=" " />
<label for="last_name">Last Name</label>
</div>
<div>
<input type="email" id="email" name="email" required placeholder=" " />
<label for="email">Email Address</label>
<div class="requirements">
Must be a valid email address.
</div>
</div>
<div>
<!--正則驗證pattern-->
<input type="password" id="password" name="password" required placeholder=" " pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" />
<label for="password">Password</label>
<div class="requirements">
Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.
</div>
</div>
<input type="submit" value="Sign Up" />
</form>複製代碼
scss
form {
max-width: 450px;
margin: 0 auto;
// positioning context
> div {
position: relative;
background: white;
border-bottom: 1px solid #ccc;
// Looks like placeholder
> label {
opacity: 0.3;
font-weight: bold;
position: absolute;
top: 22px;
left: 20px;
}
> input[type="text"],
> input[type="email"],
> input[type="password"] {
width: 100%;
border: 0;
padding: 20px 20px 20px 50px;
background: #eee;
&:focus {
// removing default focus style
outline: 0;
// adding new one
background: white;
& + label {
opacity: 0;
}
}
&:valid {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/check.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: 20px 20px;
& + label {
opacity: 0;
}
}
&:invalid:not(:focus):not(:placeholder-shown) {
background: pink;
& + label {
opacity: 0;
}
}
&:invalid:focus:not(:placeholder-shown) {
& ~ .requirements {
max-height: 200px;
padding: 0 30px 20px 50px;
}
}
}
.requirements {
padding: 0 30px 0 50px;
color: #999;
max-height: 0;
transition: 0.28s;
overflow: hidden;
color: red;
font-style: italic;
}
}
input[type="submit"] {
display: block;
width: 100%;
margin: 20px 0;
background: #41D873;
color: white;
border: 0;
padding: 20px;
font-size: 1.2rem;
}
}
body {
background: #333;
font-family: 'PT Sans', sans-serif;
padding: 20px;
}
* {
box-sizing: border-box;
}
複製代碼