Merge branch 'v3-dev' of https://github.com/jdf2e/nutui into v3-dev

src/packages/actionsheet/actionsheet.scss

@@ -1,43 +1,25 @@
-@import '../../styles/animation/fade';
-@import '../../styles/animation/slide-up';
-
-.nut-actionsheet-mask {
-	@include fix-fullscreen();
-}
-
-.nut-actionsheet-panel {
-	position: fixed;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	width: 100%;
-	max-height: 80%;
-	overflow: auto;
-	z-index: $zindex-actionsheet;
-	background-color: $body-background;
-}
-
 .nut-actionsheet-modal {
-	padding: 10px;
+	padding: 13px 30px 13px;
 	margin: 0;
 	text-align: center;
 	background-color: #fff;
-	border-bottom: 1px solid $light-color;
-
-	.nut-actionsheet-title,
-	.nut-actionsheet-sub-title {
-		padding: 5px 0;
-	}
-
+	border-bottom: 1px solid rgba(230,230,230,1);
+	line-height: 22px;
 	.nut-actionsheet-title {
-		font-size: $font-size-base;
-		color: $title-color;
+		font-size: 15px;
+		font-weight: bold;
+		color: #323232;
 	}
 
 	.nut-actionsheet-sub-title {
-		font-size: $font-size-small;
-		color: $title-color;
+		font-size: 14px;
+		color: #969696;
 		margin-inline-start: 0;
+		div{
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 	}
 }
 
@@ -49,28 +31,46 @@
 
 .nut-actionsheet-cancel,
 .nut-actionsheet-item {
-	height: 24px;
+	height: 28px;
 	padding: 10px;
-	line-height: 24px;
-	font-size: $font-size-base;
-	color: $title-color;
+	line-height: 28px;
+	font-size: 15px;
+	color: #323232;
 	text-align: center;
 	background-color: #fff;
 }
 
 .nut-actionsheet-item {
-	border-bottom: 1px solid $light-color;
+	border-top: 1px solid rgba(230,230,230,1);
+	&:first-child{
+		border-top: 0;
+	}
 }
 
 .nut-actionsheet-item-active {
-	color: $primary-color;
+	color: $primary-color; // #E1251B
 }
 
 .nut-actionsheet-item-disabled {
-	color: #e1e1e1;
+	color: #C8C8C8;
 }
 
 .nut-actionsheet-cancel {
-	margin-top: 5px;
-	border-top: 1px solid $light-color;
+	border-top: 1px solid rgba(230,230,230,1);
+	color: #C8C8C8;
+}
+
+.nut-actionsheet-confirm {
+	padding: 12px 15px;
+	border-top: 1px solid rgba(230,230,230,1);
+	color: #FFF;
+	.confirm-btn{
+		width: 100%;
+		height: 40px;
+		background: rgba(225,37,27,1);
+		border-radius: 4px;
+		font-size: 15px;
+		line-height: 40px;
+		text-align: center;
+	}
 }

src/packages/actionsheet/actionsheet.vue

@@ -1,52 +1,54 @@
 <template>
   <div class="nut-actionsheet">
-    <transition :name="isAnimation ? 'nutFade' : ''" v-if="isShowMask">
-      <div class="nut-actionsheet-mask" @click="clickActionSheetMask" v-show="isVisible"></div>
-    </transition>
-    <transition :name="isAnimation ? 'nutSlideUp' : ''">
-      <div class="nut-actionsheet-panel" v-show="isVisible">
-        <div class="nut-actionsheet-custom" slot-scope>
-          <slot name="custom"></slot>
-        </div>
-        <dl class="nut-actionsheet-modal" v-if="$slots.title || $slots.subTitle">
-          <dt class="nut-actionsheet-title"><slot name="title" slot-scope></slot></dt>
-          <dd class="nut-actionsheet-sub-title"><slot name="sub-title" slot-scope></slot></dd>
-        </dl>
-        <ul class="nut-actionsheet-menu">
-          <li
-            class="nut-actionsheet-item"
-            :class="{ 'nut-actionsheet-item-active': isHighlight(item), 'nut-actionsheet-item-disabled': item.disable }"
-            v-for="(item, index) of menuItems"
-            :key="index"
-            @click="chooseItem(item, index)"
-            >{{ item[optionTag] }}</li
+    <nut-popup
+      v-model="isVisiblePopup"
+      position="bottom"
+      round
+      @close="closeActionSheet" 
+      :close-on-click-overlay="isClickCloseMask"
+    > 
+        <div class="nut-actionsheet-panel">
+          <dl class="nut-actionsheet-modal" v-if="$slots.title || $slots.desc">
+            <dt class="nut-actionsheet-title">
+              <slot name="title" slot-scope></slot>
+            </dt>
+            <dd class="nut-actionsheet-sub-title">
+              <slot name="desc" slot-scope></slot>
+            </dd>
+          </dl>
+          <ul class="nut-actionsheet-menu">
+            <li
+              class="nut-actionsheet-item"
+              :class="{ 'nut-actionsheet-item-active': isHighlight(item), 'nut-actionsheet-item-disabled': item.disable }"
+              v-for="(item, index) of optionList"
+              :key="index"
+              @click="chooseItem(item, index)"
+            >{{ item[optionTag] }}</li>
+          </ul>
+          <div
+            class="nut-actionsheet-cancel"
+            v-if="isCancleBtn"
+            @click="cancelActionSheet"
+          >取消</div>
+          <div
+            class="nut-actionsheet-confirm"
+            v-if="isConfirmBtn"
+            @click="cancelActionSheet"
           >
-        </ul>
-        <div class="nut-actionsheet-cancel" v-if="cancelTxt" @click="cancelActionSheet">{{ cancelTxt }}</div>
+            <div class="confirm-btn">确定</div>
+          </div>
       </div>
-    </transition>
+  </nut-popup>
   </div>
 </template>
 <script>
 export default {
   name: 'nut-actionsheet',
   props: {
-    isAnimation: {
-      type: Boolean,
-      default: true
-    },
-    isLockBgScroll: {
-      type: Boolean,
-      default: false
-    },
     isVisible: {
       type: Boolean,
       default: false
     },
-    isShowMask: {
-      type: Boolean,
-      default: true
-    },
     isClickChooseClose: {
       type: Boolean,
       default: true
@@ -55,9 +57,13 @@ export default {
       type: Boolean,
       default: true
     },
-    cancelTxt: {
-      type: String,
-      default: ''
+    isCancleBtn: {
+      type: Boolean,
+      default: false
+    },
+    isConfirmBtn: {
+      type: Boolean,
+      default: false
     },
     optionTag: {
       type: String,
@@ -67,24 +73,19 @@ export default {
       type: String,
       default: ''
     },
-    menuItems: {
+    optionList: {
       type: Array,
       default: () => []
     }
   },
   data() {
-    return {};
+    return {
+      isVisiblePopup: false
+    };
   },
   watch: {
     isVisible(value) {
-      !!value && this.$emit('open');
-      if (this.isLockBgScroll) {
-        if (value) {
-          document.body.classList.add('nut-overflow-hidden');
-        } else {
-          document.body.classList.remove('nut-overflow-hidden');
-        }
-      }
+      this.isVisiblePopup = this.isVisible;
     }
   },
   methods: {

src/packages/actionsheet/demo.vue

@@ -1,83 +1,113 @@
 <template>
   <div class="demo-list">
-    <h4>基本用法(选择类)</h4>
+    <h4>基础样式</h4>
     <div>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible')">
-        <span slot="title"><label>性别</label></span>
-        <div slot="desc" class="selected-option">{{ sex }}</div>
+      <nut-cell 
+        :show-icon="true" 
+        title="基础样式" 
+        :desc="option" 
+        @click.native="openSwitch('isVisible')">
       </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible1')">
-        <span slot="title"><label>性别</label></span>
-        <span slot="sub-title">带取消按钮~~~~</span>
-        <div slot="desc" class="selected-option">{{ sex1 }}</div>
+      <nut-actionsheet 
+        :is-visible="isVisible"
+        @close="closeSwitch('isVisible')" 
+        :option-list="optionList" 
+        @choose="choose"
+      ></nut-actionsheet>
+
+      <nut-cell 
+        :show-icon="true" 
+        title="带取消按钮" 
+        :desc="option1" 
+        @click.native="openSwitch('isVisible1')">
       </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible2')">
-        <span slot="title"><label>性别</label></span>
-        <span slot="sub-title">高亮选中项~~~~</span>
-        <div slot="desc" class="selected-option">{{ sex2 }}</div>
+      <nut-actionsheet
+        :is-visible="isVisible1"
+        @close="closeSwitch('isVisible1')"
+        :is-cancle-btn="true"
+        :option-list="optionList" 
+        @choose="choose1"
+      ></nut-actionsheet>
+
+      <nut-cell 
+        :show-icon="true" 
+        title="展示标题" 
+        :desc="option2" 
+        @click.native="openSwitch('isVisible2')">
       </nut-cell>
-      <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible3')">
-        <span slot="title"><label>性别</label></span>
-        <span slot="sub-title">设置禁用状态~~~~</span>
-        <div slot="desc" class="selected-option">{{ sex3 }}</div>
+      <nut-actionsheet
+        :is-visible="isVisible2"
+        @close="closeSwitch('isVisible2')"
+        :is-cancle-btn="true"
+        :option-list="optionList" 
+        @choose="choose2"
+      >
+        <div slot="title">面板标题</div>
+      </nut-actionsheet>
+
+      <nut-cell 
+        :show-icon="true" 
+        title="展示描述信息" 
+        :desc="option3" 
+        @click.native="openSwitch('isVisible3')">
       </nut-cell>
+      <nut-actionsheet
+        :is-visible="isVisible3"
+        @close="closeSwitch('isVisible3')"
+        :is-cancle-btn="true"
+        :option-list="optionList" 
+        @choose="choose3"
+      >
+        <div slot="desc">这里是一段描述，一段描述，一段描述，一段描述</div>
+      </nut-actionsheet>
+
     </div>
-    <h4>提示类</h4>
+    <h4>其他样式</h4>
     <div>
-      <nut-cell :isLink="true" @click.native="switchActionSheet('isVisible4')">
-        <span slot="title"><label>我就列表测试数据</label></span>
-        <span slot="sub-title">我是描述~~~~</span>
-        <div slot="desc" class="selected-option">删除本条</div>
+      <nut-cell 
+        :show-icon="true" 
+        title="带确认按钮" 
+        :desc="option4" 
+        @click.native="openSwitch('isVisible4')">
       </nut-cell>
-    </div>
-    <h4>自定义类</h4>
-    <div>
-      <nut-cell :isLink="true" @click.native="switchActionSheet('isVisible5')">
-        <span slot="title"><label>内容自定义</label></span>
-        <div slot="desc" class="selected-option">打开</div>
+      <nut-actionsheet
+        :is-visible="isVisible4"
+        @close="closeSwitch('isVisible4')"
+        :is-confirm-btn="true"
+        :option-list="optionList" 
+        @choose="choose4"
+      >
+        <div slot="title">面板标题</div>
+      </nut-actionsheet>
+
+      <nut-cell 
+        :show-icon="true" 
+        title="设置禁用状态" 
+        :desc="option5" 
+        @click.native="openSwitch('isVisible5')">
       </nut-cell>
+      <nut-actionsheet
+        :is-visible="isVisible5"
+        :option-list="optionListDis" 
+        @close="closeSwitch('isVisible5')"
+        @choose="choose5"
+      ></nut-actionsheet>
+
+      <nut-cell 
+        :show-icon="true" 
+        title="高亮选中项" 
+        :desc="option6" 
+        @click.native="openSwitch('isVisible6')">
+      </nut-cell>
+      <nut-actionsheet
+        :is-visible="isVisible6"
+        :option-list="optionList" 
+        :chooseTagValue="option6"
+        @close="closeSwitch('isVisible6')"
+        @choose="choose6"
+      ></nut-actionsheet>
+
     </div>
-    <!-- demo -->
-    <nut-actionsheet :is-visible="isVisible" @close="switchActionSheet('isVisible')" :menu-items="menuItems" @choose="chooseItem"></nut-actionsheet>
-    <!-- demo(带取消按钮） -->
-    <nut-actionsheet
-      :is-visible="isVisible1"
-      @close="switchActionSheet('isVisible1')"
-      cancelTxt="取消"
-      :menu-items="menuItems2"
-      @choose="chooseItemAgeSpec"
-    ></nut-actionsheet>
-    <!-- demo(高亮选中）-->
-    <nut-actionsheet
-      :is-visible="isVisible2"
-      :menu-items="menuItems2"
-      :chooseTagValue="sex2"
-      @close="switchActionSheet('isVisible2')"
-      @choose="chooseItemAge"
-    ></nut-actionsheet>
-    <!-- demo(设置禁用状态)-->
-    <nut-actionsheet
-      :is-visible="isVisible3"
-      :menu-items="menuItems3"
-      @close="switchActionSheet('isVisible3')"
-      @choose="chooseItemConstellation"
-    ></nut-actionsheet>
-    <!-- demo 提示类 -->
-    <nut-actionsheet
-      :is-visible="isVisible4"
-      :menu-items="menuItems4"
-      :chooseTagValue="`确定`"
-      cancelTxt="取消"
-      @close="switchActionSheet('isVisible4')"
-    >
-      <span slot="title"><label>确定删除吗？</label></span>
-      <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>
-    </nut-actionsheet>
-    <!-- demo 自定义类 -->
-    <nut-actionsheet :is-visible="isVisible5" @close="switchActionSheet('isVisible5')">
-      <div slot="custom" class="custom-wrap"><span>自定义</span></div>
-    </nut-actionsheet>
-    <div style="height: 400px;"></div>
   </div>
 </template>
 
@@ -85,75 +115,89 @@
 export default {
   data() {
     return {
-      sex: '请选择',
+      option: '',
       isVisible: false,
-      menuItems: [
+      option1: '',
+      isVisible1: false,
+      option2: '',
+      isVisible2: false,
+      option3: '',
+      isVisible3: false,
+      option4: '',
+      isVisible4: false,
+      option5: '',
+      isVisible5: false,
+      option6: '选项B',
+      isVisible6: false,
+      optionList: [
         {
-          name: '男',
+          name: '选项A',
           value: 0
         },
         {
-          name: '女',
+          name: '选项B',
           value: 1
-        }
-      ],
-      sex1: '请选择',
-      isVisible1: false,
-      sex2: '请选择',
-      isVisible2: false,
-      menuItems2: [
-        {
-          name: '男',
-          value: 0
         },
         {
-          name: '女',
+          name: '选项C',
           value: 1
         }
       ],
-      sex3: '请选择',
-      isVisible3: false,
-      menuItems3: [
+      optionListDis: [
         {
-          name: '男',
-          value: 0,
-          disable: false
+          name: '选项A',
+          value: 0
         },
         {
-          name: '女',
+          name: '选项B',
           value: 1,
           disable: true
-        }
-      ],
-      isVisible4: false,
-      menuItems4: [
+        },
         {
-          name: '确定'
+          name: '选项C',
+          value: 1
         }
-      ],
-      isVisible5: false
+      ]
     };
   },
   methods: {
-    switchActionSheet(param) {
-      this[`${param}`] = !this[`${param}`];
+    openSwitch(param) {
+      this[`${param}`] = true;
     },
 
-    chooseItem(itemParams) {
-      this.sex = itemParams.name;
+    closeSwitch(param) {
+      console.log('关闭');
+      this[`${param}`] = false;
     },
 
-    chooseItemAgeSpec(itemParams) {
-      this.sex1 = itemParams.name;
+    // demo 1
+    choose(itemParams) {
+      this.option = itemParams.name;
     },
 
-    chooseItemAge(itemParams) {
-      this.sex2 = itemParams.name;
+    choose1(itemParams) {
+      this.option1 = itemParams.name;
     },
 
-    chooseItemConstellation(itemParams) {
-      this.sex3 = itemParams.title;
-    }
+    choose2(itemParams) {
+      this.option2 = itemParams.name;
+    },
+
+    choose3(itemParams) {
+      this.option3 = itemParams.name;
+    },
+
+    choose4(itemParams) {
+      this.option4 = itemParams.name;
+    },
+
+    choose5(itemParams) {
+      this.option5 = itemParams.name;
+    },
+
+    choose6(itemParams) {
+      this.option6 = itemParams.name;
+    },
   }
 };
 </script>

src/packages/actionsheet/doc.md

@@ -2,274 +2,418 @@
 
 从底部弹出的动作菜单面板。
 
-## 基本用法(选择类)
+## 基础样式
 
-默认
+基础样式
 ```html
-<div @click.native="switchActionSheet">
-    <span class="title"><label>性别</label></span>
-    <span class="selected-option">{{sex}}</span>
-</div>
-<nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet"
-    :menu-items="menuItems"
-    @choose="chooseItem"
+<nut-cell 
+    :show-icon="true" 
+    title="基础样式" 
+    :desc="option" 
+    @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-actionsheet 
+    :is-visible="isVisible"
+    @close="closeSwitch('isVisible')" 
+    :option-list="optionList" 
+    @choose="choose"
 ></nut-actionsheet>
 ```
 ```javascript
 export default {
-    data() {
-        return {
-            sex: '请选择',
-            isVisible: false,
-            menuItems: [
-                {
-                    'name': '男',
-                    'value': 0
-                },
-                {
-                    'name': '女',
-                    'value': 1
-                }
-            ]
-        };
-    },
-    methods: {
-        switchActionSheet() {
-            this.isVisible = !this.isVisible;
+  data() {
+    return {
+      option: '',
+      isVisible: false,
+      optionList: [
+        {
+          name: '选项A',
+          value: 0
         },
-
-        chooseItem(itemParams) {
-            this.sex = itemParams.name;
+        {
+          name: '选项B',
+          value: 1
+        },
+        {
+          name: '选项C',
+          value: 1
         }
+      ]
+    };
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    choose(itemParams) {
+      this.option = itemParams.name;
     }
+  }
 };
 ```
 
 带取消按钮
 ```html
-<div @click.native="switchActionSheet">
-    <span class="title"><label>性别</label></span>
-    <span class="selected-option">{{sex}}</span>
-</div>
- <nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet"
-    :menu-items="menuItems"
-    @choose="chooseItem"
-    cancelTxt="取消"
+<nut-cell 
+    :show-icon="true" 
+    title="带取消按钮" 
+    :desc="option" 
+    @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-actionsheet 
+    :is-visible="isVisible"
+    @close="closeSwitch('isVisible')" 
+    :is-cancle-btn="true"
+    :option-list="optionList" 
+    @choose="choose"
 ></nut-actionsheet>
 ```
 ```javascript
 export default {
-    data() {
-        return {
-            sex: '请选择',
-            isVisible: false,
-            menuItems: [
-                {
-                    'name': '男',
-                    'value': 0
-                },
-                {
-                    'name': '女',
-                    'value': 1
-                }
-            ]
-        };
-    },
-    methods: {
-        switchActionSheet() {
-            this.isVisible = !this.isVisible;
+  data() {
+    return {
+      option: '',
+      isVisible: false,
+      optionList: [
+        {
+          name: '选项A',
+          value: 0
         },
-
-        chooseItem(itemParams) {
-            this.sex = itemParams.name;
+        {
+          name: '选项B',
+          value: 1
+        },
+        {
+          name: '选项C',
+          value: 1
         }
+      ]
+    };
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    choose(itemParams) {
+      this.option = itemParams.name;
     }
+  }
 };
 ```
 
-高亮已选项
+展示标题
 ```html
-<div @click.native="switchActionSheet">
-    <span class="title"><label>性别</label></span>
-    <span class="selected-option">{{sex}}</span>
-</div>
-<nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet"
-    :menu-items="menuItems"
-    @choose="chooseItem"
-    :chooseTagValue="sex"
-></nut-actionsheet>
+<nut-cell 
+    :show-icon="true" 
+    title="展示标题" 
+    :desc="option" 
+    @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-actionsheet 
+    :is-visible="isVisible"
+    @close="closeSwitch('isVisible')" 
+    :is-cancle-btn="true"
+    :option-list="optionList" 
+    @choose="choose"
+>
+    <div slot="title">面板标题</div>
+</nut-actionsheet>
 ```
 ```javascript
 export default {
-    data() {
-        return {
-            sex: '请选择',
-            isVisible: false,
-            menuItems: [
-                {
-                    'name': '男',
-                    'value': 0
-                },
-                {
-                    'name': '女',
-                    'value': 1
-                }
-            ]
-        };
-    },
-    methods: {
-        switchActionSheet() {
-            this.isVisible = !this.isVisible;
+  data() {
+    return {
+      option: '',
+      isVisible: false,
+      optionList: [
+        {
+          name: '选项A',
+          value: 0
         },
-
-        chooseItem(itemParams) {
-            this.sex = itemParams.name;
+        {
+          name: '选项B',
+          value: 1
+        },
+        {
+          name: '选项C',
+          value: 1
         }
+      ]
+    };
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    choose(itemParams) {
+      this.option = itemParams.name;
     }
+  }
 };
 ```
 
-设置禁用状态
+
+展示描述信息
 ```html
-<div @click.native="switchActionSheet">
-    <span class="title"><label>性别</label></span>
-    <span class="selected-option">{{sex}}</span>
-</div>
-<nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet"
-    :menu-items="menuItems"
-    @choose="chooseItem"
-    :chooseTagValue="sex"
-></nut-actionsheet>
+<nut-cell 
+    :show-icon="true" 
+    title="展示描述信息" 
+    :desc="option" 
+    @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-actionsheet 
+    :is-visible="isVisible"
+    @close="closeSwitch('isVisible')" 
+    :is-cancle-btn="true"
+    :option-list="optionList" 
+    @choose="choose"
+>
+    <div slot="desc">这里是一段描述，一段描述，一段描述，一段描述</div>
+</nut-actionsheet>
 ```
 ```javascript
 export default {
-    data() {
-        return {
-            sex: '请选择',
-            isVisible: false,
-            menuItems: [
-                {
-                    'name': '男',
-                    'value': 0,
-                    'disable': false
-                },
-                {
-                    'name': '女',
-                    'value': 1,
-                    'disable': true
-                }
-            ]
-        };
-    },
-    methods: {
-        switchActionSheet() {
-            this.isVisible = !this.isVisible;
+  data() {
+    return {
+      option: '',
+      isVisible: false,
+      optionList: [
+        {
+          name: '选项A',
+          value: 0
         },
-
-        chooseItem(itemParams) {
-            this.sex = itemParams.name;
+        {
+          name: '选项B',
+          value: 1
+        },
+        {
+          name: '选项C',
+          value: 1
         }
+      ]
+    };
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    choose(itemParams) {
+      this.option = itemParams.name;
     }
+  }
 };
 ```
 
-## 提示
+## 其他样式
+
+带确认按钮
 ```html
-<div @click.native="switchActionSheet">
-    <span class="title"><label>我就列表测试数据</label></span>
-    <span class="sub-title">我是描述~~~~</span>
-    <div class="selected-option">删除本条</div>
-</div>
-<nut-actionsheet :is-visible="isVisible" 
-    :menu-items="menuItems4" 
-    chooseTagValue="确定"
-    cancelTxt="取消"
-    @close="switchActionSheet"
-    @choos="choose"
+<nut-cell 
+    :show-icon="true" 
+    title="带确认按钮" 
+    :desc="option" 
+    @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-actionsheet 
+    :is-visible="isVisible"
+    @close="closeSwitch('isVisible')" 
+    :is-confirm-btn="true"
+    :option-list="optionList" 
+    @choose="choose"
 >
-    <span slot="title"><label>确定删除吗？</label></span>
-    <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>
+    <div slot="title">面板标题</div>
 </nut-actionsheet>
 ```
 ```javascript
 export default {
-    data() {
-        return {
-            sex: '请选择',
-            isVisible: false,
-            menuItems: [
-                {
-                     'name': '确定'
-                }
-            ]
-        };
-    },
-    methods: {
-        switchActionSheet() {
-            this.isVisible = !this.isVisible;
+  data() {
+    return {
+      option: '',
+      isVisible: false,
+      optionList: [
+        {
+          name: '选项A',
+          value: 0
         },
-
-        choose(itemParams) {
-            
+        {
+          name: '选项B',
+          value: 1
+        },
+        {
+          name: '选项C',
+          value: 1
         }
+      ]
+    };
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    choose(itemParams) {
+      this.option = itemParams.name;
     }
+  }
 };
 ```
 
-## 自定义内容
+带确认按钮
 ```html
-<div @click.native="switchActionSheet">
-    <span class="title"><label>内容自定义</label></span>
-    <div class="selected-option">打开</div>
-</div>
-<nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet"
+<nut-cell 
+    :show-icon="true" 
+    title="设置禁用状态" 
+    :desc="option" 
+    @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-actionsheet 
+    :is-visible="isVisible"
+    @close="closeSwitch('isVisible')" 
+    :option-list="optionList" 
+    @choose="choose"
 >
-    <div slot="custom" class="custom-wrap"><span>自定义</span></div>
 </nut-actionsheet>
 ```
 ```javascript
-
 export default {
-    data() {
-        return {
-            isVisible: false
-        }   
+  data() {
+    return {
+      option: '',
+      isVisible: false,
+      optionList: [
+        {
+          name: '选项A',
+          value: 0
+        },
+        {
+          name: '选项B',
+          value: 1,
+          disable: true
+        },
+        {
+          name: '选项C',
+          value: 1
+        }
+      ]
+    };
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
     },
-    methods: {
-        switchActionSheet() {
-            this.isVisible = !this.isVisible;
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    choose(itemParams) {
+      this.option = itemParams.name;
+    }
+  }
+};
+```
+
+高亮选中项
+```html
+<nut-cell 
+    :show-icon="true" 
+    title="高亮选中项" 
+    :desc="option" 
+    @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-actionsheet 
+    :is-visible="isVisible"
+    @close="closeSwitch('isVisible')" 
+    :chooseTagValue="option6"
+    :option-list="optionList" 
+    @choose="choose"
+>
+</nut-actionsheet>
+```
+```javascript
+export default {
+  data() {
+    return {
+      option: '',
+      isVisible: false,
+      optionList: [
+        {
+          name: '选项A',
+          value: 0
+        },
+        {
+          name: '选项B',
+          value: 1,
+          disable: true
+        },
+        {
+          name: '选项C',
+          value: 1
         }
+      ]
+    };
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    choose(itemParams) {
+      this.option = itemParams.name;
     }
+  }
 };
 ```
 
+
+
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| is-animation | 是否开启动画 | Boolean | true
-| is-lock-bg-scroll | 是否锁定背景滚动 | Boolean | false
 | is-visible | 是否可见 | Boolean | false
-| is-show-mask | 是否显示背景遮罩 | Boolean | true
 | is-click-choose-close | 是否点击列表项后立即关闭 | Boolean | true
 | is-click-close-mask | 是否点击mask蒙层关闭 | Boolean | true
-| cancel-txt | 取消文案 | String | '取消'
+| isCancelBtn | 是否有确认按钮 | Boolean | false
+| isConfirmBtn | 是否有确认按钮 | Boolean | false
 | choose-tag-value | 已选值，如果填写，高亮显示 | String | -
-| menu-items | 列表项 | Array | [ ]
+| option-list | 列表项 | Array | [ ]
 | option-tag | 设置列表项展示使用参数 | String | 'name'
 
 ## Slot
 
 | 名称 | 说明 
 |----- | ----- 
-| custom | 自定义内容
 | title | 自定义标题
-| subTitle | 自定义副标题  
+| desc | 自定义描述
 
 ## Event
 

src/packages/field/demo.vue

@@ -1,75 +1,52 @@
 <template>
   <div class="textinput-demo">
     <h4>标准样式</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" />
-        </span>
-      </nut-cell>
+    <div class="filed-demo"> 
+      <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" />
     </div>
     <h4>文字左对齐，且不展示 清除 按钮</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field :disableClear="true" v-model="val2"  label="文本左对齐：" textAlign="left" placeholder="请输入内容" />
-        </span>
-      </nut-cell>
+    <div class="filed-demo">
+      <nut-field :disableClear="true" v-model="val2"  label="文本左对齐：" textAlign="left" placeholder="请输入内容" />  
     </div> 
      <h4>标题超出长度限制</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val2"  label="标题长度超出超出超出范围：" textAlign="right" placeholder="请输入内容" />
-        </span>
-      </nut-cell>
+    <div class="filed-demo">
+      <nut-field  v-model="val2"  label="标题长度超出超出超出范围：" textAlign="right" placeholder="请输入内容" /> 
     </div> 
      <h4>数字</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val4"  label="请输入数字"  type="number"  />
-        </span>
-      </nut-cell>
+    <div class="filed-demo">
+      <nut-field  v-model="val4"  label="请输入数字"  type="number"  />
     </div> 
-        <h4>错误验证</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"  @inputFunc="checkVal5" />
-        </span>
-      </nut-cell>
+    <h4>错误验证</h4>
+    <div class="filed-demo">
+        <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"  @inputFunc="checkVal5" />
     </div> 
      <h4>禁用输入框</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val6"  :readonly="true" label="标题内容"   />
-        </span>
-      </nut-cell>
+    <div class="filed-demo">
+        <nut-field  v-model="val6"  :readonly="true" label="标题内容"   /> 
     </div> 
-    <div>
-      <nut-cell >
-        <span slot="title">
-          <nut-field  v-model="val7" :disabled="true"  label="标题内容"   />
-        </span>
-      </nut-cell>
-    </div> 
-    <h4>文本域</h4>
-      <div class="text-area">
-          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" @errorFunc="error" maxLength="20" rows="4"  />
+    <div class="filed-demo line">
+        <nut-field  v-model="val7" :disabled="true"  label="标题内容"   />
     </div> 
+     <h4>文本域(不限制字数,高度自适应)</h4>
+      <div class="filed-demo">
+          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  :autosize="true" :limitShow="false" type="textarea" @errorFunc="error"  />
+      </div> 
+
+    <h4>文本域(显示字数统计)</h4>
+      <div class="filed-demo">
+          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val4"  type="textarea" @errorFunc="error" maxLength="20" rows="4"  />
+      </div> 
 
-      <h4>事件</h4>
+      <h4>事件输入事件</h4>
        <div>
       <nut-cell>
         <span slot="title">
-          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" @inputFunc="fn" />
+          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" @input-func="fn" />
         </span>
       </nut-cell>
     </div>
       <h4>右侧自定义DOM</h4>
-       <div class="filed-wrap"> 
+       <div class="filed-demo"> 
           <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="fn" > 
               <div class="get-code"> 获取验证码</div>
           </nut-field>
@@ -132,13 +109,12 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scope>
 .demo {
 	padding: 0;
 }
-
-.textinput-demo > div {
-	width: 100%;
+h4{
+  margin-left: 10px;
 }
 
 .text-area {
@@ -149,16 +125,22 @@ export default {
 .wrapper-cell .nut-cell {
 	margin: 0 0 0 20px;
 }
-
-.filed-wrap {
-	background: #fff;
-
-	.get-code {
+.filed-demo{
+  width: 100vw;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: #fff;
+  padding: 5px 20px 5px 20px ;
+  	.get-code {
 		min-width: 80px;
 		background-color: #07c160;
 		border: 1px solid #07c160;
 		color: #fff;
-		margin: 10px;
+		margin: 10px 0;
 	}
 }
+.line{
+  border-top: 1px solid rgba(230,230,230,1) ;
+}
+
 </style>

src/packages/field/doc.md

@@ -39,7 +39,6 @@
 
 ```
 
-
 错误提示
 
 ```html
@@ -114,10 +113,10 @@
 | maxLength | textArea时允许最大输入字数                      | String  | 50    |
 | limitShow | textArea时字数是否展示                     | Boolean  | true    |
 | rows | textArea时行数(可设置高度)                  | string  |1   |
-
+| autosize | textArea时高度可以自适应                  | Boolean  | false  |
 ## Event
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| inputFunc | input事件 | data(输入的值)
+| input-func | input事件 | data(输入的值)
 | change | change事件 | data(输入的值)

src/packages/field/field.scss

@@ -1,125 +1,116 @@
 .nut-field {
-	display: flex;
-	box-sizing: border-box;
-	// flex-wrap: wrap;
-	align-items: center;
-	position: relative;
-	overflow: hidden;
-
-	.nut-require {
-		color: #ee0a24;
-		margin-right: 5px;
-	}
-
-	.nut-field-label {
-		display: inline-block;
-		margin-right: 20px;
-		max-width: 120px;
-		overflow: hidden;
-		font-size: 16px;
-		color: rgba(100, 100, 100, 1);
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	input {
-		min-width: 100px;
-		flex: 1;
-		height: 40px;
-		appearance: none;
-		font-size: 14px;
-		box-sizing: border-box;
-		border-radius: 4px;
-		border: none;
-		background-color: '#FFFFFF';
-		padding: 0 25px 0 10px;
-
-		&::-webkit-input-placeholder {
-			color: #c1c4cb;
-			font-style: normal;
-		}
-
-		&::-webkit-search-cancel-button {
-			display: none;
-		}
-	}
-
-	.nut-text-core {
-		flex: 1;
-		padding: 5px 15px 5px 0;
-		appearance: none;
-		font-size: 14px;
-		box-sizing: border-box;
-		border-radius: 4px;
-		border: none;
-		background-color: '#FFFFFF';
-
-		&::-webkit-input-placeholder {
-			color: #c1c4cb;
-			font-style: normal;
-		}
-
-		&::-webkit-search-cancel-button {
-			display: none;
-		}
-
-		textarea {
-			width: 100%;
-			border: none;
-			outline: none;
-			margin: 0;
-			padding: 0;
-			background: transparent;
-			display: block;
-		}
-
-		span {
-			float: right;
-			margin-right: 15px;
-		}
-	}
-
-	.nut-textinput-clear {
-		opacity: 0.5;
-		position: relative;
-		right: 20px;
-		top: 10px;
-		transform: translateY(-50%);
-		height: 20px;
-		width: 20px;
-
-		svg {
-			vertical-align: top;
-			fill: #999;
-		}
-	}
-
-	.nut-field-error {
-		width: 100%;
-		height: 5px;
-		border-bottom: 1px solid red;
-		box-sizing: border-box;
-		position: absolute;
-		bottom: 0;
-	}
-
-	.input-error {
-		color: red;
-	}
+    display: flex;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    .nut-require {
+        color: #ee0a24;
+        margin-right: 5px;
+    }
+    .nut-field-label {
+        display: inline-block;
+        margin-right: 20px;
+        max-width: 120px;
+        overflow: hidden;
+        font-size: 16px;
+        color: rgba(100, 100, 100, 1);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 40px;
+    }
+    input {
+        min-width: 100px;
+        flex: 1;
+        height: 40px;
+        appearance: none;
+        font-size: 16px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        border: none;
+        background-color: '#FFFFFF';
+        padding: 0 25px 0 10px;
+        &::-webkit-input-placeholder {
+            color: #c1c4cb;
+            font-style: normal;
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+    .nut-text-core {
+        flex: 1;
+        padding: 5px 15px 5px 0;
+        appearance: none;
+        font-size: 14px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        border: none;
+        background-color: '#FFFFFF';
+        &::-webkit-input-placeholder {
+            color: #c1c4cb;
+            font-style: normal;
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+        textarea {
+            width: 100%;
+            border: none;
+            outline: none;
+            margin: 5px 0 0 0;
+            padding: 0;
+            background: transparent;
+            display: block;
+            font-size: 16px;
+            font-family: PingFangSC-Regular;
+            font-size: 16px;
+            color: rgba(50, 50, 50, 1);
+        }
+        span {
+            float: right;
+            margin-right: 15px;
+        }
+    }
+    .nut-textinput-clear {
+        opacity: 0.5;
+        position: relative;
+        right: 20px;
+        top: 20px;
+        transform: translateY(-50%);
+        height: 20px;
+        width: 20px;
+        svg {
+            vertical-align: top;
+            fill: #999;
+        }
+    }
+    .nut-field-error {
+        width: 100%;
+        height: 5px;
+        border-bottom: 1px solid red;
+        box-sizing: border-box;
+        position: absolute;
+        bottom: 0;
+    }
+    .input-error {
+        color: red;
+    }
 }
 
 .nut-filed-disabled {
-	input {
-		background-color: #f5f7fa;
-		border-color: #e5e7ed;
-		color: #999;
-
-		&::-webkit-input-placeholder {
-			color: hsl(225, 10%, 84%);
-		}
-
-		&::-webkit-search-cancel-button {
-			display: none;
-		}
-	}
+    input {
+        color: rgba(200, 200, 200, 1);
+        background-color: #ffffff;
+        &::-webkit-input-placeholder {
+            color: hsl(225, 10%, 84%);
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
 }
+
+input:focus,
+select:focus {
+    outline: none;
+}

src/packages/field/field.vue

@@ -97,10 +97,17 @@ export default {
        type: Boolean,
         default:false
     },
+    autosize:{
+       type: Boolean,
+        default:false
+    },
     value: String
   },
   mounted(){
     this.txtNum=this.value.length;
+    if(this.limitShow==false){
+      this.maxLength="";
+    }
   },
   methods: {
     initCssStyle(){
@@ -115,7 +122,7 @@ export default {
     },
     handleInput(evt) {
       this.currentValue = evt.target.value;
-       this.$emit('inputFunc', evt.target.value);
+       this.$emit('input-func', evt.target.value);
        this.$emit('input', evt.target.value);
     },
     handleClear() {
@@ -130,7 +137,14 @@ export default {
         this.$emit('errorFunc');
       } else {
       }
-      this.$emit('inputFunc', data);
+      if(this.autosize){
+        
+        let height = this.$refs.textarea.scrollHeight;
+         if (height) {
+       this.$refs.textarea.style.height = height + 'px';
+      }
+      }
+      this.$emit('input-func', data);
       this.$emit('input', data);
     }
   },

src/packages/radio/demo.vue

@@ -130,10 +130,28 @@
         </span>
       </nut-cell>
     </div> -->
+    <h4>基本样式</h4>
+    <nut-cell>
+      <span slot="title">
+        <radio-group 
+            :list="labelList"
+            :name="'test0'"
+            :styleType="'label'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="1"    
+            :reslout-attr="'value'"   
+            v-model="labelReslut0"                 
+          />
+      </span>
+    </nut-cell>
+    <nut-cell>
+        <span slot="title"> 选择结果 value: {{labelReslut0}}</span>
+      </nut-cell>
     <h4>按钮单选组输出属性为 value 的值</h4>
     <nut-cell>
         <span slot="title">        
-          <group 
+          <radio-group 
             :list="labelList"
             :name="'test'"
             :styleType="'label'"
@@ -151,7 +169,7 @@
       <h4>按钮单选组输出属性为 text 的值</h4>
       <nut-cell>
         <span slot="title">        
-          <group 
+          <radio-group 
             :list="labelList"
             :styleType="'label'"
             :name="'test2'"
@@ -169,9 +187,9 @@
       <h4>列表单选组输出属性为 value 的值</h4>
       <nut-cell>
         <span slot="title">        
-          <group 
+          <radio-group 
             :list="labelList"
-            :styletype="'list'"
+            :style-type="'list'"
             :name="'test3'"
             :effect-key = "'value'"
             :effect-text="'text'"
@@ -237,13 +255,14 @@ export default {
           text:'冰心'
         }
       ],
+      labelReslut0:"",
       labelReslut:"",
       labelReslut2:"",
       labelReslut3:""   
     };
   },
   components:{
-    group
+    'radio-group':group
   },
   watch:{
     test(val){

src/packages/radio/index.scss

@@ -1,10 +1,13 @@
 .nut-radio{
-    .nut-label{
+    .nut-radio-labels{
         width: 100%;
         display: flex;
         flex-wrap: wrap;        
-        .warper{
+        .nut-radio-list-label{
             margin: 5px;
         }
     }
+    .nut-radio-lists{
+        
+    }
 }

src/packages/radio/index.vue

@@ -1,10 +1,13 @@
 <template >
 <div class="nut-radio">
-    <div    class="nut-label" 
+    <div    :class="{
+                'nut-radio-labels':styleType ==='label',
+                'nut-radio-lists':styleType ==='list'
+            }"
             v-if="list&&list.length>0">
         <nut-radio   v-for="(item,index) in list" 
             :key="item[effectKey]"
-            :type="'list'"           
+            :type="styleType"           
             :name="name" 
             :text="item[effectText]"
             :value="item[effectKey]"  
@@ -19,7 +22,8 @@
 <script>
 export default {
     name:"radio-group",    
-    props:{     
+    props:{    
+        styleType:String,   // label
         type:String, // radio 展示    
         list:Array,  // radio 需要的数据信息 
         checkedIndex:Number, // 初始化选中数组第几个从 0 开始

src/packages/radio/radio.scss

@@ -1,7 +1,7 @@
 @import '../../styles/animation/pulse';
-.warper{
-	display: inline-block;
-}
+// .warper{
+// 	display: inline-block;
+// }
 .nut-radio {
 	margin-right: 10px;
 
@@ -94,7 +94,7 @@
 		}
 	}
 }
-.nut-radio-list{
+.nut-radio-list-label{
 	display: inline-block;
 	text-align: center;
 	line-height: 28px;
@@ -146,3 +146,22 @@
 		border: 1px solid rgba(225,37,27,1);
 	}	
 }
+.nut-radio-list-list{
+	height: 50px;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid #E6E6E6;
+	position: relative;
+	&:last-child{
+		border-bottom:	none;
+	}
+	input{
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 3;
+		opacity: 0;
+		position: absolute;
+	}
+}

src/packages/radio/radio.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="warper">
+<!-- <div class="warper"> -->
   <!-- <label v-if="type === 'radio'" :class="['nut-radio', 'nut-radio-size-' + currentSize]" @click="clickEvt">
     <input
       type="radio"
@@ -14,24 +14,24 @@
       <slot></slot>
     </span>
   </label> -->
-  <div v-if="type === 'list'" class="nut-radio-list">
-     
-          
-          <input
-            type="radio"
-            :value="currentValue"
-            :class="{ 'nut-radio-ani': isAnimated }"
-            :checked="checked"
-            :disabled="isDisabled"
-            :label="label"
-            :name="name"
-            @input="valChange"
-          />
-          <div class="text-box">{{text}}<slot></slot></div>
-          <div class="box-border"></div>
-      
+  <div  :class="{
+      'nut-radio-list-label' : type === 'label',
+      'nut-radio-list-list' : type === 'list'
+     }">
+    <input
+      type="radio"
+      :value="currentValue"
+      :class="{ 'nut-radio-ani': isAnimated }"
+      :checked="checked"
+      :disabled="isDisabled"
+      :label="label"
+      :name="name"
+      @input="valChange"
+    />
+    <div class="text-box">{{text}}<slot></slot></div>
+    <div class="box-border"></div>      
   </div>
-</div>
+<!-- </div> -->
   
 </template>
 <script>