vue ele editable

vue-ele-editable | Componente de edición en línea element-ui eficiente, simple y potente

introducir

vue-ele-editable es un componente de edición en línea de element-ui eficiente, simple y potente. Después de hacer referencia al componente, la función de edición en línea solo se puede completar a través de datos. Las características específicas son las siguientes:

• Admite una variedad de componentes integrados: entrada, selección, radio, casilla de verificación, área de texto, fecha, hora, fecha y hora, texto, URL, estado, cambio, imagen, carga de imagen, texto de hora, texto de fecha, texto de fecha y hora , color, número
• Soporta modos Popover e Inline
• Admite verificación de datos, atributos personalizados, datos de visualización personalizados y datos de envío personalizados
• Bastante simple, solo requiere 1 línea de código html y datos

Para ayudarlo a comprenderlo y usarlo mejor, si el número de estrellas supera las 100, hay una explicación del código fuente del video. Espero poder darle una estrella.

representaciones

Ejemplo en línea

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

Instalar

npm install vue-ele-editable --save

usar

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

Accesorios

Resumen de parámetros

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

Explicación de parámetros

tipo:

type se utiliza para especificar los componentes de renderizado. Los componentes integrados actualmente admitidos son:

tipo	significado	Referencia de propiedad
texto	texto estático
imagen	Imagen única/varias imágenes	galería-vue-ele
subir-imagen	Subir fotos	vue-ele-subir-imagen
aporte	Una sola línea de texto editable	entrada elemento-ui
área de texto	Texto editable de varias líneas	entrada elemento-ui
seleccionar	cuadro desplegable	elemento-ui seleccionar
número	Números editables	elemento-ui número de entrada
radio	elección única	radio elemento-ui
caja	opción múltiple	casilla de verificación elemento-ui
fecha y hora	Fecha y hora editables (acepta marca de tiempo, cadena, valor de tipo de fecha)	selector de fecha y hora de elemento-ui
texto de fecha y hora	Fecha y hora no editables (los valores aceptados son los mismos que los anteriores)
fecha	Fecha editable (los valores aceptados son los anteriores)	selector de fecha elemento-ui
texto-fecha	Fecha no editable (los valores aceptados son los mismos que los anteriores)
tiempo	Hora editable (los valores aceptados son los mismos que los anteriores)	selector de tiempo elemento-ui
texto-tiempo	Hora no editable (los valores aceptados son los mismos que los anteriores)
estado	estado	etiqueta elemento-ui
cambiar	cambiar	interruptor elemento-ui
URL	Enlace
color	color	selector de color elemento-ui

Cuando type no es ninguno de los tipos anteriores, se representará de acuerdo con el nombre pasado. Puede personalizar el componente de extensión. Para obtener más información, consulte la tasa de ejemplo de extensión personalizada y el control deslizante de ejemplo de extensión personalizada. vea el ejemplo en línea.

esNoWrapper:

isNoWrapper se usa para definir si un componente personalizado debe empaquetarse. Por ejemplo, la entrada es un componente empaquetado, cambiar significa no empaquetar el componente. Solo se puede cambiar si el componente incorporado está empaquetado. componente personalizado. Por ejemplo, el componente rate anterior no está ajustado y slider no está ajustado. Es el componente del paquete.

atributos personalizados:

Atributos del componente personalizado customAttrs , por ejemplo, cambiar la entrada en un cuadro de contraseña:

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

campo:

field se utiliza para enviar solicitudes como key de datos, por ejemplo:

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

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

en línea:

inline se usa para especificar si se usa el modo popover o inline . El valor predeterminado es popover .

título:

title utiliza para el título de la ventana emergente

valor:

valor value , se puede vincular con v-model

valor predeterminado:

defaultValue reemplaza value cuando value no existe, por ejemplo:

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

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

formateador de pantalla:

displayFormatter se utiliza para el procesamiento posterior de la visualización de valores, por ejemplo:

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

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

Texto vacío:

emptyText se utiliza para mostrar una cadena cuando no hay datos, por ejemplo:

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

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

opciones:

options se utilizan para las opciones de los componentes de casilla de verificación, radio, selección y estado, y admiten matrices de objetos y matrices de cadenas:

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

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

solicitudFn:

Función de solicitud requestFn . Esta función eventualmente devolverá un ejemplo Promise , que se utiliza para determinar el estado y el resultado de la solicitud.

Hay dos situaciones. Una es que necesita procesar el resultado de la respuesta de la solicitud original y puede aplicar una capa de Promesa:

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

Otro método es que no se requiere procesamiento y se puede devolver un objeto Promise directamente.

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

normas:

rules se utilizan para la verificación. Las reglas de verificación son las mismas que la forma de element-ui. Todas usan un validador asíncrono y admiten formas de matriz y de objeto.

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

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

datos personalizados:

customData se utiliza para transportar datos adicionales, como por ejemplo:

 // 伪代码

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

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

valorFormateador:

valueFormatter se utiliza para el procesamiento posterior de los datos de la solicitud, por ejemplo:

 // 伪代码

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

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

Enlace de referencia

• x-editable
• elemento-ui
• delfinphp