Browse Source

docs: modify nav selected

suzigang 4 years ago
parent
commit
fcf23cde06

+ 0 - 1
src/config.json

@@ -403,7 +403,6 @@
           "version": "3.0.0",
           "name": "Range",
           "taro": true,
-          "tarodoc": true,
           "type": "component",
           "cName": "区间选择器",
           "desc": "滑动输入条,用于在给定的范围内选择一个值。",

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

@@ -7,7 +7,10 @@
 ### 安装
 ``` javascript
 import { createApp } from 'vue';
+//vue
 import { Avatar } from '@nutui/nutui';
+//mp
+import { Avatar } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(Avatar);
@@ -68,4 +71,4 @@ app.use(Avatar);
 
 | 字段     | 说明                 | 类型     | 回调参数 |
 |----------|----------------------|----------|----------|
-| active-avatarror | 点击图片触发事件 | Function | event    |
+| active-avatarror | 点击图片触发事件 | Function | event    |

+ 0 - 74
src/packages/__VUE/avatar/doc.taro.md

@@ -1,74 +0,0 @@
-# Avatar 头像
-
-### 介绍
-
-用来代表用户或事物,支持图片、图标或字符展示。
-
-### 安装
-``` javascript
-import { createApp } from 'vue';
-//vue
-import { Avatar } from '@nutui/nutui';
-//mp
-import { Avatar } from '@nutui/nutui@taro';
-
-const app = createApp();
-app.use(Avatar);
-```
-
-## 代码示例
-
-### 基本用法
-
-内置 smal / normal / large 三种尺寸规格
-
-``` html
-<nut-avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>
-<nut-avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>
-<nut-avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
-></nut-avatar>  
-```
-
-### 修改形状类型
-
-``` html
-<nut-avatar shape="square"></nut-avatar>
-<nut-avatar shape="round"></nut-avatar>
-```
-
-### 修改背景色
-
-``` html
-<nut-avatar bg-color="#f0250f"></nut-avatar>
-```
-
-### 修改背景icon
-
-``` html
-<nut-avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
-```
-
-### 设置头像的文本内容
-
-``` html
-<nut-avatar icon>N</nut-avatar>
-```
-
-
-### Prop
-
-| 字段     | 说明                                                                     | 类型   | 默认值 |
-|----------|--------------------------------------------------------------------------|--------|--------|
-| bg-color | 设置头像背景色                                                           | String | #eee   |
-| size     | 设置头像的大小,提供三种:large/normal/small,支持直接输入数字           | String | normal |
-| shape    | 设置头像的形状,默认是圆形,可以设置为square方形                         | String | round  |
-| src      | 设置头像的背景图片                                                       | String | ''     |
-| icon     | 设置头像的icon图标, 优先级低于src,类似Icon组件的name属性,支持名称和链接 | String | ''     |
-
-### Events
-
-| 字段     | 说明                 | 类型     | 回调参数 |
-|----------|----------------------|----------|----------|
-| active-avatarror | 点击图片触发事件 | Function | event    |

+ 14 - 3
src/packages/__VUE/calendar/index.taro.vue

@@ -1,10 +1,10 @@
 <template>
   <nut-popup
     v-if="poppable"
-    v-model:visible="visible"
+    v-model:visible="show"
     position="bottom"
     round
-    :closeable="true"
+    closeable
     @click-overlay="closePopup"
     @click-close-icon="closePopup"
   >
@@ -40,7 +40,7 @@
   </nut-calendar-item>
 </template>
 <script lang="ts">
-import { PropType, ref } from 'vue';
+import { PropType, ref, watch } from 'vue';
 import { createComponent } from '../../utils/create';
 const { create } = createComponent('calendar');
 import Popup from '../popup/index.taro.vue';
@@ -84,15 +84,18 @@ export default create({
   },
   emits: ['choose', 'close', 'update:visible'],
   setup(props, { emit }) {
+    let show = ref(props.visible);
     // element refs
     const calendarRef = ref<null | HTMLElement>(null);
 
     // methods
     const update = () => {
+      show.value = false;
       emit('update:visible', false);
     };
 
     const close = () => {
+      show.value = false;
       emit('close');
       emit('update:visible', false);
     };
@@ -106,7 +109,15 @@ export default create({
       close();
     };
 
+    watch(
+      () => props.visible,
+      (value: boolean) => {
+        show.value = value;
+      }
+    );
+
     return {
+      show,
       closePopup,
       update,
       close,

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

@@ -1,4 +1,4 @@
-#  Datepicker组件
+#  Datepicker 日期选择器
 
 ### 介绍
     

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

@@ -1,4 +1,4 @@
-#  Picker组件
+#  Picker 选择器
 
 ### 介绍
     

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

@@ -1,4 +1,4 @@
-# Price 价格
+# Price 商品价格
 
 ### 介绍
 
@@ -8,7 +8,10 @@
 
 ``` javascript
 import { createApp } from 'vue';
+//vue
 import { Price } from '@nutui/nutui';
+//mp
+import { Price } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(Price);

+ 0 - 65
src/packages/__VUE/price/doc.taro.md

@@ -1,65 +0,0 @@
-# Price 商品价格
-
-### 介绍
-
-用来对商品价格数值的小数点前后部分应用不同样式,还支持人民币符号、千位分隔符、设置小数点位数等功能。
-
-### 安装
-
-``` javascript
-import { createApp } from 'vue';
-//vue
-import { Price } from '@nutui/nutui';
-//mp
-import { Price } from '@nutui/nutui@taro';
-
-const app = createApp();
-app.use(Price);
-
-```
-
-## 代码示例
-
-### 基本用法
-
-``` html
-<nut-price :price="1010" :need-symbol="false" :thousands="true" />
-```
-
-### 有人民币符号,无千位分隔
-
-``` html
-<nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
-```
-
-### 带人民币符号,有千位分隔,保留小数点后三位
-
-``` html
-<nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
-```
-### 异步随机变更
-
-``` html
-<nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
-```
-``` javascript
-setup() {
-    const price = ref(0);
-    setInterval(() => {
-        price.value = Math.random()*10000000;
-    }, 1000);
-    return {
-        price
-    };
-}
-```
-
-### Prop
-
-| 字段           | 说明                     | 类型    | 默认值 |
-|----------------|--------------------------|---------|--------|
-| price          | 价格数量                 | Number  | 0      |
-| need-symbol    | 是否需要加上 symbol 符号 | Boolean | true   |
-| symbol         | 符号类型                 | String  | &yen;  |
-| decimal-digits | 小数位位数               | Number  | 2      |
-| thousands      | 是否按照千分号形式显示   | Boolean | false  |

+ 0 - 146
src/packages/__VUE/range/doc.taro.md

@@ -1,146 +0,0 @@
-# Range组件
-
-### 介绍
-  
-滑动输入条,用于在给定的范围内选择一个值。
-
-### 安装
-
-```javascript
-import { createApp } from 'vue';
-import { Range } from '@nutui/nutui';
-const app = createApp();
-app.use(Range);
-```
-
-## 代码演示
-
-### 基础用法
-```html
-<nut-range v-model="value" @change="onChange"></nut-range>
-```
-```javascript
-import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
-
-export default {
-  setup() {
-    const value = ref(40);
-    const onChange = (value) => Toast.text('当前值:' + value);
-    return {
-      value,
-      onChange,
-    };
-  },
-};
-```
-
-### 双滑块
-```html
-<nut-range range v-model="value" @change="onChange"></nut-range>
-```
-```javascript
-import { ref } from 'vue';
-import { Toast } from '@nutui/nutui';
-
-export default {
-  setup() {
-    const value = ref([20, 80]);
-    const onChange = (value) => Toast.text('当前值:' + value);
-    return {
-      value,
-      onChange,
-    };
-  },
-};
-```
-
-### 指定范围
-```html
-<nut-range v-model="value" :max="10" :min="-10" @change="onChange"></nut-range>
-```
-
-### 设置步长
-```html
-<nut-range v-model="value" :step="5" @change="onChange"></nut-range>
-```
-### 隐藏范围
-```html
-<nut-range v-model="value" hidden-range @change="onChange"></nut-range>
-```
-
-### 隐藏标签
-```html
-<nut-range v-model="value" hidden-tag @change="onChange"></nut-range>
-```
-
-### 禁用
-```html
-<nut-range v-model="value" disabled @change="onChange"></nut-range>
-```
-
-### 自定义样式
-```html
-<nut-range
-  v-model="value"
-  inactive-color="rgba(163,184,255,1)"
-  button-color="rgba(52,96,250,1)"
-  active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%"
-  @change="onChange">
-</nut-range>
-```
-
-### 自定义按钮
-```html
-<nut-range v-model="value" @change="onChange">
-  <template #button>
-    <div class="custom-button">{{ value }}</div>
-  </template>
-</nut-range>
-
-<style>
-  .custom-button {
-    width: 26px;
-    color: #fff;
-    font-size: 10px;
-    line-height: 18px;
-    text-align: center;
-    background-color: #ee0a24;
-    border-radius: 100px;
-  }
-</style>
-```
-
-  ## API
-  
-  ### Props
-  
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| v-model | 当前进度百分比 | Number、Number[] | `0` |
-| range | 是否开启双滑块模式 | Boolean | `false` |
-| max | 最大值 | Number、String | `100` |
-| min | 最小值 | Number、String | `0` |
-| step | 步长 | Number、String | `1` |
-| disabled | 是否禁用滑块 | Boolean | `false` |
-| hidden-range | 是否隐藏范围值 | Boolean | `false` |
-| hidden-tag | 是否隐藏标签 | Boolean | `false` |
-| active-color | 进度条激活态颜色 | String | `rgba(250, 44, 25, 1)` |
-| inactive-color | 进度条非激活态颜色 | String | `rgba(255, 163, 154, 1)` |
-| button-color | 按钮颜色 | String | `rgba(250, 44, 25, 1)` |
-
-  
-### Events
-
-| 事件名             | 说明                     | 回调参数        |
-| ------------------ | ------------------------ | --------------- |
-| change             | 进度变化且结束拖动后触发 | value: 当前进度 |
-| drag-start         | 开始拖动时触发           | -               |
-| drag-end           | 结束拖动时触发           | -               |
-
-### Slots
-
-| 名称   | 说明           |
-| ------ | -------------- |
-| button | 自定义滑动按钮 |
-

+ 6 - 5
src/sites/doc/components/Nav.vue

@@ -52,11 +52,12 @@ export default defineComponent({
   setup() {
     const isActive = computed(() => {
       return function (name: string) {
-        return (
-          RefData.getInstance().currentRoute.value == name.toLowerCase() ||
-          RefData.getInstance().currentRoute.value.indexOf(name.toLowerCase()) >
-            -1
-        );
+        const currentValue = RefData.getInstance().currentRoute.value;
+        let value =
+          currentValue.indexOf('-taro') > -1
+            ? currentValue.split('-taro')[0]
+            : currentValue;
+        return value == name.toLowerCase();
       };
     });
     return {