@aochuang/common 1.0.0 → 1.0.1

package/components/grid/grid-view-select.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="ui-grid-view-select" v-if="items && items.length">
+    <div class="ui-grid-view-select__item"
+      v-for="item in items"
+      :key="item.id"
+      :class="{'is-active': current === item.name}"
+      @click="handleItemClick(item)"
+    >
+      <span class="ui-grid-view-select__item-icon" v-if="item.icon" v-html="item.icon"></span>
+      <span class="ui-grid-view-select__item-text" v-if="false">
+        {{ item.label }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiGridViewSelect',
+  props: {
+    items: {
+      type: Array
+    },
+    current: {
+      type: String
+    }
+  },
+  methods: {
+    handleItemClick (item) {
+      this.$emit('change', {
+        item
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-grid-view-select{
+  padding: 0 4px;
+  background-color: #eee;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 32px;
+  line-height: 1em;
+  box-sizing: border-box;
+}
+.ui-grid-view-select__item{
+  height: 26px;
+  line-height: 26px;
+  padding: 0 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 2px;
+  cursor: pointer;
+  color: #344563;
+  transition: all .25s;
+  &:hover {
+    color: #0052CC;
+  }
+  &.is-active {
+    color: #344563;
+    background-color: #fff;
+  }
+}
+.ui-grid-view-select__item-icon{
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  margin-right: 2px;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>