基于vue的自定义选择框

效果图：

<div id="select">
            <div class="divInput">
                <div class="input" @click="openValue">
                    <input v-model="value" type="text" placeholder="选择喜欢的水果" disabled="true">
                    <!--     <div class="input-box" v-model="value">
                        
                    </div> -->
                    <!-- <img src="../assets/arrow.png" alt="">     -->
                    <div class="triangle" :class="openSelect ? 'isSelect':''">

                    </div>
                </div>
                <div class="list" v-show="show">
                    <ul>
                        <li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.index" :class="item.checked ? 'checked':''">{{ item.name }}</li>
                    </ul>
                </div>
            </div>
        </div>

    <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                
            }

            body {
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            }

            .divInput {
                margin: 200px;
            }

            ul li {
                list-style: none;
            }

            .input {
                width: 140px;
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                border: 1px solid #cccccc;
                position: relative;

            }

            .input input {
                border: none;
                outline: none;
                width: 90%;
                background-color: transparent;
                font-size: 15px;

            }

            /*     .input::after {
                content: '';
                position: absolute;
                right: 10px;
                top: 43%;
                width: 0px;
                height: 0px;
                border-top: 7px solid green;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 7px solid transparent;
            } */
            .triangle {
                /* content: ''; */
                position: absolute;
                right: 10px;
                top: 35%;
                width: 0px;
                height: 0px;
                border-top: 7px solid green;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 7px solid transparent;
                transition: all .1s;
            }

            .list {
                width: 150px;
                border: 1px solid #cccccc;
                overflow: hidden;
                color: #999;
            }

            .list ul li {
                width: 100%;
                height: 30px;
                cursor: pointer;
                line-height: 30px;
                padding-left: 15px;

            }

            .list ul li:hover {
                background-color: #cccccc;
                color: white;
            }

            .checked {
                background-color: #cccccc;
                color: white;

            }

            .isSelect {
                transform: rotate(180deg);
            }
        </style>

        <script type="text/javascript">
            new Vue({
                el: '#select',
                data() {
                    return {
                        tableData: [{
                                'name': "苹果",
                                "checked": false
                            },
                            {
                                'name': '鸭梨',
                                "checked": false
                            },
                            {
                                'name': '香蕉',
                                "checked": false
                            }, {
                                'name': '菠萝蜜',
                                "checked": false
                            }
                        ],
                        show: false,
                        value: '',
                        openSelect: false,
                    }
                },
                computed: {
                    gettableData: function() {
                        return this.tableData;
                    }
                },
                methods: {
                    openValue() {
                        this.show = !this.show;
                        this.openSelect = !this.openSelect;
                    },
                    getvalue(index, item) {
                        this.value = item.name;
                        this.tableData.forEach(item1 => {
                            if (item1.name == item.name) {
                                item1.checked = true;
                            } else {
                                item1.checked = false;
                            }

                        })
                        this.show = false;
                        this.openSelect = false;
                    },
                }
            })
        </script>