Merge pull request #95 from jenkey2011/add/mip-tabs

feat:添加mip-tabs组件
mipengine · Jul 18, 2018 · 62b860c · 62b860c
2 parents 86bf9be + 48fae00
commit 62b860c
Show file tree

Hide file tree

Showing 4 changed files with 525 additions and 0 deletions.
diff --git a/components/mip-tabs/README.md b/components/mip-tabs/README.md
@@ -0,0 +1,83 @@
+# `mip-tabs`
+
+tab 切换组件
+
+| 标题     | 内容                                                |
+| -------- | --------------------------------------------------- |
+| 类型     |  通用                                               |
+| 支持布局 | responsive, fixed-height, fixed, container          |
+| 所需脚本 | https://c.mipcdn.com/static/v2/mip-tabs/mip-tabs.js |
+
+## 说明
+
+可嵌套、自定义 tab 标签及对应内容
+
+## 示例
+
+```html
+<mip-tabs initial-tab="0">
+  <mip-tabs-item label="MIP 2">
+    <h2>什么是 MIP</h2>
+    <p>MIP（Mobile Instant Pages - 移动网页加速器），是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统，实现移动网页加速。
+      MIP 主要由三部分组织成：
+    </p>
+  </mip-tabs-item>
+
+  <mip-tabs-item label="mip-tabs组件介绍">
+    <ol>
+      <li>使用方便</li>
+      <li>动画交互</li>
+      <li>任意嵌套</li>
+      <li>自定义tab内容结构</li>
+    </ol>
+  </mip-tabs-item>
+
+  <mip-tabs-item label="嵌套">
+    这里嵌套了另一个tab标签
+    <mip-tabs initial-tab="0">
+      <mip-tabs-item label="嵌1"> 嵌套111111</mip-tabs-item>
+      <mip-tabs-item label="嵌2"> 嵌套222222</mip-tabs-item>
+      <mip-tabs-item label="嵌3"> 嵌套333333</mip-tabs-item>
+    </mip-tabs>
+  </mip-tabs-item>
+
+  <mip-tabs-item label="Tab 4">
+    纯文字~
+  </mip-tabs-item>
+
+  <mip-tabs-item label="暂未开放" disabled="true">
+  </mip-tabs-item>
+
+  </mip-tabs>
+```
+
+## 属性
+
+属性说明
+
+### initialTab
+
+说明：设置初始显示的标签
+
+必选项：否
+
+类型：`Number`
+
+默认值：0
+
+## 事件
+
+### changeEnd
+
+每次切换完毕后，触发`changeEnd`事件，并透传当前激活的下标
+
+## 方法
+
+### slideTab (index)
+
+- **参数:**
+
+  - `{Number} index`
+
+- **用法：**
+  - 外部调用组件`slideTab`方法，tab 标签会切换至相应下标（如组件`id`为`tab`, `tab.slideTab(1)`）
diff --git a/components/mip-tabs/example/mip-tabs.html b/components/mip-tabs/example/mip-tabs.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html mip>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
+  <title>MIP page</title>
+  <link rel="canonical" href="对应的原页面地址">
+  <link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
+  <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
+
+  <style mip-custom>
+    /* 自定义样式 */
+
+    mip-tabs {
+      transition: height .3s;
+      box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+    }
+
+    .mip-tabs {
+      transition: height .3s;
+    }
+
+    h2 {
+      line-height: 3;
+    }
+
+    p {
+      line-height: 1.8;
+    }
+
+    ul {
+      padding-top: 30px;
+    }
+
+    ul li {
+      list-style: disc;
+      list-style-position: inside;
+      line-height: 1.6;
+    }
+
+  </style>
+</head>
+
+<body>
+    <mip-tabs initial-tab="0">
+      <mip-tabs-item label="MIP 2">
+        <h2>什么是 MIP</h2>
+        <p>MIP（Mobile Instant Pages - 移动网页加速器），是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统，实现移动网页加速。
+          MIP 主要由三部分组织成：
+        </p>
+        <ul>
+          <li>MIP-HTML：基于 HTML 中的基础标签制定了全新的规范，通过对一部分基础标签的使用限制或功能扩展，使 HTML 能够展现更加丰富的内容。</li>
+          <li>MIP-JS：可以保证 MIP-HTML 页面的快速渲染。</li>
+          <li>MIP-Cache：用于实现 MIP 页面的高速缓存，从而进一步提高页面性能。</li>
+        </ul>
+      </mip-tabs-item>
+      <mip-tabs-item label="mip-tabs组件介绍">
+        <ol>
+          <li>使用方便</li>
+          <li>动画交互</li>
+          <li>任意嵌套</li>
+          <li>自定义tab内容结构</li>
+        </ol>
+      </mip-tabs-item>
+      <mip-tabs-item label="嵌套">
+        这里嵌套了另一个tab标签
+        <mip-tabs initial-tab="0">
+          <mip-tabs-item label="嵌1"> 嵌套111111</mip-tabs-item>
+          <mip-tabs-item label="嵌2"> 嵌套222222</mip-tabs-item>
+          <mip-tabs-item label="嵌3"> 嵌套333333</mip-tabs-item>
+        </mip-tabs>
+        <mip-tabs initial-tab="0">
+          <mip-tabs-item label="嵌1"> 嵌套111111</mip-tabs-item>
+          <mip-tabs-item label="嵌2"> 嵌套222222</mip-tabs-item>
+          <mip-tabs-item label="嵌3"> 嵌套333333</mip-tabs-item>
+        </mip-tabs>
+      </mip-tabs-item>
+      <mip-tabs-item label="Tab 4">
+        4444444444
+      </mip-tabs-item>
+      <mip-tabs-item label="暂未开放" disabled="true">
+      </mip-tabs-item>
+      <div>test</div>
+    </mip-tabs>
+  <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
+  <script src="/mip-tabs/mip-tabs.js "></script>
+</body>
+
+</html>
diff --git a/components/mip-tabs/mip-tabs-item.vue b/components/mip-tabs/mip-tabs-item.vue
@@ -0,0 +1,52 @@
+<template>
+  <transition name="fade">
+    <div
+      v-show="isActive"
+      :class="{active: isActive}"
+      class="tabs-item"
+    >
+      <slot/>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isNest: false
+    }
+  },
+  watch: {
+    isActive (cur, pre) {
+      if (cur) {
+        let nestTab = this.$el.querySelector('mip-tabs')
+        nestTab && nestTab.setAttribute('reset-tab', 'true')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tabs-item {
+  width: 100%;
+  margin: 0 auto;
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .3s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>