vue ele editable
1.0.0
vue-ele-editable est un composant d'édition en ligne element-ui efficace, simple et puissant. Après avoir référencé le composant, la fonction d'édition en ligne ne peut être complétée que via les données. Les fonctionnalités spécifiques sont les suivantes :
Afin de vous aider à mieux le comprendre et à l'utiliser, si le nombre d'étoiles dépasse 100, il y a une explication vidéo du code source. J'espère pouvoir vous donner une étoile ???
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 est utilisé pour spécifier les composants de rendu actuellement pris en charge :
| taper | signification | Référence de propriété |
|---|---|---|
| texte | texte statique | |
| image | Image unique/images multiples | vue-ele-gallery |
| télécharger l'image | Télécharger des photos | vue-ele-upload-image |
| saisir | Ligne unique de texte modifiable | entrée élément-ui |
| zone de texte | Texte multiligne modifiable | entrée élément-ui |
| sélectionner | boîte déroulante | élément-ui sélectionner |
| nombre | Numéros modifiables | numéro d'entrée de l'élément-ui |
| radio | Choix unique | radio élément-ui |
| case à cocher | Choix multiple | case à cocher élément-ui |
| dateheure | Date et heure modifiables (accepte l'horodatage, la chaîne, la valeur de type Date) | élément-ui datetime-picker |
| dateheure-texte | Date et heure non modifiables (les valeurs acceptées sont les mêmes que ci-dessus) | |
| date | Date modifiable (les valeurs acceptées sont comme ci-dessus) | sélecteur de date element-ui |
| date-texte | Date non modifiable (les valeurs acceptées sont les mêmes que ci-dessus) | |
| temps | Heure modifiable (les valeurs acceptées sont les mêmes que ci-dessus) | sélecteur de temps element-ui |
| texte-heure | Temps non modifiable (les valeurs acceptées sont les mêmes que ci-dessus) | |
| statut | État | balise element-ui |
| changer | changer | commutateur élément-ui |
| URL | Lien | |
| couleur | couleur | sélecteur de couleurs element-ui |
Lorsque type n'est pas l'un des types ci-dessus, il sera rendu en fonction du nom transmis. Vous pouvez personnaliser le composant d'extension pour plus de détails, veuillez vous référer à l'exemple de taux d'extension personnalisé et au curseur d'exemple d'extension personnalisé. voir l'exemple en ligne.
isNoWrapper est utilisé pour définir si un composant personnalisé doit être encapsulé. Par exemple, l'entrée est un composant encapsulé, le commutateur signifie ne pas envelopper le composant. Vous ne pouvez pas modifier le fait que le composant intégré soit encapsulé. composant personnalisé. Par exemple, le composant rate ci-dessus n'est pas encapsulé et slider n'est pas encapsulé. Il s'agit du composant package.
Attributs du composant personnalisé customAttrs , par exemple, modification de la saisie dans une zone de mot de passe :
{
type : 'input' ,
// 属性参考 element-ui input组件
customAttrs : {
'show-password' : true
}
} field est utilisé pour envoyer des requêtes comme key de données, par exemple :
{
value: 'zhang'
field: 'name'
}
// 最终发送的数据为:
{
name : 'zhang'
} inline est utilisé pour spécifier s'il faut utiliser le mode popover ou inline . La valeur par défaut est popover .
title utilisé pour le titre de la fenêtre pop-up
valeur value , peut être lié au v-model
defaultValue remplace value lorsque value n'existe pas, par exemple :
{
value : '' ,
field : 'name' ,
defaultValue : '匿名'
}
// 最终显示到屏幕上为: 匿名 displayFormatter est utilisé pour un traitement ultérieur de l'affichage des valeurs, par exemple :
// 伪代码
{
value : 10 ,
displayFormatter : function ( value ) {
return ` ${ value } 岁`
}
}
// 最终显示到屏幕上为: 10 岁 emptyText est utilisé pour afficher une chaîne lorsqu'il n'y a pas de données, par exemple :
{
field : 'mobile' ,
// 当 value, defaultValue 和 displayFormatter都返回空时, 才起作用
value : '' ,
defaultValue : '' ,
displayFormatter : null ,
emptyText : '无手机可用'
}
// 最终显示到屏幕上为: 无手机可用 options sont utilisées pour les options des composants de case à cocher, de radio, de sélection et d'état, prenant en charge les tableaux d'objets et les tableaux de chaînes :
// 对象数组形式 (text 用于展示, 实际值是 value)
options: [ { text : '男' , value : 'male' } , { text : '女' , value : 'female' } ]
// 字符串数组 (相当于 [{ text: '男', value: '男' }, { text: '女', value: '女' }])
options: [ '男' , '女' ] Fonction de requête requestFn , cette fonction renverra éventuellement un exemple Promise , qui est utilisé pour déterminer l'état et le résultat de la requête
Il existe deux situations. La première est que vous devez traiter le résultat de la réponse de la demande d'origine et que vous pouvez appliquer une couche de promesse :
// 伪代码
async function requestFn ( data ) {
return new Promise ( ( resolve , reject ) => {
try {
const res = await axios . post ( '/post' , data )
// 对res做各种处理
. . .
resolve ( )
} catch ( e ) {
reject ( e )
}
} )
} Une autre méthode est qu'aucun traitement n'est requis et qu'un objet Promise peut être renvoyé directement.
async function requestFn ( data ) {
return axios . post ( '/post' , data )
} rules sont utilisées pour la vérification. Les règles de vérification sont les mêmes que la forme d'element-ui. Elles utilisent toutes un validateur asynchrone et prennent en charge les formes de tableau et d'objet.
// 对象
rules: {
required : true ,
message : '名称不能为空'
}
// 数组
rules: [
{ type : 'number' , message : '年龄必须填写数字' } ,
{ required : true , message : '年龄必填填写' }
] customData est utilisé pour transporter des données supplémentaires, telles que :
// 伪代码
// props的值
{
field : 'name' ,
value : 'zhangchaojie' ,
customData : {
id : 10 ,
status : 1
}
}
// 最终发送的数据为:
{
name : 'zhangchaojie' ,
id : 10 ,
status : 1
} valueFormatter est utilisé pour le traitement ultérieur des données de requête, par exemple :
// 伪代码
// props 值
field: 'age' ,
value : 10 ,
customData : { id : 1 } ,
valueFormatter : function ( value ) {
return value + 1
}
// 最终发送的值为:
{
age : 11 ,
id : 1
} 
