vue ele editable

vue-ele-editable | مكون تحرير مضمن لعنصر واجهة المستخدم فعال وبسيط وقوي

يقدم

vue-ele-editable هو مكون تحرير مضمن فعال وبسيط وقوي لواجهة المستخدم. بعد الرجوع إلى المكون، لا يمكن إكمال وظيفة التحرير المضمنة إلا من خلال البيانات.

• يدعم مجموعة متنوعة من المكونات المضمنة: الإدخال، التحديد، الراديو، خانة الاختيار، منطقة النص، التاريخ، الوقت، وقت التاريخ، النص، عنوان url، الحالة، التبديل، الصورة، تحميل الصورة، نص الوقت، نص التاريخ، نص التاريخ والوقت ، اللون، الرقم
• يدعم أوضاع Popover وInline
• يدعم التحقق من البيانات والسمات المخصصة وبيانات العرض المخصصة وبيانات الإرسال المخصصة
• بسيط بما فيه الكفاية، ولا يتطلب سوى سطر واحد من تعليمات برمجية وبيانات HTML

لمساعدتك على فهمه واستخدامه بشكل أفضل، إذا تجاوز عدد النجوم 100، يوجد شرح لكود مصدر الفيديو، آمل أن أتمكن من منحك نجمة؟؟؟

الاداءات

مثال على الانترنت

https://codepen.io/dream2023/pen/dBNNbP

ثَبَّتَ

npm install vue-ele-editable --save

يستخدم

 import EleEditable from 'vue-ele-editable'
Vue . use ( EleEditable )

// 在引入 EleEditable 时，可以传入一个全局配置对象
// key 是组件名, value 是组件的属性, 例如:
Vue . use ( EleEditable , {
  // 所有 image 类型的组件都会有 lazy: true 的属性
  image : {
    lazy : true
  } ,
  // 所有的 number 类型的组件都会有 step: 10 的属性
  number : {
    step : 10
  } ,
  ...
} ) 

الدعائم

نظرة عامة على المعلمة

props: {
  // 类型
  type : {
    type : String ,
    default : 'text'
  } ,
  // 字段
  field : {
    type : String ,
    required : true
  } ,
  // 是否为行内
  inline : {
    type : Boolean ,
    default : false
  } ,
  // 标题
  title : String ,
  // 字段值
  value : [ String , Number , Boolean , Array , Date ] ,
  // 默认值
  defaultValue : {
    type : [ String , Number , Boolean , Array , Date ] ,
    default : null
  } ,
  // 自定义组件是否需要包裹
  isNoWrapper : {
    type : Boolean ,
    default : false
  } ,
  // 选项
  options : {
    type : Array ,
    default ( ) {
      return [ ]
    }
  } ,
  // 请求地址
  requestFn : Function ,
  // 校检规则
  rules : [ Array , Object ] ,
  // 其他附带数据
  customData : Object ,
  // 自定义属性
  customAttrs : Object ,
  // 格式化显示数据
  displayFormatter : Function ,
  // 对请求数据格式化
  valueFormatter : Function ,
  // 值空时显示的文本
  emptyText : {
    type : String ,
    default : '空'
  }
}

شرح المعلمة

يكتب:

يتم استخدام type لتحديد مكونات العرض المدعومة حاليًا وهي:

يكتب	معنى	مرجع الملكية
نص	نص ثابت
صورة	صورة واحدة/صور متعددة	معرض فيو إلي
تحميل الصورة	تحميل الصور	vue-ele-upload-image
مدخل	قابل للتحرير سطر واحد من النص	إدخال عنصر واجهة المستخدم
منطقة النص	نص متعدد الأسطر قابل للتحرير	إدخال عنصر واجهة المستخدم
يختار	المربع المنسدل	حدد عنصر واجهة المستخدم
رقم	أرقام قابلة للتحرير	رقم إدخال عنصر واجهة المستخدم
راديو	اختيار واحد	راديو عنصر واجهة المستخدم
خانة الاختيار	الاختيار من متعدد	مربع اختيار عنصر واجهة المستخدم
التاريخ والوقت	التاريخ والوقت القابلان للتحرير (يقبل الطابع الزمني والسلسلة وقيمة نوع التاريخ)	عنصر واجهة المستخدم منتقي التاريخ والوقت
نص التاريخ والوقت	التاريخ والوقت غير قابلين للتحرير (القيم المقبولة هي نفسها المذكورة أعلاه)
تاريخ	تاريخ قابل للتحرير (القيم المقبولة هي كما هو مذكور أعلاه)	منتقي تاريخ عنصر واجهة المستخدم
نص التاريخ	تاريخ غير قابل للتحرير (القيم المقبولة هي نفسها المذكورة أعلاه)
وقت	الوقت القابل للتحرير (القيم المقبولة هي نفسها المذكورة أعلاه)	منتقي الوقت لعنصر واجهة المستخدم
نص الوقت	وقت غير قابل للتحرير (القيم المقبولة هي نفسها المذكورة أعلاه)
حالة	ولاية	علامة عنصر واجهة المستخدم
يُحوّل	يُحوّل	تبديل عنصر واجهة المستخدم
عنوان URL	وصلة
لون	لون	منتقي الألوان لعنصر واجهة المستخدم

عندما لا يكون type أحد الأنواع المذكورة أعلاه، فسيتم عرضه وفقًا للاسم الذي تم تمريره. يمكنك تخصيص مكون الامتداد للحصول على التفاصيل، يرجى الرجوع إلى معدل مثال الامتداد المخصص وشريط تمرير مثال الامتداد المخصص، من فضلك انظر المثال على الانترنت.

isNoWrapper:

يتم استخدام isNoWrapper لتحديد ما إذا كان المكون المخصص يحتاج إلى التغليف، على سبيل المثال، الإدخال عبارة عن مكون مغلف، ويعني التبديل عدم تغليف المكون، ولا يمكن تغييره إلا المكون المخصص، على سبيل المثال، لم يتم تغليف مكون rate أعلاه، ولم يتم تغليف مكون slider ، وهو مكون الحزمة

السمات المخصصة:

سمات المكون المخصص customAttrs ، على سبيل المثال، تغيير الإدخال في مربع كلمة المرور:

 {
  type : 'input' ,
  // 属性参考 element-ui input组件
  customAttrs : {
    'show-password' : true
  }
}

مجال:

يستخدم field لإرسال الطلبات key للبيانات، على سبيل المثال:

 {
  value: 'zhang'
  field: 'name'
}

// 最终发送的数据为:
{
  name : 'zhang'
}

مضمنة:

يتم استخدام inline لتحديد ما إذا popover تريد استخدام الوضع popover أو الوضع inline .

عنوان:

title لعنوان النافذة المنبثقة

قيمة:

قيمة value ، يمكن ربطها v-model

القيمة الافتراضية:

تستبدل defaultValue value في حالة عدم وجودها value على سبيل المثال:

 {
  value : '' ,
  field : 'name' ,
  defaultValue : '匿名'
}

// 最终显示到屏幕上为: 匿名

تنسيق العرض:

يتم استخدام displayFormatter لمزيد من المعالجة لعرض القيمة، على سبيل المثال:

 // 伪代码
{
  value : 10 ,
  displayFormatter : function ( value ) {
    return ` ${ value } 岁`
  }
}

// 最终显示到屏幕上为: 10 岁

نص فارغ:

يُستخدم emptyText لعرض سلسلة في حالة عدم وجود بيانات، على سبيل المثال:

 {
  field : 'mobile' ,
  // 当 value, defaultValue 和 displayFormatter都返回空时, 才起作用
  value : '' ,
  defaultValue : '' ,
  displayFormatter : null ,
  emptyText : '无手机可用'
}

// 最终显示到屏幕上为: 无手机可用

خيارات:

يتم استخدام options لخيارات مربع الاختيار، والراديو، والتحديد، ومكونات الحالة، ودعم صفائف الكائنات ومصفوفات السلسلة:

 // 对象数组形式 (text 用于展示, 实际值是 value)
options: [ { text : '男' , value : 'male' } , { text : '女' , value : 'female' } ]

// 字符串数组 (相当于 [{ text: '男', value: '男' }, { text: '女', value: '女' }])
options: [ '男' , '女' ]

طلبFn:

وظيفة طلب requestFn ، ستعيد هذه الوظيفة في النهاية مثالًا Promise ، والذي يُستخدم لتحديد حالة الطلب ونتيجته

هناك حالتان: الأول هو أنك تحتاج إلى معالجة نتيجة الاستجابة للطلب الأصلي، ويمكنك تطبيق طبقة من الوعد:

 // 伪代码
async function requestFn ( data ) {
  return new Promise ( ( resolve , reject ) => {
    try {
      const res = await axios . post ( '/post' , data )
      // 对res做各种处理
      . . .
      resolve ( )
    } catch ( e ) {
      reject ( e )
    }
  } )
}

هناك طريقة أخرى وهي عدم الحاجة إلى معالجة ويمكن إرجاع كائن Promise مباشرةً.

 async function requestFn ( data ) {
  return axios . post ( '/post' , data )
}

قواعد:

يتم استخدام rules للتحقق. قواعد التحقق هي نفس شكل element-ui. جميعها تستخدم أداة التحقق غير المتزامن وتدعم كلاً من نماذج المصفوفات والكائنات.

 // 对象
rules: {
  required : true ,
  message : '名称不能为空'
}

// 数组
rules: [
  { type : 'number' , message : '年龄必须填写数字' } ,
  { required : true , message : '年龄必填填写' }
]

البيانات المخصصة:

تُستخدم customData لنقل بيانات إضافية، مثل:

 // 伪代码

// props的值
{
  field : 'name' ,
  value : 'zhangchaojie' ,
  customData : {
    id : 10 ,
    status : 1
  }
}

// 最终发送的数据为:
{
  name : 'zhangchaojie' ,
  id : 10 ,
  status : 1
}

تنسيق القيمة:

يتم استخدام valueFormatter لمزيد من المعالجة لبيانات الطلب، على سبيل المثال:

 // 伪代码

// props 值
field: 'age' ,
value : 10 ,
customData : { id : 1 } ,
valueFormatter : function ( value ) {
  return value + 1
}

// 最终发送的值为:
{
  age : 11 ,
  id : 1
} 

الرابط المرجعي

• x-قابل للتحرير
• element-ui
• com.dolphinphp