Pelbagai kaedah untuk melaksanakan pelarasan kedudukan dalam Vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan bahagian hadapan. Dalam pembangunan Vue, selalunya perlu melaraskan kedudukan komponen Artikel ini akan memperkenalkan cara melaraskan kedudukan dalam Vue.

Terdapat banyak kaedah untuk melaksanakan pelarasan kedudukan dalam Vue, termasuk gaya CSS, peralihan, hubungan ibu bapa-anak antara komponen dan alatan seperti vue-draggable yang disediakan secara rasmi oleh Vue. Di bawah kami memperkenalkan kaedah ini masing-masing.

Laraskan kedudukan menggunakan gaya CSS

Dalam Vue, anda boleh menggunakan ciri CSS position dan top / bottom / left / right untuk melaraskan kedudukan daripada komponen tersebut. Kaedah ini boleh mengawal kedudukan elemen secara fleksibel dan menyokong kedudukan mutlak, kedudukan tetap dan kedudukan relatif. Berikut ialah kod sampel yang boleh menggerakkan elemen 20 piksel ke kanan:

<template>
  <div class="box">
    <p>这是一个文本框。</p>
  </div>
</template>

<style>
.box {
  position: relative;
  left: 20px;
}
</style>

Dalam kod di atas, kelas .box menetapkan kedudukan relatif dan atribut left ditetapkan kepada 20px , yang bermaksud bergerak ke kanan 20 piksel.

Selain atribut position dan top / bottom / left / right, anda juga boleh menggunakan atribut margin dan padding untuk melaraskan elemen. Saya tidak akan pergi ke butiran di sini.

Gunakan animasi peralihan

Vue menyediakan komponen peralihan untuk mencapai kesan animasi peralihan, yang boleh mengoptimumkan perubahan kedudukan komponen. Dengan menggunakan komponen peralihan, kita boleh mencipta kesan peralihan yang lancar apabila elemen muncul, hilang atau menukar kedudukannya.

Berikut ialah kod sampel ringkas:

<template>
  <transition name="slide">
    <div v-if="show">
      这是一个文本框。
      <button @click="toggle">隐藏文本框</button>
    </div>
  </transition>
</template>

<script>
export default {
  data: function () {
    return {
      show: true
    };
  },
  methods: {
    toggle: function () {
      this.show = !this.show;
    }
  }
};
</script>

<style>
.slide-enter,
.slide-leave-to {
  transform: translateX(100%);
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
</style>

Dalam kod di atas, kami menggunakan komponen peralihan Vue dan menentukan kesan peralihan sebagai slide. Transformasi transformasi apabila masuk dan keluar ditakrifkan dalam kelas slide untuk menjadikan elemen diterjemahkan 100% di sepanjang paksi X. Dalam kelas slide-enter-active dan slide-leave-active, kesan animasi peralihan ditakrifkan dan transformasi selesai dalam masa 0.5s.

Gunakan hubungan ibu bapa-anak antara komponen

Dalam Vue, hubungan bersarang antara komponen adalah sangat fleksibel dan pelarasan kedudukan boleh dicapai melalui hubungan ibu bapa-anak. Berikut ialah contoh kod mudah:

<template>
  <div>
    <my-box v-bind:x="30" v-bind:y="50" />
    <my-box v-bind:x="80" v-bind:y="100" />
  </div>
</template>

<script>
import MyBox from "./MyBox.vue";

export default {
  components: {
    MyBox
  }
};
</script>

Dalam kod di atas, kami mentakrifkan komponen induk dan menyarangkan dua komponen anak yang serupa MyBox di dalamnya dan lulus dalam kedudukan relatifnya. Komponen MyBox menerima parameter x dan y yang dihantar oleh komponen induk dan menggunakannya pada komponen:

<template>
  <div v-bind:style="{position: &#39;relative&#39;, left: x+&#39;px&#39;, top: y+&#39;px&#39;}">
    <p>这是一个文本框。</p>
  </div>
</template>

<script>
export default {
  props: ["x", "y"]
};
</script>

Dalam kod di atas, kami menggunakan arahan v-bind untuk lulus parameter yang diluluskan oleh komponen induk Parameter x dan y digunakan pada elemen <div> di mana komponen berada, dengan itu mencapai pelarasan kedudukan.

Gunakan alat vue-draggable

vue-draggable ialah alat komponen drag-and-drop yang disediakan secara rasmi oleh Vue, yang boleh merealisasikan fungsi menyeret dan menyusun semula dengan mudah. vue-draggable menyediakan API yang sangat kaya dan fungsi panggil balik untuk memenuhi keperluan pelbagai senario yang kompleks.

Berikut ialah kod sampel ringkas:

<template>
  <draggable v-model="list">
    <div v-for="(item,index) in list" v-bind:key="item.id">
      <p>{{ item.text }}</p>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, text: '第1个文本', },
        { id: 2, text: '第2个文本', },
        { id: 3, text: '第3个文本', },
        { id: 4, text: '第4个文本', },
      ]
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan komponen boleh seret vue dan mengikat tatasusunan list pada komponen. list Tatasusunan mengandungi 4 objek, setiap objek mewakili teks. Antaranya, atribut id diperlukan dan digunakan untuk menentukan pengecam unik setiap teks.

Dalam templat komponen, kami menggunakan v-for untuk melingkari setiap teks dan mengaitkan nilai id setiap teks. Apabila pengguna menyeret sebarang teks pada halaman, tatasusunan list akan mengemas kini dan mengekalkan susunan baharu secara automatik.

Di atas adalah empat kaedah untuk mencapai pelarasan kedudukan dalam Vue Pembangun boleh memilih kaedah yang paling sesuai untuk memenuhi keperluan mengikut senario tertentu.

Atas ialah kandungan terperinci Pelbagai kaedah untuk melaksanakan pelarasan kedudukan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!