formulate el ui
1.0.0
يضيف هذا المشروع مظهر element-ui إلى مشروع vueformulate ، مما يسمح لك بالحفاظ على نمط موحد عند استخدام vueformulate في مشاريع element-ui .
بخصوص المقارنة الوظيفية بين حزم
el-formوvueformulateفي element-ui، فقد كتبت مقالًا للرجوع إليه.
يتبع هذا المشروع الإصدار الدلالي 2.0
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 信息展示位置错误的问题
})
القواعد المتضمنة:
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 | قبل التصفية، مسح، طي العلامات، رفض، معطل، طريقة التصفية، elLabel، الخيارات، العنصر النائب، popperClass، الدعائم، الفاصل، showAllLevels، الحجم، elValue |
| منتقي الألوان ColorPicker | el-color-picker | تنسيق اللون، تحديد مسبق، showAlpha |
| رقم الإدخال | el-input-number | دقيقة، ماكس، خطوة، خطوة بدقة، الدقة، معطل |
| معدل | el-rate | allowHalf، الألوان، معطلVoidColor، معطلVoidIconClass ، HighThreshold، IconClasses، max، lowThreshold، showScore، showText، النصوص، testColor، voidColor، voidIconClass |
| يختار | el-select | تسمح بالإنشاء، واضحة، قابلة للطي، قابلة للتصفية، معطلة، متعددة |
| المنزلق | el-slider | فورماتولتيب، مين، ماركس، ماكس، سكور تيمبلات، showTooltip، خطوة، showStops، showInput، showInputControls، النطاق، العمودي، الارتفاع |
| يُحوّل | el-switch | activeText،inactiveText،activeColor،inactiveColor، معطل |
عند إضافة الدعامة required إلى مكون el-form-item في element-ui، سيتم عرض علامة * حمراء لتذكير المستخدم بأن هذا الحقل مطلوب الآن طالما أن قاعدة التحقق من صحة FormulateInput يحتوي على required ، وستتم إضافة هذا اللون الأحمر * افتراضيًا إذا كنت لا ترغب في عرضه، فيمكنك ضبط الخاصية requiredTip على false في FormulateInput ، هذا كل شيء:
<FormulateInput :required-tip="false" />
v-if="loadForm" في formulate-form مكون formulate-form v-if="loadForm" تم تعيين القيمة الافتراضية لـ loadForm على false . بعد أن تقوم الواجهة بإرجاع البيانات، قم بتعيينها على true لتحقيق الغرض من عرض الصورة. عرض وثائق vueformulate
معهد ماساتشوستس للتكنولوجيا
تم إطلاق مكون إضافي vscode للمساعدة في التطوير. يمكنك النقر فوق format-el-helper لتثبيته.
إذا وجدت أنه مفيد، أعط المشروع نجمة ^_^
