vue ele editable
1.0.0
vue-ele-editable — это эффективный, простой и мощный компонент встроенного редактирования element-ui. После ссылки на компонент функцию встроенного редактирования можно выполнить только через данные. Особенности следующие:
Чтобы помочь вам лучше понять и использовать его, если количество звезд превышает 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-галерея |
| загрузить изображение | Загрузить фотографии | vue-ele-upload-image |
| вход | Редактируемая одна строка текста | ввод элемента пользовательского интерфейса |
| текстовая область | Редактируемый многострочный текст | ввод элемента пользовательского интерфейса |
| выбирать | раскрывающийся список | элемент-ui выбрать |
| число | Редактируемые числа | элемент-ui входной номер |
| радио | Единый выбор | элемент-ui радио |
| флажок | Множественный выбор | флажок element-ui |
| дата и время | Редактируемые дата и время (принимает метку времени, строку, значение типа даты) | элемент-ui выбора даты и времени |
| дата-время-текст | Нередактируемые дата и время (принимаемые значения такие же, как указано выше) | |
| дата | Редактируемая дата (принимаемые значения указаны выше) | элемент выбора даты в пользовательском интерфейсе |
| дата-текст | Нередактируемая дата (принимаемые значения такие же, как указано выше) | |
| время | Редактируемое время (принимаемые значения такие же, как указано выше) | Выбор времени element-ui |
| текст времени | Нередактируемое время (принимаемые значения такие же, как указано выше) | |
| статус | состояние | тег element-ui |
| выключатель | выключатель | переключатель элемента пользовательского интерфейса |
| URL | Связь | |
| цвет | цвет | Выбор цвета element-ui |
Если type не является ни одним из вышеуказанных типов, он будет отображаться в соответствии с переданным именем. Вы можете настроить компонент расширения. Подробную информацию см. в примере пользовательского расширения и слайдере примера пользовательского расширения. см. онлайн-пример.
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: [ '男' , '女' ] Функция запроса 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
} 
