xsd-drop-items v1.2.4

1. 组件介绍

1. xsd-drop-items 是一个下拉菜单组件。
2. 这个组件具有非常良好的动画效果。
3. 这个组件的功能齐全，简单好用，欢迎使用
4. 反馈意见请发送至 962454954@qq.com ,我们将进行快速迭代。

2. 组件使用

2.1 安装

1. npm i xsd-drop-items

2.2 引入方式

1. 组件内引入

<script>
    import { xsdDropItems } from 'xsd-drop-items'
    export default {
        components: {
            xsdDropItems
        },
    }
</script>

2. 全局按需引入

import { xsdDropItems } from 'xsd-drop-items'
Vue.component('xsd-drop-items', xsdDropItems)

3. 全局引入

import xsdDropItems from 'xsd-drop-items'
Vue.use(xsdDropItems)

2.3 使用方法

2.3.1 使用示例

<template>
  <div id="app">
    <xsd-drop-items
      :items="items"
      @choose="choose"
      v-model="selectedItem"
    >
    </xsd-drop-items>
    {{this.selectedItem}}
  </div>
</template>

<script>

import { xsdDropItems } from './components/xsd-drop-items'

export default {
  name: 'App',
  components: {
    [xsdDropItems.name]: xsdDropItems,
  },
  data() {
    return {
      items: [
        { key: 0, value: '刘备' },
        { key: 1, value: '关羽' },
        { key: 2, value: '张飞' },
        { key: 3, value: '赵云' },
      ],
      selectedValue: '',
      selectedItem: {}
    }
  },
  methods: {
    choose(item) {
      this.selectedValue = item.value;
      console.log(this.selectedValue);
    },
  }
}
</script>

2.3.2 两种获取选中项的方法

1. 使用 v-model 语法糖 （推荐使用）
   1. v-model 绑定的对象会自动更新为 下拉菜单的选中项
2. 使用 choose 事件（老版本获取选中项的方式，不推荐使用，但保留其用法）
   1. choose 事件绑定的方法的第一个参数的值就是下拉菜单的选中项

2.4 属性和方法

1. items

   1. items 是用户提供的选项

   2. items 的格式

      1. 是一个数组

      2. 数组元素是对象，这个对象有两个属性

         1. key
         2. value

      3. key 值不可以相同

2. choose

   1. choose 是点击选项所触发的事件
   2. choose 的参数是用户选择的选项 item, 我们可以从中获取 key 和 value

2.5 样式类

1. 鼠标悬停样式

   .xsd-drop-item:hover {
       background-color: rgb(161, 208, 255);
   }

2. 选项样式

   .xsd-drop-item {
       text-align: center;
       height: 22px;
       background-color: #eee;
       border-bottom: 1px solid #ccc;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       cursor: pointer;
   }

3. 组件容器样式（主要用来设置宽度）

   .xsd-drop-container {
       width: 120px;
       position: relative;
   }

4. 下拉框的样式

.xsd-it {
  position: relative;
  height: 22px;
  background-color: #fff;
  text-align: center;
  border: 1px solid #409eff;
  padding-right: 21px;
  padding-left: 8px;
}