ant-design-vue/components/vc-align/demo/point.vue

<script>
import Align from '../index';

const align = {
  points: ['cc', 'cc'],
};

export default {
  data () {
    return {
      point: null,
    };
  },

  methods: {
    onClick ({ pageX, pageY }) {
      this.point = { pageX, pageY };
    },
  },

  render () {
    return (
      <div style={{ marginBottom: '170px' }}>
        <div
          style={{ margin: '20px', border: '1px solid red', padding: '100px 0', textAlign: 'center' }}
          onClick={this.onClick}
        >
          Click this region please : )
        </div>

        <Align
          target={this.point}
          align={align}
        >
          <div
            style={{ position: 'absolute', width: '100px', height: '100px', background: 'rgba(0, 255, 0, 0.5)', pointerEvents: 'none' }}
          >Align</div>
        </Align>
      </div>
    );
  },
};

</script>