Cara memanggil kawalan ElementUI melalui Vue.js

Vue.js ialah rangka kerja JavaScript yang popular. Fleksibiliti dan kemudahan penggunaannya menjadikannya digunakan secara meluas dalam proses pembangunan aplikasi web. ElementUI ialah rangka kerja UI berdasarkan Vue.js, dibangunkan dan diselenggara oleh Alibaba Group. Ia menyediakan perpustakaan komponen UI standard yang mudah digunakan untuk membantu pembangun membina antara muka pengguna yang kaya dengan lebih cepat dan cekap.

Menyepadukan ElementUI dalam Vue.js ialah tugas yang sangat biasa, artikel ini akan membincangkan cara memanggil kawalan ElementUI melalui Vue.js dan menggunakan pelbagai komponen UI untuk menambah yang baharu pada fungsi dan interaksi aplikasi web anda.

Pasang perpustakaan ElementUI

Untuk menggunakan ElementUI dalam projek Vue.js, anda perlu memasang perpustakaan ElementUI terlebih dahulu. Ia boleh dipasang melalui pengurus pakej npm atau dimuat turun dan dipasang secara manual. Jika anda sudah memasang Vue.js, anda boleh memasang perpustakaan ElementUI menggunakan arahan berikut:

npm install element-ui -S

Memperkenalkan perpustakaan ElementUI

Memperkenalkan perpustakaan ElementUI ke dalam projek Vue.js anda ialah mudah. Cuma muatkan gaya CSS ElementUI dan fail JS ke dalam contoh Vue anda dalam fail Vue yang perlu menggunakan komponen ElementUI:

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

Vue.use(ElementUI)

Kini, anda telah berjaya memperkenalkan perpustakaan komponen ElementUI kepada projek Vue .js, anda boleh mula menggunakan semua komponen UI yang disediakannya.

Panggil kaedah kawalan ElementUI

ElementUI menyediakan anda dengan satu siri kaedah kawalan UI, seperti membuka kotak dialog, menetapkan nilai kotak lungsur turun, muncul kotak mesej, dll. Kaedah ini boleh dipanggil melalui contoh Vue.js supaya ia dicetuskan daripada komponen UI anda pada masa yang diperlukan.

Sebagai contoh, membuka kotak dialog boleh dicapai dengan kod berikut:

this.$dialog({title:'提示', message:'确定要删除数据吗？'})

Anda juga boleh menetapkan nilai kotak lungsur seperti berikut:

this.$refs.selectBox.setCurrentValue('value')

Kotak mesej timbul boleh dilaksanakan melalui:

this.$message({message:'操作成功', type:'success'})

Komponen UI ElementUI

ElementUI menyediakan beberapa komponen UI yang boleh digunakan dalam aplikasi web anda. Berikut ialah beberapa komponen yang paling biasa digunakan:

Komponen borang

ElementUI menyediakan satu siri komponen borang, termasuk kotak input, butang radio, kotak berbilang pilihan dan kotak lungsur. Komponen ini boleh digunakan untuk mencipta pelbagai jenis borang, termasuk maklumat pendaftaran, halaman log masuk dan borang kemasukan data.

<el-form>
  <el-form-item label="用户名">
    <el-input v-model="username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">登录</el-button>
  </el-form-item>
</el-form>

Komponen Butang

ElementUI menyediakan gaya komponen butang yang berbeza, seperti butang asas, butang bulat, butang dengan ikon, dsb. Komponen butang adalah elemen paling asas untuk pengguna berinteraksi dengan aplikasi web, jadi gaya dan tingkah laku mereka sangat penting.

<!-- 基本按钮 -->
<el-button>基础按钮</el-button>

<!-- 圆形按钮 -->
<el-button type="primary" circle><i class="el-icon-search"></i></el-button>

<!-- 带图标按钮 -->
<el-button type="warning" icon="el-icon-delete">警告</el-button>

Komponen jadual

ElementUI menyediakan komponen jadual, yang boleh anda gunakan untuk memaparkan sejumlah besar data dalam jadual dan membenarkan pengguna melakukan pelbagai operasi seperti menapis dan menyusun. Dalam aplikasi web, komponen jadual memainkan peranan penting dalam pengurusan dan susun atur data.

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

Komponen paging

ElementUI menyediakan komponen paging, yang boleh anda gunakan untuk memaparkan data dalam halaman. Komponen penomboran ialah alat penting apabila anda perlu memaparkan sejumlah besar data. Ia membantu anda membahagikan data kepada berbilang halaman, sekali gus meningkatkan prestasi aplikasi anda.

<el-pagination layout="prev, pager, next" :total="100" @current-change="handleCurrentChange"></el-pagination>

Komponen kawalan pokok

ElementUI menyediakan komponen kawalan pokok untuk mengatur dan memaparkan data dalam struktur hierarki. Dalam aplikasi web, komponen kawalan pokok sering digunakan untuk menyusun, mengklasifikasikan atau menyemak imbas sejumlah besar data.

<el-tree :data="treeData" :props="treeProps"></el-tree>

Kesimpulan

Vue.js dan ElementUI ialah alat teras yang amat diperlukan dalam kotak alat untuk membangunkan aplikasi web. Artikel ini memperkenalkan cara untuk memanggil kaedah kawalan ElementUI dengan mudah melalui Vue.js dan menyediakan beberapa komponen UI yang biasa digunakan. Dengan alatan ini, anda boleh membina antara muka pengguna yang kaya dan interaktif dengan lebih cepat dan cekap.

Atas ialah kandungan terperinci Cara memanggil kawalan ElementUI melalui Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!