vue就地复用原则
快速编辑 (vue-quick-edit)
In-place editing with native HTML inputs. Inspired by x-editable
使用本地HTML输入进行就地编辑。 受x-editable启发
特征 (Features)
[x] In-place editing
[x]就地编辑
[x] Multiple input types
[x]多种输入类型
[x] Native element property bindings
[x]本机元素属性绑定
[x] Theming with CSS overrides or even apply your own classes
[x]使用CSS进行主题覆盖或什至应用您自己的类
[x] Customize with slots
[x]使用广告位自定义
[x] Keyboard support
[x]键盘支持
[ ] Visual feedback when value gets changed or value is invalid
[]值更改或值无效时的视觉反馈
安装 (Install)
$ npm install --save vue-quick-edit
Global include
全局包含
import QuickEdit from 'vue-quick-edit';
Vue.component('quick-edit', QuickEdit);
Local include
本地包含
import QuickEdit from 'vue-quick-edit';
export default {
components: {
QuickEdit,
},
};
用法 (Usage)
<quick-edit v-model="myValue"><quick-edit>
物产 (Properties)
Name | Type | Default | Description |
---|---|---|---|
buttonCancelText | String | Cancel | The text on the Cancel button. |
buttonOkText | String | Ok | The text on the Ok button. |
booleanYesText | String | Yes | The text for true when you configure type="boolean" . |
booleanNoText | String | No | The text for false when you configure type="boolean" |
emptyText | String | Empty | The text to display when there is a falsy value in the v-model directive. |
classes | Object | See Description | buttonCancel: 'vue-quick-edit__button--cancel' buttonOk: 'vue-quick-edit__button--ok' buttons: 'vue-quick-edit__buttons' input: 'vue-quick-edit__input' link: 'vue-quick-edit__link' wrapper: 'vue-quick-edit' |
mode | String | ok | Specify what the input should do when the user clicks outside of the component. Possible options are ok ,cancel or ignore . |
options | Array | [] | The options to display for a select , checkbox or radio type. This can be an array of strings or an array of objects with text & value as properties. |
placeholderValue | String | '' | When you pass a placeholder to a select it will display the placeholder as the first default option, you can set the value of this option with placeholderValue . |
type | String | input | This can be input , textarea , select , checkbox , radio , boolean or any other type you can pass to input . |
validator | Function | true | |
v-model | String, Array, Boolean, Number | '' | The value . |
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
buttonCancelText | 串 | 取消 | 取消按钮上的文字。 |
buttonOkText | 串 | 好 | 确定按钮上的文本。 |
booleanYesText | 串 | 是 | 配置type="boolean" 时为true 的文本。 |
booleanNoText | 串 | 没有 | 配置type="boolean" 时为false 的文本 |
emptyText | 串 | 空的 | 当v-model 指令中的值为伪造时显示的文本。 |
类 | 目的 | 见描述 | buttonCancel:'vue-quick-edit__button--cancel' buttonOk:'vue-quick-edit__button--ok' 按钮:“ vue-quick-edit__buttons” 输入:“ vue-quick-edit__input” 链接:“ vue-quick-edit__link” 包装器:'vue-quick-edit' |
模式 | 串 | 好 | 指定当用户在组件外部单击时输入应该执行的操作。 可能的选项是ok , cancel 或ignore 。 |
选项 | 数组 | [] | select , checkbox 或radio 类型显示的选项。 这可以是字符串数组或以text 和value 作为属性的对象数组。 |
占位符值 | 串 | '' | 将placeholder 传递给select时,它将占位符显示为第一个默认选项,您可以使用placeholderValue 设置此选项的值。 |
类型 | 串 | 输入 | 可以input , textarea , select , checkbox , radio , boolean 或您可以传递给input 任何其他类型。 |
验证器 | 功能 | 真正 | |
模型 | 字符串,数组,布尔值,数字 | '' | 价值 。 |
大事记 (Events)
Name | Parameters | Description |
---|---|---|
close | Current value | Fires when the user has interacted with the "ok" or "close" button. |
input | Current value | Fires when the user has interacted with the "ok" button. |
show | Current value | Fires when the user has interacted with the display label. |
raw-input | Current input value | Fires the current input value when the user has interacted with the "ok" button. |
名称 | 参量 | 描述 |
---|---|---|
关 | 当前值 | 用户与“确定”或“关闭”按钮进行交互时触发。 |
输入 | 当前值 | 用户与“确定”按钮互动时触发。 |
表演 | 当前值 | 用户与显示标签互动时触发。 |
原始输入 | 当前输入值 | 用户与“确定”按钮进行交互时,触发当前输入值。 |
插槽 (Slots)
Name | Default | Description |
---|---|---|
default | {{ value || emptyText }} | The display value. Available slot props value and raw-value . |
button-ok | {{ buttonOkText }} | A slot to use HTML as a the Ok button text, useful for FontAwesome. |
button-cancel | {{ buttonCancelText }} | A slot to use HTML as the Cancel button text, useful for FontAwesome. |
prepend | `` | Prepend HTML before the display text |
append | `` | Append HTML after the display text |
名称 | 默认 | 描述 |
---|---|---|
默认 | {{ value || emptyText }} | 显示值。 可用的广告位道具value 和raw-value 。 |
确定 | {{ buttonOkText }} | 用于将HTML用作“确定”按钮文本的插槽,对FontAwesome有用。 |
按钮取消 | {{ buttonCancelText }} | 一个用于将HTML用作“取消”按钮文本的插槽,对FontAwesome有用。 |
前置 | `` | 在显示文字之前添加HTML |
附加 | `` | 在显示文字后附加HTML |
主题化 (Theming)
自订主题 (Custom theme)
For example just override this class in your style
例如,以您的样式覆盖此类
.vue-quick-edit__link--is-clickable {
color: #BADA55;
}
引导主题 (Bootstrap theme)
Set up the classes for the corresponding elements
设置相应元素的类
vueQuickEditClasses: {
wrapper: 'form-group form-inline',
input: 'form-control input-sm',
buttons: 'btn-group btn-group-sm',
buttonOk: 'btn btn-primary',
buttonCancel: 'btn btn-link',
},
Maybe add specific overrides for bootstrap
也许为引导添加特定的替代
.form-group {
margin-bottom: 0;
}
.btn-group {
display: inline-block;
}
Use it like this
这样使用
<quick-edit :classes="vueQuickEditClasses"><quick-edit>
翻译自: https://vuejsexamples.com/in-place-editing-with-native-html-inputs-in-vue/
vue就地复用原则