ソースを参照

docs: taro md update

richard1015 4 年 前
コミット
61f19ffe85

+ 0 - 5
src/config.json

@@ -265,7 +265,6 @@
         {
           "name": "Icon",
           "taro": true,
-          "tarodoc": true,
           "sort": 3,
           "cName": "图标",
           "type": "component",
@@ -550,7 +549,6 @@
         {
           "name": "Input",
           "taro": true,
-          "tarodoc": true,
           "sort": 2,
           "cName": "输入框",
           "type": "component",
@@ -573,7 +571,6 @@
           "version": "3.0.0",
           "name": "Rate",
           "taro": true,
-          "tarodoc": true,
           "sort": 4,
           "cName": "评分",
           "type": "component",
@@ -584,7 +581,6 @@
         {
           "version": "3.0.0",
           "taro": true,
-          "tarodoc": true,
           "name": "Calendar",
           "type": "component",
           "cName": "日历",
@@ -617,7 +613,6 @@
         {
           "version": "3.0.0",
           "taro": true,
-          "tarodoc": true,
           "name": "TextArea",
           "type": "component",
           "cName": "文本域",

+ 5 - 2
src/docs/start.md

@@ -8,10 +8,13 @@
 
 ```bash
 # Vue2 项目
-npm i @nutui/nutui -S
+npm i @nutui/nutui
 
 # Vue3 项目
-npm i @nutui/nutui@next -S
+npm i @nutui/nutui@next
+
+# taro 小程序项目
+npm i @nutui/nutui@taro
 ```
 
 #### CDN 安装使用示例

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

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

+ 0 - 213
src/packages/__VUE/calendar/doc.taro.md

@@ -1,213 +0,0 @@
-# Calendar 组件
-
-### 介绍
-
-日历,可平铺/弹窗展示
-
-### 安装
-
-```javascript
-import { createApp } from 'vue';
-import { Calendar } from '@nutui/nutui';
-
-const app = createApp();
-app.use(Calendar);
-```
-
-## 代码演示
-
-### 基础用法
-
-```html
-<nut-cell
-  :showIcon="true"
-  title="选择单个日期"
-  :desc="date ? `${date} ${dateWeek}` : '请选择'"
-  @click="openSwitch('isVisible')"
->
-</nut-cell>
-<nut-calendar
-  v-model:visible="isVisible"
-  :default-value="date"
-  @close="closeSwitch('isVisible')"
-  @choose="setChooseValue"
-  :start-date="`2019-10-11`"
-  :end-date="`2022-11-11`"
->
-</nut-calendar>
-```
-
-```javascript
-setup() {
-    const state: TestCalendarState = reactive({
-      isVisible: false,
-      date: '',
-      dateWeek: ''
-    });
-    const openSwitch = param => {
-      state[`${param}`] = true;
-    };
-    const closeSwitch = param => {
-      state[`${param}`] = false;
-    };
-    const setChooseValue = param => {
-      state.date = param[3];
-      state.dateWeek = param[4];
-    };
-    return {
-      ...toRefs(state),
-      openSwitch,
-      closeSwitch,
-      setChooseValue
-    };
-  }
-```
-
-### 区间选择
-
-```html
-<nut-cell
-  :showIcon="true"
-  title="选择日期区间"
-  :desc="date ? `${date[0]}至${date[1]}` : '请选择'"
-  @click="openSwitch('isVisible')"
->
-</nut-cell>
-<nut-calendar
-  v-model:visible="isVisible"
-  :default-value="date"
-  type="range"
-  :start-date="`2019-12-22`"
-  :end-date="`2021-01-08`"
-  @close="closeSwitch('isVisible')"
-  @choose="setChooseValue"
->
-</nut-calendar>
-```
-
-```javascript
-setup() {
-    const state: TestCalendarState = reactive({
-      date: ['2019-12-23', '2019-12-26'],
-      isVisible2: true
-    });
-    const openSwitch = param => {
-      state[`${param}`] = true;
-    };
-    const closeSwitch = param => {
-      state[`${param}`] = false;
-    };
-    const setChooseValue= param => {
-      state.date = [...[param[0][3], param[1][3]]];
-    };
-    return {
-      ...toRefs(state),
-      openSwitch,
-      closeSwitch,
-      setChooseValue,
-    };
-  }
-```
-
-### 自定义日历-自动回填
-
-```html
-<nut-cell
-  :showIcon="true"
-  title="选择日期"
-  :desc="date ? date : '请选择'"
-  @click="openSwitch('isVisible')"
->
-</nut-cell>
-<nut-calendar
-  v-model:visible="isVisible"
-  @close="closeSwitch('isVisible')"
-  @choose="setChooseValue"
-  :start-date="null"
-  :end-date="null"
-  :is-auto-back-fill="true"
->
-</nut-calendar>
-```
-
-```javascript
-setup() {
-    const state: TestCalendarState = reactive({
-      date: '',
-      isVisible: false
-    });
-    const openSwitch = param => {
-      state[`${param}`] = true;
-    };
-    const closeSwitch = param => {
-      state[`${param}`] = false;
-    };
-     const setChooseValue = param => {
-      state.date= param[3];
-    };
-    return {
-      ...toRefs(state),
-      setChooseValue
-    };
-  }
-```
-
-### 平铺展示
-
-```html
-<div class="test-calendar-wrapper">
-  <nut-calendar
-    :poppable="false"
-    :is-auto-back-fill="true"
-    :default-value="date"
-    @choose="setChooseValue"
-  >
-  </nut-calendar
-></div>
-```
-
-```javascript
-setup() {
-    const state: TestCalendarState = reactive({
-      date: '2020-07-08'
-    });
-    const setChooseValue = param => {
-      state.date = param[3];
-    };
-    return {
-      ...toRefs(state),
-      setChooseValue
-    };
-  }
-```
-
-### 基础用法
-
-```html
-
-```
-
-```javascript
-```
-
-## API
-
-### Props
-
-| 字段              | 说明                                              | 类型            | 默认值          |
-|-------------------|---------------------------------------------------|-----------------|-----------------|
-| v-model:visible   | 是否可见                                          | Boolean         | false           |
-| type              | 类型,日期选择'one',区间选择'range'              | String          | 'one'           |
-| poppable          | 是否弹窗状态展示                                  | Boolean         | true            |
-| is-auto-back-fill | 自动回填                                          | Boolean         | false           |
-| title             | 显示标题                                          | String          | ‘日期选择’      |
-| default-value     | 默认值,日期选择 String 格式,区间选择 Array 格式 | String 、 Array | null            |
-| start-date        | 开始日期, 如果不限制开始日期传 null              | String          | 今天            |
-| end-date          | 结束日期,如果不限制结束日期传 null               | String          | 距离今天 365 天 |
-
-### Events
-
-| 事件名 | 说明                         | 回调参数                     |
-|--------|------------------------------|------------------------------|
-| choose | 选择之后或是点击确认按钮触发 | 日期数组(包含年月日和星期) |
-| close  | 关闭时触发                   | -                            |

+ 12 - 0
src/packages/__VUE/drag/doc.md

@@ -1,6 +1,18 @@
 # Drag 拖拽
+### 介绍
+
 实现可拖拽的任意元素
 
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Drag } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Drag);
+```
+
 ## 基本用法
 ```html
 <nut-drag>

+ 12 - 0
src/packages/__VUE/drag/doc.taro.md

@@ -1,6 +1,18 @@
 # Drag 拖拽
+### 介绍
+
 实现可拖拽的任意元素
 
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Drag } from '@nutui/nutui@taro';
+
+const app = createApp();
+app.use(Drag);
+```
+
 ## 限制拖拽边界
 ```html
 <nut-drag style="width: 90%; height: 200px; border: 1px solid red" direction="all" width="120"height="40">

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

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

+ 0 - 92
src/packages/__VUE/icon/doc.taro.md

@@ -1,92 +0,0 @@
-# Icon 图标组件
-
-### 介绍
-
-基于 IconFont 字体的图标集,可以通过 Icon 组件使用。
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-import { Icon } from '@nutui/nutui@taro';
-
-const app = createApp();
-app.use(Icon);
-
-```
-
-## 代码演示
-
-### 基础用法
-
-`Icon` 的 `name` 属性支持传入图标名称或图片链接。
-
-```html
-<nut-icon name="dongdong"></nut-icon>
-<nut-icon name="JD"></nut-icon>
-<nut-icon size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>
-```
-
-### 图标颜色
-
-`Icon` 的 `color` 属性用来设置图标的颜色。
-
-```html
-<nut-icon name="dongdong" color="#fa2c19"></nut-icon>
-<nut-icon name="dongdong" color="#64b578"></nut-icon>
-<nut-icon name="JD" color="#fa2c19"></nut-icon>
-```
-
-### 图标大小
-
-`Icon` 的 `size` 属性用来设置图标的尺寸大小,默认单位为 `px`。
-
-```html
-<nut-icon name="dongdong"></nut-icon>
-<nut-icon name="dongdong" size="24"></nut-icon>
-<nut-icon name="dongdong" size="16"></nut-icon>
-```
-
-### 自定义图标
-
-如果需要在现有 Icon 的基础上使用更多图标,可以引入第三方 iconfont 对应的字体文件和 CSS 文件,之后就可以在 Icon 组件中直接使用。
-
-```css
-/* 引入第三方或自定义的字体图标样式 */
-@font-face {
-  font-family: 'my-icon';
-  src: url('./my-icon.ttf') format('truetype');
-}
-
-.my-icon {
-  font-family: 'my-icon';
-}
-
-.my-icon-extra::before {
-  content: '\e626';
-}
-```
-
-```html
-<!-- 通过 class-prefix 指定类名为 my-icon -->
-<nut-icon class-prefix="my-icon" name="extra" />
-```
-
-## API
-
-### Props
-
-| 参数         | 说明                             | 类型             | 默认值           |
-|--------------|----------------------------------|------------------|------------------|
-| name         | 图标名称或图片链接               | String           | -                |
-| color        | 图标颜色                         | String           | -                |
-| size         | 图标大小,如 `20px` `2em` `2rem` | String or Number | -                |
-| class-prefix | 类名前缀,用于使用自定义图标     | String           | `nutui-iconfont` |
-| tag          | HTML 标签                        | String           | `i`              |
-
-### Events
-
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| click  | 点击图标时触发 | event: Event |
-

+ 1 - 1
src/packages/__VUE/infiniteloading/doc.taro.md

@@ -1,4 +1,4 @@
-#  Infiniteloading组件
+#  Infiniteloading 滚动加载
 
 ### 介绍
 

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

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

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

@@ -1,133 +0,0 @@
-# Input 输入框组件
-
-### 介绍
-
-单行输入框
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-import { Input } from '@nutui/nutui';
-
-const app = createApp();
-app.use(Input);
-
-```
-## 代码演示
-
-### 基础用法
-
-双向绑定
-
-```html
-<nut-input
-      v-model="state.val1"
-      @change="change"
-      @focus="focus"
-      @blur="blur"
-      label="文本"
-    />
-<nut-input placeholder="请输入文本"
-      @change="change"
-      v-model="state.val0"
-      :require-show="true"
-      label="文本"
-      @clear="clear"
-    />
-```
-
-### 禁用和只读
-
-
-```html
-<nut-input v-model="state.val2" @change="change"  disabled="true" label="标题:"/>
-<nut-input v-model="state.val3" @change="change" readonly="true"  label="标题:"/>
-```
-
-### 限制输入长度
-
-```html
- <nut-input v-model="state.val4" @change="change" max-length="7" label="限制7" />
-```
-### 其他类型
-
-```html
-<nut-input v-model="state.val0" @change="change" type="password" label="密码"/>
-<nut-input v-model="state.val5" @change="change" type="number" label="整数" />
-<nut-input v-model="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字"/>
-```
-
-### 代码
-```html
-import { reactive } from 'vue';
-export default {
-  setup() {
-    const state = reactive({
-      val0: '',
-      val1: '初始数据',
-      val2: '禁止修改',
-      val3: 'readonly 只读',
-      val4: '',
-      val5: '',
-      val6: '',
-      val7: '',
-      val8: '文案'
-    });
-    setTimeout(function() {
-      state.val1 = '异步数据';
-    }, 2000);
-    const change = (value: string | number,event:Event) => {
-      console.log('change: ', value,event);
-    };
-    const focus = (value: string | number,event:Event) => {
-      console.log('focus:', value,event);
-    };
-    const blur = (value: string | number,event:Event) => {
-      console.log('blur:', value,event);
-    };
-    const clear = (value: string | number) => {
-      console.log('clear:', value);
-    };
-
-    return {
-      state,
-      change,
-      blur,
-      clear,
-      focus
-    };
-  }
-}
-```
-### Prop
-
-| 参数         | 说明                                   | 类型           | 默认值  |
-|--------------|----------------------------------------|----------------|---------|
-| v-model      | 输入值,双向绑定                       | String         | -       |
-| type         | 类型,可选值为 `text` `number`  等     | String         | `text`  |
-| placeholder  | 为空时占位符                           | String         | -       |
-| label        | 左侧文案                               | String         | -       |
-| require-show | 左侧*号是否展示                        | Boolean        | `false` |
-| disabled     | 是否禁用                               | Boolean        | `false` |
-| readonly     | 是否只读                               | Boolean        | `false` |
-| max-length   | 限制最长输入字符                       | String、Number | -       |
-| clearable    | 展示清除icon                           | Boolean        | `true`  |
-| text-align   | 文本位置,可选值`left`,`center`,`right` | String         | `left`  |
-
-### Event
-
-| 名称   | 说明           | 回调参数    |
-|--------|----------------|-------------|
-| change | 输入内容时触发 | val ,event  |
-| focus  | 聚焦时触发     | val  ,event |
-| blur   | 失焦时触发     | val ,event  |
-| clear  | 点击清空时触发 | val         |
-
-
-
-
-
-
-
-

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

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

+ 0 - 104
src/packages/__VUE/rate/doc.taro.md

@@ -1,104 +0,0 @@
-# Rate 评分
-
-### 介绍
-
-用于快速的评级操作,或对评价进行展示。
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-import { Rate } from '@nutui/nutui';
-
-const app = createApp();
-app.use(Rate);
-```
-
-## 代码演示
-
-### 基础用法
-
-``` html
-<nut-rate v-model="value" />
-```
-
-``` javascript
-import { ref } from 'vue';
-setup() {
-    const value = ref(3);
-    return { value }
-}
-```
-
-### 自定义icon
-
-``` html
-<nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
-```
-
-### 自定义数量
-
-``` html
-<nut-rate :total="6" v-model="value" />
-```
-
-### 自定义颜色
-
-``` html
-<nut-rate active-color="#FFC800" v-model="value" />
-```
-
-### 禁用状态
-
-``` html
-<nut-rate disabled v-model="value" />
-```
-
-### 只读
-
-``` html
-<nut-rate v-model="value" readOnly />
-```
-### 绑定事件
-
-``` html
-<nut-rate v-model="value" @change="onChange" />
-```
-``` javascript
-import { ref } from 'vue';
-setup() {
-    const value = ref(3);
-    const onChange = (val)=>{
-        Toast.text(val);
-    }
-    return { value }
-}
-```
-### 自定义尺寸
-
-``` html
-<nut-rate v-model="value" icon-size="35" />
-```
-
-
-
-## Prop
-
-| 字段           | 说明                                      | 类型    | 默认值      |
-|----------------|-------------------------------------------|---------|-------------|
-| v-model        | 当前 star 数,可使用 v-model 双向绑定数据 | Number  | -           |
-| count          | star 总数                                 | Number  | 5           |
-| icon-size      | star 大小                                 | Number  | 18          |
-| active-color   | 图标选中颜色                              | String  | #fa200c     |
-| void-color     | 图标未选中颜色                            | String  | #ccc        |
-| unchecked-icon | 使用图标(未选中)                          | String  | star-n      |
-| checked-icon   | 使用图标(选中)                            | String  | star-fill-n |
-| allow-half     | 是否半星                                  | Boolean | false       |
-| readonly       | 是否只读                                  | Boolean | false       |
-| disabled       | 是否禁用                                  | Boolean | false       |
-| spacing        | 间距                                      | Number  | 20          |
-
-## Event
-| 字段   | 说明                       | 回调参数 |
-|--------|----------------------------|----------|
-| change | 当前分值修改时时触发的事件 | 当前值   |

+ 1 - 1
src/packages/__VUE/swiper/doc.taro.md

@@ -1,4 +1,4 @@
-# Swiper 轮播图 组件
+# Swiper 轮播
 
 ### 介绍
 

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

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

+ 0 - 87
src/packages/__VUE/textarea/doc.taro.md

@@ -1,87 +0,0 @@
-# TextArea 文本域组件
-
-### 介绍
-
-文本框内输入或编辑文字,支持限制输入数量。
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-import { TextArea } from '@nutui/nutui';
-
-const app = createApp();
-app.use(TextArea);
-
-```
-## 代码演示
-
-### 基础用法
-
-
-```html
-<nut-textarea v-model="value" />
-```
-``` javascript
-import { ref } from 'vue';
-
-export default {
-  setup() {
-    const value = ref('');
-    return { value };
-  },
-};
-```
-
-### 显示字数统计
-
-
-```html
-<nut-textarea v-model="value" limit-show max-length="20" />
-```
-
-### 高度自定义,拉伸
-
-
-```html
-<nut-textarea v-model="value" rows="10" autosize />
-```
-### 直读、禁用
-
-
-```html
-<nut-textarea readonly model-value="textarea直读状态" />
-<nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
-```
-
-
-### Prop
-
-| 参数        | 说明                                             | 类型           | 默认值         |
-|-------------|--------------------------------------------------|----------------|----------------|
-| v-model     | 输入值,支持双向绑定                             | String         | -              |
-| placeholder | 设置占位提示文字                                 | String         | `'请输入内容'` |
-| max-length  | 限制最长输入字符                                 | String、Number | -              |
-| rows        | textarea的高度                                   | String、Number | `2`            |
-| limit-show  | textarea是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
-| autosize    | 高度是否可拉伸                                   | Boolean        | `false`        |
-| text-align  | 文本位置,可选值`left`,`center`,`right`           | String         | `left`         |
-| readonly    | 只读属性                                         | Boolean        | `false`        |
-| disabled    | 禁用属性                                         | Boolean        | `false`        |
-
-
-### Event
-
-| 名称   | 说明           | 回调参数 |
-|--------|----------------|----------|
-| change | 输入内容时触发 | val      |
-| focus  | 聚焦时触发     | val      |
-| blur   | 失焦时触发     | val      |
-
-
-
-
-
-
-
-