ant-design-vue/components/vc-trigger/demo/simple.vue

<script>
import Trigger from '../index';
import '../assets/index.less';
import { Input, Button } from 'ant-design-vue';
function getPopupAlign(state) {
  return {
    offset: [state.offsetX, state.offsetY],
    overflow: {
      adjustX: 1,
      adjustY: 1,
    },
  };
}

const builtinPlacements = {
  left: {
    points: ['cr', 'cl'],
  },
  right: {
    points: ['cl', 'cr'],
  },
  top: {
    points: ['bc', 'tc'],
  },
  bottom: {
    points: ['tc', 'bc'],
  },
  topLeft: {
    points: ['bl', 'tl'],
  },
  topRight: {
    points: ['br', 'tr'],
  },
  bottomRight: {
    points: ['tr', 'br'],
  },
  bottomLeft: {
    points: ['tl', 'bl'],
  },
};

function preventDefault(e) {
  e.preventDefault();
}

function getPopupContainer(trigger) {
  return trigger.parentNode;
}

export default {
  data() {
    return {
      mask: false,
      maskClosable: false,
      placement: 'right',
      trigger: {
        hover: 1,
      },
      offsetX: undefined,
      offsetY: undefined,
      transitionName: 'rc-trigger-popup-zoom',
      destroyPopupOnHide: false,
      destroyed: false,
    };
  },
  methods: {
    setState(state, callback) {
      Object.assign(this.$data, state);
      this.$nextTick(() => {
        callback && callback();
      });
    },
    onPlacementChange(e) {
      this.setState({
        placement: e.target.value,
      });
    },

    onTransitionChange(e) {
      this.setState({
        transitionName: e.target.checked ? e.target.value : '',
      });
    },

    onTriggerChange(e) {
      const trigger = Object.assign({}, this.$data.trigger);
      if (e.target.checked) {
        trigger[e.target.value] = 1;
      } else {
        delete trigger[e.target.value];
      }
      this.setState({
        trigger,
      });
    },

    onOffsetXChange(e) {
      const targetValue = e.target.value;
      this.setState({
        offsetX: targetValue || undefined,
      });
    },

    onOffsetYChange(e) {
      const targetValue = e.target.value;
      this.setState({
        offsetY: targetValue || undefined,
      });
    },

    onVisibleChange(visible) {
      console.log('tooltip', visible);
    },

    onMask(e) {
      this.setState({
        mask: e.target.checked,
      });
    },

    onMaskClosable(e) {
      this.setState({
        maskClosable: e.target.checked,
      });
    },

    destroy() {
      this.setState({
        destroyed: true,
      });
    },

    handleDestroyPopupOnHide(e) {
      this.setState({
        destroyPopupOnHide: e.target.checked,
      });
    },
  },

  render() {
    const state = this.$data;
    const trigger = state.trigger;
    if (state.destroyed) {
      return null;
    }
    return (
      <div>
        <div style={{ margin: '10px 20px' }}>
          <label>
            placement:
            <select value={state.placement} onChange={this.onPlacementChange}>
              <option>right</option>
              <option>left</option>
              <option>top</option>
              <option>bottom</option>
              <option>topLeft</option>
              <option>topRight</option>
              <option>bottomRight</option>
              <option>bottomLeft</option>
            </select>
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label>
            <a-checkbox
              value="rc-trigger-popup-zoom"
              onChange={this.onTransitionChange}
              checked={state.transitionName === 'rc-trigger-popup-zoom'}
            />
            transitionName
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp; trigger:
          <label>
            <a-checkbox value="hover" checked={!!trigger.hover} onChange={this.onTriggerChange} />
            hover
          </label>
          <label>
            <a-checkbox value="focus" checked={!!trigger.focus} onChange={this.onTriggerChange} />
            focus
          </label>
          <label>
            <a-checkbox value="click" checked={!!trigger.click} onChange={this.onTriggerChange} />
            click
          </label>
          <label>
            <a-checkbox
              value="contextMenu"
              checked={!!trigger.contextMenu}
              onChange={this.onTriggerChange}
            />
            contextMenu
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label>
            <a-checkbox
              checked={!!state.destroyPopupOnHide}
              onChange={this.handleDestroyPopupOnHide}
            />
            destroyPopupOnHide
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label>
            <a-checkbox checked={!!state.mask} onChange={this.onMask} />
            mask
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label>
            <a-checkbox checked={!!state.maskClosable} onChange={this.onMaskClosable} />
            maskClosable
          </label>
          <br />
          <label>
            offsetX:
            <Input type="text" onChange={this.onOffsetXChange} style={{ width: '50px' }} />
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <label>
            offsetY:
            <Input type="text" onChange={this.onOffsetYChange} style={{ width: '50px' }} />
          </label>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <Button onClick={this.destroy}>destroy</Button>
        </div>
        <div style={{ margin: '100px', position: 'relative' }}>
          <Trigger
            getPopupContainer={undefined && getPopupContainer}
            popupAlign={getPopupAlign(state)}
            popupPlacement={state.placement}
            destroyPopupOnHide={state.destroyPopupOnHide}
            // zIndex={40}
            mask={state.mask}
            maskClosable={state.maskClosable}
            // maskAnimation="fade"
            // mouseEnterDelay={0.1}
            // mouseLeaveDelay={0.1}
            action={Object.keys(state.trigger)}
            builtinPlacements={builtinPlacements}
            popupAnimation={state.transitionName}
          >
            <div
              slot="popup"
              style={{ border: '1px solid red', padding: '10px', background: 'white' }}
            >
              i am a popup
            </div>
            <a-button onClick={preventDefault}>trigger</a-button>
          </Trigger>
        </div>
      </div>
    );
  },
};
</script>