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：
若有有问题，请留言交流。