<template>
  <div class="page-select">
    <co-header fixed title="select">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <co-cell class="select-wrapper" :title="selecteObj.text" is-link>
        <select v-model="selecteObj" class="co-select" selectedindex="0" @change="selected">
          <option :key="index" :value="option" v-for="(option, index) in options">{{option.text}}</option>
        </select>
      </co-cell>
      <div class="co-pd-a04">当前选择文本值：{{selecteObj.text}}</div>
      <div class="co-pd-a04">当前选择value值：{{selecteObj.value}}</div>
    </div>
  </div>
</template>

<script type="es6">
export default {
  name: 'page-select',
  data() {
    return {
      selecteObj: {value: '-1', text: '请选择'},
      options: [{value: '-1', text: '请选择'}, {value: '1', text: '体育'}, {value: '2', text: '新闻'}, {value: '3', text: '娱乐'}]
    };
  },
  methods: {
    selected(el) {
      // this.selecteObj = {'value': el.target.options[el.target.selectedIndex].value, 'text': el.target.options[el.target.selectedIndex].text};
      console.log('选择', this.selecteObj.text);
    }
  }
};
</script>

<style>
  .select-wrapper select {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-appearance: none;
    border: 0;
  }
</style>
