欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

antdesign實現(xiàn)圈選功能

 Ant Design是一款十分出色的的UI設計組件，Ant Design電腦版界面美觀大方，功能強勁實用，軟件包含整套開發(fā)和設計資源和工具，豐富的React UI組件，能夠為前端UI設計提供了新的解決方案，非常的方便實用哦

在成都網站建設、網站設計過程中，需要針對客戶的行業(yè)特點、產品特性、目標受眾和市場情況進行定位分析，以確定網站的風格、色彩、版式、交互等方面的設計方向。成都創(chuàng)新互聯(lián)還需要根據客戶的需求進行功能模塊的開發(fā)和設計，包括內容管理、前臺展示、用戶權限管理、數據統(tǒng)計和安全保護等功能。

由于同事離職，公司缺人，他的工作便交接到我的手里了，我一個android開發(fā)者，以前也從來沒做過web端開發(fā)啊，沒辦法，領導交代的任務硬著頭皮也得接下來??！拿到手上，做的第一個功能，便是存儲計劃，需要實現(xiàn)可按照天、周、月存儲，并且以鼠標圈選的形式實現(xiàn)，接下來附上自己的實現(xiàn)效果圖：

ant design實現(xiàn)圈選功能

實現(xiàn)流程

本來拿到這個任務的時候，自己是想用Grid實現(xiàn)的，但是看到官網上面的一句話，直接打消了我的念頭，官網是這么說的：

也就是說用Grid每一行最多顯示24個單元格，這個完全達不到我的要求，因為我每行需要顯示25個單元格（每行的title+24小時），我決定還是自己用div畫吧。

1.先畫單元格

畫單元格分成第一行和剩余的行兩種：

ant design實現(xiàn)圈選功能

第一行組件我們定義為ColumsTitle：

循環(huán)里面的每一個div其實代表的是每一個單元格。

//標題列組件
const ColumsTitle = () => {
 const colums = [];
 for (let i = 0; i < 25; i++) {
  if (i == 0) {
   colums.push(<div key={i} className={styles["columns-title-border"]}></div>);
  } else {
   colums.push(<div key={i} className={styles["columns-border-none"]}>{i - 1}</div>);
  }
 }
 return colums;
}

剩余行組件，我們定義為Colums:

//列組件
class Colums extends PureComponent {
 render() {
  const colums = [];
  for (let i = 0; i < 25; i++) {
   if (i == 0) {
    colums.push(<div key={i} className={styles["columns-title-border"]}>{this.props.rowName}</div>);
   } else {
    colums.push(<div id={this.props.rowName + i} key={this.props.rowName + i} className={styles["columns-border"]} name="chooseDiv"></div>);
   }
  }
  return colums;
 }
}

最后一個就是整體上的組件了，我們叫做Rows：

// 行組件
const Rows = (props) => {
 const rows = [];
 var rowLength = 1;
 var rowName = "";
 if (props.saveType == "1") {
  rowLength = 2;
 } else if (props.saveType == "2") {
  rowLength = 8;
 } else if (props.saveType == "3") {
  rowLength = 32;
 }
 for (let i = 0; i < rowLength; i++) {
  rowName = formatRowName(props, i);
  if (i == 0) {
   rows.push(<Row key={i}>
    <div className={styles["columns-title-out-margin"]}><ColumsTitle/></div>
   </Row>);
  } else {
   rows.push(<Row key={i}>
    <div className={styles["columns-title-out"]}><Colums saveType={props.saveType} rowName={rowName}/>
    </div>
   </Row>);
  }
 }
 return rows;
};

我們渲染到SavePlan這個組件里面：

export default class SavePlan extends PureComponent {
 constructor(props) {
  super(props);
  this.state = {
   saveType: "1"http://1 按天存儲 2 按周存儲 3 按月存儲
  }
 }
 handleRadioChange = e => {
  this.setState({saveType: e.target.value});
 };
 onChange(value) {
  console.log('changed', value);
 }
 render() {
  return (
   <PageHeaderWrapper>
    <div>
     <h2>存儲計劃</h2>
     <div className={styles["title-row"]}>
      <Radio.Group defaultValue="1" size="large" onChange={this.handleRadioChange}>
       <Radio.Button value="1">天存儲</Radio.Button>
       <Radio.Button value="2">周存儲</Radio.Button>
       <Radio.Button value="3">月存儲</Radio.Button>
      </Radio.Group>
      <div className={styles["right-div"]}>
       存儲周期：<InputNumber min={1} max={10} defaultValue={3} onChange={this.onChange}/>（天）
       <div className={styles["title-row"]}>
        <Button type="primary" className={styles.btn}>確定</Button>
        <Button className={styles.btn}>取消</Button>
       </div>
      </div>
     </div>
     <Rows saveType={this.state.saveType}>
     </Rows>
    </div>
   </PageHeaderWrapper>
  );
 }
}

到這一步，我們在頁面其實已經可以看到整個布局了，但是還沒有添加鼠標事件，還沒有圈選功能，接下來我們看鼠標事件。

2.鼠標事件

我們這里主要用到了鼠標的三個事件：onmousedown、onmousemove、onmouseup。
我們首先設定可選的單元格，標題設定為不可選：

 -webkit-user-select: none; /* 禁止 DIV 中的文本被鼠標選中 */
  -moz-user-select: none; /* 禁止 DIV 中的文本被鼠標選中 */
  -ms-user-select: none; /* 禁止 DIV 中的文本被鼠標選中 */
  user-select: none; /* 禁止 DIV 中的文本被鼠標選中 */

思路就是：獲取鼠標按下時的坐標，并判斷是否在可選區(qū)域內，若在那么就添加一個div（也就是我們的圈選框），圖解如下：

ant design實現(xiàn)圈選功能

獲取可選單元格數組

 //可選單元格
 var fileNodes = document.getElementsByName("chooseDiv");

獲取鼠標點擊位置的坐標

var evt = window.event||arguments[0];
 //加上滾動距離
 var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
 var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
 var startX =evt.pageX || evt.clientX + scrollX;
 var startY =evt.pageY || evt.clientY + scrollY;

判斷可選框坐標范圍

//判斷鼠標點擊的點是否在可選框內部，主要是判斷第一個可選框的左上角坐標和最后一個圈選框的右下角坐標
 if ((startX >= firstDivOffsetLeft && startY >= firstDivOffsetTop) && (startX <= lastDivOffsetLeft && startY <= lastDivOffsetTop))

判斷鼠標點擊在哪一個單元格里面,并獲取該單元格左上角坐標

//判斷鼠標點擊的點在哪一個div里面，然后更改圈選框的左上角坐標為該div的左上角坐標
  for (var i = 0; i < fileNodes.length; i++) {
   if ((startX >= getOffsetLeft(fileNodes[i]) && startX <= getOffsetLeft(fileNodes[i]) + fileNodes[i].offsetWidth) && (startY >= getOffsetTop(fileNodes[i]) && startY <= getOffsetTop(fileNodes[i]) + fileNodes[i].offsetHeight)) {
    console.log("在內部");
    startX = getOffsetLeft(fileNodes[i]);
    startY = getOffsetTop(fileNodes[i]);
    break;
   } else {
    console.log("不在內部");
   }
  }

創(chuàng)建圈選框，并更改圈選框的左上角坐標為該單元格的左上角坐標

//創(chuàng)建選擇框
  selDiv = document.createElement("div");
  selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
  selDiv.id = "selectDiv";
  document.body.appendChild(selDiv);
  selDiv.style.left = startX + "px";
  selDiv.style.top = startY + "px";

鼠標移動過程中，改變圈選框的寬高；

evt = window.event || arguments[0];
   if (isSelect) {
    if (selDiv.style.display == "none") {
     selDiv.style.display = "";
    }
    //加上鼠標滾動距離
    var _scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var _scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    _x = evt.pageX || evt.clientX + _scrollX;
    _y = evt.pageY || evt.clientY + _scrollY;

    selDiv.style.left = Math.min(_x, startX) + "px";
    selDiv.style.top = Math.min(_y, startY) + "px";
    selDiv.style.width = Math.abs(_x - startX) + "px";
    selDiv.style.height = Math.abs(_y - startY) + "px";

鼠標抬起的時候，計算被圈選的單元格并更改樣式；

var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
  var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;

  for (var i = 0; i < selList.length; i++) {
   var sl = selList[i].offsetWidth + getOffsetLeft(selList[i]);
   var st = selList[i].offsetHeight + getOffsetTop(selList[i]);
   if (sl > _l && st > _t && getOffsetLeft(selList[i]) < _l + _w && getOffsetTop(selList[i]) < _t + _h) {
    if (selList[i].className.indexOf("seled") == -1) {
     selList[i].className = styles["columns-borderseled"];
    }
    else {
     selList[i].className = styles["columns-border"];
    }
   }
  }

其他工具方法

const getOffsetLeft = function (obj) {
 var tmp = obj.offsetLeft;
 var node = obj.offsetParent;
 while (node != null) {
  tmp += node.offsetLeft;
  node = node.offsetParent;
 }
 return tmp;
}
const getOffsetTop = function (obj) {
 var tmp = obj.offsetTop;
 var node = obj.offsetParent;
 while (node != null) {
  tmp += node.offsetTop;
  node = node.offsetParent;
 }
 return tmp;
}

總結

以上所述是小編給大家介紹的ant design實現(xiàn)圈選功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

本文題目：antdesign實現(xiàn)圈選功能
當前路徑：http://chinadenli.net/article30/pppdpo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供做網站、微信公眾號、靜態(tài)網站、自適應網站、搜索引擎優(yōu)化、網站維護

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

商城網站建設