增加组件：Media

sunkj · Jul 8, 2018 · 17d8c38 · 17d8c38
1 parent ded9e5f
commit 17d8c38
Show file tree

Hide file tree

Showing 21 changed files with 416 additions and 0 deletions.
diff --git a/dist/media/index.js b/dist/media/index.js
@@ -0,0 +1,25 @@
+Component({
+    externalClasses: ['wux-class'],
+    properties: {
+        thumb: {
+            type: String,
+            value: '',
+        },
+        thumbStyle: {
+            type: String,
+            value: '',
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        label: {
+            type: String,
+            value: '',
+        },
+        align: {
+            type: String,
+            value: 'center',
+        },
+    },
+})
diff --git a/dist/media/index.json b/dist/media/index.json
@@ -0,0 +1,3 @@
+{
+    "component": true
+}
diff --git a/dist/media/index.wxml b/dist/media/index.wxml
@@ -0,0 +1,10 @@
+<view class="wux-class wux-media {{ align ? 'wux-media--align-' + align : '' }}">
+    <view class="wux-media__hd">
+        <image class="wux-media__thumb" src="{{ thumb }}" mode="aspectFit" style="{{ thumbStyle }}" wx:if="{{ thumb }}" />
+    </view>
+    <view class="wux-media__bd">
+        <view class="wux-media__title" wx:if="{{ title }}">{{ title }}</view>
+        <view class="wux-media__desc" wx:if="{{ label }}">{{ label }}</view>
+        <slot></slot>
+    </view>
+</view>
diff --git a/dist/media/index.wxss b/dist/media/index.wxss
@@ -0,0 +1,69 @@
+.wux-media {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  padding: 30rpx;
+  overflow: hidden;
+}
+.wux-media--align-flex-start {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+}
+.wux-media--align-flex-end {
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+          align-items: flex-end;
+}
+.wux-media--align-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.wux-media--align-stretch {
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+          align-items: stretch;
+}
+.wux-media--align-baseline {
+  -webkit-box-align: baseline;
+  -webkit-align-items: baseline;
+          align-items: baseline;
+}
+.wux-media__hd {
+  margin-right: .8em;
+  text-align: center;
+}
+.wux-media__thumb {
+  width: 120rpx;
+  height: 120rpx;
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+}
+.wux-media__bd {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  min-width: 0;
+}
+.wux-media__title {
+  font-weight: 400;
+  font-size: 34rpx;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.wux-media__desc {
+  color: #808080;
+  font-size: 26rpx;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
diff --git a/docs/_media/media.mp4 b/docs/_media/media.mp4
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -18,6 +18,7 @@
   * [Grid 栅格布局](grid.md)
   * [InputNumber 数字输入框](input-number.md)
   * [List 列表](list.md)
+  * [Media 媒体对象](media.md)
   * [Prompt 提示消息](prompt.md)
   * [Qrcode 二维码](qrcode.md)
   * [Radio 单选框](radio.md)

diff --git a/docs/media.md b/docs/media.md
@@ -0,0 +1,61 @@
+# Media 媒体对象
+
+用于在一个内容块的左边或右边展示一个多媒体内容。
+
+## 使用指南
+
+### 在 page.json 中引入组件
+
+```json
+{
+    "navigationBarTitleText": "Media",
+    "usingComponents": {
+        "wux-media": "../../dist/media/index"
+    }
+}
+```
+
+### 示例
+
+```html
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Media</view>
+        <view class="page__desc">媒体对象</view>
+    </view>
+    <view class="page__bd">
+        <view class="title">Default</view>
+        <wux-media title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。"></wux-media>
+        <view class="title">Thumb</view>
+        <wux-media thumb="{{ thumb }}" title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。"></wux-media>
+        <view class="title">Custom thumb style</view>
+        <wux-media thumb="{{ thumb }}" thumb-style="border-radius: 50%" title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。"></wux-media>
+        <view class="title">Nesting</view>
+        <wux-media align="flex-start" thumb="{{ thumb }}" title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。">
+            <wux-media align="flex-start" thumb="{{ thumb }}" title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。"></wux-media>
+        </wux-media>
+    </view>
+</view>
+```
+
+```js
+Page({
+    data: {
+        thumb: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=',
+    },
+})
+```
+
+## 视频演示
+
+[Media](./_media/media.mp4 ':include :type=iframe width=375px height=667px')
+
+## API
+
+| 参数 | 类型 | 描述 | 默认值 |
+| --- | --- | --- | --- |
+| title | <code>string</code> | 标题 | - |
+| thumb | <code>string</code> | 标题图片 | - |
+| thumbStyle | <code>string</code> | 标题图片样式 | - |
+| label | <code>string</code> | 标题辅助内容 | - |
+| align | <code>string</code> | 对齐方式，可选值为 start、center、end、baseline、stretch | center |
diff --git a/example/app.json b/example/app.json
@@ -5,6 +5,7 @@
         "pages/toast/index",
         "pages/dialog/index",
         "pages/loading/index",
+        "pages/media/index",
         "pages/backdrop/index",
         "pages/badge/index",
         "pages/toptips/index",

diff --git a/example/dist/media/index.js b/example/dist/media/index.js
@@ -0,0 +1,25 @@
+Component({
+    externalClasses: ['wux-class'],
+    properties: {
+        thumb: {
+            type: String,
+            value: '',
+        },
+        thumbStyle: {
+            type: String,
+            value: '',
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        label: {
+            type: String,
+            value: '',
+        },
+        align: {
+            type: String,
+            value: 'center',
+        },
+    },
+})
diff --git a/example/dist/media/index.json b/example/dist/media/index.json
@@ -0,0 +1,3 @@
+{
+    "component": true
+}
diff --git a/example/dist/media/index.wxml b/example/dist/media/index.wxml
@@ -0,0 +1,10 @@
+<view class="wux-class wux-media {{ align ? 'wux-media--align-' + align : '' }}">
+    <view class="wux-media__hd">
+        <image class="wux-media__thumb" src="{{ thumb }}" mode="aspectFit" style="{{ thumbStyle }}" wx:if="{{ thumb }}" />
+    </view>
+    <view class="wux-media__bd">
+        <view class="wux-media__title" wx:if="{{ title }}">{{ title }}</view>
+        <view class="wux-media__desc" wx:if="{{ label }}">{{ label }}</view>
+        <slot></slot>
+    </view>
+</view>
diff --git a/example/dist/media/index.wxss b/example/dist/media/index.wxss
@@ -0,0 +1,69 @@
+.wux-media {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  padding: 30rpx;
+  overflow: hidden;
+}
+.wux-media--align-flex-start {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+}
+.wux-media--align-flex-end {
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+          align-items: flex-end;
+}
+.wux-media--align-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.wux-media--align-stretch {
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+          align-items: stretch;
+}
+.wux-media--align-baseline {
+  -webkit-box-align: baseline;
+  -webkit-align-items: baseline;
+          align-items: baseline;
+}
+.wux-media__hd {
+  margin-right: .8em;
+  text-align: center;
+}
+.wux-media__thumb {
+  width: 120rpx;
+  height: 120rpx;
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+}
+.wux-media__bd {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  min-width: 0;
+}
+.wux-media__title {
+  font-weight: 400;
+  font-size: 34rpx;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.wux-media__desc {
+  color: #808080;
+  font-size: 26rpx;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
diff --git a/example/pages/index/index.js b/example/pages/index/index.js
@@ -60,6 +60,11 @@ Page({
                         remark: '列表',
                         url: '/pages/list/index',
                     },
+                    {
+                        title: 'Media',
+                        remark: '媒体对象',
+                        url: '/pages/media/index',
+                    },
                     {
                         title: 'Prompt',
                         remark: '提示消息',

diff --git a/example/pages/media/index.js b/example/pages/media/index.js
@@ -0,0 +1,5 @@
+Page({
+    data: {
+        thumb: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=',
+    },
+})
diff --git a/example/pages/media/index.json b/example/pages/media/index.json
@@ -0,0 +1,6 @@
+{
+    "navigationBarTitleText": "Media",
+    "usingComponents": {
+        "wux-media": "../../dist/media/index"
+    }
+}
diff --git a/example/pages/media/index.wxml b/example/pages/media/index.wxml
@@ -0,0 +1,18 @@
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Media</view>
+        <view class="page__desc">媒体对象</view>
+    </view>
+    <view class="page__bd">
+        <view class="title">Default</view>
+        <wux-media title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。"></wux-media>
+        <view class="title">Thumb</view>
+        <wux-media thumb="{{ thumb }}" title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。"></wux-media>
+        <view class="title">Custom thumb style</view>
+        <wux-media thumb="{{ thumb }}" thumb-style="border-radius: 50%" title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。"></wux-media>
+        <view class="title">Nesting</view>
+        <wux-media align="flex-start" thumb="{{ thumb }}" title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。">
+            <wux-media align="flex-start" thumb="{{ thumb }}" title="标题一" label="由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。"></wux-media>
+        </wux-media>
+    </view>
+</view>
diff --git a/example/pages/media/index.wxss b/example/pages/media/index.wxss
@@ -0,0 +1,8 @@
+/* pages/media/index.wxss */
+.title {
+    padding: 30rpx 30rpx 18rpx;
+    font-size: 28rpx;
+    color: #888;
+    width: 100%;
+    box-sizing: border-box;
+}
diff --git a/src/media/index.js b/src/media/index.js
@@ -0,0 +1,25 @@
+Component({
+    externalClasses: ['wux-class'],
+    properties: {
+        thumb: {
+            type: String,
+            value: '',
+        },
+        thumbStyle: {
+            type: String,
+            value: '',
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        label: {
+            type: String,
+            value: '',
+        },
+        align: {
+            type: String,
+            value: 'center',
+        },
+    },
+})
diff --git a/src/media/index.json b/src/media/index.json
@@ -0,0 +1,3 @@
+{
+    "component": true
+}