81 lines
1.9 KiB
Vue
81 lines
1.9 KiB
Vue
<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>
|