Merge pull request #35 from adcentury/develop

Version 0.3.0

README.md

@@ -2,7 +2,7 @@
 
 [![npm package][npm-badge]][npm] [![dependencies status][dependencies-badge]][dependencies] [![npm downloads][downloads-badge]][npm]
 
-> 使用Vue封装，为微信Web服务量身设计（Work with WeUI 0.3.0）
+> 使用Vue封装，为微信Web服务量身设计（Work with WeUI 0.4.0+）
 
 ## 特点
 

components/index.js

@@ -47,6 +47,22 @@ import NavbarItem from './tab/navbar-item.vue';
 import Tabbar from './tab/tabbar.vue';
 import TabbarItem from './tab/tabbar-item.vue';
 
+import Panel from './panel/panel.vue';
+import PanelHeader from './panel/panel-header.vue';
+import PanelBody from './panel/panel-body.vue';
+import PanelFooter from './panel/panel-footer.vue';
+
+import MediaBox from './media/media-box.vue';
+import MediaHeader from './media/media-header.vue';
+import MediaBody from './media/media-body.vue';
+import MediaAppmsgThumb from './media/media-appmsg-thumb.vue';
+import MediaTitle from './media/media-title.vue';
+import MediaDescription from './media/media-description.vue';
+import MediaInfo from './media/media-info.vue';
+import MediaInfoMeta from './media/media-info-meta.vue';
+
+import SearchBar from './search-bar/search-bar.vue';
+
 const VueWeui = {
   ButtonArea,
   Button,
@@ -82,7 +98,20 @@ const VueWeui = {
   Navbar,
   NavbarItem,
   Tabbar,
-  TabbarItem
+  TabbarItem,
+  Panel,
+  PanelHeader,
+  PanelBody,
+  PanelFooter,
+  MediaBox,
+  MediaHeader,
+  MediaBody,
+  MediaAppmsgThumb,
+  MediaTitle,
+  MediaDescription,
+  MediaInfo,
+  MediaInfoMeta,
+  SearchBar
 };
 
 module.exports = VueWeui;

components/media/media-appmsg-thumb.vue

@@ -0,0 +1,25 @@
+<template>
+<img :src="src" :alt="alt" class="weui_media_appmsg_thumb">
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+     * 应用于图片的src
+     */
+    src: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * 应用于图片的alt
+     */
+    alt: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

components/media/media-body.vue

@@ -0,0 +1,3 @@
+<template>
+<div class="weui_media_bd"><slot></slot></div>
+</template>

components/media/media-box.vue

@@ -0,0 +1,48 @@
+<template>
+<a :href="link || 'javascript:;'" v-link="routerLink" class="weui_media_box" :class="typeClass" v-if="!!link || !!routerLink">
+  <slot></slot>
+</a>
+<div class="weui_media_box" :class="typeClass" v-else>
+  <slot></slot>
+</div>
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+     * 列表类型，可以为：
+     * appmsg：图文组合列表
+     * text：文字组合列表
+     * small_appmsg：小图文组合列表
+     */
+    type: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * 跳转链接
+     */
+    link: {
+      type: String,
+      required: false
+    },
+
+    /**
+     * vue-router使用的跳转链接
+     * 若使用vue-router，推荐使用router-link而非link
+     */
+    routerLink: {
+      type: null,
+      required: false
+    }
+  },
+
+  computed: {
+    typeClass() {
+      return `weui_media_${this.type}`;
+    }
+  }
+}
+</script>

components/media/media-description.vue

@@ -0,0 +1,3 @@
+<template>
+<p class="weui_media_desc"><slot></slot></p>
+</template>

components/media/media-header.vue

@@ -0,0 +1,3 @@
+<template>
+<div class="weui_media_hd"><slot></slot></div>
+</template>

components/media/media-info-meta.vue

@@ -0,0 +1,18 @@
+<template>
+<li class="weui_media_info_meta" :class="{'weui_media_info_meta_extra': extra}"><slot></slot></li>
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+     * 是否为extra的标识，若是，则文字左方会有竖线隔离符
+     */
+    extra: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}
+</script>

components/media/media-info.vue

@@ -0,0 +1,3 @@
+<template>
+<ul class="weui_media_info"><slot></slot></ul>
+</template>

components/media/media-title.vue

@@ -0,0 +1,3 @@
+<template>
+<h4 class="weui_media_title"><slot></slot></h4>
+</template>

components/panel/panel-body.vue

@@ -0,0 +1,3 @@
+<template>
+<div class="weui_panel_bd"><slot></slot></div>
+</template>

components/panel/panel-footer.vue

@@ -0,0 +1,26 @@
+<template>
+<a class="weui_panel_ft" :href="link || 'javascript:;'" v-link="routerLink"><slot></slot></a>
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+     * 底部跳转链接
+     */
+    link: {
+      type: String,
+      required: false
+    },
+
+    /**
+     * vue-router使用的跳转链接
+     * 若使用vue-router，推荐使用router-link而非link
+     */
+    routerLink: {
+      type: null,
+      required: false
+    }
+  }
+}
+</script>

components/panel/panel-header.vue

@@ -0,0 +1,3 @@
+<template>
+<div class="weui_panel_hd"><slot></slot></div>
+</template>

components/panel/panel.vue

@@ -0,0 +1,20 @@
+<template>
+<div class="weui_panel" :class="{'weui_panel_access': access}">
+  <slot></slot>
+</div>
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+     * 底部部分是否包含“查看更多”样式
+     */
+    access: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}
+</script>

components/search-bar/search-bar.vue

@@ -0,0 +1,64 @@
+<template>
+<div class="weui_search_bar" :class="{'weui_search_focusing': isFocusing || !!value}">
+  <form class="weui_search_outer">
+    <div class="weui_search_inner">
+      <i class="weui_icon_search"></i>
+      <input type="search" class="weui_search_input" id="searchInput" :placeholder="placeholder" required v-model="value" v-el:input @focus="isFocusing = true" @blur="isFocusing = false">
+      <a href="javascript:;" class="weui_icon_clear" @click="clearInput"></a>
+    </div>
+    <label for="searchInput" class="weui_search_text">
+      <i class="weui_icon_search"></i>
+      <span v-if="!!placeholder">{{placeholder}}</span>
+    </label>
+  </form>
+  <a href="javascript:;" class="weui_search_cancel" v-if="!!cancelText && isFocusing" @click="cancelInput">{{cancelText}}</a>
+</div>
+</template>
+
+<script>
+export default {
+  props: {
+    /**
+     * 标签
+     */
+    placeholder: {
+      type: String,
+      required: false
+    },
+
+    /**
+     * 取消按钮文本，若不设置则无取消按钮
+     */
+    cancelText: {
+      type: String,
+      required: false
+    },
+
+    /**
+     * 双向绑定的搜索框输入内容
+     */
+    value: {
+      type: String,
+      required: true,
+      twoWay: true
+    }
+  },
+
+  data() {
+    return {
+      isFocusing: false
+    };
+  },
+
+  methods: {
+    clearInput() {
+      this.value = '';
+      this.$els.input.focus();
+    },
+
+    cancelInput() {
+      this.value = '';
+    }
+  }
+}
+</script>