[+] 添加readme
diff --git a/packages/wxc-skid/README.md b/packages/wxc-skid/README.md
new file mode 100644
index 0000000..3aec83b
--- /dev/null
+++ b/packages/wxc-skid/README.md
@@ -0,0 +1,122 @@
+# wxc-skid
+
+!> These rich interaction components are based on [BindingX](https://alibaba.github.io/bindingx/) feature. Make sure your app [install it](https://github.com/alibaba/bindingx#installation).
+
+### Rule
+- Only one row can be swiped at a time
+- Hide operations by clicking on the right button or by clicking on the list.
+
+## Code Example
+```vue
+<template>
+<div>
+ <WxcSkid @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import { WxcSkid } from 'weex-ui';
+const modal = weex.requireModule("modal");
+
+export default {
+ components: {
+ WxcSkid
+ },
+ data() {
+ return {
+ data: [
+ {
+ title: "标题1",
+ right: [
+ {
+ text: "置顶",
+ onPress: function() {
+ modal.toast({
+ message: "置顶",
+ duration: 0.3
+ });
+ }
+ },
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "标题2",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "标题3",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ }
+ ]
+ };
+ },
+
+ methods: {
+ onTest(node, i) {
+ modal.toast({
+ message: node.title,
+ duration: 0.3
+ });
+ }
+ }
+};
+</script>
+```
+
+### API
+|Prop|Type|Required|Default|Description|
+|-------------|------------|--------|-----|-----|
+|data|Array|Y|[]|list|
+
+### API
+|Prop|Description|Type|Default|
+|-------------|------------|--------|-----|
+|title|content|String|null|
+|right|Right button group|Array|null|
+|autoClose|Hide the button automatically after clicking the button|Boolean|false|
+
+### Button
+|Prop|Type|Description|
+|-------------|------------|--------|
+|text|String|copywriting|
+|style|Object|button style|
+|onPress|():void|click|
+
+### Event
+
+```
+// click
+`@onNodeClick='onTest'`
+```
diff --git a/packages/wxc-skid/README_cn.md b/packages/wxc-skid/README_cn.md
new file mode 100644
index 0000000..ebdef34
--- /dev/null
+++ b/packages/wxc-skid/README_cn.md
@@ -0,0 +1,122 @@
+# wxc-skid
+
+!> 这个富交互体验组件依赖于 [BindingX](https://alibaba.github.io/bindingx/) 特性，使用前请确定你的App [是否安装](https://github.com/alibaba/bindingx#installation)
+
+### 规则
+- 一次只可滑动一行列表
+- 点击右边按钮或点击列表可隐藏操作。
+
+## 使用方法
+```vue
+<template>
+<div>
+ <WxcSkid @onNodeClick='onTest' :data='data'/>
+</div>
+</template>
+
+<script>
+import { WxcSkid } from 'weex-ui';
+const modal = weex.requireModule("modal");
+
+export default {
+ components: {
+ WxcSkid
+ },
+ data() {
+ return {
+ data: [
+ {
+ title: "标题1",
+ right: [
+ {
+ text: "置顶",
+ onPress: function() {
+ modal.toast({
+ message: "置顶",
+ duration: 0.3
+ });
+ }
+ },
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "标题2",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ },
+ {
+ title: "标题3",
+ right: [
+ {
+ text: "删除",
+ onPress: () => {
+ modal.toast({
+ message: "删除",
+ duration: 0.3
+ });
+ },
+ style: { backgroundColor: "#F4333C", color: "white" }
+ }
+ ]
+ }
+ ]
+ };
+ },
+
+ methods: {
+ onTest(node, i) {
+ modal.toast({
+ message: node.title,
+ duration: 0.3
+ });
+ }
+ }
+};
+</script>
+```
+
+### 可配置参数
+|参数|类型|是否要引入|默认值|描述|
+|-------------|------------|--------|-----|-----|
+|data|Array|Y|[]|列表数据|
+
+### API
+|属性|说明|类型|默认值|
+|-------------|------------|--------|-----|
+|title|标题|String|null|
+|right|右侧按钮组|Array|null|
+|autoClose|点击按钮后自动隐藏按钮|Boolean|false|
+
+### Button
+|参数|类型|描述|
+|-------------|------------|--------|
+|text|String|文案|
+|style|Object|按钮样式|
+|onPress|():void|单击事件|
+
+### 事件回调
+
+```
+// 单击列表
+`@onNodeClick='onTest'`
+```
diff --git a/packages/wxc-skid/index.vue b/packages/wxc-skid/index.vue
index 2a7a56b..8c32115 100644
--- a/packages/wxc-skid/index.vue
+++ b/packages/wxc-skid/index.vue
@@ -1,9 +1,12 @@
+<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
+<!-- Created by wjun94 on 19/05/14. -->
+
<template>
<div class="container">
<div ref="skid" v-for="(item, i) of data" @click="onNodeClick(item, i)" :key="'skid-' + i" class="wxc-skid" :style="{width: (750 + item.right.length * 100) + 'px'}" @touchstart="(e) => !isAndroid && onPanStart(e, item, i)" @horizontalpan="(e) => isAndroid && onPanStart(e, item, i)" @touchend="(e) => onPanEnd(e, item, i)">
<text :class="['box-center', 'border', 'text', i + 1 === data.length && 'box-center-last']">{{item.title}}</text>
<div class="box-right">
- <text class="child text" @click="onRightNode(child, i)" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
+ <text class="child text" @click="onRightNode(item, child, i)" v-for="(child, childIdx) of item.right" :style="child.style || {}" :key="'child-' + childIdx">{{child.text}}</text>
</div>
</div>
</div>
@@ -83,11 +86,12 @@
delay: 100 //ms
});
},
- onRightNode(node, i) {
+ onRightNode(pNode, node, i) {
node.onPress();
- this.special(this.$refs.skid[i], {
- transform: `translate(0, 0)`
- });
+ if (pNode.autoClose)
+ this.special(this.$refs.skid[i], {
+ transform: `translate(0, 0)`
+ });
},
onNodeClick(node, i) {
if (this.mobileX < 0) {
diff --git a/packages/wxc-skid/package.json b/packages/wxc-skid/package.json
new file mode 100644
index 0000000..6e22ed1
--- /dev/null
+++ b/packages/wxc-skid/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "wxc-simple-flow",
+ "version": "0.1.0",
+ "description": "Weex侧滑列表",
+ "main": "index.js",
+ "type": "weex",
+ "repository": "https://github.com/alibaba/weex-ui/tree/master/packages/wxc-simple-flow",
+ "keywords": [
+ "Weex",
+ "Vue",
+ "WeexComponent",
+ "DataDisplay",
+ "SimpleFlow",
+ "WeexUi"
+ ],
+ "weex": {
+ "plugins": {},
+ "market": {
+ "thumbnail": "https://img.alicdn.com/tfs/TB12jLwSpXXXXcVaXXXXXXXXXXX-750-1334.png"
+ }
+ },
+ "author": "wjun94",
+ "license": "MIT",
+ "dependencies": {
+ }
+}
