vue ele editable

vue-ele-editable |. Komponen pengeditan inline elemen-ui yang efisien, sederhana dan kuat

memperkenalkan

vue-ele-editable adalah komponen pengeditan inline elemen-ui yang efisien, sederhana dan kuat. Setelah mereferensikan komponen, fungsi pengeditan inline hanya dapat diselesaikan melalui data.

• Mendukung berbagai komponen bawaan: input, pilih, radio, kotak centang, textarea, tanggal, waktu, datetime, teks, url, status, switch, gambar, upload-gambar, teks waktu, teks tanggal, teks tanggalwaktu , warna, nomor
• Mendukung mode Popover dan Inline
• Mendukung verifikasi data, atribut khusus, data tampilan khusus, dan data pengiriman khusus
• Cukup sederhana, hanya membutuhkan 1 baris kode html dan data

Untuk membantu Anda lebih memahami dan menggunakannya, jika jumlah bintang melebihi 100, ada penjelasan kode sumber video, semoga saya bisa memberi Anda bintang???

rendering

Contoh daring

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

Memasang

npm install vue-ele-editable --save

menggunakan

 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
  } ,
  ...
} ) 

Alat peraga

Ikhtisar parameter

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 : '空'
  }
}

Penjelasan parameter

jenis:

type digunakan untuk menentukan komponen rendering. Komponen bawaan yang saat ini didukung adalah:

jenis	arti	Referensi properti
teks	teks statis
gambar	Gambar tunggal/banyak gambar	galeri vue-ele
unggah-gambar	Unggah gambar	vue-ele-unggah-gambar
masukan	Satu baris teks yang dapat diedit	masukan elemen-ui
area teks	Teks multi-baris yang dapat diedit	masukan elemen-ui
memilih	kotak tarik-turun	elemen-ui pilih
nomor	Nomor yang dapat diedit	nomor masukan elemen-ui
radio	Pilihan tunggal	radio elemen-ui
kotak centang	Pilihan ganda	kotak centang elemen-ui
tanggalwaktu	Tanggal dan waktu yang dapat diedit (menerima stempel waktu, string, nilai jenis tanggal)	pemilih tanggal-waktu elemen-ui
teks tanggal-waktu	Tanggal dan waktu yang tidak dapat diedit (nilai yang diterima sama seperti di atas)
tanggal	Tanggal yang dapat diedit (nilai yang diterima seperti di atas)	pemilih tanggal elemen-ui
teks tanggal	Tanggal yang tidak dapat diedit (nilai yang diterima sama seperti di atas)
waktu	Waktu yang dapat diedit (nilai yang diterima sama seperti di atas)	pemilih waktu elemen-ui
teks waktu	Waktu yang tidak dapat diedit (nilai yang diterima sama seperti di atas)
status	negara	tag elemen-ui
mengalihkan	mengalihkan	saklar elemen-ui
url	Link
warna	warna	pemilih warna elemen-ui

Jika type bukan salah satu dari jenis di atas, maka akan dirender sesuai dengan nama yang diteruskan. Anda dapat menyesuaikan komponen ekstensi. Untuk detailnya, lihat tarif contoh ekstensi khusus dan penggeser contoh ekstensi khusus lihat contoh online.

isNoWrapper:

isNoWrapper digunakan untuk menentukan apakah suatu komponen khusus perlu dibungkus. Misalnya, input adalah komponen yang dibungkus, switch berarti tidak membungkus komponen tersebut. Apakah komponen bawaan dibungkus atau tidak, Anda hanya dapat mengubah komponen khusus. Misalnya, komponen rate di atas tidak digabungkan, dan komponen slider tidak digabungkan

attr khusus:

atribut komponen khusus customAttrs , misalnya, mengubah input ke dalam kotak kata sandi:

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

bidang:

field digunakan untuk mengirimkan permintaan sebagai key data, misalnya:

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

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

sebaris:

inline digunakan popover menentukan apakah akan menggunakan mode popover atau inline .

judul:

title digunakan untuk judul jendela pop-up

nilai:

nilai value , dapat diikat dengan v-model

Nilai default:

defaultValue menggantikan value ketika value tidak ada, misalnya:

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

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

tampilanFormatter:

displayFormatter digunakan untuk memproses tampilan nilai lebih lanjut, misalnya:

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

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

teks kosong:

emptyText digunakan untuk menampilkan string ketika tidak ada data, contoh:

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

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

pilihan:

options digunakan untuk opsi komponen kotak centang, radio, pilih, dan status, array objek pendukung dan array string:

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

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

permintaanFn:

fungsi permintaan requestFn , fungsi ini pada akhirnya akan mengembalikan contoh Promise , yang digunakan untuk menentukan status dan hasil permintaan

Ada dua situasi. Pertama, Anda perlu memproses hasil respons dari permintaan awal, dan Anda dapat menerapkan lapisan Janji:

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

Metode lainnya adalah tidak diperlukan pemrosesan dan objek Promise dapat dikembalikan secara langsung.

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

aturan:

rules digunakan untuk verifikasi. Aturan verifikasi sama dengan bentuk elemen-ui. Semuanya menggunakan async-validator dan mendukung bentuk array dan objek.

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

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

Data khusus:

customData digunakan untuk membawa data tambahan, seperti:

 // 伪代码

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

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

nilaiFormatter:

valueFormatter digunakan untuk pemrosesan lebih lanjut data permintaan, misalnya:

 // 伪代码

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

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

Tautan referensi

• x-dapat diedit
• elemen-ui
• lumba-lumbaphp