# vueComponents

**Repository Path**: zhoup260641663/vue-components

## Basic Information

- **Project Name**: vueComponents
- **Description**: vue2小组件 基于view-design开发 sass
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-01-11
- **Last Updated**: 2021-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# search-select  下拉列表可搜索组件

####  Description

​	基于Vue的下拉列表可搜索组件,简单封装了下，供大家参考，如果有什么建议可以提交Issue

**注意：该插件依赖view-design，必须是优先安装 否则将会引起程序奔溃**

**warn:The Plugin dependency  view-design , Must be installed first, otherwise it will cause the program to crash**

####  Installation

1. npm install view-design --save 

2. npm install -D sass-loader node-sass

3. npm i vue-components-iview

4. ```js
   main.js file
   import ViewUI from 'view-design';
   
   import 'view-design/dist/styles/iview.css';
   
   import vueComponentsIview from 'vue-components-iview';
   
   import 'vue-components-iview/lib/vue-components-iview.css';
   ```

   

![image-20210111171453296](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210111171453296.png)

#### 1.search-select 

```js
<search-select></search-select>
```

##### pops params：

```js
    keyName: { // 默认展示的数据关键字 
      default: 'shop_name'
    },
    selectId: { // 当前选中行的ID
      default: 0
    },
    list: {  // 数据列表
      type: Array,
      required: true,
      default: () => [],
    },
    placeholderTip: {  // 输入提示
      type: String,
      default: '请选择数据'
    },
    requiredTipShow: { // 是否是必填项
      type: Boolean,
      default: false
    }
```

###### 点击列表时内部触发emit时间 需要父组件 监听setListId

```js
	  <search-select 
         	@setListId="setListId">
      </search-select>
	
	methods: {
        // 设置当前data里需要的id
        setListId (id) {
          if (id || id === 0) {
            this.selectId = id
          }
        },
      }
```