vue下拉组件_高度动态的Vue下拉组件

vue下拉组件

虚拟动态下拉 (vue-dynamic-dropdown)

A Highly Customizable, easy-to-use elegant dropdown component.

一个高度可定制的，易于使用的优雅下拉菜单组件。

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

反馈将不胜感激，欢迎提出问题，建议和问题。

View demo 查看演示 Download Source 下载源

用法 (Usage)

Install via NPM npm i vue-dynamic-dropdown

通过NPM npm i vue-dynamic-dropdown

Then require in your project:

然后在您的项目中要求：

var VueDropdown = require('vue-dynamic-dropdown');

or ES6 syntax:

或ES6语法：

import VueDropdown from 'vue-dynamic-dropdown'

Then you can register the component globally:

然后，您可以全局注册该组件：

Vue.component('vue-dropdown', VueDropdown);

Or in your Vue component:

或在您的Vue组件中：

components: {
  VueDropdown
}

You can then use the following selector anywhere in your project:

然后，您可以在项目中的任何地方使用以下选择器：

• To get up and running quick the package now supports rendering just the selector with default values

  为了快速启动和运行，该软件包现在支持仅渲染具有默认值的选择器

<vue-dropdown></vue-dropdown>

文件 (Docs)

config: {...} is a configuration object that is to be binded to vue-dropdown, api properties are:

config: {...}是要绑定到vue-dropdown的配置对象，api属性是：

基本 (Basics)

Property	Type	Description
options	array	holds the inner selection options of the dropdown(shown when open), each single option is an object that has the value key that pairs with the given value e.g { value: '1st Option' }
width	number	determines the width of the dropdown button & options drawer
placeholder	string	The text shown on the dropdown button defaultly
prefix	string	A text prefix that will be added before the placeholder text

属性	类型	描述
选项	数组	保留下拉菜单的内部选择选项(打开时显示)，每个选项都是一个对象，该对象具有与给定值配对的value键，例如{ value: '1st Option' }
宽度	数	确定下拉按钮和选项抽屉的宽度
占位符	串	默认情况下，下拉按钮上显示的文本
字首	串	将在占位符文本之前添加的文本前缀

定制样式 (Customized Styling)

Property	Type	Description
backgroundColor	string	Set the dropdown button & options area background color
hoverBackgroundColor	string	Set the dropdown button & options hover background color
border	string	Set the dropdown button & options border
textColor	string	Set the dropdown button & options text color

属性	类型	描述
背景颜色	串	设置下拉按钮和选项区域的背景色
hoverBackgroundColor	串	设置下拉按钮和选项悬停背景颜色
边境	串	设置下拉按钮和选项边框
textColor	串	设置下拉按钮和选项文本颜色

大事记 (Events)

Event Name	Returns	Description
setSelectedOption	Option Obj	Clicking a dropdown option emits an option data object upwards like so

活动名称	退货	描述
setSelectedOption	期权对象	单击下拉选项会像上面这样向上发出选项数据对象

Listening to the event e.g:

收听事件，例如：

<vue-dropdown @setSelectedOption="myLocalSetterFunction($event)"></vue-dropdown>

象征例子 (Implemntation Example)

Define your config options object in the component importing VueDropdown e.g

在导入VueDropdown的组件中定义您的配置选项对象，例如

data: function() {
    return {
        config: {
            options: [
                {
                    value: "option 1"
                },
                {
                    value: "option 2"
                },
                {
                    value: "option 3"
                },
            ],
            prefix: "The",
            backgroundColor: "green"
        }
    }
}

And bind it to the selector like so

然后像这样将其绑定到选择器

<vue-dropdown :config="config"></vue-dropdown>

翻译自: https://vuejsexamples.com/a-highly-dynamic-vue-dropdown-component/

vue下拉组件