commit

2021-08-05 18:01:25 +08:00
parent 304365dcec
commit deca70a11f
5 changed files with 177 additions and 15 deletions
@@ -0,0 +1,140 @@
+<template>
+    <div id="mySelect">
+        <el-dropdown placement="bottom" @command="handleCommand" trigger="click">
+            <div class="my-select-input__wrap">
+                <input class="el-input__inner" type="text" v-model.lazy="selectVal" v-show="false">
+                <input class="el-input__inner" type="text" v-model.lazy="showLabel" readonly="readonly">
+            </div>
+            <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                        v-for="(item,index) in options"
+                        :key="index"
+                        :command="item">{{ item.label }}</el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "mySelect",
+        data() {
+            return {
+                showLabel: '',
+                activeLi: '',
+                active: false,
+                selectVal: ''
+            }
+        },
+        props: {
+            value: {
+                type: String,
+                required: true
+            },
+            options: { // option
+                type: Array,
+                default: () => {
+                    return []
+                }
+            }
+        },
+        methods: {
+            handleCommand (row) {
+                this.selectVal = row.label
+                this.showLabel = row.label
+                this.active = !this.active
+                this.$emit('update:value', this.selectVal);
+            }
+        },
+        watch: {
+            value: {
+                immediate: true,
+                handler (val) {
+                    this.selectVal = val
+                    for (let a = 0; a < this.options.length; a++) {
+                        if (this.selectVal === this.options[a].value) {
+                            this.showLabel = this.options[a].label
+                        }
+                    }
+                }
+            }
+        },
+        mounted() {
+            for (let a = 0; a < this.options.length; a++) {
+                if (this.selectVal === this.options[a].value) {
+                    this.showLabel = this.options[a].label
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+    #mySelect {
+
+    }
+    .active {
+        background-color: rgb(245, 247, 250);
+    }
+    /*ul {*/
+    /*    position: absolute;*/
+    /*    z-index: 9999;*/
+    /*    background-color: rgb(255, 255, 255);*/
+    /*    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;*/
+    /*    box-sizing: border-box;*/
+    /*    border-width: 1px;*/
+    /*    border-style: solid;*/
+    /*    border-color: rgb(228, 231, 237);*/
+    /*    border-image: initial;*/
+    /*    border-radius: 4px;*/
+    /*    box-sizing: border-box;*/
+    /*    list-style: none;*/
+    /*    padding: 6px 0px;*/
+    /*    margin: 0px;*/
+    /*    display: block;*/
+    /*    list-style-type: disc;*/
+    /*    margin-block-start: 1em;*/
+    /*    margin-block-end: 1em;*/
+    /*    margin-inline-start: 0px;*/
+    /*    margin-inline-end: 0px;*/
+    /*    width: 100%;*/
+    /*    li {*/
+    /*        list-style:none;*/
+    /*        height: 34px;*/
+    /*        line-height: 34px;*/
+    /*        padding: 0 20px;*/
+    /*    }*/
+    /*    li:hover {*/
+    /*        background-color: rgb(245, 247, 250);*/
+    /*    }*/
+    /*}*/
+    /*.mySelect {*/
+    /*    width: 100%;*/
+    /*    position: relative;*/
+    /*    option {*/
+    /*        height: 34px;*/
+    /*        line-height: 34px;*/
+    /*        padding: 0 20px;*/
+    /*    }*/
+    /*}*/
+    /*.mySelect:focus + .myIcon{*/
+    /*    transform:rotate(180deg);*/
+    /*    -ms-transform:rotate(180deg); 	!* IE 9 *!*/
+    /*    -moz-transform:rotate(180deg); 	!* Firefox *!*/
+    /*    -webkit-transform:rotate(180deg); !* Safari 和 Chrome *!*/
+    /*    -o-transform:rotate(180deg);*/
+    /*}*/
+    /*.mySelect:focus-within + .myIcon{*/
+    /*    transform:rotate(180deg);*/
+    /*    -ms-transform:rotate(180deg); 	!* IE 9 *!*/
+    /*    -moz-transform:rotate(180deg); 	!* Firefox *!*/
+    /*    -webkit-transform:rotate(180deg); !* Safari 和 Chrome *!*/
+    /*    -o-transform:rotate(180deg);*/
+    /*}*/
+    /*.myIcon {*/
+    /*    position: absolute;*/
+    /*    right: 7px;*/
+    /*    top: calc(~'50% - 7px');*/
+    /*    transition: all .3s;*/
+    /*}*/
+</style>