Dalam pembangunan web moden, komponen UI adalah bahagian penting. Terdapat banyak perpustakaan komponen UI yang sangat baik dalam rangka kerja Vue.js, seperti Element-UI, Vuetify, Ant Design Vue, dsb. Pustaka komponen ini menyediakan banyak komponen yang mudah digunakan yang boleh membantu kami mencipta aplikasi web dengan lebih cekap. Artikel ini akan memperkenalkan beberapa komponen UI Vue yang biasa digunakan, serta petua dan kemahiran praktikal untuk menggunakan komponen ini.
1. El-Table
El-Table ialah salah satu komponen paling praktikal dalam ElementUI. Ia menyediakan cara intuitif untuk memaparkan dan memanipulasi data jadual. Berikut ialah beberapa petua untuk menggunakan El-Table:
1. Dayakan paging jadual
Paging diperlukan semasa memproses jumlah data yang banyak Anda boleh menggunakan fungsi paging yang disertakan dengan komponen El-Table untuk mengurangkan masalah pemuatan data. Berikut ialah contoh halaman mudah:
<template>
<el-table
:data="tableData"
:height="400"
:pagination="pagination"
>
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' },
],
pagination: {
currentPage: 1,
pageSize: 2,
total: 4,
},
}
},
}
</script>2. Edit atau kendalikan kandungan dalam jadual
Kadangkala, kita perlu melakukan beberapa operasi atau suntingan dalam jadual. Komponen El-Table menyediakan pelbagai cara untuk mencapai operasi ini:
<template>
<el-table :data="tableData">
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎' },
{ date: '2016-05-04', name: '王小虎' },
{ date: '2016-05-01', name: '王小虎' },
{ date: '2016-05-03', name: '王小虎' },
],
}
},
methods: {
handleEdit(index, row) {
console.log(index, row)
},
}
}
</script><template>
<el-table :data="tableData">
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
label="操作"
width="180">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
</template>
<template slot="append">
<el-button size="mini" type="primary">全选</el-button>
<el-button size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎' },
{ date: '2016-05-04', name: '王小虎' },
{ date: '2016-05-01', name: '王小虎' },
{ date: '2016-05-03', name: '王小虎' },
],
}
},
methods: {
handleEdit(index, row) {
console.log(index, row)
},
}
}
</script>2. Vuetify
Vuetify ialah perpustakaan komponen UI Vue yang hebat dan cantik. Berikut ialah beberapa petua untuk menggunakan Vuetify:
1 Gunakan sistem Grid Vuetify
Sistem Grid Vuetify membolehkan kami membuat reka letak yang fleksibel dengan mudah. Berikut ialah contoh sistem Grid:
<template>
<v-container fluid>
<v-row>
<v-col cols="12" md="6" lg="4">
<v-card>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="6" lg="4">
<v-card>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="6" lg="4">
<v-card>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>2 Gunakan komponen Borang Vuetify
Vuetify menyediakan banyak komponen borang yang berguna, seperti kotak input, kotak pilihan, suis, dsb. Berikut ialah contoh komponen borang Vuetify:
<template>
<v-container fluid>
<v-form>
<v-text-field label="姓名" v-model="name"></v-text-field>
<v-select label="性别" :items="genders" v-model="gender"></v-select>
<v-checkbox label="同意协议" v-model="checked"></v-checkbox>
<v-btn color="primary" :disabled="!validForm">提交</v-btn>
</v-form>
</v-container>
</template>
<script>
export default {
data() {
return {
name: '',
gender: '',
genders: [
'男性',
'女性',
'其他',
],
checked: false,
}
},
computed: {
validForm() {
return this.name && this.gender && this.checked
},
},
}
</script>3. Ant Design Vue
Ant Design Vue ialah versi Vue bagi Ant Design, yang menyediakan berbilang komponen berkuasa, seperti butang, borang, pemilih, dsb. Berikut ialah beberapa petua untuk menggunakan Ant Design Vue:
1 Gunakan Komponen Butang Ant Design Vue
Komponen Butang Ant Design Vue membolehkan kami mencipta butang yang cantik dengan mudah. Berikut ialah contoh komponen butang Ant Design Vue:
<template>
<div>
<a-button>默认按钮</a-button>
<a-button type="primary">主要按钮</a-button>
<a-button type="danger">危险按钮</a-button>
<a-button shape="round">圆角按钮</a-button>
<a-button icon="search">带图标的按钮</a-button>
</div>
</template>2 Gunakan komponen borang Ant Design Vue
Ant Design Vue menyediakan berbilang komponen borang yang berguna, seperti kotak input, pemilih, pemilih tarikh, dsb. Berikut ialah contoh komponen borang Ant Design Vue:
<template>
<div>
<a-form>
<a-form-item label="姓名">
<a-input v-model="name"></a-input>
</a-form-item>
<a-form-item label="日期">
<a-date-picker v-model="date"></a-date-picker>
</a-form-item>
<a-form-item label="城市">
<a-select v-model="city">
<a-select-option value="北京">北京</a-select-option>
<a-select-option value="上海">上海</a-select-option>
<a-select-option value="广州">广州</a-select-option>
</a-select>
</a-form-item>
<a-button type="primary" :disabled="!validForm">提交</a-button>
</a-form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
date: '',
city: '',
}
},
computed: {
validForm() {
return this.name && this.date && this.city
},
},
}
</script>Ringkasan
Komponen UI Vue membolehkan kami membina aplikasi web dengan lebih pantas dan lebih cekap. Artikel ini memperkenalkan perpustakaan komponen Vue yang biasa digunakan dan menyediakan beberapa petua dan kemahiran praktikal. Mencuba petua ini boleh membantu kami membangunkan aplikasi Vue dengan lebih baik dan memberikan pengguna pengalaman yang lebih baik.
Atas ialah kandungan terperinci Petua untuk menggunakan komponen UI Vue biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
