chenhaodong / mew-iview

Commit ddc87547d1953493fd3f707ef54c86275a03eeb1

Authored by Aresn
Committed by GitHub
2 parents eed57084 dab9c3f6

Merge pull request #3354 from huanghong1125/dropdown 

update popper animation
Showing 4 changed files with 359 additions and 18 deletions   Show diff stats
Inline Side-by-side
examples/routers/dropdown.vue
  Show/Hide comments   View file @ddc8754
1 1 <template>
2   - <Dropdown trigger="click" style="margin-left: 20px">
3   - <a href="javascript:void(0)">
4   - click 触发
5   - <Icon type="arrow-down-b"></Icon>
6   - </a>
7   - <DropdownMenu slot="list">
8   - <DropdownItem>驴打滚</DropdownItem>
9   - <DropdownItem>炸酱面</DropdownItem>
10   - <DropdownItem>豆汁儿</DropdownItem>
11   - <DropdownItem>冰糖葫芦</DropdownItem>
12   - <DropdownItem>北京烤鸭</DropdownItem>
13   - </DropdownMenu>
14   - </Dropdown>
  2 + <div>
  3 + <div>
  4 + <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
  5 + <a href="javascript:void(0)">
  6 + right-start
  7 + <Icon type="arrow-down-b"></Icon>
  8 + </a>
  9 + <DropdownMenu slot="list">
  10 + <DropdownItem>驴打滚</DropdownItem>
  11 + <DropdownItem>炸酱面</DropdownItem>
  12 + <DropdownItem>豆汁儿</DropdownItem>
  13 + <DropdownItem>冰糖葫芦</DropdownItem>
  14 + <DropdownItem>北京烤鸭</DropdownItem>
  15 + </DropdownMenu>
  16 + </Dropdown>
  17 + <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
  18 + <a href="javascript:void(0)">
  19 + right-end
  20 + <Icon type="arrow-down-b"></Icon>
  21 + </a>
  22 + <DropdownMenu slot="list">
  23 + <DropdownItem>驴打滚</DropdownItem>
  24 + <DropdownItem>炸酱面</DropdownItem>
  25 + <DropdownItem>豆汁儿</DropdownItem>
  26 + <DropdownItem>冰糖葫芦</DropdownItem>
  27 + <DropdownItem>北京烤鸭</DropdownItem>
  28 + </DropdownMenu>
  29 + </Dropdown>
  30 +
  31 + <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
  32 + <a href="javascript:void(0)">
  33 + bottom-start
  34 + <Icon type="arrow-down-b"></Icon>
  35 + </a>
  36 + <DropdownMenu slot="list">
  37 + <DropdownItem>驴打滚</DropdownItem>
  38 + <DropdownItem>炸酱面</DropdownItem>
  39 + <DropdownItem>豆汁儿</DropdownItem>
  40 + <DropdownItem>冰糖葫芦</DropdownItem>
  41 + <DropdownItem>北京烤鸭</DropdownItem>
  42 + </DropdownMenu>
  43 + </Dropdown>
  44 + <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
  45 + <a href="javascript:void(0)">
  46 + bottom-end
  47 + <Icon type="arrow-down-b"></Icon>
  48 + </a>
  49 + <DropdownMenu slot="list">
  50 + <DropdownItem>驴打滚</DropdownItem>
  51 + <DropdownItem>炸酱面</DropdownItem>
  52 + <DropdownItem>豆汁儿</DropdownItem>
  53 + <DropdownItem>冰糖葫芦</DropdownItem>
  54 + <DropdownItem>北京烤鸭</DropdownItem>
  55 + </DropdownMenu>
  56 + </Dropdown>
  57 +
  58 + <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
  59 + <a href="javascript:void(0)">
  60 + top-start
  61 + <Icon type="arrow-down-b"></Icon>
  62 + </a>
  63 + <DropdownMenu slot="list">
  64 + <DropdownItem>驴打滚</DropdownItem>
  65 + <DropdownItem>炸酱面</DropdownItem>
  66 + <DropdownItem>豆汁儿</DropdownItem>
  67 + <DropdownItem>冰糖葫芦</DropdownItem>
  68 + <DropdownItem>北京烤鸭</DropdownItem>
  69 + </DropdownMenu>
  70 + </Dropdown>
  71 + <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
  72 + <a href="javascript:void(0)">
  73 + top-end
  74 + <Icon type="arrow-down-b"></Icon>
  75 + </a>
  76 + <DropdownMenu slot="list">
  77 + <DropdownItem>驴打滚</DropdownItem>
  78 + <DropdownItem>炸酱面</DropdownItem>
  79 + <DropdownItem>豆汁儿</DropdownItem>
  80 + <DropdownItem>冰糖葫芦</DropdownItem>
  81 + <DropdownItem>北京烤鸭</DropdownItem>
  82 + </DropdownMenu>
  83 + </Dropdown>
  84 +
  85 + <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
  86 + <a href="javascript:void(0)">
  87 + left-start
  88 + <Icon type="arrow-down-b"></Icon>
  89 + </a>
  90 + <DropdownMenu slot="list">
  91 + <DropdownItem>驴打滚</DropdownItem>
  92 + <DropdownItem>炸酱面</DropdownItem>
  93 + <DropdownItem>豆汁儿</DropdownItem>
  94 + <DropdownItem>冰糖葫芦</DropdownItem>
  95 + <DropdownItem>北京烤鸭</DropdownItem>
  96 + </DropdownMenu>
  97 + </Dropdown>
  98 +
  99 + <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
  100 + <a href="javascript:void(0)">
  101 + left-end
  102 + <Icon type="arrow-down-b"></Icon>
  103 + </a>
  104 + <DropdownMenu slot="list">
  105 + <DropdownItem>驴打滚</DropdownItem>
  106 + <DropdownItem>炸酱面</DropdownItem>
  107 + <DropdownItem>豆汁儿</DropdownItem>
  108 + <DropdownItem>冰糖葫芦</DropdownItem>
  109 + <DropdownItem>北京烤鸭</DropdownItem>
  110 + </DropdownMenu>
  111 + </Dropdown>
  112 +
  113 + <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
  114 + <a href="javascript:void(0)">
  115 + top
  116 + <Icon type="arrow-down-b"></Icon>
  117 + </a>
  118 + <DropdownMenu slot="list">
  119 + <DropdownItem>驴打滚</DropdownItem>
  120 + <DropdownItem>炸酱面</DropdownItem>
  121 + <DropdownItem>豆汁儿</DropdownItem>
  122 + <DropdownItem>冰糖葫芦</DropdownItem>
  123 + <DropdownItem>北京烤鸭</DropdownItem>
  124 + </DropdownMenu>
  125 + </Dropdown>
  126 + <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
  127 + <a href="javascript:void(0)">
  128 + bottom
  129 + <Icon type="arrow-down-b"></Icon>
  130 + </a>
  131 + <DropdownMenu slot="list">
  132 + <DropdownItem>驴打滚</DropdownItem>
  133 + <DropdownItem>炸酱面</DropdownItem>
  134 + <DropdownItem>豆汁儿</DropdownItem>
  135 + <DropdownItem>冰糖葫芦</DropdownItem>
  136 + <DropdownItem>北京烤鸭</DropdownItem>
  137 + </DropdownMenu>
  138 + </Dropdown>
  139 + <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
  140 + <a href="javascript:void(0)">
  141 + left
  142 + <Icon type="arrow-down-b"></Icon>
  143 + </a>
  144 + <DropdownMenu slot="list">
  145 + <DropdownItem>驴打滚</DropdownItem>
  146 + <DropdownItem>炸酱面</DropdownItem>
  147 + <DropdownItem>豆汁儿</DropdownItem>
  148 + <DropdownItem>冰糖葫芦</DropdownItem>
  149 + <DropdownItem>北京烤鸭</DropdownItem>
  150 + <DropdownItem>驴打滚</DropdownItem>
  151 + <DropdownItem>炸酱面</DropdownItem>
  152 + <DropdownItem>豆汁儿</DropdownItem>
  153 + <DropdownItem>冰糖葫芦</DropdownItem>
  154 + <DropdownItem>北京烤鸭</DropdownItem>
  155 + <DropdownItem>驴打滚</DropdownItem>
  156 + <DropdownItem>炸酱面</DropdownItem>
  157 + <DropdownItem>豆汁儿</DropdownItem>
  158 + <DropdownItem>冰糖葫芦</DropdownItem>
  159 + <DropdownItem>北京烤鸭</DropdownItem>
  160 + </DropdownMenu>
  161 + </Dropdown>
  162 + <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
  163 + <a href="javascript:void(0)">
  164 + right
  165 + <Icon type="arrow-down-b"></Icon>
  166 + </a>
  167 + <DropdownMenu slot="list">
  168 + <DropdownItem>驴打滚</DropdownItem>
  169 + <DropdownItem>炸酱面</DropdownItem>
  170 + <DropdownItem>豆汁儿</DropdownItem>
  171 + <DropdownItem>冰糖葫芦</DropdownItem>
  172 + <DropdownItem>北京烤鸭</DropdownItem>
  173 + </DropdownMenu>
  174 + </Dropdown>
  175 + </div>
  176 + <br><br><br><br>
  177 + <div style='width:600px;height:100px;overflow: auto;border:1px solid'>
  178 + <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
  179 + <a href="javascript:void(0)">
  180 + right-start
  181 + <Icon type="arrow-down-b"></Icon>
  182 + </a>
  183 + <DropdownMenu slot="list">
  184 + <DropdownItem>驴打滚</DropdownItem>
  185 + <DropdownItem>炸酱面</DropdownItem>
  186 + <DropdownItem>豆汁儿</DropdownItem>
  187 + <DropdownItem>冰糖葫芦</DropdownItem>
  188 + <DropdownItem>北京烤鸭</DropdownItem>
  189 + </DropdownMenu>
  190 + </Dropdown>
  191 + <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
  192 + <a href="javascript:void(0)">
  193 + right-end
  194 + <Icon type="arrow-down-b"></Icon>
  195 + </a>
  196 + <DropdownMenu slot="list">
  197 + <DropdownItem>驴打滚</DropdownItem>
  198 + <DropdownItem>炸酱面</DropdownItem>
  199 + <DropdownItem>豆汁儿</DropdownItem>
  200 + <DropdownItem>冰糖葫芦</DropdownItem>
  201 + <DropdownItem>北京烤鸭</DropdownItem>
  202 + </DropdownMenu>
  203 + </Dropdown>
  204 +
  205 + <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
  206 + <a href="javascript:void(0)">
  207 + bottom-start
  208 + <Icon type="arrow-down-b"></Icon>
  209 + </a>
  210 + <DropdownMenu slot="list">
  211 + <DropdownItem>驴打滚</DropdownItem>
  212 + <DropdownItem>炸酱面</DropdownItem>
  213 + <DropdownItem>豆汁儿</DropdownItem>
  214 + <DropdownItem>冰糖葫芦</DropdownItem>
  215 + <DropdownItem>北京烤鸭</DropdownItem>
  216 + </DropdownMenu>
  217 + </Dropdown>
  218 + <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
  219 + <a href="javascript:void(0)">
  220 + bottom-end
  221 + <Icon type="arrow-down-b"></Icon>
  222 + </a>
  223 + <DropdownMenu slot="list">
  224 + <DropdownItem>驴打滚</DropdownItem>
  225 + <DropdownItem>炸酱面</DropdownItem>
  226 + <DropdownItem>豆汁儿</DropdownItem>
  227 + <DropdownItem>冰糖葫芦</DropdownItem>
  228 + <DropdownItem>北京烤鸭</DropdownItem>
  229 + </DropdownMenu>
  230 + </Dropdown>
  231 +
  232 + <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
  233 + <a href="javascript:void(0)">
  234 + top-start
  235 + <Icon type="arrow-down-b"></Icon>
  236 + </a>
  237 + <DropdownMenu slot="list">
  238 + <DropdownItem>驴打滚</DropdownItem>
  239 + <DropdownItem>炸酱面</DropdownItem>
  240 + <DropdownItem>豆汁儿</DropdownItem>
  241 + <DropdownItem>冰糖葫芦</DropdownItem>
  242 + <DropdownItem>北京烤鸭</DropdownItem>
  243 + </DropdownMenu>
  244 + </Dropdown>
  245 + <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
  246 + <a href="javascript:void(0)">
  247 + top-end
  248 + <Icon type="arrow-down-b"></Icon>
  249 + </a>
  250 + <DropdownMenu slot="list">
  251 + <DropdownItem>驴打滚</DropdownItem>
  252 + <DropdownItem>炸酱面</DropdownItem>
  253 + <DropdownItem>豆汁儿</DropdownItem>
  254 + <DropdownItem>冰糖葫芦</DropdownItem>
  255 + <DropdownItem>北京烤鸭</DropdownItem>
  256 + </DropdownMenu>
  257 + </Dropdown>
  258 +
  259 + <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
  260 + <a href="javascript:void(0)">
  261 + left-start
  262 + <Icon type="arrow-down-b"></Icon>
  263 + </a>
  264 + <DropdownMenu slot="list">
  265 + <DropdownItem>驴打滚</DropdownItem>
  266 + <DropdownItem>炸酱面</DropdownItem>
  267 + <DropdownItem>豆汁儿</DropdownItem>
  268 + <DropdownItem>冰糖葫芦</DropdownItem>
  269 + <DropdownItem>北京烤鸭</DropdownItem>
  270 + </DropdownMenu>
  271 + </Dropdown>
  272 +
  273 + <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
  274 + <a href="javascript:void(0)">
  275 + left-end
  276 + <Icon type="arrow-down-b"></Icon>
  277 + </a>
  278 + <DropdownMenu slot="list">
  279 + <DropdownItem>驴打滚</DropdownItem>
  280 + <DropdownItem>炸酱面</DropdownItem>
  281 + <DropdownItem>豆汁儿</DropdownItem>
  282 + <DropdownItem>冰糖葫芦</DropdownItem>
  283 + <DropdownItem>北京烤鸭</DropdownItem>
  284 + </DropdownMenu>
  285 + </Dropdown>
  286 +
  287 + <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
  288 + <a href="javascript:void(0)">
  289 + top
  290 + <Icon type="arrow-down-b"></Icon>
  291 + </a>
  292 + <DropdownMenu slot="list">
  293 + <DropdownItem>驴打滚</DropdownItem>
  294 + <DropdownItem>炸酱面</DropdownItem>
  295 + <DropdownItem>豆汁儿</DropdownItem>
  296 + <DropdownItem>冰糖葫芦</DropdownItem>
  297 + <DropdownItem>北京烤鸭</DropdownItem>
  298 + </DropdownMenu>
  299 + </Dropdown>
  300 + <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
  301 + <a href="javascript:void(0)">
  302 + bottom
  303 + <Icon type="arrow-down-b"></Icon>
  304 + </a>
  305 + <DropdownMenu slot="list">
  306 + <DropdownItem>驴打滚</DropdownItem>
  307 + <DropdownItem>炸酱面</DropdownItem>
  308 + <DropdownItem>豆汁儿</DropdownItem>
  309 + <DropdownItem>冰糖葫芦</DropdownItem>
  310 + <DropdownItem>北京烤鸭</DropdownItem>
  311 + </DropdownMenu>
  312 + </Dropdown>
  313 + <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
  314 + <a href="javascript:void(0)">
  315 + left
  316 + <Icon type="arrow-down-b"></Icon>
  317 + </a>
  318 + <DropdownMenu slot="list">
  319 + <DropdownItem>驴打滚</DropdownItem>
  320 + <DropdownItem>炸酱面</DropdownItem>
  321 + <DropdownItem>豆汁儿</DropdownItem>
  322 + <DropdownItem>冰糖葫芦</DropdownItem>
  323 + <DropdownItem>北京烤鸭</DropdownItem>
  324 + <DropdownItem>驴打滚</DropdownItem>
  325 + <DropdownItem>炸酱面</DropdownItem>
  326 + <DropdownItem>豆汁儿</DropdownItem>
  327 + <DropdownItem>冰糖葫芦</DropdownItem>
  328 + <DropdownItem>北京烤鸭</DropdownItem>
  329 + <DropdownItem>驴打滚</DropdownItem>
  330 + <DropdownItem>炸酱面</DropdownItem>
  331 + <DropdownItem>豆汁儿</DropdownItem>
  332 + <DropdownItem>冰糖葫芦</DropdownItem>
  333 + <DropdownItem>北京烤鸭</DropdownItem>
  334 + </DropdownMenu>
  335 + </Dropdown>
  336 + <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
  337 + <a href="javascript:void(0)">
  338 + right
  339 + <Icon type="arrow-down-b"></Icon>
  340 + </a>
  341 + <DropdownMenu slot="list">
  342 + <DropdownItem>驴打滚</DropdownItem>
  343 + <DropdownItem>炸酱面</DropdownItem>
  344 + <DropdownItem>豆汁儿</DropdownItem>
  345 + <DropdownItem>冰糖葫芦</DropdownItem>
  346 + <DropdownItem>北京烤鸭</DropdownItem>
  347 + </DropdownMenu>
  348 + </Dropdown>
  349 + </div>
  350 + </div>
15 351 </template>
16 352 <script>
17 353 export default {
... ...
examples/routers/poptip.vue
  Show/Hide comments   View file @ddc8754
... ... @@ -2,7 +2,7 @@
2 2 <div style="margin: 200px">
3 3 <Tabs value="name1">
4 4 <TabPane label="标签一" name="name1">
5   - <div style="width: 200px;height:300px">
  5 + <div style="width: 200px;height:300px;overflow: auto;">
6 6 <Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
7 7 <Button id="aaa">左边</Button>
8 8 </Poptip>
... ...
src/components/base/popper.js
  Show/Hide comments   View file @ddc8754
... ... @@ -34,7 +34,7 @@ export default {
34 34 gpuAcceleration: false,
35 35 },
36 36 preventOverflow :{
37   - boundariesElement: 'body'
  37 + boundariesElement: 'viewport'
38 38 }
39 39 }
40 40 };
... ...
src/components/select/dropdown.vue
  Show/Hide comments   View file @ddc8754
... ... @@ -49,7 +49,7 @@
49 49 gpuAcceleration: false
50 50 },
51 51 preventOverflow :{
52   - boundariesElement: 'body'
  52 + boundariesElement: 'viewport'
53 53 }
54 54 },
55 55 onCreate:()=>{
... ... @@ -79,8 +79,13 @@
79 79 }
80 80 },
81 81 resetTransformOrigin() {
82   - let placement = this.popper.popper.getAttribute('x-placement').split('-')[0];
83   - this.popper.popper.style.transformOrigin = placement==='bottom'?'center top':'center bottom';
  82 + let x_placement = this.popper.popper.getAttribute('x-placement');
  83 + let placementStart = x_placement.split('-')[0];
  84 + let placementEnd = x_placement.split('-')[1];
  85 + const leftOrRight = x_placement === 'left' || x_placement === 'right';
  86 + if(!leftOrRight){
  87 + this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom';
  88 + }
84 89 }
85 90 },
86 91 created () {
... ...