<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>