feat: 更新

miniprogram_dev/components/common/component.js

@@ -132,12 +132,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/components/packages/avatar/avatar.js

@@ -132,12 +132,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/components/packages/button/index.js

@@ -132,12 +132,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/components/packages/cell/cell.js

@@ -132,12 +132,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };
@@ -201,8 +200,8 @@ var _component = __webpack_require__(0);
     },
 
     methods: {
-        clickCell: function clickCell() {
-            this.$emit('click-cell');
+        handleClick: function handleClick() {
+            this.$emit('click');
         }
     }
 });

miniprogram_dev/components/packages/cellgroup/index.js

@@ -133,12 +133,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/components/packages/divider/index.js

@@ -133,12 +133,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };
@@ -197,10 +196,6 @@ var _component = __webpack_require__(0);
         borderColor: {
             type: String,
             value: 'initial'
-        },
-        useSlot: {
-            type: Boolean,
-            value: false
         }
     },
     methods: {}

miniprogram_dev/components/packages/divider/index.wxml

@@ -1,6 +1,6 @@
 <wxs src="./index.wxs" module="computed" />
 
-<view class="{{computed.classes({direction,contentPosition,dashed,hairline,useSlot})}}" style="border-color:{{borderColor}}" wx:if="{{direction === 'horizontal'}}">
+<view class="{{computed.classes({direction,contentPosition,dashed,hairline})}}" style="border-color:{{borderColor}}" wx:if="{{direction === 'horizontal'}}">
     <slot></slot>
 </view>
 <view class="{{computed.classes({direction,contentPosition,dashed,hairline})}}" wx:else></view>

miniprogram_dev/components/packages/grid-item/index.js

@@ -132,12 +132,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/components/packages/grid/index.js

@@ -132,12 +132,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/components/packages/icon/icon.js

@@ -132,12 +132,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/components/packages/overlay/index.js

@@ -133,12 +133,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/components/packages/popup/index.js

@@ -133,12 +133,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };
@@ -202,11 +201,17 @@ var _component = __webpack_require__(0);
         overlay: {
             type: Boolean,
             value: true
-        }
+        },
+        position: {
+            type: String,
+            value: 'center'
+        },
+        overlayStyle: String
     },
     methods: {
-        onClick: function onClick() {
-            this.$emit('click');
+        onClickOverlay: function onClickOverlay() {
+            console.log('点击');
+            this.$emit('clickOverlay');
         }
     }
 });

miniprogram_dev/components/packages/popup/index.wxml

@@ -4,6 +4,8 @@
   show="{{ overlay && show }}"
   zIndex="{{zIndex}}"
   duration="{{duration}}"
+  overlay-style="{{overlayStyle}}"
+  bind:click="onClickOverlay"
   />
 
 <nut-transition 

miniprogram_dev/components/packages/transition/index.js

@@ -133,12 +133,11 @@ function NutComponent(NutOptions) {
     if (NutOptions.field) {
         options.behaviors.push('wx://form-field');
     }
-    // add default options
+    // 添加默认 选项
     options.options = {
         multipleSlots: true,
         addGlobalClass: true
     };
-    console.log(options);
     Component(options);
 }
 module.exports = { NutComponent: NutComponent };

miniprogram_dev/pages/basic/pages/overlay/index.wxml

@@ -1,26 +1,26 @@
 <view class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-button type="primary" bindtap='onClickShow' >显示遮罩层</nut-button>
+      <nut-button type="primary" bind:click='onClickShow' >显示遮罩层</nut-button>
     </nut-cell>
 
     <nut-overlay show='{{ show }}' bind:click="onClickHide"></nut-overlay>
 
     <h2>遮罩样式</h2>
      <nut-cell>
-      <nut-button type="primary" bindtap='onClicStyleShow'  >遮罩样式</nut-button>
+      <nut-button type="primary" bind:click='onClicStyleShow'  >遮罩样式</nut-button>
     </nut-cell>
     <nut-overlay show='{{ styleShow }}' bind:click="onClicStyleHide" overlay-style="background: rgba(0, 0, 0, .2)"></nut-overlay>
 
     <h2>设置动画时间</h2>
      <nut-cell>
-      <nut-button type="primary" bindtap='onClickTimeShow'  >设置动画时间</nut-button>
+      <nut-button type="primary" bind:click='onClickTimeShow'  >设置动画时间</nut-button>
     </nut-cell>
     <nut-overlay show='{{ timeShow }}' bind:click="onClickTimeHide" duration='1000'></nut-overlay>
 
     <h2>嵌套内容</h2>
     <nut-cell>
-      <nut-button type="primary" bindtap='onClickContentShow' >嵌入内容</nut-button>
+      <nut-button type="primary" bind:click='onClickContentShow' >嵌入内容</nut-button>
     </nut-cell>
 
     <nut-overlay show='{{ contentShow }}' bind:click="onClickContentHide" custom-class='deno'>

miniprogram_dev/pages/basic/pages/popup/index.js

@@ -3,7 +3,7 @@
 Component({
     data:{
         show:false,
-        contentShow: false,
+        positionShow: false,
         styleShow:false,
         timeShow:false
     },
@@ -17,32 +17,19 @@ Component({
             this.trigger(false);
         },
 
-        onClickContentShow(){
-            this.setData({ contentShow:true });
-        },
-
-        onClickContentHide(){
-            this.setData({ contentShow:false });
-        },
-
-        onClicStyleShow(){
-            this.setData({ styleShow:true });
-        },
-
-        onClicStyleHide(){
-            this.setData({ styleShow:false });
+        onClickOverlay(){
+            this.trigger(false);
         },
 
-        onClickTimeShow(){
-            this.setData({ timeShow:true });
+        trigger(tag){
+            this.setData({ show:tag });
         },
 
-        onClickTimeHide(){
-            this.setData({ timeShow:false });
+        onClickPositionShow(){
+            this.setData({positionShow:true})
         },
-
-        trigger(tag){
-            this.setData({ show:tag });
+        onClickPositionHide(){
+            this.setData({positionShow:false})
         }
     }
 })

miniprogram_dev/pages/basic/pages/popup/index.wxml

@@ -1,36 +1,22 @@
 <view class="demo">
     <h2>基础用法</h2>
 
-    <nut-cell title="展示弹出层"  bindtap='onClickShow'></nut-cell>
-    <nut-popup pop-style="padding:'50px 30px'" show='{{ show }}' bind:click="onClickHide">正文</nut-popup>
-
-
-    <!-- <nut-cell>
-      <nut-button type="primary" bindtap='onClickShow' >显示遮罩层</nut-button>
-    </nut-cell>
-
-    <nut-overlay show='{{ show }}' bind:click="onClickHide"></nut-overlay> -->
-
-    <h2>遮罩样式</h2>
-     <nut-cell>
-      <nut-button type="primary" bindtap='onClicStyleShow'  >遮罩样式</nut-button>
-    </nut-cell>
-    <nut-overlay show='{{ styleShow }}' bind:click="onClicStyleHide" overlay-style="background: rgba(0, 0, 0, .2)"></nut-overlay>
-
-    <h2>设置动画时间</h2>
-     <nut-cell>
-      <nut-button type="primary" bindtap='onClickTimeShow'  >设置动画时间</nut-button>
-    </nut-cell>
-    <nut-overlay show='{{ timeShow }}' bind:click="onClickTimeHide" duration='1000'></nut-overlay>
-
-    <h2>嵌套内容</h2>
-    <nut-cell>
-      <nut-button type="primary" bindtap='onClickContentShow' >嵌入内容</nut-button>
-    </nut-cell>
-
-    <nut-overlay show='{{ contentShow }}' bind:click="onClickContentHide" custom-class='deno'>
-       <view class='block'></view>
-    </nut-overlay>
-
+    <nut-cell title="展示弹出层"  bind:click='onClickShow'></nut-cell>
+    <nut-popup pop-style="padding:30px 50px" show='{{ show }}' bind:clickOverlay="onClickOverlay">正文</nut-popup>
+
+    <h2>弹出位置</h2>
+     <nut-cell title="顶部弹出"  bind:click='onClickPositionShow'></nut-cell>
+     <nut-cell title="底部弹出"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="左侧弹出"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="右侧弹出"  bind:click='onClickShow'></nut-cell>
+     <nut-popup position="top" pop-style="height:20%" show='{{ positionShow }}' bind:clickOverlay="onClickPositionHide"></nut-popup>
+
+     <h2>关闭图标</h2>
+     <nut-cell title="关闭图标"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="自定义图标"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="图标位置"  bind:click='onClickShow'></nut-cell>
+
+     <h2>圆角弹框</h2>
+    <nut-cell title="圆角弹框"  bind:click='onClickShow'></nut-cell>
   
 </view>

readmey.md

@@ -1,2 +1,20 @@
 # vant
-基础 48 个 业务 4 个
+基础 48 个 业务 4 个
+
+## 样式覆盖
+
+样式隔离：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB
+
+### 外部样式类
+
+外部传入的样式类， 通过 设置 Component 中的 externalClasses 
+
+小程序有普通样式类和外部样式类。普通样式类则在 自定义组件 wxss 中设置的，外部样式类则在调用组件时改变自定义组件样式的
+
+
+在 vant-weapp 中默认的外部样式类为  custom-class
+
+
+### slot
+
+multipleSlots: true 设置一个页面中可以有多个slot，用 不同的 name 来进行区分

src/common/component.ts

@@ -53,14 +53,12 @@ function NutComponent<
     options.behaviors.push('wx://form-field');
   }
 
-  // add default options
+  // 添加默认 选项
   options.options = {
     multipleSlots: true,
     addGlobalClass: true,
   };
 
-   console.log(options)
-
   Component(options);
 }
 

src/packages/cell/cell.ts

@@ -25,8 +25,8 @@ NutComponent({
     return {};
   },
   methods: {
-    clickCell() {
-      this.$emit('click-cell');
+    handleClick() {
+      this.$emit('click');
     },
     
   }

src/packages/divider/index.ts

@@ -21,10 +21,6 @@ NutComponent({
     borderColor: {
       type: String,
       value: 'initial'
-    },
-    useSlot: {
-      type: Boolean,
-      value: false
     }
   },
 

src/packages/divider/index.wxml

@@ -1,6 +1,6 @@
 <wxs src="./index.wxs" module="computed" />
 
-<view class="{{computed.classes({direction,contentPosition,dashed,hairline,useSlot})}}" style="border-color:{{borderColor}}" wx:if="{{direction === 'horizontal'}}">
+<view class="{{computed.classes({direction,contentPosition,dashed,hairline})}}" style="border-color:{{borderColor}}" wx:if="{{direction === 'horizontal'}}">
     <slot></slot>
 </view>
 <view class="{{computed.classes({direction,contentPosition,dashed,hairline})}}" wx:else></view>

src/packages/divider/index.wxs

@@ -1,11 +1,10 @@
 
 function Classes(data) {
-  console.log(data)
   var prefixCls = 'nut-divider'
   var defaultClassesObj = [prefixCls]
 
   if (data.direction === 'horizontal') {
-    if (data.useSlot) defaultClassesObj.push(prefixCls + '-center')
+    if (data.contentPosition === 'center') defaultClassesObj.push(prefixCls + '-center')
     if (data.contentPosition === 'left') defaultClassesObj.push(prefixCls + '-left')
     if (data.contentPosition === 'right') defaultClassesObj.push(prefixCls + '-right')
     if (data.dashed) defaultClassesObj.push(prefixCls + '-dashed')

src/packages/popup/index.ts

@@ -27,11 +27,18 @@ NutComponent({
       type: Boolean,
       value: true
     },
+    position: {
+      type: String,
+      value: 'center'
+    },
+    overlayStyle: String,
   },
 
   methods: {
-    onClick(){
-      this.$emit('click');
+    onClickOverlay(){
+      console.log('点击')
+
+      this.$emit('clickOverlay')
     }
   },
 });

src/packages/popup/index.wxml

@@ -4,6 +4,8 @@
   show="{{ overlay && show }}"
   zIndex="{{zIndex}}"
   duration="{{duration}}"
+  overlay-style="{{overlayStyle}}"
+  bind:click="onClickOverlay"
   />
 
 <nut-transition 

src/packages/popup/index.wxs

@@ -8,7 +8,7 @@ function Classes(data) {
 
     var prefixCls = 'nut-popup'
 
-    var classes = [prefixCls,prefixCls + '--' + data.position,data.popClass]
+    var classes = [prefixCls,prefixCls + '--' + data.position, data.popClass]
 
     if (data.round) {
         classes.push('round')

tools/demo/pages/basic/pages/overlay/index.wxml

@@ -1,26 +1,26 @@
 <view class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-button type="primary" bindtap='onClickShow' >显示遮罩层</nut-button>
+      <nut-button type="primary" bind:click='onClickShow' >显示遮罩层</nut-button>
     </nut-cell>
 
     <nut-overlay show='{{ show }}' bind:click="onClickHide"></nut-overlay>
 
     <h2>遮罩样式</h2>
      <nut-cell>
-      <nut-button type="primary" bindtap='onClicStyleShow'  >遮罩样式</nut-button>
+      <nut-button type="primary" bind:click='onClicStyleShow'  >遮罩样式</nut-button>
     </nut-cell>
     <nut-overlay show='{{ styleShow }}' bind:click="onClicStyleHide" overlay-style="background: rgba(0, 0, 0, .2)"></nut-overlay>
 
     <h2>设置动画时间</h2>
      <nut-cell>
-      <nut-button type="primary" bindtap='onClickTimeShow'  >设置动画时间</nut-button>
+      <nut-button type="primary" bind:click='onClickTimeShow'  >设置动画时间</nut-button>
     </nut-cell>
     <nut-overlay show='{{ timeShow }}' bind:click="onClickTimeHide" duration='1000'></nut-overlay>
 
     <h2>嵌套内容</h2>
     <nut-cell>
-      <nut-button type="primary" bindtap='onClickContentShow' >嵌入内容</nut-button>
+      <nut-button type="primary" bind:click='onClickContentShow' >嵌入内容</nut-button>
     </nut-cell>
 
     <nut-overlay show='{{ contentShow }}' bind:click="onClickContentHide" custom-class='deno'>

tools/demo/pages/basic/pages/popup/index.js

@@ -3,7 +3,7 @@
 Component({
     data:{
         show:false,
-        contentShow: false,
+        positionShow: false,
         styleShow:false,
         timeShow:false
     },
@@ -17,32 +17,19 @@ Component({
             this.trigger(false);
         },
 
-        onClickContentShow(){
-            this.setData({ contentShow:true });
-        },
-
-        onClickContentHide(){
-            this.setData({ contentShow:false });
-        },
-
-        onClicStyleShow(){
-            this.setData({ styleShow:true });
-        },
-
-        onClicStyleHide(){
-            this.setData({ styleShow:false });
+        onClickOverlay(){
+            this.trigger(false);
         },
 
-        onClickTimeShow(){
-            this.setData({ timeShow:true });
+        trigger(tag){
+            this.setData({ show:tag });
         },
 
-        onClickTimeHide(){
-            this.setData({ timeShow:false });
+        onClickPositionShow(){
+            this.setData({positionShow:true})
         },
-
-        trigger(tag){
-            this.setData({ show:tag });
+        onClickPositionHide(){
+            this.setData({positionShow:false})
         }
     }
 })

tools/demo/pages/basic/pages/popup/index.wxml

@@ -1,36 +1,22 @@
 <view class="demo">
     <h2>基础用法</h2>
 
-    <nut-cell title="展示弹出层"  bindtap='onClickShow'></nut-cell>
-    <nut-popup pop-style="padding:'50px 30px'" show='{{ show }}' bind:click="onClickHide">正文</nut-popup>
-
-
-    <!-- <nut-cell>
-      <nut-button type="primary" bindtap='onClickShow' >显示遮罩层</nut-button>
-    </nut-cell>
-
-    <nut-overlay show='{{ show }}' bind:click="onClickHide"></nut-overlay> -->
-
-    <h2>遮罩样式</h2>
-     <nut-cell>
-      <nut-button type="primary" bindtap='onClicStyleShow'  >遮罩样式</nut-button>
-    </nut-cell>
-    <nut-overlay show='{{ styleShow }}' bind:click="onClicStyleHide" overlay-style="background: rgba(0, 0, 0, .2)"></nut-overlay>
-
-    <h2>设置动画时间</h2>
-     <nut-cell>
-      <nut-button type="primary" bindtap='onClickTimeShow'  >设置动画时间</nut-button>
-    </nut-cell>
-    <nut-overlay show='{{ timeShow }}' bind:click="onClickTimeHide" duration='1000'></nut-overlay>
-
-    <h2>嵌套内容</h2>
-    <nut-cell>
-      <nut-button type="primary" bindtap='onClickContentShow' >嵌入内容</nut-button>
-    </nut-cell>
-
-    <nut-overlay show='{{ contentShow }}' bind:click="onClickContentHide" custom-class='deno'>
-       <view class='block'></view>
-    </nut-overlay>
-
+    <nut-cell title="展示弹出层"  bind:click='onClickShow'></nut-cell>
+    <nut-popup pop-style="padding:30px 50px" show='{{ show }}' bind:clickOverlay="onClickOverlay">正文</nut-popup>
+
+    <h2>弹出位置</h2>
+     <nut-cell title="顶部弹出"  bind:click='onClickPositionShow'></nut-cell>
+     <nut-cell title="底部弹出"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="左侧弹出"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="右侧弹出"  bind:click='onClickShow'></nut-cell>
+     <nut-popup position="top" pop-style="height:20%" show='{{ positionShow }}' bind:clickOverlay="onClickPositionHide"></nut-popup>
+
+     <h2>关闭图标</h2>
+     <nut-cell title="关闭图标"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="自定义图标"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="图标位置"  bind:click='onClickShow'></nut-cell>
+
+     <h2>圆角弹框</h2>
+    <nut-cell title="圆角弹框"  bind:click='onClickShow'></nut-cell>
   
 </view>