# Select 选择器

<template>
  <div>
    <plv-select v-model="value">
      <plv-select-option label="上海" value="shanghai" />
      <plv-select-option label="广州" value="guangzhou" />
      <plv-select-option label="北京" value="beijing" />
      <plv-select-option label="南京" value="nanjing" />
      <plv-select-option label="深圳" value="shenzhen" />
      <plv-select-option label="惠州" value="huizhou" />
      <plv-select-option label="湖北" value="hubei" />
    </plv-select>
    <!-- option为参数传入 -->
    <plv-select
      :options="options"
      v-model="value" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        options: [
          { label: '上海', value: 'shanghai' },
          { label: '广州', value: 'guangzhou' },
          { label: '北京', value: 'beijing' },
          { label: '南京', value: 'nanjing' },
          { label: '深圳', value: 'shenzhen' },
          { label: '惠州', value: 'huizhou' },
          { label: '湖北', value: 'hubei' }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
.plv-select {
  width: 240px;
  margin-right: 20px;
  display: inline-block;
}
</style>

<template>
  <div>
    <plv-select v-model="value">
      <plv-select-option label="上海" value="shanghai"></plv-select-option>
      <plv-select-option label="广州" value="guangzhou" disabled></plv-select-option>
      <plv-select-option label="北京" value="beijing"></plv-select-option>
      <plv-select-option label="南京" value="nanjing"></plv-select-option>
      <plv-select-option label="深圳" value="shenzhen"></plv-select-option>
      <plv-select-option label="惠州" value="huizhou"></plv-select-option>
      <plv-select-option label="湖北" value="hubei"></plv-select-option>
    </plv-select>

    <plv-select
      :options="options"
      v-model="value" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        options: [
          { label: '上海', value: 'shanghai' },
          { label: '广州', value: 'guangzhou', disabled: true },
          { label: '北京', value: 'beijing' },
          { label: '南京', value: 'nanjing' },
          { label: '深圳', value: 'shenzhen' },
          { label: '惠州', value: 'huizhou' },
          { label: '湖北', value: 'hubei' }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
.plv-select {
  width: 240px;
  margin-right: 20px;
  display: inline-block;
}
</style>

<template>
  <div>
    <plv-select
      disabled
      placeholder="禁用状态"
      :options="options"
      v-model="value1"></plv-select>
    <plv-select
      readonly
      :options="options"
      v-model="value2"></plv-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: 'guangzhou',
        options: [
          { label: '上海', value: 'shanghai' },
          { label: '广州', value: 'guangzhou' },
          { label: '北京', value: 'beijing' }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
.plv-select {
  width: 240px;
  margin-right: 20px;
  display: inline-block;
}
</style>

<template>
  <div>
    <plv-select v-model="value" multiple :options="options" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        options: [
          { label: '上海', value: 'shanghai' },
          { label: '广州', value: 'guangzhou' },
          { label: '北京', value: 'beijing' },
          { label: '南京', value: 'nanjing' },
          { label: '深圳', value: 'shenzhen' },
          { label: '惠州', value: 'huizhou' },
          { label: '湖北', value: 'hubei' }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
.plv-select {
  width: 240px;
  margin-right: 20px;
  display: inline-block;
}
</style>

<template>
  <div>
    <plv-select
      multiple
      :options="options"
      :multiple-limit="3"
      v-model="value1"></plv-select>

    <plv-select
      multiple
      :options="options"
      :multiple-limit="5"
      v-model="value2"></plv-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: [],
        value2: ['guangzhou', 'beijing'],
        options: [
          { label: '上海', value: 'shanghai' },
          { label: '广州', value: 'guangzhou' },
          { label: '北京', value: 'beijing', disabled: true },
          { label: '南京', value: 'nanjing' },
          { label: '深圳', value: 'shenzhen' },
          { label: '惠州', value: 'huizhou' },
          { label: '湖北', value: 'hubei' }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
.plv-select {
  width: 240px;
  margin-right: 20px;
  display: inline-block;
}
</style>

<template>
  <div>
    <plv-select
      clearable
      :options="options"
      v-model="value1"></plv-select>
    <plv-select
      clearable
      multiple
      :options="options"
      v-model="value2"></plv-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: [],
        options: [
          { label: '上海', value: 'shanghai' },
          { label: '广州', value: 'guangzhou' },
          { label: '北京', value: 'beijing' },
          { label: '南京', value: 'nanjing' },
          { label: '深圳', value: 'shenzhen' },
          { label: '惠州', value: 'huizhou' },
          { label: '湖北', value: 'hubei' }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
.plv-select {
  width: 240px;
  margin-right: 20px;
  display: inline-block;
}
</style>

<template>
  <div class="select-size">
    <plv-select
      placeholder="默认尺寸"
      :options="options"
      v-model="value"></plv-select>
    <plv-select
      size="medium"
      placeholder="中型尺寸"
      :options="options"
      v-model="value"></plv-select>
    <plv-select
      size="small"
      placeholder="小型尺寸"
      :options="options"
      v-model="value"></plv-select>
    <plv-select
      size="mini"
      placeholder="超小尺寸"
      :options="options"
      v-model="value"></plv-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        options: [
          { label: '上海', value: 'shanghai' },
          { label: '广州', value: 'guangzhou' },
          { label: '北京', value: 'beijing' },
          { label: '南京', value: 'nanjing' },
          { label: '深圳', value: 'shenzhen' },
          { label: '惠州', value: 'huizhou' },
          { label: '湖北', value: 'hubei' }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
.plv-select {
  width: 240px;
  margin-right: 20px;
  display: inline-block;
}
.select-size {
  display: flex;
  align-items: center;
}
</style>

<template>
  <plv-select v-model="value">
    <plv-select-option value="shanghai" label="上海">
      <span style="float: left;">上海</span>
      <span style="float: right;color: #999; font-size: 13px;">shanghai</span>
    </plv-select-option>
    <plv-select-option value="guangzhou" label="广州">
      <span style="float: left;">广州</span>
      <span style="float: right;color: #999; font-size: 13px;">guangzhou</span>
    </plv-select-option>
  </plv-select>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  };
</script>

<style lang="scss" scoped>
.plv-select {
  width: 240px;
  margin-right: 20px;
  display: inline-block;
}
</style>

<template>
  <plv-select v-model="value">
    <plv-select-option-group label="热门银行">
      <plv-select-option label="中国工商银行" value="gongshang" />
      <plv-select-option label="中国农业银行" value="nongye" />
    </plv-select-option-group>

    <plv-select-option-group label="A">
      <plv-select-option label="安徽省农村信用社" value="anhuishengnongcunxinyongshe" />
      <plv-select-option label="鞍山银行" value="anshanyinhang" />
    </plv-select-option-group>

    <plv-select-option-group label="B">
      <plv-select-option label="北京银行" value="beijingyinhang" />
      <plv-select-option label="渤海银行" value="bohaiyinhang" />
    </plv-select-option-group>
  </plv-select>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  }
};
</script>

<template>
  <plv-select v-model="value" search>
    <plv-select-option-group label="热门银行">
      <plv-select-option label="中国工商银行" value="gongshang" />
      <plv-select-option label="中国农业银行" value="nongye" />
    </plv-select-option-group>

    <plv-select-option-group label="A">
      <plv-select-option label="安徽省农村信用社" value="anhuishengnongcunxinyongshe" />
      <plv-select-option label="鞍山银行" value="anshanyinhang" />
    </plv-select-option-group>

    <plv-select-option-group label="B">
      <plv-select-option label="北京银行" value="beijingyinhang" />
      <plv-select-option label="渤海银行" value="bohaiyinhang" />
    </plv-select-option-group>
  </plv-select>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  }
};
</script>

<template>
  <plv-select v-model="city" :options="citys" :options-field="optionsField" />
</template>

<script>
export default {
  data() {
    return {
      city: '',
      citys: [
        { name: '上海', index: 'shanghai' },
        { name: '广州', index: 'guangzhou' },
        { name: '北京', index: 'beijing' },
        { name: '南京', index: 'nanjing' },
        { name: '深圳', index: 'shenzhen' },
        { name: '惠州', index: 'huizhou' },
        { name: '湖北', index: 'hubei' }
      ],
      optionsField: {
        label: 'name',
        value: 'index',
      }
    };
  }
}
</script>