IMWeb训练营作业-完成第一个组件select下拉框组件

下面是效果图

---

经过几天的vue学习，终于可以自己动手完成一个像样的组件了，下面是具体的过程

首先我们先书写template结构

<template>
    <div id="demo03">
        <div class="header">
            <h1>第一个组件：下拉框组件</h1>
        </div>
        <div class="content">

            <div class="component">
                <Selected :optionData="optionData"></Selected>
            </div>
        </div>
    </div>
</template>

这是展示效果的模板结构，真正的下拉框组件用Selected标签来展现，
展示的数据如下

<script>
import Selected from '../../components/Select/select.vue'
export default{
    data () {
        return {
            optionData: [{
                value: 1,
                text: '牛奶'
            },{
                value: 2,
                text: '面包'
            },{
                value: 3,
                text: '美女'
            }],
        }
    },
    components: {
        Selected
    }
}
</script>

把optionData绑定到Selected里，以达到数据变化复用的效果，

<template>
    <div class="select-component">
        <div class="select-input">
            <input type="text" placeholder="请选择" readonly="readonly" v-model="selected.text" autocomplete="off" class="el-input__inner" @click="dropDown">
            <div class="icon">
                <div class="icon-warrp" :class="{roate: classRoate}">
                    <span class="select-icon"></span>
                </div>
            </div>
        </div>
        <div class="select-options" :class="{show: classShow}">
            <ul>
                <li class="select-options-item" v-for="(item, index) in optionData" :class="{selected: classSelected == index}"  @click="selectItem(index)">{{item.text}}</li>
            </ul>
        </div>
    </div>
</template>

下拉框的具体的结构如上，就是一个input来承载value，一个无序列表来装下拉项，
具体的逻辑如下

<script>
    export default {
        data () {
            return {
                classShow: false,
                classRoate: false,
                selected: {
                    value: '',
                    text: ''
                },
                classSelected: -1,
            }
        },
        props:['optionData'],
        methods: {
            dropDown () {
                if(this.classShow){
                    this.classShow = false
                    this.classRoate = false
                }else{
                    this.classShow = true
                    this.classRoate = true
                }
            },
            selectItem (index) {
                this.selected = this.optionData[index]
                this.classSelected = index
                this.classShow = false
                this.classRoate = false
            }
        }
    }
</script>

就是利用props来接受外界传进来的数据，然后进行渲染。

“`
.select-component
width 240px

& .select-input
    position relative
    font-size 14px
    display inline-block
    width 100%
    cursor pointer

& .el-input__inner
    appearance none
    background-color #fff
    background-image none
    border-radius 4px
    border 1px solid #bfcbd9
    box-sizing border-box
    color #1f2d3d
    display block
    font-size inherit
    height 36px
    line-height 1
    outline none
    padding 3px 10px
    transition border-color .2s cubic-bezier(.645,.045,.355,1)
    width 100%
    cursor pointer
.el-input__inner:hover
    border: 1px solid #999
.icon
    position absolute
    right 8px
    top 6px
    width 24px
    height 24px
    line-height 24px
    overflow hidden
.icon-warrp
    width 100%
    height 100%
    position relative
    transition transform .2s cubic-bezier(.645,.045,.355,1)

.select-icon
    position absolute
    right 50%
    top 50%
    margin-right -8px
    margin-top -4px
    width 0
    height 0
    border-width 8px 8px 0
    border-style solid
    border-color #bfcbd9 transparent transparent
.roate 
    transform rotate(180deg)
.select-options
    width 224px
    background #fff
    border 1px solid #bfcbd9
    margin-top 8px
    padding 8px     
    opacity 0
& ul
    list-style: none;
    padding: 6px 0;
    margin: 0;
    box-sizing: border-box;
.select-options-item
    font-size 14px
    padding 8px 10px
    position relative
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    color #48576a
    height 36px
    line-height 1.5
    box-sizing border-box
    cursor pointer

.select-options-item.selected
    color #fff
    background-color #20a0ff
.show
    animation 0.3s fadeInShow
    animation-fill-mode: forwards;

@keyframes fadeInShow 
    0%
        opacity 0
        transform translateY(-5px)
    100%
        opacity 1
        transform translateY(0)

第一次用stylus，不会语法，瞎写的，抽时间学习下先，哈哈~~~
目前还没有加上绑定事件， 话说用 this.$emit就可以分发事件了，有时间完善下，加上诸如原生组件的onChang,click事件等等。

github地址：https://github.com/CavinHuang/vue-study/tree/master/coffee/src/pages/demo03