vue ele editable

vue-ele-editable | 효율적이고 간단하며 강력한 element-ui 인라인 편집 구성 요소

소개하다

vue-ele-editable은 효율적이고 간단하며 강력한 element-ui 인라인 편집 컴포넌트로, 컴포넌트를 참조한 후 데이터를 통해서만 인라인 편집 기능을 완료할 수 있습니다.

• 다양한 내장 구성요소 지원: 입력, 선택, 라디오, 체크박스, 텍스트 영역, 날짜, 시간, 날짜/시간, 텍스트, URL, 상태, 스위치, 이미지, 업로드 이미지, 시간 텍스트, 날짜-텍스트, 날짜/시간 텍스트 , 색상, 숫자
• 팝오버 및 인라인 모드 지원
• 데이터 확인, 사용자 정의 속성, 사용자 정의 디스플레이 데이터 및 사용자 정의 전송 데이터를 지원합니다.
• 매우 간단하며 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-업로드-이미지
입력	편집 가능한 한 줄의 텍스트	요소 UI 입력
텍스트 영역	편집 가능한 여러 줄 텍스트	요소 UI 입력
선택하다	드롭다운 상자	요소 UI 선택
숫자	편집 가능한 숫자	요소 UI 입력 번호
라디오	단일 선택	element-ui 라디오
체크박스	객관식	요소 UI 확인란
날짜시간	편집 가능한 날짜 및 시간(타임스탬프, 문자열, 날짜 유형 값 허용)	요소 UI 날짜/시간 선택기
날짜/시간 텍스트	편집 불가능한 날짜 및 시간 (허용되는 값은 위와 동일)
날짜	편집 가능한 날짜 (허용되는 값은 위와 같음)	요소 UI 날짜 선택기
날짜-텍스트	수정 불가능한 날짜 (허용되는 값은 위와 동일)
시간	편집 가능한 시간 (허용값은 위와 동일)	요소 UI 시간 선택기
시간 텍스트	편집 불가능한 시간 (허용값은 위와 동일)
상태	상태	요소 UI 태그
스위치	스위치	요소 UI 스위치
URL	링크
색상	색상	요소 UI 색상 선택기

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 또는 inline 모드를 사용할지 여부를 지정하는 데 사용됩니다. 기본값은 popover 입니다.

제목:

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 예제를 반환합니다.

두 가지 상황이 있습니다. 하나는 원래 요청의 응답 결과를 처리해야 하며 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 사용됩니다. 검증 규칙은 모두 async-validator를 사용하고 배열 및 객체 형식을 모두 지원합니다.

 // 对象
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-편집 가능
• 요소 UI
• 돌고래PHP