ソースを参照

feat: temp 测试组件

richard1015 5 年 前
コミット
5b9497b29e

+ 9 - 0
src/config.ts

@@ -26,6 +26,15 @@ export const nav = [
     name: '基础组件',
     packages: [
       {
+        name: 'Temp',
+        sort: 1,
+        cName: '模板组件',
+        type: 'component',
+        show: true,
+        desc: '组件模板示例',
+        author: 'richard1015'
+      },
+      {
         name: 'Cell',
         sort: 1,
         cName: '单元格组件',

+ 25 - 0
src/packages/temp/demo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</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>
+.nut-temp {
+}
+</style>

+ 65 - 0
src/packages/temp/doc.md

@@ -0,0 +1,65 @@
+# Temp xx组件
+
+### 介绍
+
+基于 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`,默认单位为`px` | _number \| string_ | - |
+| class-prefix | 类名前缀,用于使用自定义图标 | _string_ | `nutui-icon` |
+| tag | HTML 标签 | _string_ | `i` |
+
+### Events
+
+| 事件名 | 说明           | 回调参数       |
+| ------ | -------------- | -------------- |
+| click  | 点击图标时触发 | _event: Event_ |
+

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

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

+ 40 - 0
src/packages/temp/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <view :class="classes" @click="handleClick">
+    <view>{{ name }}</view>
+    <view>{{ txt }}</view>
+  </view>
+</template>
+<script lang="ts">
+import { toRefs, PropType } 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, slots }) {
+    const { name, txt } = toRefs(props);
+
+    const handleClick = (event: Event) => {
+      emit('click', event);
+    };
+
+    return { name, txt, handleClick };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>