浏览代码

fix: 导航栏设置可隐藏,增加多选框模版

Ymm0008 5 年之前
父节点
当前提交
771fe6d850

+ 22 - 0
src/packages/checkbox/demo.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="demo">
+    <h2>checkbox</h2>
+    <nut-cell>
+      <nut-temp name="wifi"></nut-temp>
+      <nut-temp name="mail" txt="test txt"></nut-temp>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('temp');
+export default createDemo({
+  props: {},
+  setup() {
+    return {};
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

+ 64 - 0
src/packages/checkbox/doc.md

@@ -0,0 +1,64 @@
+# Checkbox 组件
+
+### 介绍
+
+基于 xxxxxxx
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Temp } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Temp);
+
+```
+
+## 代码演示
+
+### 基础用法1
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+```html
+<nut-temp name="wifi"></nut-temp>
+<nut-temp name="mail"></nut-temp>
+```
+
+### 基础用法2
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+```html
+<nut-temp name="wifi"></nut-temp>
+<nut-temp name="mail"></nut-temp>
+```
+
+### 基础用法3
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+```html
+<nut-temp name="wifi"></nut-temp>
+<nut-temp name="mail"></nut-temp>
+```
+
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| name         | 图标名称或图片链接               | String | -                |
+| color        | 图标颜色                         | String | -                |
+| size         | 图标大小,如 `20px` `2em` `2rem` | String | -                |
+| class-prefix | 类名前缀,用于使用自定义图标     | String | `nutui-iconfont` |
+| tag          | HTML 标签                        | String | `i`              |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| click  | 点击图标时触发 | event: Event |

+ 2 - 0
src/packages/checkbox/index.scss

@@ -0,0 +1,2 @@
+.nut-temp {
+}

+ 42 - 0
src/packages/checkbox/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <view :class="classes" @click="handleClick">
+    <view>{{ name }}</view>
+    <view>{{ txt }}</view>
+  </view>
+</template>
+<script lang="ts">
+import { toRefs } from 'vue';
+import { createComponent } from '@/utils/create';
+const { componentName, create } = createComponent('temp');
+
+export default create({
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    txt: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {},
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    console.log('componentName', componentName);
+
+    const { name, txt } = toRefs(props);
+
+    const handleClick = (event: Event) => {
+      emit('click', event);
+    };
+
+    return { name, txt, handleClick };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

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

@@ -14,11 +14,13 @@
     <ol v-for="_nav in nav" :key="_nav">
       <li>{{ _nav.name }}</li>
       <ul>
-        <li :class="{ active: isActive(_package.name) }" v-for="_package in _nav.packages" :key="_package">
-          <router-link :to="_package.name.toLowerCase()">
-            {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
-          </router-link>
-        </li>
+        <template :class="{ active: isActive(_package.name) }" v-for="_package in _nav.packages" :key="_package">
+          <li v-if="_package.show">
+            <router-link :to="_package.name.toLowerCase()">
+              {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
+            </router-link>
+          </li>
+        </template>
       </ul>
     </ol>
   </div>

+ 6 - 4
src/sites/mobile/components/Index.vue

@@ -11,10 +11,12 @@
       <ol v-for="_nav in nav" :key="_nav">
         <li>{{ _nav.name }}</li>
         <ul>
-          <li v-for="_package in _nav.packages" :key="_package">
-            <router-link :to="_package.name.toLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}</router-link>
-            <nut-icon size="14px" color="#979797" name="right"></nut-icon>
-          </li>
+          <template v-for="_package in _nav.packages" :key="_package">
+            <li v-if="_package.show">
+              <router-link :to="_package.name.toLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}</router-link>
+              <nut-icon size="14px" color="#979797" name="right"></nut-icon>
+            </li>
+          </template>
         </ul>
       </ol>
     </div>

+ 0 - 1
src/utils/useRelation/useChildren.ts

@@ -35,7 +35,6 @@ export function flattenVNodes(children: VNodeNormalizedChildren) {
   return result;
 }
 
-// sort children instances by vnodes order
 export function sortChildren(
   parent: ComponentInternalInstance,
   publicChildren: ComponentPublicInstance[],