Intensive reading of the Vue official document series 🎉

Embedded components

Examples of using Vue to be compatible with third-party ecologies. Such as JavaScript or jquery-based plug-ins, widgets, libraries, etc.

Some tips:

  • The choice of plug-ins and widgets is best provided with style scope isolation, such as based onBEM.
  • If you need to rely on DOM elements, you should delay the execution of the plug-in untilmountedIn the life cycle, you can passthis.$elGets the root element of the component.
  • You can combine the plug-in’s event system with Vue’s programmatic event listener for common use.
  • Component destructiondestoredBe proactive in consuming plug-in instances to prevent memory leaks.

Example code:

mounted: function () {
    var vm = this;
    $(this.$el)
        // init select2
        .select2({ data: this.options })
        .val(this.value)
        .trigger("change")
        // emit event on change.
        .on("change".function () {
            // Trigger v-Model to convert plugin events to Vue events.
            vm.$emit("input".this.value);
        });
},
watch: {
    value: function (value) {
        // update value
        $(this.$el).val(value).trigger("change");
    },
    options: function (options) {
        // update options
        $(this.$el).empty().select2({ data: options }); }},destroyed: function () {
    // Destroy the component
    $(this.$el).off().select2("destroy");
}
Copy the code

Header Example with scalability

<template>
  <div
    class="card"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="stopDrag"
    @mouseleave="stopDrag"
  >
    <div class="card__header" :style="computedStyle"> </div>
    <div class="card__body"> </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld".data() {
    return {
      dragging: false.// Whether to press down, ready to drag
      start: { x: 0.y: 0 }, // Record the starting point
      distance: { x: 0.y: 0 }, // Record the drag coordinates
    };
  },
  computed: {
    computedStyle() {
      const dy = this.distance.y;
      const dampen = dy > 0 ? 7 : 12;
      const height = 160 + dy / dampen; //160px is the fixed head height, so add it.
      const radius = dy / 480 * 100;
      return { height: height + "px".borderBottomLeftRadius: radius + "%".borderBottomRightRadius: radius + "%"}; }},methods: {
    startDrag(e) {
      e = e.changeTouches ? e.changeTouches : e;
      this.dragging = true;
      this.start.x = e.pageX;
      this.start.y = e.pageY;
    },
    onDrag(e) {
      e = e.changeTouches ? e.changeTouches : e;
      if (this.dragging) {
        this.distance.y = e.pageY - this.start.y; }},stopDrag() {
      if (this.dragging) {
        this.dragging = false;
        window.dynamics.animate(
          this.distance,
          {
            x: 0.y: 0}, {type: window.dynamics.spring,
            duration: 700.friction: 280}); ,}}}};</script>
<style scoped>
.card {
  width: 320px;
  height: 480px;
  background: #eee;
  margin: 500px auto;
  user-select: none;
}
.card__header {
  height: 160px;
  background: grey;
  box-sizing: border-box;
  padding: 30px;
  transition: all .1s;
}
.card__body {
  box-sizing: border-box;
  padding: 30px;
}
</style>
Copy the code
  1. We need to get throughstartTo record the user each time when dragging the starting coordinate, by dragging coordinates minus the starting coordinate, get the effective drag distance.
  2. By addingdragingMark in combination withmousemoveEvent to determine whether the user is ready to drag and is already dragging.
  3. Manual tuning parameterGive an approximate damping value for the effectdampenAnd by judgmentdistance.yTo apply the different damping coefficients.
  4. mouseleaveEvents do not support bubbling, so going inside a child element does not trigger an exit event.
  5. Implement physics animation using dynamics animation library.

The last

I’m actually confused by the way the “damping” is calculated in the official example, where the actual drag distance is divided by a damping value during the drag process.


onDrag: function(e) {
    e = e.changedTouches ? e.changedTouches[0] : e;
    if (this.dragging) {
      // dampen vertical drag by a factor
      var dy = e.pageY - this.start.y;
      var dampen = dy > 0 ? 1.5 : 4;
      this.c.y = 160+ dy / dampen; }}Copy the code

But the damping is calculated once again when you change the style in the calculation properties.

{
    computed: {contentPosition: function() {
            var dy = this.c.y - 160;
            var dampen = dy > 0 ? 2 : 4;
            return {
              transform: "translate3d(0," + dy / dampen + "px,0)"}; }}}Copy the code

It seems that you only need to do it once, there is no need to divide the drag distance calculation in two places, divided by two different damping coefficients. If you can understand what the official example really means, please let me know in the comments below.

Official example address: cn.vuejs.org/v2/examples…