demo.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. var nameLc = 'test';
  2. var demoModel = function(nameLc) {
  3. var temp = {
  4. demo: `<template>
  5. <div class="demo">
  6. <h2>基础用法</h2>
  7. <nut-cell>
  8. <nut-temp name="wifi"></nut-temp>
  9. <nut-temp name="mail" txt="test txt"></nut-temp>
  10. </nut-cell>
  11. </div>
  12. </template>
  13. <script lang="ts">
  14. import { createComponent } from '@/utils/create';
  15. const { createDemo } = createComponent('${nameLc}');
  16. export default createDemo({
  17. props: {},
  18. setup() {
  19. return {};
  20. }
  21. });
  22. </script>
  23. <style lang="scss" scoped>
  24. .nut-temp {
  25. }
  26. </style>
  27. `,
  28. vue: `<template>
  29. <view :class="classes" @click="handleClick">
  30. <view>{{ name }}</view>
  31. <view>{{ txt }}</view>
  32. </view>
  33. </template>
  34. <script lang="ts">
  35. import { toRefs } from 'vue';
  36. import { createComponent } from '@/utils/create';
  37. const { componentName, create } = createComponent('${nameLc}');
  38. export default create({
  39. props: {
  40. name: {
  41. type: String,
  42. default: ''
  43. },
  44. txt: {
  45. type: String,
  46. default: ''
  47. }
  48. },
  49. components: {},
  50. emits: ['click'],
  51. setup(props, { emit }) {
  52. console.log('componentName', componentName);
  53. const { name, txt } = toRefs(props);
  54. const handleClick = (event: Event) => {
  55. emit('click', event);
  56. };
  57. return { name, txt, handleClick };
  58. }
  59. });
  60. </script>
  61. <style lang="scss">
  62. @import 'index.scss';
  63. </style>
  64. `,
  65. doc: `# ${nameLc}组件
  66. ### 介绍
  67. 基于 xxxxxxx
  68. ### 安装
  69. ${''}
  70. ## 代码演示
  71. ### 基础用法1
  72. ## API
  73. ### Props
  74. | 参数 | 说明 | 类型 | 默认值 |
  75. |--------------|----------------------------------|--------|------------------|
  76. | name | 图标名称或图片链接 | String | - |
  77. | color | 图标颜色 | String | - |
  78. | size | 图标大小,如 '20px' '2em' '2rem' | String | - |
  79. | class-prefix | 类名前缀,用于使用自定义图标 | String | 'nutui-iconfont' |
  80. | tag | HTML 标签 | String | 'i' |
  81. ### Events
  82. | 事件名 | 说明 | 回调参数 |
  83. |--------|----------------|--------------|
  84. | click | 点击图标时触发 | event: Event |
  85. `
  86. };
  87. return temp;
  88. };
  89. module.exports = demoModel;