vant components

packages/tab/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/tab/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/tab/index.js

@@ -0,0 +1,2 @@
+import Tab from './src/tab';
+export default Tab;

packages/tab/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/tab/src/tab.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="van-tab__pane" :class="classNames">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'van-tab',
+    props: {
+      // 选项卡头显示文字
+      title: {
+        type: String,
+        required: true
+      },
+      disabled: Boolean
+    },
+    beforeCreate() {
+      this.$parent.tabs.push(this);
+    },
+    computed: {
+      classNames() {
+        return { 'van-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.curActive };
+      }
+    }
+  };
+</script>

packages/tab/src/tabs.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="van-tabs" :class="[`van-tabs--${type}`]">
+    <div
+      class="van-tabs__nav"
+      :class="[`van-tabs__nav--${this.type}`, `van-tabs--col-${this.tabs.length}`]"
+    >
+      <div class="van-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
+      <div
+        v-for="(tab, index) in tabs"
+        class="van-tab"
+        :class="{'van-tab--active': index === curActive}"
+        ref="tabkey"
+        @click="handleTabClick(index, tab)"
+      >
+        {{ tab.title }}
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'van-tabs',
+
+    props: {
+      // 外部传入的激活的tab标签
+      active: {
+        type: [Number, String],
+        default: 0
+      },
+      // 是默认的line还是card
+      type: {
+        type: String,
+        default: 'line'
+      }
+    },
+
+    data() {
+      return {
+        tabs: [],
+        isReady: false,
+        curActive: +this.active
+      };
+    },
+
+    watch: {
+      active(val) {
+        this.curActive = +val;
+      }
+    },
+
+    computed: {
+      /**
+       * `type`为`line`时，tab下方的横线的样式
+       */
+      navBarStyle() {
+        if (!this.isReady || this.type !== 'line') return;
+
+        const tabKey = this.curActive;
+        const elem = this.$refs.tabkey[tabKey];
+        const offsetWidth = `${elem.offsetWidth || 0}px`;
+        const offsetLeft = `${elem.offsetLeft || 0}px`;
+
+        return {
+          width: offsetWidth,
+          transform: `translate3d(${offsetLeft}, 0px, 0px)`
+        };
+      }
+    },
+
+    methods: {
+      /**
+       * tab点击事件
+       *
+       * @param {number} index tab在tabs中的索引
+       * @param {Object} el tab的vue实例
+       */
+      handleTabClick(index, el) {
+        if (el.disabled) {
+          el.$emit('disabled', index);
+          return;
+        }
+
+        this.$emit('click', index);
+        this.curActive = index;
+      }
+    },
+
+    mounted() {
+      // 页面载入完成
+      this.$nextTick(() => {
+        // 可以开始触发在computed中关于nav-bar的css动画
+        this.isReady = true;
+      });
+    }
+  };
+</script>