文档数据结构： 后期参考方案渲染到html，配合例子和demo

[Ricky201608]

文档数据结构： 后期参考方案直接将文档渲染到html，配合例子和demo，由我和晓飞完成

[ijython]

今天在没有思路的情况下，大鹏给我了一个思路
参考了一下https://vuikit.js.org/#/switcher这里面的组建文档的定义格式
比如每一个组建有props .slots ,events ,example这几项
props 下面可以用name,type,default,description,examples这几个字段去描述这个组件的props
slots有 name ,description这两个字段去描述
events有name ,description这两个字段去描述
example有name, ,description这两个字段去描述
通过每个属性下的几个字段就可以描述这个属性的用法，然后组成了对一个组件的描述整体如

var btn = {
  props: [
    {
      name: 'type',
      type: 'String',
      default: 'button',
      description: `sss`
    },
    {
      name: 'color',
      type: 'String',
      default: 'blue',
      description: `定义的颜色`
    }
  ],
  slots: [
    {
      name: 'default',
      comment: '内容'
    }
  ],
  events: [
      {
          name: 'changeColor',
          description: `改变颜色`
      },

  ],
  examples: [
    {
      name: 'type',
      text: `
<hf-button :type="button"
  @changeColor="active = !active">
<hf-button>
`
    },
    {
      name: 'color',
      text: `
<hf-button :color="blue"
  @changeColor="active = !active">
<hf-button>
`
    }
  ]
}

这个是大鹏给的例子，然后我又拓展了一下，觉得这样定义确实挺清晰
今天下午我抽时间去和小李子讨论了，看小李子怎样弄，有其它什么思路没
小李子让我参考http://www.cnblogs.com/frank26/p/5986205.html
感觉这个只是把json转成vue进行展示，对每个组件的本身属性字段的定义介绍不是很强
刚开始不知道怎样下手去定义，多谢大鹏的协助，
明天和小李子再讨论一下

[mokeen]

 export default {
    name: 'btn',
    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: String,
      icon: {
        type: String,
        default: ''
      },
      loading: Boolean,
      disabled: Boolean
    },
    methods: {
      handleClick(evt) {
        this.$emit('click', evt);   （子传父）
      }
    }
  }

[Ricky201608]

var btn = {
  props: [
    {
      name: 'type',
      type: 'String',
      default: 'button',
      description: `sss`
    },
    {
      name: 'color',
      type: 'String',
      default: 'blue',
      description: `定义的颜色`
    }
  ],
  slots: [
    {
      name: 'default',
      comment: '内容'
    }
  ],
  events: [
      {
          name: 'changeColor',
          description: `改变颜色`
      },

  ],
  examples: [
    {
      name: 'type',
      text: `
<hf-button :type="button"
  @changeColor="active = !active">
<hf-button>
`
    },
    {
      name: 'color',
      text: `
<hf-button :color="blue"
  @changeColor="active = !active">
<hf-button>
`
    }
  ]
}

文档就按这个模板这样写，一个组件一个js文件，然后这些文档作为数据层，再利用Vue服务端渲染（sav-Vue框架）到页面html，时间大概一周，从下周起，每天要过一下，设计也要给出官网草图