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

关注

翻译最新推荐文章于 2025-06-11 14:54:57 发布 506 阅读 AI 写同款· GEO 优化 ›

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

选项可以作为道具传递

<AdvancedSelect
  v-model="value"
  :options="options"
  :disabled="disabled"
  />

Or as the default slot

或作为默认插槽

<AdvancedSelect
  v-model="secondValue"
  :disabled="disabled"
  >
  <option value="1">Text</option>
  <option value="2">Text 2</option>
</AdvancedSelect>

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', }`	使用的文字