vue-template

Project setup

npm install ph-list

usage

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

<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>

案例.