add Select Component

2016-10-17 12:34:20 +08:00 · 2016-10-17 12:34:20 +08:00 · e355dd49d3
commit e355dd49d3
parent c13471b5fb
21 changed files with 1137 additions and 99 deletions
--- a/components/select/option.vue
+++ b/components/select/option.vue
@ -0,0 +1,65 @@
+<template>
+    <li :class="classes" @click.stop="select" @mouseout.stop="blur"><slot>{{ showLabel }}</slot></li>
+</template>
+<script>
+    const prefixCls = 'ivu-select-item';
+
+    export default {
+        props: {
+            value: {
+                type: [String, Number],
+                required: true
+            },
+            label: {
+                type: [String, Number]
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        componentName: 'select-item',
+        data () {
+            return {
+                selected: false,
+                index: 0,    // for up and down to focus
+                isFocus: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-selected`]: this.selected,
+                        [`${prefixCls}-focus`]: this.isFocus
+                    }
+                ]
+            },
+            showLabel () {
+                return (!!this.label) ? this.label : this.value;
+            }
+        },
+        methods: {
+            select () {
+                if (this.disabled) {
+                    return false;
+                }
+
+                this.$dispatch('on-select-selected', this.value);
+            },
+            blur () {
+                this.isFocus = false;
+            }
+        },
+        ready () {
+
+        },
+        events: {
+            'on-select-close' () {
+                this.isFocus = false;
+            }
+        }
+    }
+</script>