手寫react優惠券組件

learn_shifeng 發布于2019-08-30 15:54 / 3215人閱讀

摘要：表示從圓心開始范圍內都是紅色表示距離圓心的位置為，然后向兩邊擴散，直到里面的紅色區域，和向外地方的區域表示從開始往外都是。組件代碼折扣卷折折折扣卷張有效時間參考鏈接

先看效果圖

由于是截圖，大小有些失真

實現分析

看到這個圖，思考一下，就能明白，其實就兩個難點：

左邊的鋸齒狀是如何實現

中間的凹陷是如何實現

上述兩個難點解決了，相信有css基礎的都能寫出這個組件。

實現鋸齒效果 方法一：偽元素before和after

.sawtooth {
  /* 相對定位，方便讓before和after偽元素絕對定位偏移 */
  position: relative;
  background:#e24141;
  width:400px;
  height:170px;
}

.sawtooth:before, .sawtooth:after {
    content: " ";
    width: 0;
    height: 100%;
    /* 絕對定位進行偏移 */
    position: absolute;
    top: 0;
}

.sawtooth:before {
    /* 圓點型的border */
    border-right: 10px dotted white;
    /* 偏移一個半徑，讓圓點的一半覆蓋div */
    left: -5px;
}

.sawtooth:after {
    /* 圓點型的border */
    border-left: 10px dotted white;
    /* 偏移一個半徑，讓圓點的一半覆蓋div */
    right: -5px;
}

效果如下：

講解

這個就是在開頭和最后畫了一個點狀邊框，然后平移邊框，讓邊框的一部分覆蓋原來的邊框，利用圓點的顏色和背景色一樣的特點，制作鋸齒效果。如果不平移邊框效果如下：

.sawtooth:before {
    /* 圓點型的border */
    border-right: 10px dotted white;
    /* 偏移一個半徑，讓圓點的一半覆蓋div */
    left:0;
}

.sawtooth:after {
    /* 圓點型的border */
    border-left: 10px dotted white;
    /* 偏移一個半徑，讓圓點的一半覆蓋div */
    right: 0px;
}

看了上圖實現原理是不是一目了然了。但這也有一些缺點：
1.鋸齒的顏色必須和背景色一樣
2.無法畫鋸齒朝里的方式

方法二radial-gradient設置背景 radial-gradient講解

用徑向漸變創建圖像。
簡單語法：radial-gradient(circle, red 10px, blue 20px, yellow 30px);
形狀是圓（也可以是橢圓），開始位置的顏色是red，中間顏色是blue，最后顏色是黃色。
10px表示從圓心開始10px范圍內都是紅色；
20px表示距離圓心20px的位置為blue，然后向兩邊擴散，直到里面10px的紅色區域，和向外30px地方的yellow區域；
30px表示從30px開始往外都是yellow。

.div{
  margin:20px;
  height:100px;
  width:100px;
  background-image:radial-gradient(circle,red 10px,blue 20px,yellow 30px)
}

使用radial-gradient畫圓點背景

圓心設置成透明

把過度顏色都設置成鋸齒的顏色

通過背景尺寸屬性設置背景圖的顏色，然后repeate

.div{
  margin:20px;
  height:106px;
  width:140px;
  background-image: radial-gradient(circle at center, transparent 6px,#28ACFF 7px);
  background-size: 20px 15px;
}

這樣一個帶圓點背景的div就出來了。然后通過設置寬度，只顯示半個圓，左邊的鋸齒就出來了。width設置成10px如下效果

上邊凹槽的實現

這個實現就比較簡單了，通過絕對定位，用一個圓形元素覆蓋父元素的邊框。

問題：子元素無法覆蓋父元素

在實現時遇到一個問題，就是子元素移動過去了，但是無法覆蓋父元素的邊框。這時，需要在組件外再套一層div，這個div設置成相對定位，然后把圓div設置成相對定義，再移動位置就能覆蓋里面的組件div了。

開發優惠卷

通過上述的講解，需要實現優惠卷所需要的知識點就都講完了，下面讓我們來實現開始效果的優惠卷吧。

結構分析

一個div頂級容器,設置成相對定位。（解決無法覆蓋問題）

一個div組件容器，放到上面的div中

鋸齒div（放到2中的的div）

粗體顯示折扣的div（放到2中的的div）

虛線div（放到2中的的div）

折扣詳情div（放到2中的的div）

兩個圓形div，放到1或2中div都可以。

code

.parentContainer {
    position:relative;
    margin:20px;
    overflow:hidden;
}
.container {
    display:flex;
    border:1px solid #ffffd;
    border-radius:3px;
    width:300px;
    height:105px;
    border-left:0;
}
.left {
    width:10px;
    height:106px;
    left:-1px;
    border:0px solid #ffffd;
    border-radius:3px;
    background-image:radial-gradient(circle at center,transparent 6px,#28ACFF 4px);
    background-size:20px 15px;
    z-index:1
}
.couponName {
    text-align:center;
    border:0px solid red;
    line-height:106px;
    font-size:40px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(40,172,255,1);
    margin-left:20px;
    margin-right:16px;
}
.subName {
    font-size:20px;
}
.topSemicircle {
    width:20px;
    height:20px;
    border:1px solid #ffffd;
    border-radius:10px;
    position:absolute;
    left:80px;
    top:-16px;
    padding:0;
    background-color:#fff;
}
.bottomSemicircle {
    width:20px;
    height:20px;
    border:1px solid #ffffd;
    border-radius:10px;
    position:absolute;
    left:80px;
    bottom:-16px;
    padding:0;
    background-color:#fff;
}
.dashed {
    border:1px dashed #ffffd;
    margin-top:11px;
    margin-bottom:11px;
}
.right {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding-left:10px;
}
.desc {
    font-size:10px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(170,170,170,1);
    margin-top:10px;
}




  
    
    8折
    
    
      折扣卷7.5折
      400張
      有效時間：2018.09.21-2018.10.21

可以把代碼賦值到下面的在線工具中看下效果
https://c.runoob.com/front-en...

React Code

根據自己需要再寫成react版本，就易如反掌了。

//less 
.parentContainer {
  position: relative;
  margin: 20px;
  overflow: hidden;
}

.container {
  display: flex;
  border: 1px solid #ffffd;
  border-radius: 3px;
  width: 312px;
  height: 105px;
  border-left: 0;
}

.left {
  width: 10px;
  height: 106px;
  left: -1px;
  border: 0px solid #ffffd;
  border-radius: 3px;
  background-image: radial-gradient(
    circle at center,
    transparent 6px,
    #28acff 4px
  );
  background-size: 20px 15px;
  z-index: 1;
}

.leftInvalid {
  .left;
  background-image: radial-gradient(
    circle at center,
    transparent 6px,
    #aaaaaa 4px
  );
}

.couponName {
  text-align: center;
  border: 0px solid red;
  line-height: 106px;
  font-size: 40px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(40, 172, 255, 1);
  min-width: 62px;
  margin-left: 20px;
  margin-right: 16px;
}

.couponNameInvalid {
  .couponName;
  color: #aaaaaa;
}

.title {
  font-size: 16px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.invalidTitle {
  .title;
  color: rgba(170, 170, 170, 1);
}

.subName {
  font-size: 20px;
}

.semicircle {
  width: 20px;
  height: 20px;
  border: 1px solid #ffffd;
  border-radius: 10px;
  position: absolute;
  left: 98px;
  padding: 0;
  background-color: #fff;
}

.topSemicircle {
  .semicircle;
  top: -16px;
}

.bottomSemicircle {
  .semicircle;
  bottom: -16px;
}

.dashed {
  border: 1px dashed #ffffd;
  margin-top: 11px;
  margin-bottom: 11px;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 10px;
}

.desc {
  font-size: 10px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(170, 170, 170, 1);
  margin-top: 10px;
}

//組件代碼
import React, { PureComponent } from "react"
import styles from "./index.less"

export default class CouponCard extends PureComponent {
  render() {
    const {
      valid = true,
      data = {
        id: 2323,
        couponDescription: "折扣卷8.5折",
        validDate: "2018.08.22-2018.09.12",
        number: 23,
        amount: 8.5,
        unit: "折",
      },
    } = this.props
    const amounts = data.amount.toString().split(".")
    return (
      
        
          
          
            {amounts[0]}
            
              {amounts[1] ? `.${amounts[1]}` : ""}
              {data.unit}
            
          
          
          
            
              折扣卷{data.amount}
              {data.unit}
            
            {data.number}張
            有效時間：{data.validDate}
          
          
          
        
      
    )
  }
}

參考鏈接

GPU云服務器云服務器手寫控件手寫識別手寫代碼手寫html、

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117012.html

手寫react優惠券組件

摘要：表示從圓心開始范圍內都是紅色表示距離圓心的位置為，然后向兩邊擴散，直到里面的紅色區域，和向外地方的區域表示從開始往外都是。組件代碼折扣卷折折折扣卷張有效時間參考鏈接先看效果圖 showImg(https://segmentfault.com/img/bVbhGFm?w=1328&h=524); 由于是截圖，大小有些失真實現分析看到這個圖，思考一下，就能明白，其實就兩個難點：左...

Shihira 2019-08-23 12:12 評論0 收藏0
【React進階系列】手寫實現react-redux api

簡介：簡單實現react-redux基礎api react-redux api回顧把store放在context里，所有子組件可以直接拿到store數據使組件層級中的 connect() 方法都能夠獲得 Redux store 根組件應該嵌套在中 ReactDOM.render( , rootEl ) ReactDOM.render( ...

劉玉平 2019-08-23 12:28 評論0 收藏0
React組件設計模式（一）

摘要：數據放在組件中，作為一個無狀態組件，只做他的展示。用兩種組件設計模式可以幫助到我們。將處理后的數據作為參數執行，最終返回組件，這就是模式。二高階組件模式所謂的高階組件，其實就是一個函數，該接受為參數，返回一個處理后的。完整代碼可查看github，這里截取的代碼不影響理解就行。頁面效果可查看gitPage 首先編寫一下我們的公共組件單個商品組件（商品組件：展示價格、購買數量） go...

godruoyi 2019-08-23 14:03 評論0 收藏0
Byemess-基于React&redux的在線Todo應用

摘要：在線注冊賬號，數據存儲于。年了，還不使用的異步控制體系。過度對數據模型進行裝飾的結果便是高耦合，這跟我初衷是基于在線存儲數據有關。為什么又是Todo，全世界的初學者都在做todo嗎？可能很多人要問這句話，其實這句話可以等同于：為什么你做了個云音樂播放器？為什么你做了個新聞閱讀APP？為什么你做了個VUE/REACT版本的CNODE？究其本質，這幾個應用都是data-map...

MRZYD 2019-08-20 17:07 評論0 收藏0
如何優化你的超大型React應用【原創精讀】

摘要：往往純的單頁面應用一般不會太復雜，所以這里不引入和等等，在后面復雜的跨平臺應用中我會將那些技術一擁而上。構建極度復雜，超大數據的應用。 showImg(https://segmentfault.com/img/bVbvphv?w=1328&h=768); React為了大型應用而生，Electron和React-native賦予了它構建移動端跨平臺App和桌面應用的能力，Taro則賦...

cfanr 2019-08-02 15:36 評論0 收藏0