# # plugin

## # 插件注册

    import PickerComponent from './picker.vue';
    let $vm;
    export default {
      install(Vue, options) {
        if (!$vm) {
          const pickerPlugin = Vue.extend(PickerComponent);
          $vm = new pickerPlugin({
            el: document.createElement('div'),
          });
          document.body.appendChild($vm.$el);
        }
        $vm.showValue = false;
        let picker = {
          show(options) {
            console.log(15);
            $vm.showValue = true;
          },
          hide() {
            document.body.removeChild($vm.$el);
          },
        };

        if (!Vue.$picker) {
          Vue.$picker = picker;
        }

        Vue.mixin({
          created() {
            this.$picker = Vue.$picker;
          },
        });
      },
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

## # picker

    <template>
      <div class="my-picker around">
        <transition name="picker-bg">
          <div v-show="showValue" class="my-picker-bg around" @click="showValue = !showValue"></div>
        </transition>
        <transition name="picker-animated" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
          <div v-show="showValue" class="my-picker-container">
            <div class="top_in">
            </div>
          </div>
        </transition>
      </div>
    </template>
    <script>
    export default {
      name: "my-picker",
      props: {
        showValue: Boolean,
      },
    };
    </script>
    <style lang="less" scoped>
    @import url("../../assets/common.less");
    @import url("../../../node_modules/animate.css/animate.min.css");
    .my-picker {
      .my-picker-bg {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
      }
      .my-picker-container {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 45vh;
        background-color: #fff;
      }
    }
    // 设置动画执行时间
    .my-picker-container {
      animation-duration: 250ms;
      animation-timing-function: linear;
    }
    .my-picker-bg {
      animation-duration: 260ms;
      animation-timing-function: linear;
    }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47