cbvirtua 1.0.6 → 1.0.7

package/menu/wzc-option.vue

@@ -0,0 +1,74 @@
+<template>
+    <li class="wzc_option" :style="styleVar" @click="currentSelect">
+      <div class="wzc_option_dropdown_item">{{ label }}</div>
+    </li>
+  </template>
+  
+  <script>
+  export default {
+    name: "wzc_select",
+    components: {},
+    props: {
+      width: {
+        type: Number,
+        default: -1,
+      },
+      height: {
+        type: Number,
+        default: 34,
+      },
+      label: {
+        type: String,
+      },
+      optionid: {
+        type: String,
+      },
+    },
+    data() {
+      return {};
+    },
+    created() {},
+    mounted() {},
+    watch: {},
+    computed: {
+      styleVar() {
+        return {
+          "--option-height": this.height + "px",
+          "--option-width": this.width == -1? "100%" : this.width + "px",
+        };
+      },
+    },
+    methods: {
+      currentSelect() {
+        this.$parent.label = this.label;
+        this.$parent.optionid = this.optionid;
+        this.$parent.isListShow = !this.$parent.isListShow;
+        // this.$emit('slot-content', {label: this.label, optionid: this.optionid} );
+      }
+    },
+  };
+  </script>
+  <style scoped>
+  .wzc_option {
+    list-style: none;
+    height: var(--option-height);
+    width: var(--option-width);
+    
+  }
+  .wzc_option:hover {
+    color: #409eff;
+    font-weight: 700;
+    background-color: #f5f7fa;
+  }
+  .wzc_option_dropdown_item {
+    height: 100%;
+    width: calc(100% - 30px);
+    line-height: var(--option-height);
+    cursor: pointer;
+    margin: 0 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  </style>

package/menu/wzc-select.vue

@@ -0,0 +1,209 @@
+<template>
+    <div class="wzc_select" :style="styleVar">
+        <div class="divSelect" :class="{ 'drop_down': isListShow }" ref="divSelect">
+            <div class="divSelectinput" @click="dropDownSelect">
+                <!-- 选中后的内容 -->
+                <div class="selectinfos" :title="label" :class="{ 'no_select': label == '请选择' }"> {{ label }} </div>
+                <!-- 三角形图标 -->
+                <i class="imgthree" :class="{ 'is-reverse': isListShow }">
+                    <svg t="1707138975702" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="1444" width="16" height="16">
+                        <path d="M512 187.24L699.501 512 887 836.76H137L324.5 512z" p-id="1445"></path>
+                    </svg>
+                </i>
+            </div>
+        </div>
+        <!-- 下拉框列表 -->
+        <transition name="drop-down">
+            <div class="Selectlist" v-show="isListShow" ref="dropDown">
+                <div class="select_triangle"></div>
+                <ul class="wzc_option_list">
+                    <slot name="wzc_option"></slot>
+                </ul>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'wzc_select',
+    components: {},
+    props: {
+        placeholder: {
+            type: String,
+            default: '请选择'
+        },
+        width: {
+            type: Number,
+            default: 180
+        },
+        height: {
+            type: Number,
+            default: 40
+        },
+    },
+    data() {
+        return {
+            label: '',
+            isListShow: false,
+            optionid: ''
+        };
+    },
+    created() {
+        this.label = this.placeholder;
+    },
+    mounted() {
+        let _this = this;
+        document.addEventListener("click", function (e) {
+            if (_this.$refs.divSelect) {
+                if (!!_this.$refs.divSelect.contains(e.target) || !!_this.$refs.dropDown.contains(e.target))
+                    return;
+                else
+                    _this.isListShow = false;
+            }
+        })
+    },
+    computed: {
+        styleVar() {
+            return {
+                '--select-height': this.height + 'px',
+                '--select-width': this.width + 'px'
+            }
+        }
+    },
+    methods: {
+        dropDownSelect() {
+            this.isListShow = !this.isListShow;
+        },
+    },
+};
+</script>
+<style scoped>
+.wzc_select {
+    border: 1px solid #E6E6E6;
+    border-radius: 5px;
+    height: var(--select-height);
+    width: var(--select-width);
+    line-height: var(--select-height);
+}
+
+.divSelect {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+}
+
+.drop_down {
+    box-shadow: 0px 0px 6px #709DF7;
+}
+
+.divSelectinput {
+    width: calc(100% - 20px);
+    height: 100%;
+    margin: 0 5px 0 15px;
+    display: flex;
+}
+
+.selectinfos {
+    width: 87.5%;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.no_select {
+    color: #D3DCE6;
+}
+
+.imgthree {
+    width: 12.5%;
+    line-height: var(--select-height);
+    text-align: center;
+    transform: rotate(180deg);
+    transition: all 0.3s;
+}
+
+.imgthree svg {
+    width: 1em;
+    height: 1em;
+}
+
+.imgthree:before {
+    cursor: pointer;
+    color: #D3DCE6;
+}
+
+.imgthree.is-reverse {
+    transform: rotate(0deg);
+}
+
+.Selectlist {
+    margin-top: 10px;
+    z-index: 800;
+    position: relative;
+    background-color: #fff;
+}
+
+.wzc_option_list {
+    border-radius: 5px;
+    border: 1px solid #E4E7ED;
+    width: 100%;
+    padding: 3px 0px;
+    box-shadow: 0px 0px 6px #709DF7;
+    background-color: #fff;
+    margin: 0;
+}
+
+.select_triangle {
+    width: 14px;
+    height: 7px;
+    position: relative;
+    left: 15px;
+}
+
+.select_triangle::before {
+    position: absolute;
+    content: "";
+    left: 0px;
+    width: 0;
+    height: 0;
+    border-top: 0px solid transparent;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-bottom: 8px solid #EBEEF5;
+}
+
+.select_triangle::after {
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    content: "";
+    width: 0;
+    height: 0;
+    border-top: 0px solid transparent;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-bottom: 8px solid #fff;
+}
+
+.drop-down-enter {
+    opacity: 0;
+    transform: translate(0px, -80px) scaleY(0.2);
+}
+
+.drop-down-leave-to {
+    opacity: 0;
+    transform: translate(0px, -80px) scaleY(0.2);
+}
+
+.drop-down-enter-active {
+    transition: all 0.5s ease-in;
+}
+
+.drop-down-leave-active {
+    transition: all 0.5s ease;
+}
+</style>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
   "main": "index.js",
   "scripts": {

package/v2/App.vue

@@ -1,56 +0,0 @@
-<template>
-  <div id="app">
-    <Dropdown :distance="6">
-      <button>Click me</button>
-      <template #popper>
-        <button v-close-popper="myBooleanProp" @click="hide">Close</button>
-      </template>
-    </Dropdown>
-
-  </div>
-</template>
-
-<script>
-import {
-  // Directives
-  vTooltip,
-  VClosePopper,
-  // Components
-  Dropdown,
-  Tooltip,
-  Menu
-} from './components/v2'
-console.log(VClosePopper)
-export default {
-  name: 'App',
-  data() {
-    return {
-      myBooleanProp: true
-    }
-  },
-  directives: {
-    'close-popper': VClosePopper
-  },
-  components: {
-    Dropdown
-  },
-  methods: {
-    hide() {
-      console.log(123)
-      this.myBooleanProp = true
-      console.log(this.myBooleanProp)
-    }
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

package/v2/components/Dropdown.vue

@@ -1,28 +0,0 @@
-<script lang="ts">
-import PopperWrapper from './PopperWrapper.vue'
-
-export default {
-  ...PopperWrapper,
-  name: 'VDropdown',
-  vPopperTheme: 'dropdown',
-}
-</script>
-
-<style>
-.v-popper--theme-dropdown .v-popper__inner {
-  background: #fff;
-  color: black;
-  border-radius: 6px;
-  border: 1px solid #ddd;
-  box-shadow: 0 6px 30px rgba(0, 0, 0, .1);
-}
-
-.v-popper--theme-dropdown .v-popper__arrow-inner {
-  visibility: visible;
-  border-color: #fff;
-}
-
-.v-popper--theme-dropdown .v-popper__arrow-outer {
-  border-color: #ddd;
-}
-</style>

package/v2/components/Menu.vue

@@ -1,9 +0,0 @@
-<script lang="ts">
-import PopperWrapper from './PopperWrapper.vue'
-
-export default {
-  ...PopperWrapper,
-  name: 'VMenu',
-  vPopperTheme: 'menu',
-}
-</script>