vue.js 自定义组件_使用Vue.JS自定义选择组件

vue.js 自定义组件

高级选择 (advanced-select)

Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue and Bootstrap 3

用于通过Vue和Bootstrap 3构建的网站通过高级交互(搜索，选择/取消全选等)呈现“选择”的组件

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install @myena/advanced-select

依存关系 (Dependencies)

• Vue 2

  Vue 2

• Bootstrap 3

  引导程序3

用法 (Usage)

Options can be passed as props

选项可以作为道具传递

Or as the default slot

或作为默认插槽

  Text
  Text 2

import AdvancedSelect from 'advanced-select';

export default {
  components: {
    AdvancedSelect,
  },
  data: () => ({
    options: [
      { value: 1, text: 'One' },
      { value: 2, text: 'Two' },
    ],
    value: null,
    secondValue: '1',
    disabled: false,
  }),
};

道具 (Props)

Prop	Type	Default	Description
v-model	any	null	Pass v-model to the component to have the reference to the current selected value
:options	Array	[]	The options to display. A list of objects in the form: { value: 1, text: 'One' } or { label: 'Group 1', options: [ { value: 1, text: 'One' } ]. If not passed as prop, it tries to read them from the component default slot, where they can be specified as HTML standard option|optgroup list.
:search	Boolean	false	Show or not a search field to filter the options
:multiple	Boolean	false	Single or multiple select
:controls	Boolean	false	Show or not a couple control buttons at the top for (de)selecting all items
:displayMax	Number	0	How many selected items to display on the button in multiple mode. 0 means all
:displayText	String	"{0} items selected"	Text to display if displayMax is reached. "{0}" will be replaced by the total number
:texts	Object	{ placeholder: 'Nothing selected', empty: 'No results', selectAll: 'Select all', selectNone: 'Select none', }	Texts used

Struts	类型	默认	描述
v-model	任何	null	将v-model传递给组件以引用当前所选值
:options	数组	[]	显示的选项。 对象列表的形式为： { value: 1, text: 'One' }或{ label: 'Group 1', options: [ { value: 1, text: 'One' } ] 。 如果未作为prop传递，它将尝试从组件默认插槽读取它们，可以在其中将它们指定为HTML标准option|optgroup列表。
:search	布尔型	false	显示或不显示搜索字段以过滤选项
:multiple	布尔型	false	单选或多选
:controls	布尔型	false	在顶部显示或不显示几个控制按钮，用于(取消)选择所有项目
:displayMax	数	0	在多种模式下，要在按钮上显示多少个选定项目。 0表示全部
:displayText	串	"{0} items selected"	如果达到displayMax则显示的文本。 “ {0}”将替换为总数
:texts	目的	{ placeholder: 'Nothing selected', empty: 'No results', selectAll: 'Select all', selectNone: 'Select none', }	使用的文字

All other DOM attributes are inherited by the component button. For example: :disabled="true" will disable the button.

所有其他DOM属性均由组件按钮继承。 例如：： :disabled="true"将禁用该按钮。

翻译自: https://vuejsexamples.com/custom-select-component-using-vue-js/

vue.js 自定义组件