หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

VueFormulate

กำหนด-el-ui

โปรเจ็กต์นี้เพิ่มสกิน element-ui ให้กับโปรเจ็กต์ vueformulate ซึ่งช่วยให้คุณรักษาสไตล์ที่เป็นหนึ่งเดียวเมื่อใช้ vueformulate ในโปรเจ็กต์ element-ui

เกี่ยวกับการเปรียบเทียบการทำงานระหว่างแพ็คเกจ el-form และ vueformulate ใน element-ui ฉันเขียนบทความเพื่อเป็นข้อมูลอ้างอิงของคุณ

เวอร์ชันความหมาย

โปรเจ็กต์นี้เป็นไปตาม Semantic เวอร์ชัน 2.0

ก่อนการติดตั้ง คุณต้องติดตั้งแพ็กเกจ npm ต่อไปนี้

  • @ braid/vue-formulate เอกสารภาษาจีน
  • องค์ประกอบ-ui

ติดตั้ง 

 yarn add formulate-el-ui

ประสบการณ์ที่รวดเร็ว

คลิกเพื่อดูตัวอย่าง

ใช้

การแนะนำระดับโลก

เพิ่มโค้ดต่อไปนี้ในตำแหน่งที่เหมาะสมในไฟล์ main.js ของคุณ: 

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

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

เพียงแค่ใช้สไตล์ 

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

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

หากคุณต้องการใช้แบบฟอร์มอินไลน์ (ฟิลด์แบบฟอร์มทั้งหมดจะแสดงเป็นบรรทัดเดียว) คุณสามารถเพิ่มสไตล์ el-formulate__form-inline ให้กับส่วนประกอบ FormulateForm ได้: 

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

หากต้องการเรียนรู้เพิ่มเติม โปรดไปที่เอกสารประกอบสำหรับ form-class

หมายเหตุ: เมื่อใช้แบบฟอร์มอินไลน์ position:absoulte จะถูกใช้เพื่อแสดงข้อความแสดงข้อผิดพลาด หากมีข้อความแสดงข้อผิดพลาดหลายรายการในกฎการตรวจสอบในฟิลด์ การแสดงผลจะทำให้เกิดความสับสน ดังนั้น คุณต้องใช้กฎ bail ในการตรวจสอบ เพื่อให้แสดงเฉพาะข้อความแสดงข้อผิดพลาดเท่านั้น

แก้ไขตำแหน่งวิธีใช้ของส่วนประกอบช่องทำเครื่องหมายเท่านั้น 

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

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

เพิ่มกฎการยืนยันหมายเลขโทรศัพท์มือถือจีนและหมายเลขประจำตัว

กฎรวม:

  • มือถือ: การยืนยันรูปแบบหมายเลขโทรศัพท์มือถือ
  • บัตรประจำตัวประชาชน: การตรวจสอบรูปแบบบัตรประจำตัวประชาชน 18 หลัก 
 import {
  rules,
} from 'formulate-el-ui'

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

ขยายเฉพาะองค์ประกอบฟิลด์แบบฟอร์มที่ใช้กันทั่วไปเท่านั้น 

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

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

ส่วนประกอบที่รวมอยู่ในปัจจุบัน

ส่วนประกอบ กำหนดประเภทอินพุต อุปกรณ์ประกอบฉากที่รองรับ
ป้อนข้อมูล el-input ปรับขนาดอัตโนมัติ, ล้างได้, ความยาวสูงสุด, ความยาวขั้นต่ำ, แถว, ปิดการใช้งาน
showPassword, showWordLimit, elType (เมื่อค่าเป็น textarea จะเป็นกล่องข้อความหลายบรรทัด)
คาสเคดเดอร์ el-cascader beforeFilter, ชัดเจน, ยุบTags, debounce,
ปิดการใช้งาน, filterMethod, elLabel, ตัวเลือก, ตัวยึดตำแหน่ง, popperClass,
อุปกรณ์ประกอบฉาก, ตัวคั่น, showAllLevels, ขนาด, elValue
ColorPicker เครื่องมือเลือกสี el-color-picker colorFormat, กำหนดไว้ล่วงหน้า, showAlpha
หมายเลขอินพุต el-input-number นาที,สูงสุด,ขั้นตอน,ขั้นตอนอย่างเคร่งครัด,แม่นยำ,ปิดการใช้งาน
ประเมิน el-rate อนุญาตครึ่งหนึ่ง,สี,disabledVoidColor,disabledVoidIconClass
,highThreshold,iconClasses,สูงสุด,lowThreshold,showScore,showText,
ข้อความ, testColor, voidColor, voidIconClass
เลือก el-select อนุญาตสร้าง ล้างได้ ยุบแท็ก กรองได้ ปิดใช้งาน หลายรายการ
สไลเดอร์ el-slider formatTooltip,min,marks,max,scoreTemplate,
showTooltip, ขั้นตอน, showStops, showInput, showInputControls,
ช่วงแนวตั้งความสูง
สวิตช์ el-switch activeText, inactiveText, activeColor, inactiveColor, ปิดการใช้งาน

ฟิลด์บังคับ+v0.2.5

เมื่อเพิ่มเสา required ลงในองค์ประกอบ el-form-item ของ element-ui แล้ว เครื่องหมาย * จะปรากฏขึ้นเพื่อเตือนผู้ใช้ว่าจำเป็นต้องระบุฟิลด์นี้ ในตอนนี้โปรเจ็กต์นี้ยังรองรับกฎการตรวจสอบของ FormulateInput ประกอบด้วย required มันจะเป็นสีแดง * จะถูกเพิ่มโดยค่าเริ่มต้น หากคุณไม่ต้องการแสดง คุณสามารถตั้งค่า requiredTip prop เป็น false บน FormulateInput เพียงเท่านี้: 

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

ปัญหาที่ทราบ

  • ผู้ดูแลโปรเจ็กต์กำลังมุ่งเน้นไปที่ความเข้ากันได้ของ vue3 และขณะนี้ไม่มีเวลาจัดการกับปัญหาและการ PR แม้ว่าจะเป็นกรณีนี้ แต่ทั้งโปรเจ็กต์ก็มีการทดสอบหน่วยที่สมบูรณ์ตาม vue2 ดังนั้นคุณจึงสามารถใช้งานได้อย่างมั่นใจ
  • ในแบบฟอร์มแก้ไข หากมีฟิลด์แบบฟอร์มรูปภาพ หลังจากเรียกอินเทอร์เฟซและกำหนดข้อมูลรูปภาพให้กับแบบฟอร์มแล้ว แบบฟอร์มจะไม่แสดงรูปภาพ วิธีแก้ไขชั่วคราวคือเพิ่ม v-if="loadForm" ใน formulate-form องค์ประกอบ formulate-form v-if="loadForm" ค่าเริ่มต้นของ loadForm ถูกตั้งค่าเป็น false หลังจากที่อินเทอร์เฟซส่งคืนข้อมูล ให้ตั้งค่าเป็น true เพื่อให้บรรลุวัตถุประสงค์ในการแสดงผลรูปภาพ

เอกสาร

ดูเอกสารประกอบ vueformulate

ใบอนุญาต

เอ็มไอที

ปลั๊กอินแจ้งรหัส VS Code

มีการเปิดตัวปลั๊กอิน vscode เพื่อช่วยในการพัฒนา คุณสามารถคลิก Formulate-el-helper เพื่อติดตั้งได้

ดาว

หากคุณเห็นว่ามีประโยชน์ ให้ดาวแก่โครงการนี้^_^

คำแนะนำที่เกี่ยวข้อง

  • Vue Formulate Helper : ปลั๊กอินพร้อมท์รหัส VS สำหรับ Vue Formulate
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด