Cara menggunakan Elemen Vue untuk melaksanakan fungsi mencipta folder baharu

Vue ialah rangka kerja JavaScript sumber terbuka untuk membina antara muka pengguna, dan Element ialah perpustakaan komponen desktop berdasarkan Vue2.0 yang disediakan untuk pembangun, menyediakan komponen asas (seperti butang, kotak input, tetingkap timbul, dll.) dan komponen lanjutan (seperti jadual, pemilih tarikh, muat naik imej, dsb.).

Dalam artikel ini, kita akan belajar cara menggunakan Elemen Vue untuk melaksanakan fungsi mencipta folder baharu. Ciri ini merupakan bahagian penting dalam banyak projek dan membantu pengguna mengatur dan mengurus fail.

Pertama, kita perlu menambah pergantungan Elemen pada projek Vue. Anda boleh menggunakan npm atau yarn untuk memasang Element, seperti yang ditunjukkan di bawah:

npm install element-ui --save

atau

yarn add element-ui

Seterusnya, kita perlu memperkenalkan Element dalam fail masukan Vue dan mendaftarkannya ke dalam Contoh Vue. Anda boleh menambah kod berikut pada main.js:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Sekarang, kita boleh menggunakan komponen yang disediakan oleh Element dalam projek. Seterusnya, kita akan melihat cara menggunakan komponen Element untuk mencipta borang dan menambah keupayaan untuk mencipta folder baharu.

Buka komponen vue anda dan tambahkan kod berikut:

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="文件夹名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-wrapper">
      <el-button type="primary" @click="submitForm">创建</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewFolder',
  data() {
    return {
      form: {
        name: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.createFolder()
        } else {
          return false
        }
      })
    },
    createFolder() {
      // 在这里实现创建文件夹的功能
      // 比如使用axios向服务器发送请求等
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan spesifikasi asas Vue untuk mencipta komponen bernama NewFolder dan menambah komponen yang mengandungi Input kotak dan borang untuk membuat butang.

Dalam kaedah, kami mentakrifkan kaedah submitBorang yang akan dipanggil apabila pengguna mengklik butang cipta. Dalam kaedah submitForm, kami memanggil ini.$refs.form.validate untuk mengesahkan sama ada nama folder yang dimasukkan oleh pengguna memenuhi keperluan. Jika pengesahan lulus, kaedah createFolder dipanggil untuk melaksanakan fungsi mencipta folder baharu.

Jika kami ingin menyemak sama ada pengguna memasukkan nama folder, kami boleh menggunakan prop dalam komponen el-form-item untuk menentukan peraturan pengesahan dan menambah mesej ralat:

<el-form-item label="文件夹名称" prop="name">
  <el-input v-model="form.name"></el-input>
  <el-input
    v-model="form.name"
    maxlength="10"
    placeholder="请输入文件夹名称"
    show-word-limit
    clearable
    :class="{&#39;error&#39;: $refs.ref.validateState === &#39;error&#39;}"
  >
    <el-button slot="append" icon="el-icon-document-add"></el-button>
  </el-input>
  <div class="error-message">{{$refs.ref && $refs.ref.validateMessage}}</div>
</el-form-item>

Dalam komponen el-form-item, kami menggunakan prop untuk menentukan peraturan pengesahan dan menambah beberapa sifat pada komponen el-input. Sebagai contoh, kami menggunakan atribut maxlength untuk mengehadkan panjang nama folder, menggunakan atribut pemegang tempat untuk memaparkan mesej gesaan lalai, menggunakan atribut show-word-limit untuk memaparkan bilangan aksara yang dimasukkan pada masa ini dan menggunakan atribut yang boleh dikosongkan. untuk membolehkan pengguna mengosongkan input kandungan kotak.

Dalam komponen el-input, kami turut menambah butang untuk mencetuskan operasi mencipta folder baharu. Akhir sekali, kami menggunakan elemen div untuk memaparkan mesej ralat. Antaranya, $refs.ref.validateState dan $refs.ref.validateMessage ialah sifat dalam komponen el-form-item, yang digunakan untuk menyemak status pengesahan kotak input dan memaparkan mesej ralat.

Kini, kami telah melaksanakan borang folder baharu asas dan menggunakan komponen Elemen Vue untuk menambah pengesahan dan fungsi interaktif. Anda boleh menyesuaikan gaya borang dan peraturan pengesahan mengikut keperluan anda, dan menambah logik yang sesuai dalam kaedah createFolder untuk melaksanakan fungsi mencipta folder baharu.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan Elemen Vue untuk mencipta borang folder baharu asas dan menambah ciri pengesahan dan interaksi. Melalui mengkaji artikel ini, anda harus menguasai pengetahuan asas tentang cara menggunakan perpustakaan komponen Elemen dalam projek Vue dan mempelajari cara menggunakan komponen borang untuk melaksanakan fungsi interaksi pengguna biasa.

Atas ialah kandungan terperinci Cara menggunakan Elemen Vue untuk melaksanakan fungsi mencipta folder baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!