Paeg、Select add placement

梁灏
1 parent cb6418ac
Showing 5 changed files with 30 additions and 17 deletions Show diff stats
examples/routers/page.vue
examples/routers/select.vue
src/components/page/options.vue
src/components/page/page.vue
src/components/select/select.vue
 <template>
-    <div>
-        <Page :total="100" :current="current"></Page>
-        {{ current }}
-        <Button @click="current = 1">set current</Button>
+    <div style="margin: 100px;">
+        <Page :total="100" show-sizer placement="top"></Page>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                current: 2
-            }
-        }
+
     }
 </script>
 <template>
-    <Select v-model="fields.pid" filterable>
-        <Option :value="0" label="一级菜单"></Option>
-        <Option :value="1" label="二级菜单"></Option>
-    </Select>
+    <div style="width: 200px;margin: 100px;">
+        <Select v-model="fields.pid" filterable placement="top">
+            <Option :value="0" label="一级菜单"></Option>
+            <Option :value="1" label="二级菜单"></Option>
+        </Select>
+    </div>
 </template>
 <script>
 <template>
     <div v-if="showSizer || showElevator" :class="optsClasses">
         <div v-if="showSizer" :class="sizerClasses">
-            <i-select v-model="currentPageSize" :size="size" @on-change="changeSize">
+            <i-select v-model="currentPageSize" :size="size" :placement="placement" @on-change="changeSize">
                 <i-option v-for="item in pageSizeOpts" :key="item" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
             </i-select>
         </div>
@@ -35,7 +35,8 @@
             _current: Number,
             pageSize: Number,
             allPages: Number,
-            isSmall: Boolean
+            isSmall: Boolean,
+            placement: String
         },
         data () {
             return {
@@ -52,6 +52,7 @@
             :show-sizer="showSizer"
             :page-size="currentPageSize"
             :page-size-opts="pageSizeOpts"
+            :placement="placement"
             :show-elevator="showElevator"
             :_current.once="currentPage"
             :current="currentPage"
@@ -92,6 +93,12 @@
                     return [10, 20, 30, 40];
                 }
             },
+            placement: {
+                validator (value) {
+                    return oneOf(value, ['top', 'bottom']);
+                },
+                default: 'bottom'
+            },
             size: {
                 validator (value) {
                     return oneOf(value, ['small']);
@@ -24,8 +24,8 @@
             <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSingleSelect"></Icon>
             <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
         </div>
-        <transition name="slide-up">
-            <Drop v-show="visible" ref="dropdown">
+        <transition :name="transitionName">
+            <Drop v-show="visible" :placement="placement" ref="dropdown">
                 <ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
                 <ul v-show="!notFound" :class="[prefixCls + '-dropdown-list']" ref="options"><slot></slot></ul>
             </Drop>
@@ -85,6 +85,12 @@
             },
             notFoundText: {
                 type: String
+            },
+            placement: {
+                validator (value) {
+                    return oneOf(value, ['top', 'bottom']);
+                },
+                default: 'bottom'
             }
         },
         data () {
@@ -161,6 +167,9 @@
                 } else {
                     return this.notFoundText;
                 }
+            },
+            transitionName () {
+                return this.placement === 'bottom' ? 'slide-up' : 'slide-down';
             }
         },
         methods: {