formulate el ui Unduh - formulate el ui Unduh kode sumber

formulate el ui

Kategori lainnya

1.0.0

Unduh

VueFormulasi

merumuskan-el-ui

Proyek ini menambahkan skin element-ui ke proyek vueformulate , yang memungkinkan Anda mempertahankan gaya terpadu saat menggunakan vueformulate dalam proyek element-ui .

Mengenai perbandingan fungsional antara paket el-form dan vueformulate di elemen-ui, saya menulis artikel untuk referensi Anda.

versi semantik

Proyek ini mengikuti Semantic Versi 2.0

Sebelum instalasi, Anda perlu menginstal paket npm berikut

@braid/vue-formulate dokumentasi berbahasa Mandarin
elemen-ui

Memasang

 yarn add formulate-el-ui

Pengalaman cepat

Klik untuk melihat pratinjau

menggunakan

Pengenalan global

Tambahkan kode berikut ke lokasi yang sesuai di file main.js Anda:

 import 'formulate-el-ui/dist/element-ui.min.css';
import formulateElementUI from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [formulateElementUI]
})

Cukup gunakan gaya

 import {
  theme
} from 'formulate-el-ui'
import 'formulate-el-ui/dist/element-ui.min.css';

Vue.use(VueFormulate, {
  plugins: [theme], // 配合上面引入的样式文件，使用 element-ui 的风格
})

Jika Anda perlu menggunakan formulir sebaris (semua bidang formulir ditampilkan dalam satu baris), Anda bisa menambahkan gaya el-formulate__form-inline ke komponen FormulateForm :

 <FormulateForm
  :form-class="['el-formulate__form-inline']"
>
  <FormulateInput
    label="个性签名"
    type="el-input"
    value="你好，Element-UI"
  />
</FormulateForm>

Untuk mempelajari lebih lanjut, kunjungi dokumentasi untuk form-class

Catatan: Bila menggunakan formulir inline, position:absoulte digunakan untuk menampilkan pesan kesalahan. Jika ada beberapa pesan bail dalam aturan validasi di lapangan, tampilannya akan membingungkan , sehingga hanya pesan kesalahan yang akan ditampilkan.

Hanya perbaiki penempatan bantuan pada komponen kotak centang

 import {
  CheckboxHelp,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [CheckboxHelp], // CheckboxHelp 用于解决 checkbox 组件中 help 信息展示位置错误的问题
})

Menambahkan aturan verifikasi nomor ponsel Cina dan nomor ID,

Aturan termasuk:

seluler: Verifikasi format nomor ponsel
idcard : Verifikasi format KTP 18 digit

 import {
  rules,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [rules],
})

Hanya perluas elemen-ui komponen bidang formulir yang umum digunakan

 import {
  inputs,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [inputs],
})

Komponen yang disertakan saat ini

komponen	Merumuskan tipe input	Alat peraga yang didukung
Masukan	`el-input`	ukuran otomatis, dapat dihapus, panjang maksimal, panjang minimum, baris, dinonaktifkan showPassword, showWordLimit, elType (bila nilainya `textarea` , itu adalah kotak teks multi-baris)
Kaskader	`el-cascader`	sebelumFilter, dapat dihapus, ciutkanTag, debounce, dinonaktifkan, filterMethod, elLabel, opsi, placeholder, popperClass, alat peraga, pemisah, showAllLevels, ukuran, elValue
Pemilih warna ColorPicker	`el-color-picker`	colorFormat, tentukan sebelumnya, tampilkan Alpha
Nomor Masukan	`el-input-number`	min, maks, langkah, langkah Ketat, presisi, dinonaktifkan
Kecepatan	`el-rate`	izinkanSetengah,warna,nonaktifkanVoidColor,dinonaktifkanVoidIconClass ,Ambang Tinggi,IconClasses,maks,Ambang Rendah,ShowScore,showText, teks,testColor,voidColor,voidIconClass
Memilih	`el-select`	izinkanBuat, dapat dihapus, runtuhTag, dapat difilter, dinonaktifkan, banyak
Penggeser	`el-slider`	formatTooltip,min,tanda,maks,skorTemplat, showTooltip,langkah,showStops,showInput,showInputControls, jangkauan, vertikal, tinggi
Mengalihkan	`el-switch`	activeText,inactiveText,activeColor,inactiveColor, dinonaktifkan

Bidang yang wajib diisi+v0.2.5

Ketika prop required ditambahkan ke komponen el-form-item elemen-ui, tanda * merah akan ditampilkan untuk mengingatkan pengguna bahwa bidang FormulateInput diperlukan. Sekarang proyek ini juga mendukungnya berisi required , itu akan * Merah ini ditambahkan secara default. Jika Anda tidak ingin menampilkannya, Anda dapat mengatur prop requiredTip ke false pada FormulateInput , itu saja:

 <FormulateInput :required-tip="false" />

Masalah yang diketahui

Pengelola proyek berfokus pada kompatibilitas vue3 dan saat ini tidak punya waktu untuk menangani masalah dan PR. Meskipun demikian, keseluruhan proyek memiliki pengujian unit lengkap berdasarkan vue2, sehingga Anda dapat menggunakannya dengan percaya diri.
Pada form edit, jika terdapat field form gambar, setelah memanggil antarmuka dan menugaskan data gambar ke form, form tidak akan merender gambar. Solusi sementara adalah menambahkan v-if="loadForm" pada formulate-form komponen formulate-form v-if="loadForm" Nilai default loadForm diatur ke false . Setelah antarmuka mengembalikan data, lalu atur ke true untuk mencapai tujuan rendering gambar.