操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

前言

本文是筆者寫組件設計的第七篇文章, 今天帶大家實現一個自帶主題且可關閉的Alert組件, 該組件在諸如Antd或者等第三方組件庫中都會出現,主要用來提供系統的用戶反饋.

之所以會寫組件設計相關的文章,是因為作為一名前端優秀的前端工程師,面對各種繁瑣而重復的工作,我們不應該按部就班的去"辛勤勞動",而是要根據已有前端的開發經驗,總結出一套自己的高效開發的方法.

前端組件一般會劃分為如下幾種類型:

所以我們在設計組件系統的時候可以參考如上分類去設計,該分類也是antd, , zend等主流UI庫的分類方式.正文在開始組件設計之前希望大家對css3和js有一定的基礎,并了解基本的react/vue語法.我們先看看實現后的組件效果:

1. 組件設計思路

按照之前筆者總結的組件設計原則,我們第一步是要確認需求. 一個警告提示(Alert)組件會有如下需求點:

需求收集好之后,作為一個有追求的程序員, 會得出如下線框圖:

對于react選手來說,如果沒用,建議大家都用, 它是react內置的類型檢測工具,我們可以直接在項目中導入. vue有自帶的屬性檢測方式,這里就不一一介紹了.

通過以上需求分析, 我們發現實現一個Alert非常簡單, 它屬于反饋型組件,所以不會涉及到太多功能.接下來我們就來看看具體實現.

2. 基于react實現一個Alert組件2.1. Alert組件框架設計

首先我們先根據需求將組件框架寫好,這樣后面寫業務邏輯會更清晰:

import classnames from 'classnames'import styles from './index.less'
/** * 警告提示組件 * @param {style} object 更改Alert樣式 * @param {closable} bool 是否顯示關閉按鈕, 默認不顯示 * @param {closeText} string|reactNode 自定義關閉按鈕 * @param {message} string 警告提示內容 * @param {description} string 警告提示的輔助性文字 * @param {type} string 警告的類型 * @param {onClose} func 關閉時觸發的事件 */function Alert(props) {  const {    style,    closable,    closeText,    message,    description,    type,    onClose  } = props
  return 
          
alertMes}>{ message }          
{ description }          { closeText ? closeText : 'x' }         
}
export default Alert

有了這個框架,我們就來往里面實現內容吧.
2.2 實現style,,, ,type
這幾個功能在框架搭建好之后已經部分實現了,是因為他們都比較簡單,不會牽扯到其他復雜邏輯.只需要對外暴露屬性并使用屬性即可. 具體實現如下:
function Alert(props) {  const {    style,    closable,    closeText,    message,    description,    type,    onClose  } = props
  return 
      className={classnames(styles.xAlertWrap, styles[type] || styles.warning)}      style={{        ...style      }}    >      
{ message }      
{ description }      { closeText ? closeText : 'x' }    
}

以上代碼可以發現筆者采用了這個第三方工具, 他可以組合我們的class以實現更靈活的配置. 對于type的實現,我的思路是提前預制好幾種類型樣式, 通過用戶手動配置來匹配到對應的樣式:
.xAlertWrap {  box-sizing: border-box;  position: relative;  padding: 5px 12px;  margin-bottom: 16px;  border-radius: 3px;  &.success {    background-color: #f6ffed;    border: 1px solid #b7eb8f;  }  &.info {    background-color: #e6f7ff;    border: 1px solid #91d5ff;  }  &.error {    background-color: #fffbe6;    border: 1px solid #ffe58f;  }  &.warning {    background-color: #fff1f0;    border: 1px solid #ffa39e;  }}


2.3 實現和
主要是用來讓用戶能手動關閉Alert,是對外暴露的關閉時的方法, 因為沒必要也不需要向外暴露屬性來讓Alert關閉, 所以最好的方式是在組件內部實現, 我們會通過這個鉤子來處理,代碼如下:
function Alert(props) {  const {    style,    closable,    closeText,    message,    description,    type,    onClose  } = props  let [visible, setVisible] = useState(true)
  const handleColse = () => {    setVisible(false)    onClose && onClose()  }  return visible ?     
      className={classnames(styles.xAlertWrap, styles[type] || styles.warning)}      style={{        opacity: visible ? '1' : '0',        ...style      }}    >      
{ message }      
{ description }      {        !!closable && { closeText ? closeText : 'x' }      }    
 : null}

通過控制來控制Alert的出現和消失, 并且當點擊關閉按鈕時能調用外部暴露的方法.
2.4 健壯性支持, 我們采用react提供的工具:
import PropTypes from 'prop-types'// ...Alert.propTypes = {  style: PropTypes.object,  closable: PropTypes.bool,  closeText: PropTypes.oneOfType([    PropTypes.string,    PropTypes.element  ]),  message: PropTypes.string,  description: PropTypes.string,  type: PropTypes.string,  onClose: PropTypes.func}

關于prop-types的使用官網上有很詳細的案例,這里說一點就是的用法, 它用來支持一個組件可能是多種類型中的一個. 組件完整css代碼如下:

.xAlertWrap {  box-sizing: border-box;  position: relative;  padding: 5px 12px;  margin-bottom: 16px;  border-radius: 3px;  &.success {    background-color: #f6ffed;    border: 1px solid #b7eb8f;  }  &.info {    background-color: #e6f7ff;    border: 1px solid #91d5ff;  }  &.error {    background-color: #fffbe6;    border: 1px solid #ffe58f;  }  &.warning {    background-color: #fff1f0;    border: 1px solid #ffa39e;  }
  .alertMes {    margin-bottom:5px;    color: rgba(0, 0, 0, 0.85);    font-size: 14px;    line-height: 1.5em;  }  .alertDesc {    color: rgba(0, 0, 0, 0.65);    font-size: 14px;    line-height: 1.5em;    word-break: break-all;  }  .closeBtn {    position: absolute;    right: 8px;    top: 5px;    color: rgba(0, 0, 0, 0.4);    cursor: pointer;  }}

通過以上步驟, 一個健壯的的Alert組件就完成了,關于代碼中的css 和的使用大家可以自己去官網學習,非常簡單.如果不懂的可以在趣談前端技術群里提問,筆者看到后會第一時間解答.
2.5 使用Alert組件
我們可以通過如下方式使用它:
"溫馨提示,你忘帶口罩了" />"溫馨提示,你注冊成功" type="success" />"錯誤提示,你沒洗手了" type="error" />"提示: 我們開始吧" type="info" />"提示: 我可以關閉了" type="info" closable onClose={() => { alert(111) }} />"注冊成功" description="你在本網站已經注冊成功,謝謝您的支持和反饋,多交流真正的技術吧" closable type="success" />

筆者已經將實現過的組件發布到npm上了,大家如果感興趣可以直接用npm安裝后使用,方式如下:
npm i @alex_xu/xui//?導入xuiimport {  Button,  Skeleton,  Empty,  Progress,  Tag,  Switch,  Drawer,  Badge,  Alert}?from?'@alex_xu/xui'


該組件庫支持按需導入,我們只需要在項目里配置babel--即可,具體配置如下:
// .babelrc"plugins": [  ["import", { "libraryName": "@alex_xu/xui", "style": true }]]

npm庫截圖如下:
最后
后續筆者將會繼續實現
等組件, 來復盤筆者多年的組件化之旅.
如果想獲取組件設計系列完整源碼, 或者想學習更多H5游戲,對話框一般有哪幾種組件，node，gulp，css3，，，數據可視化等前端知識和實戰對話框一般有哪幾種組件，歡迎在公號《趣談前端》加入我們的技術群一起學習討論，共同探索前端的邊界。
如果對于react/vue組件設計原理不熟悉的,可以參考我的之前寫的組件設計系列文章: