Bagaimana untuk melaksanakan kotak pop timbul uniapp

Dengan populariti Internet mudah alih, semakin ramai orang mula menggunakan telefon pintar dan tablet untuk aktiviti dalam talian. Seiring dengan ini, permintaan untuk aplikasi mudah alih dan reka bentuk web juga meningkat. UniApp ialah rangka kerja pembangunan merentas platform yang menyelesaikan masalah ini Ia menyediakan penyelesaian pembangunan merentas platform yang boleh mencapai satu set kod dan kesan berjalan pada berbilang terminal, termasuk tetapi tidak terhad kepada iOS, Android, H5 dan platform lain. .

Artikel ini terutamanya membincangkan kotak pop timbul dalam rangka kerja UniApp.

Dalam rangka kerja UniApp, kotak pop timbul ialah salah satu komponen yang biasa digunakan Ia boleh membantu kami menggesa pengguna dalam bentuk tetingkap timbul pada klien, seperti mengesahkan operasi, mendapatkan. log masuk pengguna dan maklumat lain, dsb. Oleh itu, cara melaksanakan kotak timbul UniApp adalah salah satu kemahiran yang mesti kita kuasai.

1. Penggunaan kotak timbul UniApp

Rangka kerja UniApp menyediakan dua jenis kotak timbul yang berbeza untuk membantu kami memenuhi keperluan yang berbeza. Mari kita lihat salah satu penggunaan asas:

• Gunakan alert() untuk memaparkan maklumat teks ringkas

Dalam rangka kerja UniApp, anda boleh menggunakan alert() kaedah untuk membuat teks ringkas Maklumat dipaparkan kepada pengguna dalam bentuk tetingkap timbul:

uni.alert({
  title: '提示信息',
  content: '这是一条简单的弹出提示',
  success: function () {
     console.log('弹出框已关闭')
  }
});

Antaranya, tajuk ialah tajuk kotak timbul, kandungan adalah kandungan utama daripada kotak pop timbul, dan kejayaan ialah fungsi panggil balik selepas kotak pop timbul ditutup Sudah tentu, anda juga boleh menggunakan cancel Laksanakan fungsi fungsi panggil balik butang batal.

• Gunakan confirm() untuk mendapatkan pilihan pengguna

Dalam rangka kerja UniApp, kami juga boleh menggunakan kaedah confirm() untuk muncul kotak gesaan pemilihan, contohnya :

uni.confirm({
  title: '选择操作',
  content: '你确定要进行某个操作吗？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确认操作');
    } else if (res.cancel) {
      console.log('用户取消操作');
    }
  }
});

Dalam kod di atas, kaedah confirm() akan muncul kotak gesaan pemilihan untuk menggesa pengguna membuat pilihan Selepas pengguna melengkapkan pemilihan, kami akan mendapatkan pemilihan pengguna melalui fungsi panggil balik dan menilai hasil pemilihan. Antaranya, res.confirm menunjukkan bahawa pengguna mengesahkan operasi, dan res.cancel menunjukkan bahawa pengguna membatalkan operasi.

2 Melaksanakan kotak timbul UniApp tersuai

Selain menggunakan kaedah terbina dalam yang disediakan oleh rangka kerja, kami juga boleh menyesuaikan kotak timbul untuk mencapai yang lebih fleksibel kesan. Sekarang, mari kita lihat cara melaksanakan kotak timbul UniApp tersuai.

1. Layout HTML

Pertama, kita perlu menyediakan susun atur HTML bagi kotak pop timbul, contohnya:

<template>
  <view class="modal">
    <view class="modal-content">
      <view class="modal-header">
        <h2>弹出框标题</h2>
        <i class="fa fa-times" @click="closeModal"></i>
      </view>
      <view class="modal-body">
        <p>这里是弹出框的主体内容</p>
      </view>
      <view class="modal-footer">
        <button type="button" @click="submit">确定</button>
        <button type="button" @click="closeModal">取消</button>
      </view>
    </view>
  </view>
</template>

Dalam susun atur di atas, kami Komponen Paparan digunakan untuk mencapai kesan gaya yang berbeza melalui atribut kelas yang berbeza Pada masa yang sama, kami juga menggunakan arahan Vue seperti @klik untuk mengikat peristiwa klik.

2. Gaya CSS

Seterusnya, kita perlu memproses lagi gaya kotak pop timbul untuk menjadikannya lebih cantik dan munasabah, contohnya:

.modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .modal-content {
  width: 400rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal .modal-content .modal-header {
  background-color: #337ab7;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
}

.modal .modal-content .modal-header h2 {
  margin: 0;
}

.modal .modal-content .modal-header i {
  font-size: 20rpx;
  cursor: pointer;
}

.modal .modal-content .modal-body {
  padding: 20rpx;
}

.modal .modal-content .modal-footer {
  background-color: #eeeeee;
  padding: 10rpx;
  display: flex;
  justify-content: flex-end;
}

.modal .modal-content .modal-footer button {
  border: none;
  padding: 10rpx 20rpx;
  margin-left: 10rpx;
  border-radius: 5rpx;
  cursor: pointer;
}

.modal .modal-content .modal-footer button:first-child {
  background-color: #337ab7;
  color: #ffffff;
}

.modal .modal-content .modal-footer button:last-child {
  background-color: #dddddd;
  color: #333333;
}

Dalam gaya CSS di atas, kami menggunakan beberapa teknik CSS untuk mencapai kesan gaya berbilang kumpulan butang melalui pengecam kelas pseudo seperti :selepas dan :sebelum Pada masa yang sama, kami juga menggunakan peraturan seperti @keyframes untuk Menentukan kesan animasi.

3. Kod JS

Akhir sekali, kita perlu menulis kod JS untuk melaksanakan fungsi khusus kotak pop timbul, contohnya:

export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    closeModal() {
      this.visible = false;
    },
    submit() {
      console.log('执行提交操作');
      this.closeModal();
    }
  }
}

Dalam kod di atas, kami menggunakan kaedah data() untuk mentakrifkan atribut data bernama visible, yang digunakan untuk menyimpan paparan dan status penutupan kotak pop timbul. Pada masa yang sama, kami juga mentakrifkan tiga kaedah: showModal(), closeModal() dan submit(), yang digunakan untuk mengawal paparan dan penutupan kotak pop timbul dan gelagat klik butang pengesahan masing-masing.

4. Penggunaan halaman

Selepas melengkapkan langkah di atas, kami boleh menggunakan kotak pop timbul tersuai kami dalam halaman tertentu, contohnya:

<template>
  <view>
    <button type="button" @click="showModal">打开弹出框</button>
    <modal :visible.sync="visible"></modal>
  </view>
</template>

<script>
import Modal from '@/components/modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan kaedah penulisan komponen Vue dan memperkenalkan komponen Modal yang kami takrifkan melalui sintaks import Kemudian, dalam kaedah data(), kami juga mentakrifkan atribut data bernama visible . Dalam templat, kami memanggil kaedah showModal melalui acara mengikat @click pada teg butang untuk memaparkan kotak timbul.

3. Ringkasan

Pada ketika ini, kami telah menyelesaikan proses lengkap untuk menyesuaikan kotak timbul UniApp. Secara umumnya, komponen kotak pop timbul yang disediakan oleh UniApp mempunyai kaedah terbina dalam seperti alert() dan confirm(), yang boleh memenuhi keperluan asas jika anda memerlukan kotak pop timbul yang lebih kompleks, anda boleh menggunakan reka letak HTML, Gaya CSS, kod JS, dsb. Dalam aspek ini, kesan menyesuaikan kotak pop timbul boleh dicapai. Saya harap artikel ini dapat membantu kerja pembangunan UniApp semua orang.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak pop timbul uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!