DOM DOM

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

使用指南

DOM

何时使用

提供静态方法对 DOM 元素进行样式、事件、定位等类型的处理。

代码示例

基本定位

目标元素相对基准元素的基本定位。

DOM DOM - 图1

查看源码在线预览

  1. import { dom } from "@icedesign/base";
  3. const { position } = dom;
  5. class App extends React.Component {
  6.   state = {
  7.     pinElementAlign: "tl",
  8.     baseElementAlign: "tl"
  9.   };
  11.   render() {
  12.     return (
  13.       <div className="basic-demo">
  14.         <div className="cell">
  15.           <div id="b1" className="elem2">
  16.             基准元素 b1
  17.           </div>
  18.           <div id="a1" className="elem1">
  19.             目标元素 a1
  20.           </div>
  21.         </div>
  22.         <div>
  23.           <h3>pinElement(目标元素 a1)</h3>
  24.           {this.renderRadio("pin")}
  25.         </div>
  26.         <div>
  27.           <h3>baseElement(基准元素 b1)</h3>
  28.           {this.renderRadio("base")}
  29.         </div>
  30.       </div>
  31.     );
  32.   }
  33.   componentDidMount() {
  34.     position.place(
  35.       document.getElementById("a1"),
  36.       document.getElementById("b1"),
  37.       this.state.pinElementAlign + " " + this.state.baseElementAlign
  38.     );
  39.   }
  41.   componentDidUpdate() {
  42.     position.place(
  43.       document.getElementById("a1"),
  44.       document.getElementById("b1"),
  45.       this.state.pinElementAlign + " " + this.state.baseElementAlign
  46.     );
  47.   }
  49.   onPinElementAlignChange(e) {
  50.     const value = e.target.value;
  51.     this.setState({
  52.       pinElementAlign: value
  53.     });
  54.   }
  56.   onBaseElementAlignChange(e) {
  57.     const value = e.target.value;
  58.     this.setState({
  59.       baseElementAlign: value
  60.     });
  61.   }
  63.   renderRadio(type) {
  64.     const typeUpperCase = type.charAt(0).toUpperCase() + type.substring(1);
  65.     const onChange = this[`on${typeUpperCase}ElementAlignChange`].bind(this);
  66.     return ["tl", "tc", "tr", "cl", "cc", "cr", "bl", "bc", "br"].map(value => {
  67.       return (
  68.         <label key={value}>
  69.           <input
  70.             type="radio"
  71.             value={value}
  72.             onChange={onChange}
  73.             checked={value == this.state[`${type}ElementAlign`]}
  74.           />{" "}
  75.           {value}{" "}
  76.         </label>
  77.       );
  78.     });
  79.   }
  80. }
  82. ReactDOM.render(<App />, mountNode);
  1. .basic-demo .elem1 {
  2.     z-index: 99;
  3.     background-color: #7FBF4D;
  4.     background-image: -webkit-gradient(linear, left top, left bottom, from(#7FBF4D), to(#63A62F));
  5.     background-image: -webkit-linear-gradient(top, #7FBF4D, #63A62F);
  6.     background-image: -moz-linear-gradient(top, #7FBF4D, #63A62F);
  7.     background-image: -ms-linear-gradient(top, #7FBF4D, #63A62F);
  8.     background-image: -o-linear-gradient(top, #7FBF4D, #63A62F);
  9.     background-image: linear-gradient(top, #7FBF4D, #63A62F);
  10.     border: 1px solid #63A62F;
  11.     border-bottom: 1px solid #5B992B;
  12.     box-shadow: inset 0 1px 0 0 #96CA6D;
  13.     color: white;
  14.     padding: 7px 3px 8px;
  15.     text-align: center;
  16.     text-shadow: 0 -1px 0 #4C9021;
  17.     opacity: 0.8;
  18.     width: 100px;
  19. }
  20. .basic-demo .elem2 {
  21.     box-sizing: border-box;
  22.     border: 20px solid #999;
  23.     background-color: #eee;
  24.     width: 340px;
  25.     height: 240px;
  26.     margin: 50px 0 0 100px;
  27.     line-height: 200px;
  28.     text-align: center;
  29. }

事件封装

DOM DOM - 图2

查看源码在线预览

  1. import { dom } from "@icedesign/base";
  3. const { events } = dom;
  4. const { on, off } = events;
  6. class App extends React.Component {
  7.   componentDidMount() {
  8.     const { btn, inner, outter, link, btnOnce, btnOrder, btnOff } = this.refs;
  9.     on(btn, "click", function(e) {
  10.       console.log(this, e.target, e.currentTarget);
  11.     });
  13.     on(inner, "click", function(e) {
  14.       alert("Stop propagation!");
  15.       e.stopPropagation();
  16.     });
  17.     on(outter, "click", function() {
  18.       alert("Stop propagation failed!");
  19.     });
  21.     on(link, "click", function(e) {
  22.       alert("Prevent default!");
  23.       e.preventDefault();
  24.     });
  26.     const onceHandler = function() {
  27.       alert("trigger");
  28.     };
  29.     on(btnOnce, "click", onceHandler);
  30.     on(btnOnce, "click", onceHandler);
  32.     on(btnOrder, "click", function() {
  33.       alert("1");
  34.     });
  35.     on(btnOrder, "click", function() {
  36.       alert("2");
  37.     });
  39.     const removeHandler = function() {
  40.       alert("Remove event listener failed!");
  41.     };
  42.     on(btnOff, "click", removeHandler).off();
  43.   }
  44.   render() {
  45.     return (
  46.       <div className="events-demo">
  47.         <h2>Add event listener</h2>
  48.         <button ref="btn">Click me!</button>
  49.         <h2>Stop propagation</h2>
  50.         <div ref="outter" className="outter">
  51.           Click me!
  52.           <div ref="inner" className="inner">
  53.             Click me!
  54.           </div>
  55.         </div>
  56.         <h2>Prevent default</h2>
  57.         <a ref="link" href="http://www.taobao.com">
  58.           Taobao
  59.         </a>
  60.         <h2>Same handler trigger once</h2>
  61.         <button ref="btnOnce">Click me!</button>
  62.         <h2>Triggering order follows the registration order</h2>
  63.         <button ref="btnOrder">Click me!</button>
  64.         <h2>Remove event listener</h2>
  65.         <button ref="btnOff">Click me!</button>
  66.       </div>
  67.     );
  68.   }
  69. }
  71. ReactDOM.render(<App />, mountNode);
  1. .events-demo .outter {
  2.     box-sizing: border-box;
  3.     color: #fff;
  4.     width: 200px;
  5.     height: 200px;
  6.     line-height: 50px;
  7.     padding: 0 50px 50px;
  8.     background: #999;
  9.     text-align: center;
  10. }
  12. .events-demo .inner {
  13.     color: #333;
  14.     width: 100px;
  15.     height: 100px;
  16.     line-height: 100px;
  17.     background: #eee;
  18.     text-align: center;
  19. }

fixed 类型的定位

目标元素为 fixed 时的定位。

DOM DOM - 图3

查看源码在线预览

  1. import { dom } from "@icedesign/base";
  3. const { position } = dom;
  4. class App extends React.Component {
  5.   state = {
  6.     pinElementAlign: "tl",
  7.     baseElementAlign: "tl"
  8.   };
  10.   render() {
  11.     return (
  12.       <div className="fixed-demo">
  13.         <div id="a4" className="elem1">
  14.           目标元素 a4
  15.         </div>
  16.         <div>
  17.           <h3>pinElement(目标元素 a4)</h3>
  18.           {this.renderRadio("pin")}
  19.         </div>
  20.         <div>
  21.           <h3>baseElement(window)</h3>
  22.           {this.renderRadio("base")}
  23.         </div>
  24.       </div>
  25.     );
  26.   }
  27.   componentDidMount() {
  28.     position.place(
  29.       document.getElementById("a4"),
  30.       position.VIEWPORT,
  31.       this.state.pinElementAlign + " " + this.state.baseElementAlign
  32.     );
  33.   }
  35.   componentDidUpdate() {
  36.     position.place(
  37.       document.getElementById("a4"),
  38.       position.VIEWPORT,
  39.       this.state.pinElementAlign + " " + this.state.baseElementAlign
  40.     );
  41.   }
  43.   onPinElementAlignChange(e) {
  44.     const value = e.target.value;
  45.     this.setState({
  46.       pinElementAlign: value
  47.     });
  48.   }
  50.   onBaseElementAlignChange(e) {
  51.     const value = e.target.value;
  52.     this.setState({
  53.       baseElementAlign: value
  54.     });
  55.   }
  57.   renderRadio(type) {
  58.     const typeUpperCase = type.charAt(0).toUpperCase() + type.substring(1);
  59.     const onChange = this[`on${typeUpperCase}ElementAlignChange`].bind(this);
  60.     return ["tl", "tc", "tr", "cl", "cc", "cr", "bl", "bc", "br"].map(value => {
  61.       return (
  62.         <label key={value}>
  63.           <input
  64.             type="radio"
  65.             value={value}
  66.             onChange={onChange}
  67.             checked={value == this.state[`${type}ElementAlign`]}
  68.           />{" "}
  69.           {value}{" "}
  70.         </label>
  71.       );
  72.     });
  73.   }
  74. }
  76. ReactDOM.render(<App />, mountNode);
  1. .fixed-demo .elem1 {
  2.     z-index: 99;
  3.     background-color: #7FBF4D;
  4.     background-image: -webkit-gradient(linear, left top, left bottom, from(#7FBF4D), to(#63A62F));
  5.     background-image: -webkit-linear-gradient(top, #7FBF4D, #63A62F);
  6.     background-image: -moz-linear-gradient(top, #7FBF4D, #63A62F);
  7.     background-image: -ms-linear-gradient(top, #7FBF4D, #63A62F);
  8.     background-image: -o-linear-gradient(top, #7FBF4D, #63A62F);
  9.     background-image: linear-gradient(top, #7FBF4D, #63A62F);
  10.     border: 1px solid #63A62F;
  11.     border-bottom: 1px solid #5B992B;
  12.     box-shadow: inset 0 1px 0 0 #96CA6D;
  13.     color: white;
  14.     padding: 7px 3px 8px;
  15.     text-align: center;
  16.     text-shadow: 0 -1px 0 #4C9021;
  17.     opacity: 0.8;
  18.     width: 100px;
  19.     position: fixed;
  20. }

自动调整定位

为不让目标元素超出当前可视区域，可设置 needAdjust 参数为 true ，定位时会自动调整目标元素的定位方向。

DOM DOM - 图4

查看源码在线预览

  1. import { dom } from "@icedesign/base";
  3. const { position } = dom;
  4. class App extends React.Component {
  5.   state = {
  6.     pinElementAlign: "tl",
  7.     baseElementAlign: "tl"
  8.   };
  10.   render() {
  11.     return (
  12.       <div className="adjust-demo">
  13.         <div className="cell">
  14.           <div className="ele-wrapper">
  15.             <div id="a3" className="elem1">
  16.               目标元素 a3
  17.             </div>
  18.             <div id="b3" className="elem2">
  19.               基准元素 b3
  20.             </div>
  21.           </div>
  22.         </div>
  23.         <div>
  24.           <h3>pinElement(目标元素 a3)</h3>
  25.           {this.renderRadio("pin")}
  26.         </div>
  27.         <div>
  28.           <h3>baseElement(基准元素 b3)</h3>
  29.           {this.renderRadio("base")}
  30.         </div>
  31.       </div>
  32.     );
  33.   }
  34.   componentDidMount() {
  35.     console.log(
  36.       position.place(
  37.         document.getElementById("a3"),
  38.         document.getElementById("b3"),
  39.         this.state.pinElementAlign + " " + this.state.baseElementAlign,
  40.         [0, 0],
  41.         true
  42.       )
  43.     );
  44.   }
  46.   componentDidUpdate() {
  47.     console.log(
  48.       position.place(
  49.         document.getElementById("a3"),
  50.         document.getElementById("b3"),
  51.         this.state.pinElementAlign + " " + this.state.baseElementAlign,
  52.         [0, 0],
  53.         true
  54.       )
  55.     );
  56.   }
  58.   onPinElementAlignChange(e) {
  59.     const value = e.target.value;
  60.     this.setState({
  61.       pinElementAlign: value
  62.     });
  63.   }
  65.   onBaseElementAlignChange(e) {
  66.     const value = e.target.value;
  67.     this.setState({
  68.       baseElementAlign: value
  69.     });
  70.   }
  72.   renderRadio(type) {
  73.     const typeUpperCase = type.charAt(0).toUpperCase() + type.substring(1);
  74.     const onChange = this[`on${typeUpperCase}ElementAlignChange`].bind(this);
  75.     return ["tl", "tc", "tr", "cl", "cc", "cr", "bl", "bc", "br"].map(value => {
  76.       return (
  77.         <label key={value}>
  78.           <input
  79.             type="radio"
  80.             value={value}
  81.             onChange={onChange}
  82.             checked={value == this.state[`${type}ElementAlign`]}
  83.           />{" "}
  84.           {value}{" "}
  85.         </label>
  86.       );
  87.     });
  88.   }
  89. }
  91. ReactDOM.render(<App />, mountNode);
  1. .adjust-demo .elem1 {
  2.     z-index: 99;
  3.     background-color: #7FBF4D;
  4.     background-image: -webkit-gradient(linear, left top, left bottom, from(#7FBF4D), to(#63A62F));
  5.     background-image: -webkit-linear-gradient(top, #7FBF4D, #63A62F);
  6.     background-image: -moz-linear-gradient(top, #7FBF4D, #63A62F);
  7.     background-image: -ms-linear-gradient(top, #7FBF4D, #63A62F);
  8.     background-image: -o-linear-gradient(top, #7FBF4D, #63A62F);
  9.     background-image: linear-gradient(top, #7FBF4D, #63A62F);
  10.     border: 1px solid #63A62F;
  11.     border-bottom: 1px solid #5B992B;
  12.     box-shadow: inset 0 1px 0 0 #96CA6D;
  13.     color: white;
  14.     padding: 7px 3px 8px;
  15.     text-align: center;
  16.     text-shadow: 0 -1px 0 #4C9021;
  17.     opacity: 0.8;
  18.     width: 100px;
  19.     height: 200px;
  20. }
  21. .adjust-demo .elem2 {
  22.     border: 1px solid #999;
  23.     background-color: #eee;
  24.     width: 300px;
  25.     height: 30px;
  26.     margin: 50px 0 0 100px;
  27.     line-height: 200px;
  28.     text-align: center;
  29. }
  30. .adjust-demo .ele-wrapper {
  31.     position: relative;
  32.     margin: 20px 20px 60px;
  33.     border: 2px red solid;
  34.     padding: 10px;
  35. }

offsetParent

当目标元素的 offsetParent 不为 body 时的定位。

DOM DOM - 图5

查看源码在线预览

  1. import { dom } from "@icedesign/base";
  3. const { position } = dom;
  4. class App extends React.Component {
  5.   state = {
  6.     pinElementAlign: "tl",
  7.     baseElementAlign: "tl"
  8.   };
  10.   render() {
  11.     return (
  12.       <div className="offset-demo">
  13.         <div className="cell">
  14.           <div className="ele-wrapper">
  15.             <div id="a2" className="elem1">
  16.               目标元素 a2
  17.             </div>
  18.           </div>
  19.           <div id="b2" className="elem2">
  20.             基准元素 b2
  21.           </div>
  22.         </div>
  23.         <div>
  24.           <h3>pinElement(目标元素 a2)</h3>
  25.           {this.renderRadio("pin")}
  26.         </div>
  27.         <div>
  28.           <h3>baseElement(基准元素 b2)</h3>
  29.           {this.renderRadio("base")}
  30.         </div>
  31.       </div>
  32.     );
  33.   }
  34.   componentDidMount() {
  35.     position.place(
  36.       document.getElementById("a2"),
  37.       document.getElementById("b2"),
  38.       this.state.pinElementAlign + " " + this.state.baseElementAlign
  39.     );
  40.   }
  42.   componentDidUpdate() {
  43.     position.place(
  44.       document.getElementById("a2"),
  45.       document.getElementById("b2"),
  46.       this.state.pinElementAlign + " " + this.state.baseElementAlign
  47.     );
  48.   }
  50.   onPinElementAlignChange(e) {
  51.     const value = e.target.value;
  52.     this.setState({
  53.       pinElementAlign: value
  54.     });
  55.   }
  57.   onBaseElementAlignChange(e) {
  58.     const value = e.target.value;
  59.     this.setState({
  60.       baseElementAlign: value
  61.     });
  62.   }
  64.   renderRadio(type) {
  65.     const typeUpperCase = type.charAt(0).toUpperCase() + type.substring(1);
  66.     const onChange = this[`on${typeUpperCase}ElementAlignChange`].bind(this);
  67.     return ["tl", "tc", "tr", "cl", "cc", "cr", "bl", "bc", "br"].map(value => {
  68.       return (
  69.         <label key={value}>
  70.           <input
  71.             type="radio"
  72.             value={value}
  73.             onChange={onChange}
  74.             checked={value == this.state[`${type}ElementAlign`]}
  75.           />{" "}
  76.           {value}{" "}
  77.         </label>
  78.       );
  79.     });
  80.   }
  81. }
  83. ReactDOM.render(<App />, mountNode);
  1. .offset-demo .elem1 {
  2.     z-index: 99;
  3.     background-color: #7FBF4D;
  4.     background-image: -webkit-gradient(linear, left top, left bottom, from(#7FBF4D), to(#63A62F));
  5.     background-image: -webkit-linear-gradient(top, #7FBF4D, #63A62F);
  6.     background-image: -moz-linear-gradient(top, #7FBF4D, #63A62F);
  7.     background-image: -ms-linear-gradient(top, #7FBF4D, #63A62F);
  8.     background-image: -o-linear-gradient(top, #7FBF4D, #63A62F);
  9.     background-image: linear-gradient(top, #7FBF4D, #63A62F);
  10.     border: 1px solid #63A62F;
  11.     border-bottom: 1px solid #5B992B;
  12.     box-shadow: inset 0 1px 0 0 #96CA6D;
  13.     color: white;
  14.     padding: 7px 3px 8px;
  15.     text-align: center;
  16.     text-shadow: 0 -1px 0 #4C9021;
  17.     opacity: 0.8;
  18.     width: 100px;
  19. }
  20. .offset-demo .elem2 {
  21.     box-sizing: border-box;
  22.     border: 20px solid #999;
  23.     background-color: #eee;
  24.     width: 340px;
  25.     height: 240px;
  26.     margin: 50px 0 0 100px;
  27.     line-height: 200px;
  28.     text-align: center;
  29. }
  30. .offset-demo .ele-wrapper {
  31.     position: relative;
  32.     margin: 20px;
  33.     border: 2px red solid;
  34.     padding: 20px;
  35. }

相对 Viewport 的定位

目标元素相对 viewport 的定位。

DOM DOM - 图6

查看源码在线预览

  1. import { dom } from "@icedesign/base";
  3. const { position } = dom;
  4. class App extends React.Component {
  5.   state = {
  6.     pinElementAlign: "tl",
  7.     baseElementAlign: "tl"
  8.   };
  10.   render() {
  11.     return (
  12.       <div className="viewport-demo">
  13.         <div className="cell">
  14.           <div className="ele-wrapper">
  15.             <div id="a5" className="elem1">
  16.               目标元素 a5
  17.             </div>
  18.           </div>
  19.         </div>
  20.         <div>
  21.           <h3>pinElement(目标元素 a5)</h3>
  22.           {this.renderRadio("pin")}
  23.         </div>
  24.         <div>
  25.           <h3>baseElement(viewport)</h3>
  26.           {this.renderRadio("base")}
  27.         </div>
  28.       </div>
  29.     );
  30.   }
  31.   componentDidMount() {
  32.     console.log(
  33.       position.place(
  34.         document.getElementById("a5"),
  35.         position.VIEWPORT,
  36.         this.state.pinElementAlign + " " + this.state.baseElementAlign
  37.       )
  38.     );
  39.   }
  41.   componentDidUpdate() {
  42.     console.log(
  43.       position.place(
  44.         document.getElementById("a5"),
  45.         position.VIEWPORT,
  46.         this.state.pinElementAlign + " " + this.state.baseElementAlign
  47.       )
  48.     );
  49.   }
  51.   onPinElementAlignChange(e) {
  52.     const value = e.target.value;
  53.     this.setState({
  54.       pinElementAlign: value
  55.     });
  56.   }
  58.   onBaseElementAlignChange(e) {
  59.     const value = e.target.value;
  60.     this.setState({
  61.       baseElementAlign: value
  62.     });
  63.   }
  65.   renderRadio(type) {
  66.     const typeUpperCase = type.charAt(0).toUpperCase() + type.substring(1);
  67.     const onChange = this[`on${typeUpperCase}ElementAlignChange`].bind(this);
  68.     return ["tl", "tc", "tr", "cl", "cc", "cr", "bl", "bc", "br"].map(value => {
  69.       return (
  70.         <label key={value}>
  71.           <input
  72.             type="radio"
  73.             value={value}
  74.             onChange={onChange}
  75.             checked={value == this.state[`${type}ElementAlign`]}
  76.           />{" "}
  77.           {value}{" "}
  78.         </label>
  79.       );
  80.     });
  81.   }
  82. }
  84. ReactDOM.render(<App />, mountNode);
  1. .viewport-demo .elem1 {
  2.     z-index: 99;
  3.     background-color: #7FBF4D;
  4.     background-image: -webkit-gradient(linear, left top, left bottom, from(#7FBF4D), to(#63A62F));
  5.     background-image: -webkit-linear-gradient(top, #7FBF4D, #63A62F);
  6.     background-image: -moz-linear-gradient(top, #7FBF4D, #63A62F);
  7.     background-image: -ms-linear-gradient(top, #7FBF4D, #63A62F);
  8.     background-image: -o-linear-gradient(top, #7FBF4D, #63A62F);
  9.     background-image: linear-gradient(top, #7FBF4D, #63A62F);
  10.     border: 1px solid #63A62F;
  11.     border-bottom: 1px solid #5B992B;
  12.     box-shadow: inset 0 1px 0 0 #96CA6D;
  13.     color: white;
  14.     padding: 7px 3px 8px;
  15.     text-align: center;
  16.     text-shadow: 0 -1px 0 #4C9021;
  17.     opacity: 0.8;
  18.     width: 100px;
  19. }
  20. .viewport-demo .ele-wrapper {
  21.     position: relative;
  22.     margin: 20px 20px 60px;
  23.     border: 2px red solid;
  24.     padding: 20px;
  25. }

相关区块

DOM DOM - 图7

暂无相关区块