vue就地复用原则_在Vue中使用本地HTML输入进行就地编辑

vue就地复用原则

快速编辑 (vue-quick-edit)

In-place editing with native HTML inputs. Inspired by x-editable

使用本地HTML输入进行就地编辑。 受x-editable启发

View Demo 查看演示 Download Source 下载源

特征 (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就地复用原则