實例 Component Dropdown

許多細節都沒有完成，但時間緊迫，還是寫個大概就好。
先附上程式碼，內容代補。

HTML:

<div id="app">
	<ht-dropdown
	  :status="initStatus"
	  :options="htOptions"
	  @updatehtdropdownstatus="updateHtDropdownStatus"
	>
	</ht-dropdown>
</div>

Vue Component:

Vue.component('ht-dropdown', {
  template:`
    <div class="ht-dropdown">
      <div class="ht-dropdown-status" @click="toggle" @mouseleave="close">
        <p class="ht-dropdown-status-text" :title="statusTitle">
          {{ statusText }}
        </p>
        <div v-show="isShow" class="ht-dropdown-options">
          <div
            v-for="(option, statusId) in options"
            v-show="option.isShow"
            @click.stop="setStatus(option, statusId)"
            class="ht-dropdown-option"
            :title="option.optionTitle"
          >
            <p>{{ option.optionText }}</p>
          </div>
        </div>
      </div>
      <p class="error-msg">{{ errorMsg }}</p>
    </div>
  `,
  props: {
    status: String,
    options: Object,
  },
  data() {
    return {
      isShow: false,
      isError: false,
      errorMsg: ''
    }
  },
  computed: {
    statusText() {
      return this.options[this.status].statusText;
    },
    statusTitle() {
      return this.options[this.status].statusTitle;
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    },
    close() {
      this.isShow = false;
    },
    setStatus(option, statusId) {
      this.close();
      this.$emit('updatehtdropdownstatus', statusId, this.setErrorMsg);
    },
    setErrorMsg(errorMsg) {
      this.errorMsg = errorMsg;
    }
  }
})

Vue Instance:

let vm = new Vue({
  el: '#app',
  data: {
    initStatus: 'A',
    htOptions: {
      'A': {
        statusText: 'statusTextA',
        statusTitle: 'statusTitleA',
        optionText: 'optTextA',
        optionTitle: 'optTitleA',
        isShow: true
      },
      'B': {
        statusText: 'statusTextB',
        statusTitle: 'statusTitleB',
        optionText: 'optTextB',
        optionTitle: 'optTitleB',
        isShow: true
      },
      'C': {
        statusText: 'statusTextC',
        statusTitle: 'statusTitleC',
        optionText: 'optTextC',
        optionTitle: 'optTitleC',
        isShow: true
      },
      'D': {
        statusText: 'statusTextD',
        statusTitle: 'statusTitleD',
        optionText: 'optTextD',
        optionTitle: 'optTitleD',
        isShow: true
      }
    }
  },
  methods: {
    updateHtDropdownStatus(statusId, callback) {
      this.initStatus = statusId;
    }
  }
})

附上 fiddle (https://jsfiddle.net/sax3mzn8/2/)