# ph-select

> ## Project setup ``` npm install ph-list ```

Latest version **0.1.1** (published 2021-09-03) · 0 weekly downloads

## Install

```sh
npm install ph-select
pnpm add ph-select
yarn add ph-select
bun add ph-select
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-09-03 |
| First published | 2021-09-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 15.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | phoeon |

## Links

- npm: https://www.npmjs.com/package/ph-select
- npm.io page: https://npm.io/package/ph-select

## Dependencies (6)

- [ph-list](https://npm.io/package/ph-list.md) ^0.1.1
- [ph-media](https://npm.io/package/ph-media.md) ^1.0.0-beta.0
- [ph-autofit](https://npm.io/package/ph-autofit.md) ^1.0.0-beta.0
- [ph-position](https://npm.io/package/ph-position.md) ^1.0.0-beta.0
- [ph-actionsheet](https://npm.io/package/ph-actionsheet.md) ^0.1.3-beta.0
- [ph-dropdown.css](https://npm.io/package/ph-dropdown.css.md) ^1.0.0

## Recent versions

- 0.1.1 (latest) — 2021-09-03
- 0.1.2-beta.5 (beta) — 2021-09-29
- 0.1.2-beta.3 — 2021-09-20
- 0.1.2-beta.2 — 2021-09-19
- 0.1.2-beta.1 — 2021-09-19
- 0.1.2-beta.0 — 2021-09-18
- 0.1.1-beta.0 — 2021-09-03
- 0.1.0 — 2021-09-03
- 0.1.0-beta.0 — 2021-09-03

## README

# vue-template

## Project setup
```
npm install ph-list
```

### usage
``` typescript
import { PhSelect,PhOption } from 'ph-list'
interface PhSelect{
    disabled:{type:Boolean,default:false},
    multiple:{type:Boolean,default:false},
    placeholder:{type:String},
    value:{type:[String,Number,Array]},
    align:{type:String,default:'left'},
    theme:{type:String,default:'light'},
    animation:String,
    title:String //antionsheet模式中的header title，默认是placeholder或者没有，
    showTitle:Boolean,
    dropdownClass:String //下拉的类名
}
interface PhOption{
    icon:String,
    iconColor:String,
    iconRight:String,
    iconrightColor:String,
    iconClass:String
    value:{type:[String,Number],default:""},
}

```

### demo codes
``` html
<template>
  <div>
     <div>默认</div>
        <ph-select style="min-width: 300" :value="pro" @change="onProChange" theme="dark" placeholder="职业选择">
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
        
        <div>多选</div>
        <ph-select
          style="min-width: 300"
          :value="pro1"
          @change="onPro1Change"
          :multiple="true"
           theme="dark"
           title="可以配置"
        >
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
        <br/>
        <ph-select
          style="min-width: 300"
          :value="pro1"
          @change="onPro1Change"
          :multiple="true"
          title="可以配置"
        >
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
        <br/>
        <div>禁止</div>
        <ph-select
          style="min-width: 300"
          :value="pro"
          @change="onProChange"
          :disabled="true"
        >
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
        
        <div>align</div>
        <ph-select
          style="min-width: 300"
          :value="pro"
          @change="onProChange"
          align="center"
        >
          <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{
            opt.text
          }}</ph-option>
        </ph-select>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import {
  PhSelect,
  PhOption
} from "ph-select";

export default defineComponent({
  components: {
    PhSelect,
    PhOption,
  },
  setup() {
    const formData = reactive({
      pro: 1,
      pro1: [1],
      pros: [
        {
          value: 1,
          text: "老师",
        },
        {
          value: 2,
          text: "学生",
        },
      ],
    });

    const onProChange = (v: number) => {
      formData.pro = v;
    };
    const onPro1Change = (v: number[]) => {
      formData.pro1 = v;
    };
    return {
      ...toRefs(formData),
      onProChange,
      onPro1Change,
    };
  },
});
</script>

```

---
[案例](https://phoeon.gitee.io/phoeon-ui-doc/#/select).

---
_Source: https://npm.io/package/ph-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._