You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
1.9 KiB
89 lines
1.9 KiB
<script>
|
|
import Trigger from '../index'
|
|
import '../assets/index.less'
|
|
import './point.less'
|
|
const builtinPlacements = {
|
|
topLeft: {
|
|
points: ['tl', 'tl'],
|
|
},
|
|
}
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
action: 'click',
|
|
mouseEnterDelay: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
onActionChange ({ target: { value }}) {
|
|
this.action = value
|
|
},
|
|
|
|
onDelayChange ({ target: { value }}) {
|
|
this.mouseEnterDelay = Number(value) || 0
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const { action, mouseEnterDelay } = this
|
|
const innerTrigger = (
|
|
<div
|
|
style={{ padding: '20px', background: 'rgba(0, 255, 0, 0.3)' }}
|
|
>
|
|
This is popup
|
|
</div>
|
|
)
|
|
return (
|
|
<div>
|
|
<label>
|
|
Trigger type:
|
|
{' '}
|
|
<select value={action} onChange={this.onActionChange}>
|
|
<option>click</option>
|
|
<option>hover</option>
|
|
<option>contextmenu</option>
|
|
</select>
|
|
</label>
|
|
|
|
{' '}
|
|
|
|
{action === 'hover' && <label>
|
|
Mouse enter delay:
|
|
{' '}
|
|
<input type='text' value={mouseEnterDelay} onChange={this.onDelayChange} />
|
|
</label>}
|
|
|
|
<div style={{ margin: '50px' }}>
|
|
<Trigger
|
|
popupPlacement='topLeft'
|
|
action={[action]}
|
|
popupAlign={{
|
|
overflow: {
|
|
adjustX: 1,
|
|
adjustY: 1,
|
|
},
|
|
}}
|
|
mouseEnterDelay={mouseEnterDelay}
|
|
popupClassName='point-popup'
|
|
builtinPlacements={builtinPlacements}
|
|
popup={innerTrigger}
|
|
alignPoint
|
|
>
|
|
<div
|
|
style={{
|
|
border: '1px solid red',
|
|
padding: '100px 0',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
Interactive region
|
|
</div>
|
|
</Trigger>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
</script>
|