VUE實作Studio管理后臺（十一）：下拉選擇串列（Select）控制元件，輸入框input系列

這次Github上傳錯了，標題中的序號不對，我想這樣：《VUE實作Studio管理后臺（十一）：下拉選擇串列（Select）控制元件，輸入框input系列》實際傳成了這樣《VUE實作Studio管理后臺（九）：下拉選擇串列（Select）控制元件，輸入框input系列》，很無奈的錯誤，我也不知道怎么修正，下載代碼的時候注意分別吧，
這次分享下拉串列輸入組件（Select），效果如下：

一如既往，取個好聽的名字RxSelect，正常的呼叫代碼應該是這樣的：

<RxSelect
  :defaultValue = "defaultValue"
  :list= "list"
  v-model = "inputValue"
>
</RxSelect>

list代碼：

list:{
  white:'白色',
  black:'黑色',
  red:'紅色',
  green:'綠色',
  dntknow:'不知道什么色',
},

上一篇作文，已經介紹過，我們的專案是要通過Json資料，動態構建輸入界面，所以只需要在測驗代碼中加入以下代碼：

      {
        label:'顏色',
        value:'white',
        defaultValue:'black',
        inputName:'RxSelect',
        props:{
          list:{
            white:'白色',
            black:'黑色',
            red:'紅色',
            green:'綠色',
            dntknow:'不知道什么色',
          },
        },
      },

RxInputRow控制元件，會把這段資料轉化成上面的代碼，兩者在RxSelect部分是等效的，
RxSelect代碼：

<template>
  <div class="rx-select">
    <div class="value-view">
      <div class="clear-button"
        @click="clear"
      >×</div>
      <div class="value"
        @click="click"
      >
        {{value ? list[value] : $t('widgets.select')}} <span class="right-icon">?</span>
        <ul v-if="showList" class="list">
          <li 
            v-for="(name, value) in list"
            @click="itemClick(value)"
          >
            {{name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RxSelect',
  props:{
    value:{ default:'' }, 
    defaultValue:{ default:'' }, 
    list:{ default:{} },
  },

  computed:{
    inputValue: {
      get:function() {
        return this.value;
      },
      set:function(val) {
        this.$emit('input', val);
      },
    },
  },

  data () {
    return {
      showList : false,
    }
  },
  mounted () {
    document.addEventListener('click', this.documentClick)
  },

  beforeDestroyed() {
    document.removeEventListener('click', this.documentClick)
  },

  methods: {
    clear(){
      this.inputValue = ''
    },
    click(event){
      event.stopPropagation()
      this.showList = !this.showList
    },

    documentClick(event){
      this.showList = false
    },

    itemClick(value){
      this.inputValue = value
    },
  },
}
</script>

<style>
.rx-select{
  display: flex;
  flex-flow: column;
  align-items: center;
}

.rx-select .clear-button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  margin-right:2px;
  font-size: 16px;
}

.rx-select .value-view{
  display: flex;
  flex-flow: row;
  align-items: center;
  cursor: pointer;
}

.rx-select .value-view .value{
  position: relative;
  display: flex;
  flex-flow: row;
  padding: 0 10px;
  height: 24px;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.rx-select .value-view .value span{
  margin-left:5px;
  font-size: 16px;
}

.rx-select .list{
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  left: 0;
  top: 100%;
  z-index: 1;
}

.rx-select .list li{
  min-width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  padding-left:10px;
  background: #424242;
  cursor: pointer;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3); 
  white-space:nowrap;
}

.rx-select .list li:hover{
  background: #75b325;
}
</style>

這段代碼，沒有什么難懂的邏輯，有問題請留言，需要注意的是，css中我把.list設為position:absolute后，子元素li無法撐開它，百度了半天，也沒找到合適解決辦法，就把背景跟陰影的設定放在子元素li里了，好在效果還不錯，先這樣吧，
感謝耐心閱讀，詳細代碼，請參考Github：https://github.com/vularsoft/studio-ui
若有有問題，請留言交流，

標籤：JavaScript

上一篇：VUE實作Studio管理后臺（十）：OptionBox，一個綜合屬性輸入界面，可以級聯重置

下一篇：VUE實作Studio管理后臺（十二）：添加輸入組合，復雜輸入，輸入框Input系列