openatc-components 0.0.1

package/src/kisscomps/components/input/index.js

@@ -0,0 +1,2 @@
+import KissInput from './kissinput.vue'
+export default KissInput

package/src/kisscomps/components/input/kissinput.vue

@@ -0,0 +1,57 @@
+<template>
+   <div class="kiss-input-container">
+        <input
+            v-model="inputData"
+            :type="inputType"
+            class = "kiss-input-default"
+            :placeholder="placeHolder"
+        >
+    </div>
+</template>
+<script>
+export default {
+  name: 'kiss-input',
+  props: {// 这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
+    placeHolder: {// 输入框默认显示的内容
+      type: String,
+      default: ''
+    },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    inputData: {// 输入框内容
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+<style scoped>
+.kiss-input-default{
+    width: 230px;
+    height: 24px;
+    padding:0;
+    margin: 17px 2px 0px 19px;
+    color: #42daff;
+    font-size: 14px;
+    outline: 0px;
+    border: 0px;
+    border-radius: 6px;
+    background-color:transparent;
+  }
+  .kiss-input-container{
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: 270px;
+    height: 53px;
+    background: url("../image/KissInput/input.png");
+    background-size: cover;
+  }
+  .kiss-input-default::-webkit-input-placeholder{
+    color: #0096ba;;
+    font-size: 15px;
+    text-align: left;
+  }
+</style>

package/src/kisscomps/components/menu/index.js

@@ -0,0 +1,2 @@
+import KissMenu from './kissmenu.vue'
+export default KissMenu

package/src/kisscomps/components/menu/kissmenu.vue

@@ -0,0 +1,324 @@
+<template>
+  <nav class="KissNavMenuContainer">
+    <ul
+      v-for="(item, index) in menuList"
+      :key="index"
+    >
+      <li class="KissNavMenuItem">
+        <div
+          :id="item.MenuName"
+          :class="menuSelList[index] ? 'KissNavMenuBorderClick' : 'KissNavMenuBorder'"
+          v-on:click="handleClick($event, index)"
+          v-on:mouseenter="onMouseEnter(item)"
+          v-on:mouseleave="onMouseLeave(item)"
+          ref="menu"
+        >
+          <div
+            class="KissNavMenuIcon"
+            :style="getBg(item, index)"
+          ></div>
+          <transition name="bounce">
+            <div
+              class="KissNavMenuName"
+              v-show="isShow(item.MenuName)"
+            >{{item.MenuName}}</div>
+          </transition>
+        </div>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'kiss-nav-menu',
+  props: {
+    // 定义一个组件被外部使用的时候可变的行为的。可以通过props来配置这个组件:style= "{background : index.isHv == 0 ? index.BaseImg : index.HoverImg}"
+    menuList: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            MenuName: 'asdfasdfadsfaaaaa',
+            BaseImg: 'url("./static/img/KissNavMenu/home.png")',
+            HoverImg: 'url("./static/img/KissNavMenu/homeselect.png")',
+            isHv: 0
+          },
+          {
+            MenuName: '路网',
+            BaseImg: 'url("./static/img/KissNavMenu/net.png")',
+            HoverImg: 'url("./static/img/KissNavMenu/netselect.png")',
+            isHv: 0
+          },
+          {
+            MenuName: '路口',
+            BaseImg: 'url("./static/img/KissNavMenu/cross.png")',
+            HoverImg: 'url("./static/img/KissNavMenu/crossselect.png")',
+            isHv: 0
+          },
+          {
+            MenuName: '统计',
+            BaseImg: 'url("./static/img/KissNavMenu/count.png")',
+            HoverImg: 'url("./static/img/KissNavMenu/countselect.png")',
+            isHv: 0
+          },
+          {
+            MenuName: '报警',
+            BaseImg: 'url("./static/img/KissNavMenu/alart.png")',
+            HoverImg: 'url("./static/img/KissNavMenu/alartselect.png")',
+            isHv: 0
+          },
+          {
+            MenuName: '帮助',
+            BaseImg: 'url("./static/img/KissNavMenu/help.png")',
+            HoverImg: 'url("./static/img/KissNavMenu/helpselect.png")',
+            isHv: 0
+          }
+        ]
+      }
+    }
+  },
+  data () {
+    return {
+      active: false,
+      styleObject: {
+        background: ''
+      },
+      style: {
+        background: ''
+      },
+      menuShowList: [],
+      menuSelList: [],
+      curSelIndex: -1
+    }
+  },
+  mounted () {
+    for (let menu of this.menuList.values()) {
+      this.menuShowList.push({
+        name: menu.MenuName,
+        show: false
+      })
+      this.menuSelList.push(false)
+    }
+  },
+  methods: {
+    handleClick (event, index) {
+      this.$emit('click', event, index)
+      this.setActive(index)
+    },
+    setActive (index) {
+      if (this.curSelIndex !== -1) {
+        // this.menuSelList[this.curSelIndex] = false
+        this.$set(this.menuSelList, this.curSelIndex, false)
+      }
+      this.menuSelList[index] = true
+      this.curSelIndex = index
+    },
+    addStyle (index) {
+      index.isHv = 1
+      this.styleObject.background = index.HoverImg
+    },
+    removeStyle (index) {
+      index.isHv = 0
+      this.styleObject.background = index.BaseImg
+    },
+    getBg (item, index) {
+      let bg = (item.isHv === 0 && !this.menuSelList[index]) ? item.BaseImg : item.HoverImg
+      // let img = require(bg)
+      return {
+        background: bg
+      }
+    },
+    onMouseEnter (menuData) {
+      let index = this.menuShowList.findIndex(val => val.name === menuData.MenuName)
+      this.menuShowList[index].show = true
+      this.addStyle(menuData)
+    },
+    onMouseLeave (menuData) {
+      let index = this.menuShowList.findIndex(val => val.name === menuData.MenuName)
+      this.menuShowList[index].show = false
+      this.removeStyle(menuData)
+    },
+    isShow (menuName) {
+      let index = this.menuShowList.findIndex(val => val.name === menuName)
+      if (index < 0) return false
+      return this.menuShowList[index].show
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+/************** 这里是通用样式, 是不用抽取的 **********/
+* {
+  margin: 0px;
+  padding: 0px;
+}
+/*整个nav的容器, 大小随着里面的子元素变动而变动*/
+.KissNavMenuContainer {
+  width: auto;
+  height: auto;
+}
+
+.KissNavMenuItem {
+  outline: 0px;
+  border: 0px;
+  width: 82;
+  height: 92px;
+  background-color: transparent;
+  list-style: none;
+}
+/***************************************************/
+
+.KissNavMenuBorder {
+  position: relative;
+  z-index: 1;
+  width: 64px;
+  height: 74px;
+  cursor: pointer;
+  /* border: 1px solid red; */
+  background: url("../image/KissNavMenu/menubg.png");
+  background-repeat: no-repeat;
+}
+
+.KissNavMenuBorder:hover {
+  background: url("../image/KissNavMenu/menubgselect.png");
+  background-repeat: no-repeat;
+}
+
+.KissNavMenuBorderClick {
+  position: relative;
+  z-index: 1;
+  width: 64px;
+  height: 74px;
+  cursor: pointer;
+  background: url("../image/KissNavMenu/menubgselect.png");
+  background-repeat: no-repeat;
+}
+
+.KissNavMenuIcon {
+  position: relative;
+  z-index: 2;
+  pointer-events: none; /*这个属性为none  鼠标事件将不起作用直接响应父组件的鼠标事件*/
+  width: 38px;
+  height: 38px;
+  top: 18px;
+  bottom: 0px;
+  /* left: 0px;
+  right: 0px; */
+  /* border: 1px solid red; */
+  margin-left: auto;
+  margin-right: auto;
+  background-repeat: no-repeat;
+}
+
+.KissNavMenuBorder:hover .KissNavMenuIcon {
+  -webkit-animation: dese 0.75s linear infinite;
+  -moz-animation: dese 0.75s linear infinite;
+  -ms-animation: dese 0.75s linear infinite;
+  -o-animation: dese 0.75s linear infinite;
+  animation: dese 0.75s linear infinite;
+}
+.KissNavMenuBorder:hover .KissNavMenuName {
+  opacity: 1;
+}
+
+.KissNavMenuBorderClick:hover .KissNavMenuIcon {
+  -webkit-animation: dese 0.75s linear infinite;
+  -moz-animation: dese 0.75s linear infinite;
+  -ms-animation: dese 0.75s linear infinite;
+  -o-animation: dese 0.75s linear infinite;
+  animation: dese 0.75s linear infinite;
+}
+.KissNavMenuBorderClick:hover .KissNavMenuName {
+  opacity: 1;
+}
+
+/*****************图标文字***************/
+.KissNavMenuName {
+  opacity: 0;
+  position: relative;
+  display: inline-block;
+  pointer-events: none;
+  z-index: 0;
+  height: 35px;
+  white-space: nowrap;
+  min-width: 100px;
+  top: -17px;
+  left: 67px;
+  text-align: center;
+  color: #ffde00;
+  background-color: #724e01;
+  border: #ffba00 solid 1px;
+
+  font-size: 14px;
+  line-height: 38px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+/* 定义keyframe动画效果：摇摆*/
+@keyframes dese {
+  0% {
+    transform: rotate(-12deg);
+  } /* 添加旋转角度，以下类似 */
+  20% {
+    transform: rotate(8deg);
+  }
+  30% {
+    transform: rotate(6deg);
+  }
+  40% {
+    transform: rotate(3deg);
+  }
+  55% {
+    transform: rotate(0deg);
+  }
+  70% {
+    transform: rotate(-4deg);
+  }
+  80% {
+    transform: rotate(7deg);
+  }
+  90% {
+    transform: rotate(-8deg);
+  }
+  90% {
+    transform: rotate(12deg);
+  }
+}
+
+.bounce-leave-to {
+  animation: bounceInLeft 0.5s reverse;
+}
+.bounce-enter-active {
+  animation: bounceInLeft 0.5s;
+}
+
+@keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  60% {
+    opacity: 0.6;
+    transform: translate3d(-1000px, 0, 0);
+  }
+
+  75% {
+    opacity: 0.75;
+    transform: translate3d(-500px, 0, 0);
+  }
+
+  90% {
+    opacity: 0.9;
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    transform: none;
+  }
+}
+</style>