vite-plugin-markdown-preview icon indicating copy to clipboard operation
vite-plugin-markdown-preview copied to clipboard

这个插件可以生成vue组件的使用文档吗?

Open elarbor opened this issue 1 year ago • 0 comments

比如这组件,生成使用文档,不止体验文档

<template>
  <a-input readonly allowClear :value="value" :maxlength="8" :size="meta?.size" :disabled="meta?.disabled" :placeholder="meta?.placeholder" @click="inputVisible = !inputVisible">
    <template #suffix>
      <UpOutlined />
    </template>
  </a-input>
  <a-card :bordered="false" v-show="inputVisible">
    <a-space>
      <a-input-number :size="meta?.size" v-model:value="day" addon-after="天" :min="1" :max="meta?.dayMax || 31" :placeholder="meta?.dayPlaceholder"  />
      <a-input-number :size="meta?.size" v-model:value="hours" addon-after="小时" :min="1" :max="meta?.hoursMax || 23" :placeholder="meta?.hoursPlaceholder"  />
    </a-space>
  </a-card>
</template>

<script setup lang="ts">
/**
* @author        全易
* @time          2024-09-06 13:26:36  星期五
* @description   天+时 时效输入框
* @use           <MTimeLimit v-model="value" :value="value" />     【v-model="value" 联动子组件数据  :value="value" 是默认值】
**/
import { ref, watch } from 'vue';
import { UpOutlined } from '@ant-design/icons-vue';

const props = defineProps<{
  value?: string  // 默认值
  meta?: any      // 元数据
}>()

const day = ref();
const hours = ref();
const inputVisible = ref(false);
const value = defineModel();// 双向绑定父组件

// 默认赋值
watch(() => props.value, (now) => {
  value.value = now || "";
  day.value = parseInt(now?.split(" ")[0] as string);   // 空格分割
  hours.value = parseInt(now?.split(" ")[1] as string); // 空格分割
}, { immediate: true });

// 双向绑定视图层
watch(() => [day.value, hours.value], ([day, hours]) => {
  value.value = `${day ? day + '天' : ''} ${hours ? hours + '小时' : ''}`; // 必须空格
})

</script>

<style scoped lang="scss"></style>

这个插件可以生成组件的参数、事件、方法、插槽等对应的md是文件,可以吗?

elarbor avatar Oct 10 '24 09:10 elarbor