<template>
  <div class="bx-demo-wrap">
    <h2 class="bx-demo-title">
      基本用法
    </h2>
    <bxs-mail-input
      label="电子邮箱"
      type="text"
      clearable
      placeholder="请填写电子邮箱"
      v-model.trim="emailValue"
      @select="select"
      />
    <h2 class="bx-demo-title">
      自定义邮箱后缀名
    </h2>
    <bxs-mail-input
      label="电子邮箱"
      type="text"
      clearable
      placeholder="请填写电子邮箱"
      v-model.trim="emailValue2"
      @select="select"
      :email-arr="emailArr"
      />
  </div>
</template>
<script>
export default {
  data() {
    return {
      emailValue: '',
      emailValue2: '',
      emailArr: ['@winbaoxian.com', '@189.com', '@qq.com'],
    }
  },
  methods: {
    select(data) {
      console.log(data)
    },
  },
}
</script>
<style>
.bx-demo-wrap {
  overflow-x: hidden;
  padding-bottom: 200px;
}
.bx-demo-title {
  margin: 0;
  font-size: 14px;
  color: #333;
  padding: 30px 15px 15px;
}
</style>
