DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #156 from jayZOU/master 

add el-dropdown component
This commit is contained in:
当耐特 2018-11-05 17:43:24 +08:00 committed by GitHub
parent 9c3b7a7318 1bd06fc4fd
commit 677aa2a20c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 262 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/omi-element-ui/src/elements/dropdown/_index.css
View File

@ -1,7 +1,11 @@
div{
margin:10px;
.el-dropdown-link{
cursor: pointer;
color: #409eff;
}
div{
margin:10px;
.dropdown-group{
clear: both;
}
.dropdown-group el-dropdown {
float: left;
margin: 30px;
}

134
packages/omi-element-ui/src/elements/dropdown/index.js
View File

@ -1,37 +1,133 @@
import { tag, WeElement } from 'omi'
import {tag, WeElement} from 'omi'
import style from './_index.css'
import '../../omi-element-ui/el-dropdown'
import '../../omi-element-ui/el-dropdown-menu'
import '../../omi-element-ui/el-dropdown-item'
import icon from '../../omi-element-ui/style/global/_icon.scss'
import dropdown from "../../omi-element-ui/style/_dropdown.scss"
@tag('my-app')
class MyApp extends WeElement {
css() {
return style
return style + icon + dropdown
}
onItemClick = e => {
console.log(e.detail)
onItemClick = (e) => {
console.log(11)
}
render(props, data) {
return (
<div>
<div>
<el-dropdown
onItemClick={this.onItemClick}
type="link"
icon="arrow-down"
text="下拉菜单"
icon-right
items={[
{ text: '黄金糕' },
{ text: '狮子头' },
{ text: '螺蛳粉' },
{ text: '双皮奶', disabled: true },
{ text: '蚵仔煎', divided: true }
]}
/>
<div class="dropdown-group">
<el-dropdown menu={(
<el-dropdown-menu>
<el-dropdown-item onClick={this.onItemClick}>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
)} trigger="click">
<span class="el-dropdown-link">
click菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
</el-dropdown>
<el-dropdown menu={(
<el-dropdown-menu>
<el-dropdown-item onClick={this.onItemClick}>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
)}>
<span class="el-dropdown-link">
hover菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
</el-dropdown>
</div>
<div class="dropdown-group">
<el-dropdown menu={(
<el-dropdown-menu>
<el-dropdown-item onClick={this.onItemClick}>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
)} type="primary">
<span>
更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
</el-dropdown>
<el-dropdown menu={(
<el-dropdown-menu>
<el-dropdown-item onClick={this.onItemClick}>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
)} split-button type="primary">
<span>
更多菜单
</span>
</el-dropdown>
</div>
<div class="dropdown-group">
<el-dropdown menu={(
<el-dropdown-menu>
<el-dropdown-item onClick={this.onItemClick}>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
)} split-button size="medium" type="primary">
<span>
更多菜单
</span>
</el-dropdown>
<el-dropdown menu={(
<el-dropdown-menu>
<el-dropdown-item onClick={this.onItemClick}>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
)} split-button size="small" type="primary">
<span>
更多菜单
</span>
</el-dropdown>
<el-dropdown menu={(
<el-dropdown-menu>
<el-dropdown-item onClick={this.onItemClick}>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
)} split-button size="mini" type="primary">
<span>
更多菜单
</span>
</el-dropdown>
</div>
</div>
)
}
}

21
packages/omi-element-ui/src/omi-element-ui/el-dropdown-item/index.js Normal file
View File

@ -0,0 +1,21 @@
import { define, WeElement } from "omi";
import style from "../style/_dropdown.scss"
define('el-dropdown-item', class extends WeElement {
css() {
return style
}
install() {
}
render(props, data) {
return (
<li class="el-dropdown-menu__item">
<slot></slot>
</li>
)
}
})

20
packages/omi-element-ui/src/omi-element-ui/el-dropdown-menu/index.js Normal file
View File

@ -0,0 +1,20 @@
import { define, WeElement } from 'omi'
import style from "../style/_dropdown.scss"
define('el-dropdown-menu', class extends WeElement {
css() {
return style
}
render(props, data) {
return (
<slot></slot>
)
}
})

159
packages/omi-element-ui/src/omi-element-ui/el-dropdown/index.js
View File

@ -1,83 +1,100 @@
import { define, WeElement } from 'omi'
import { define, WeElement } from "omi";
import '../style/global/index.css'
import icon from '../style/global/_icon.scss'
import style from '../style/_dropdown.scss'
import dropdown from "../style/_dropdown.scss"
import popper from "../style/_popper.scss"
import icon from '../../omi-element-ui/style/global/_icon.scss'
import '../../omi-element-ui/el-button'
import '../../omi-element-ui/el-button-group'
define('el-dropdown', class extends WeElement {
css() {
return icon + style
data = {
showPopper: false,
left: 0,
top: 0,
arrow_left: 0,
trigger: ''
}
install() {
this.data.show = false
this.data.left = 0
this.data.top = 0
css() {
return dropdown + popper + icon
}
clickHandle = (evt) => {
if(this.data.showPopper) {
this.hide()
}else{
this.show()
}
}
show = () => {
this.data.showPopper = true;
const boxButton = this.dropElm.getBoundingClientRect()
const boxList = this.menuElm.getBoundingClientRect()
this.data.left = boxButton.left - (boxList.width - boxButton.width) / 2
this.data.top = boxButton.top + boxButton.height
this.data.arrow_left = boxButton.width / 2;
this.update();
}
hide = () => {
this.data.showPopper = false;
this.update();
}
render(props, data) {
return [
<div
class="el-dropdown"
ref={e => {
this.dd = e
}}
style="cursor:pointer;"
>
<span
class={`el-dropdown-${props.type} el-dropdown-selfdefine`}
onClick={this.onBtnClick}
>
{props.text}
<i
class={`el-icon-${props.icon} el-icon--${
props.iconLeft ? 'left' : 'right'
}`}
/>
</span>
</div>,
<ul
ref={e => {
this.list = e
}}
class="el-dropdown-menu el-popper"
style={`transform-origin: center top 0px;left:${data.left}px;top:${
data.top
}px; z-index: 2016; visibility: ${data.show ? 'visible' : 'hidden'};`}
>
{props.items.map(item => {
return (
<li
tabindex="-1"
class={`el-dropdown-menu__item ${
item.disabled ? 'is-disabled' : ''
} ${item.divided ? 'el-dropdown-menu__item--divided' : ''}`}
onClick={() => {
this.onItemClick(item)
}}
>
{item.text}
</li>
)
})}
data.trigger = props.trigger || 'hover';
console.log(props);
const triggerElm = props.splitButton ? (
<el-button-group style="color:#fff">
<el-button size={props.size} type={props.type}>
<slot></slot>
</el-button>
<el-button size={props.size} type={props.type} class="el-dropdown__caret-button" style="padding: 0px;">
<i class="el-dropdown__icon el-icon-arrow-down"></i>
</el-button>
</el-button-group>
) : props.type ? (
<el-button type={props.type}>
<slot></slot>
</el-button>
) : (
<slot></slot>
)
const box = props.trigger === 'click' ? (
<div ref={e => this.dropElm = e} class="el-dropdown" onClick={this.clickHandle}>
{triggerElm}
</div>
) : (
<div ref={e => this.dropElm = e} class="el-dropdown" onMouseleave={this.hide} onMouseenter={this.show}>
{triggerElm}
</div>
)
const popper = (
<ul class="el-dropdown-menu el-popper" ref={e => this.menuElm = e} style={`transform-origin: center top 0px;position: absolute; left:${data.left}px; top:${data.top}px; z-index: 2032;visibility: ${data.showPopper ? 'visible' : 'hidden'};`}>
{props.menu}
</ul>
]
)
return (
<div>
{box}
{popper}
</div>
)
}
onItemClick = item => {
this.fire('itemclick', item)
this.data.show = false
this.update()
}
onBtnClick = () => {
this.data.show = !this.data.show
if (this.data.show) {
const boxButton = this.dd.getBoundingClientRect()
const boxList = this.list.getBoundingClientRect()
this.data.left = boxButton.left - (boxList.width - boxButton.width) / 2
this.data.top = boxButton.top + boxButton.height
}
this.update()
}
})

2
packages/omi-element-ui/src/omi-element-ui/style/_dropdown.scss
View File

@ -1,7 +1,7 @@
@import "mixins/mixins";
@import "common/var";
@import "button";
@import "./popper";
@import "popper";
@include b(dropdown) {
display: inline-block;

0
packages/omi-element-ui/src/omi-element-ui/style/popper.scss → packages/omi-element-ui/src/omi-element-ui/style/_popper.scss
View File

0
packages/omi-element-ui/src/omi-element-ui/style/tooltip.scss → packages/omi-element-ui/src/omi-element-ui/style/_tooltip.scss
View File

2
packages/omi-element-ui/src/omi-element-ui/style/autocomplete.scss
View File

@ -3,7 +3,7 @@
@import "common/var";
@import "./input.scss";
@import "./scrollbar.scss";
@import "./popper";
@import "popper";
@include b(autocomplete) {
position: relative;

2
packages/omi-element-ui/src/omi-element-ui/style/cascader.scss
View File

@ -1,7 +1,7 @@
@import "mixins/mixins";
@import "common/var";
@import "./input.scss";
@import "./popper";
@import "popper";
@include b(cascader) {
display: inline-block;

2
packages/omi-element-ui/src/omi-element-ui/style/date-picker.scss
View File

@ -9,4 +9,4 @@
@import "./date-picker/time-picker.scss";
@import "./input.scss";
@import "./scrollbar.scss";
@import "./popper";
@import "popper";

2
packages/omi-element-ui/src/omi-element-ui/style/index.scss
View File

@ -27,7 +27,7 @@
@import "./time-select.scss";
@import "./time-picker.scss";
@import "./popover.scss";
@import "./tooltip.scss";
@import "tooltip";
@import "./message-box.scss";
@import "./breadcrumb.scss";
@import "./breadcrumb-item.scss";

2
packages/omi-element-ui/src/omi-element-ui/style/popover.scss
View File

@ -1,6 +1,6 @@
@import "mixins/mixins";
@import "common/var";
@import "./popper";
@import "popper";
@include b(popover) {
position: absolute;

2
packages/omi-element-ui/src/omi-element-ui/style/select-dropdown.scss
View File

@ -1,6 +1,6 @@
@import "mixins/mixins";
@import "common/var";
@import "./popper";
@import "popper";
@include b(select-dropdown) {
position: absolute;

2
packages/omi-element-ui/src/omi-element-ui/style/time-picker.scss
View File

@ -5,4 +5,4 @@
@import "./date-picker/time-range-picker.scss";
@import "./input.scss";
@import "./scrollbar.scss";
@import "./popper";
@import "popper";

2
packages/omi-element-ui/src/omi-element-ui/style/time-select.scss
View File

@ -2,7 +2,7 @@
@import "./date-picker/picker.scss";
@import "./date-picker/date-picker.scss";
@import "./scrollbar.scss";
@import "./popper";
@import "popper";
.time-select {
margin: 5px 0;