Browse Source

style: taro(inputnumber,popup,switch)

suzigang 4 years ago
parent
commit
ba6fd1a201

+ 0 - 2
src/config.json

@@ -327,7 +327,6 @@
         {
           "name": "Popup",
           "taro": true,
-          "tarodoc": true,
           "sort": 8,
           "cName": "弹出层",
           "type": "component",
@@ -543,7 +542,6 @@
         {
           "name": "InputNumber",
           "taro": true,
-          "tarodoc": true,
           "sort": 1,
           "cName": "数字输入框",
           "type": "component",

+ 3 - 0
src/packages/__VUE/inputnumber/doc.md

@@ -8,7 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+//vue
 import { InputNumber,Icon } from '@nutui/nutui';
+//mp
+import { InputNumber,Icon } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(InputNumber).use(Icon);

+ 0 - 133
src/packages/__VUE/inputnumber/doc.taro.md

@@ -1,133 +0,0 @@
-# InputNumber 数字输入框
-
-### 介绍
-
-通过点击按钮控制数字增减。
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-import { InputNumber,Icon } from '@nutui/nutui';
-
-const app = createApp();
-app.use(InputNumber).use(Icon);
-
-```
-
-## 代码演示
-
-### 基础用法
-
-初始化一个默认值
-
-``` html
-<nut-inputnumber v-model="value" />
-```
-``` javascript
-import { ref } from 'vue';
-
-export default {
-  setup() {
-    const value = ref(1);
-    return { value };
-  },
-};
-```
-
-### 步长设置
-
-设置步长 `step` 5 
-
-```html
-<nut-inputnumber v-model="value" step="5" />
-```
-
-### 限制输入范围
-
-`min` 和 `max` 属性分别表示最小值和最大值
-
-```html
-<nut-inputnumber v-model="value" min="10" max="20" />
-```
-
-### 禁用状态
-
-`disabled` 禁用状态下无法点击按钮或修改输入框。
-
-```html
-<nut-inputnumber v-model="value" disabled />
-```
-
-### 只读禁用输入框
-
-`readonly` 设置只读禁用输入框输入行为
-
-```html
-<nut-inputnumber v-model="value" readonly />
-```
-
-### 支持小数点
-
-设置步长 `step` 0.1  `decimal-places` 小数保留1位
-
-```html
-<nut-inputnumber v-model="value" step="0.1" decimal-places="1" />
-```
-### 支持异步修改
-
-通过 `change` 事件和 `model-value` 进行异步修改
-
-```html
-<nut-inputnumber :model-value="value" @change="onChange" />
-```
-
-``` javascript
-import { ref } from 'vue';
-
-export default {
-  setup() {
-    const value = ref(1);
-    const onChange = (value: number) => {
-      setTimeout(() => {
-        value.value = value;
-      }, 2000);
-    };
-    return { value,onChange };
-  },
-};
-```
-### 自定义按钮大小
-
-设置步长 `step` 0.1  `decimal-places` 小数保留1位
-
-```html
-<nut-inputnumber v-model="value"  button-size="30" input-width="50" />
-```
-
-## API
-
-### Props
-
-| 参数           | 说明                       | 类型           | 默认值     |
-|----------------|----------------------------|----------------|------------|
-| v-model        | 初始值                     | String、Number | -          |
-| input-width    | 输入框宽度                 | String         | `40px`     |
-| button-size    | 操作符+、-尺寸             | String         | `20px`     |
-| min            | 最小值限制                 | String、Number | `1`        |
-| max            | 最大值限制                 | String、Number | `9999` |
-| step           | 步长                       | String、Number | `1`        |
-| decimal-places | 设置保留的小数位           | String、Number | `0`        |
-| disabled       | 禁用所有功能               | Boolean        | false      |
-| readonly       | 只读状态禁用输入框操作行为 | Boolean        | false      |
-
-### Events
-
-| 事件名    | 说明                   | 回调参数                       |
-|-----------|------------------------|--------------------------------|
-| add       | 点击增加按钮时触发     | event: Event                   |
-| reduce    | 点击减少按钮时触发     | event: Event                   |
-| overlimit | 点击不可用的按钮时触发 | event: Event                   |
-| change    | 值改变时触发           | value:  number , event : Event |
-| blur      | 输入框失去焦点时触发   | event: Event                   |
-| focus     | 输入框获得焦点时触发   | event: Event                   |

+ 2 - 1
src/packages/__VUE/inputnumber/index.scss

@@ -18,7 +18,8 @@
     }
   }
 
-  input {
+  input,
+  &__text--readonly {
     width: $inputnumber-input-width;
     height: 100%;
     text-align: center;

+ 4 - 1
src/packages/__VUE/popup/doc.md

@@ -8,7 +8,10 @@
 
 ```javascript
 import { createApp } from 'vue';
+//vue
 import { Popup } from '@nutui/nutui';
+//mp
+import { Popup } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(Popup);
@@ -109,7 +112,7 @@ app.use(Popup);
 | close-icon             | 自定义 Icon                                                 | String         | `"close"`     |
 | destroy-on-close       | 组件销毁后是否关闭                                          | Boolean        | `true`        |
 | round                  | 是否显示圆角                                                | Boolean        | `false`       |
-| teleport               | 指定挂载节点                                                | String         | `"body"`      |
+| teleport               | 指定挂载节点(`小程序不支持`)                                                | String         | `"body"`      |
 
 ### Events
 

+ 0 - 124
src/packages/__VUE/popup/doc.taro.md

@@ -1,124 +0,0 @@
-# Popup 弹出层 组件
-
-### 介绍
-
-弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示
-
-### 安装
-
-```javascript
-import { createApp } from 'vue';
-import { Popup } from '@nutui/nutui';
-
-const app = createApp();
-app.use(Popup);
-```
-
-## 代码演示
-
-### 基础用法
-
-`visible` 控制显示/隐藏
-
-```html
-<nut-popup :style="{ padding: '30px' }" v-model:visible="show">正文</nut-popup>
-```
-
-### 弹出位置
-
-```html
-<nut-popup
-  position="top"
-  v-model:visible="show"
-  :style="{ height: '20% }"
-></nut-popup>
-
-<nut-popup
-  position="left"
-  v-model:visible="show"
-  :style="{ height: '100%', width: '20%' }"
-></nut-popup>
-```
-
-### 图标
-
-```html
-<nut-popup
-  position="bottom"
-  closeable
-  :style="{ height: '20%' }"
-  v-model:visible="show"
-></nut-popup>
-
-<nut-popup
-  position="bottom"
-  closeable
-  close-icon-position="top-left"
-  :style="{ height: '20%' }"
-  v-model:visible="show"
-></nut-popup>
-
-<nut-popup
-  position="bottom"
-  closeable
-  close-icon-position="top-left"
-  close-icon="heart"
-  :style="{ height: '20%' }"
-  v-model:visible="show"
-></nut-popup>
-```
-
-### 圆角弹框
-
-```html
-<nut-popup
-  position="bottom"
-  closeable
-  round
-  :style="{ height: '30%' }"
-  v-model:visible="show"
-></nut-popup>
-```
-
-### 指定挂载节点
-
-```html
-<nut-popup :style="{ padding: '30px' }" teleport="#app" v-model:visible="show">app</nut-popup>
-```
-
-## API
-
-### Props
-
-| 参数                   | 说明                                                        | 类型           | 默认值        |
-|------------------------|-------------------------------------------------------------|----------------|---------------|
-| v-model:visible        | 当前组件是否显示                                            | Boolean        | `false`       |
-| z-index                | 遮罩层级                                                    | String、Number | `2000`        |
-| duration               | 动画时长,单位秒                                            | String、Number | `0.3`         |
-| overlay-class          | 自定义遮罩类名                                              | String         | -             |
-| overlay-style          | 自定义遮罩样式                                              | CSSProperties  | -             |
-| lock-scroll            | 背景是否锁定                                                | Boolean        | `true`       |
-| overlay                | 是否显示遮罩                                                | Boolean        | `true`        |
-| close-on-click-overlay | 是否点击遮罩关闭                                            | Boolean        | `true`        |
-| position               | 弹出位置(top,bottom,left,right,center)                    | String         | `"center"`    |
-| transition             | 动画名                                                      | String         | -             |
-| style                  | 自定义弹框样式                                              | CSSProperties  | -             |
-| pop-class              | 自定义弹框类名                                              | String         | -             |
-| closeable              | 是否显示关闭按钮                                            | Boolean        | `false`        |
-| close-icon-position    | 关闭按钮位置(top-left,top-right,bottom-left,bottom-right) | String         | `"top-right"` |
-| close-icon             | 自定义 Icon                                                 | String         | `"close"`     |
-| destroy-on-close       | 组件销毁后是否关闭                                          | Boolean        | `true`        |
-| round                  | 是否显示圆角                                                | Boolean        | `false`       |
-| teleport               | 指定挂载节点                                                | String         | `"body"`      |
-
-### Events
-
-| 事件名           | 说明                   | 回调参数       |
-|------------------|------------------------|----------------|
-| click            | 点击弹框时触发         | `event: Event` |
-| click-close-icon | 点击关闭图标时触发     | `event: Event` |
-| open             | 打开弹框时触发         | -              |
-| close            | 关闭弹框时触发         | -              |
-| opend            | 遮罩打开动画结束时触发 | `event: Event` |
-| closed           | 遮罩关闭动画结束时触发 | `event: Event` |
-| click-overlay    | 点击遮罩触发           | `event: Event` |

+ 7 - 25
src/packages/__VUE/popup/index.scss

@@ -1,10 +1,12 @@
 .popup-slide {
-  &-center-enter-active {
-    animation: nut-fade-in;
+  &-center-enter-active,
+  &-center-leave-active {
+    transition: opacity 0.5s ease;
   }
 
-  &-center-leave-active {
-    animation: nut-fade-out;
+  &-center-enter-from,
+  &-center-leave-to {
+    opacity: 0;
   }
 
   &-top-enter-from,
@@ -79,30 +81,10 @@
   max-height: 100%;
   overflow-y: auto;
   background-color: $white;
-  transition: transform 0.3s;
+  transition: transform 0.2s;
   -webkit-overflow-scrolling: touch;
 }
 
-@keyframes nut-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes nut-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }

+ 0 - 4
src/packages/__VUE/shortpassword/index.scss

@@ -38,10 +38,6 @@
   }
 }
 
-.nut-popup {
-  border-radius: 12px;
-}
-
 .psd-blink {
   display: inline-block;
 }

+ 4 - 7
src/packages/__VUE/steps/demo.vue

@@ -20,12 +20,9 @@
       <nut-step class="nut-step-wait" title="未开始" icon="notice">3</nut-step>
     </nut-steps>
     <h2>竖向步骤条</h2>
-    <div style="height: 300px">
+    <div style="height: 300px; padding: 0 20px">
       <nut-steps direction="vertical" current="2">
-        <nut-step
-          title="已完成"
-          icon="nut-icon-wanshangshide"
-          content="您的订单已经打包完成,商品已发出"
+        <nut-step title="已完成" content="您的订单已经打包完成,商品已发出"
           >1</nut-step
         >
         <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
@@ -36,7 +33,7 @@
         >
       </nut-steps>
     </div>
-    <div style="height: 300px">
+    <div style="height: 300px; padding: 0 20px">
       <nut-steps direction="vertical" progress-dot current="2">
         <nut-step title="已完成" content="您的订单已经打包完成,商品已发出"
           >1</nut-step
@@ -63,7 +60,7 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .demo-box {
 }
 </style>

+ 1 - 1
src/sites/mobile-taro/vue/project.config.json

@@ -12,7 +12,7 @@
     "minified": true,
     "newFeature": false,
     "coverView": true,
-    "nodeModules": false,
+    "nodeModules": true,
     "autoAudits": false,
     "showShadowRootInWxmlPanel": true,
     "scopeDataCheck": false,

+ 2 - 2
src/sites/mobile-taro/vue/src/dentry/pages/switch/index.vue

@@ -50,10 +50,10 @@ export default {
     const checkedAsync = ref(true);
 
     const change = (value: boolean, event: Event) => {
-      proxy.$toast.text(`触发了change事件,开关状态:${value}`);
+      console.log(`触发了change事件,开关状态:${value}`);
     };
     const changeAsync = (value: boolean, event: Event) => {
-      proxy.$toast.text(`2秒后异步触发 ${value}`);
+      console.log(`2秒后异步触发 ${value}`);
       setTimeout(() => {
         checkedAsync.value = value;
       }, 2000);

+ 1 - 2
vite.config.build.taro.vue.ts

@@ -24,8 +24,7 @@ export default defineConfig({
   },
   plugins: [vue()],
   build: {
-    // 开发模式取消压缩混淆
-    minify: false,
+    minify: true,
     rollupOptions: {
       // 请确保外部化那些你的库中不需要的依赖
       external: ['vue', 'vue-router', '@tarojs/taro'],