<template>
  <div class="demo-input-addon">
    <div class="demo-box">
      <ui-input
        v-model="value"
        suffix-icon="close">
        <template slot="before">
          <div style="padding: 0 12px; color: #666;">
            http://
          </div>
        </template>
      </ui-input>
    </div>

    <div class="demo-box">
      <ui-input
        v-model="value"
        suffix-icon="close">
        <ui-select
          slot="before"
          :options="areas"
          style="width: 100px"></ui-select>
      </ui-input>
    </div>
    <div class="demo-box">
      <ui-input
        v-model="value"
        suffix-icon="user">
        <ui-select
          slot="after"
          :options="areas"
          style="width: 100px"></ui-select>
      </ui-input>
    </div>
  </div>
</template>

<script>
import { Input, Select } from "amumu-ui"
export default {
  components: {
    "ui-input": Input,
    "ui-select": Select,
  },
  data() {
    return {
      value: "",
      areas: [
        {
          label: "+86",
          value: "086",
        },
        {
          label: "+89",
          value: "089",
        },
      ],
    }
  },
}
</script>
