vdrag-ui v1.0.2

vDrag属性UI

1. 输入框组件(gv-input)

• 属性

  参数	类型	描述	默认值	备注
  pad	String	同style中的padding	0 15px 15px
  indent	Boolean	是否缩进	false
  label	String	内容描述	label
  labelPosition	String	label显示的位置	top	有效值为left或top
  value.sync	String|null	绑定值
  placeholder	String	无输入值时显示的内容	请输入
  autoSelect	Boolean	获得焦点时选中输入值	true
  prefix	String	输入框前面的图标类名		支持element-ui icon
  suffix	String	输入框后面的图标类名		支持element-ui icon

• 事件

  事件	描述	参数
  blur	输入框失去焦点
  focus	输入框获得焦点
  enter	回车键按下

• 示例

  // 1.基础用法
  <gv-input :value.sync="name" label="姓名"></gv-input>
  
  // 2.suffix点位符
  <gv-input :value.sync="name" label="姓名">
  <i class="el-icon-delete" slot="suffix"></i>
  </gv-input>
  
  // 3.prefix点位符
  <gv-input :value.sync="name" label="姓名">
  <i class="el-icon-delete" slot="prefix"></i>
  </gv-input>
  
  // 4.append点位符
  <gv-input :value.sync="name" label="姓名">
  <i class="el-icon-delete" slot="append"></i>
  </gv-input>

2. 输入框组件(gv-input)

• 属性

  参数	类型	描述	默认值	备注
  pad	String	同style中的padding	0 15px 15px
  indent	Boolean	是否缩进	false
  label	String	内容描述	label
  labelPosition	String	label显示的位置	top	有效值为left或top
  value.sync	Number	绑定值
  placeholder	String	无输入值时显示的内容	请输入
  autoSelect	Boolean	获得焦点时选中输入值	true
  prefix	String	输入框前面的图标类名		支持element-ui icon
  suffix	String	输入框后面的图标类名		支持element-ui icon
  min	Number	最小值
  max	Number	最大值
  step	Number	步长

• 示例

  <gv-number :value.sync="age" label="年龄"></gv-number>

3. 按钮(gv-button)

• 属性

  参数	类型	描述	默认值	备注
  pad	String	同style中的padding	0 15px 15px
  icon	String	显示在按钮上的图标		支持element-ui icon,
  label	String	内容描述	label

• 事件

  事件	描述	参数
  click	单击事件

• 示例

  <gv-button @click='onClick' label="提交"></gv-button>

4. 单选(radio-group)

• 属性

  参数	类型	描述	默认值	备注
  pad	String	同style中的padding	0 15px 15px
  indent	Boolean	是否缩进	false
  label	String	内容描述	label
  column	String	是否按列分布	false
  value.sync	String|Number|null	绑定值
  align	String	对齐方式	default	有效值为left、right、center、default

• gv-radio属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- value.sync|String|绑定值| label|String|内容描述|label

• 示例

  <gv-radio-group :value.sync="sex" label="性别">
      <gv-radio label="男" value="1"></gv-radio>
      <gv-radio label="女" value="2"></gv-radio>
  </gv-radio-group>

5. 复选框(gv-check-box)

• 属性

  参数	类型	描述	默认值	备注
  pad	String	同style中的padding	0 15px 15px
  indent	Boolean	是否缩进	false
  label	String	内容描述	label
  value.sync	String|Number|null	绑定值

• 事件 事件|描述|参数 --|--|-- change|勾选状态发生变化|变化后的值

• 示例

  <gv-check-box label="填充" :value.sync="fill">
  </gv-check-box>

6. 下拉框(gv-select)

• 属性

  参数	类型	描述	默认值	备注
  pad	String	同style中的padding	0 15px 15px
  indent	Boolean	是否缩进	false
  label	String	内容描述	label
  labelPosition	String	label显示的位置	top	有效值为left或top
  value.sync	String|null	绑定值
  placeholder	String	无输入值时显示的内容	请输入
  appendBody	Boolean	是否添加到bdy	false
  icon	String	显示在下拉框中的图标		支持element-ui icon
  allowCreate	Boolean	是否允许创建	false

• gv-option 属性

  参数	类型	描述	默认值	备注
  type	String	类型		有效值为default/primary/success/warning/danger/info
  indent	Boolean	是否缩进	false
  label	String	标签
  value	String	值
  icon	String	显示在下拉框中的图标		支持element-ui icon

• 事件 事件|描述|参数 --|--|-- change|选中值发生变化|当前选中值

• 示例

  <gv-select label="地区">
      <gv-option label="中国" value="china"></gv-option>
      <gv-option label="海外" value="forgen"></gv-option>
  </gv-select>

7. 滑块(gv-slider)

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px indent|Boolean|是否缩进|false label|String|内容描述|label labelPosition|String|label显示的位置|top|有效值为left或top value.sync|String|绑定值 min|Number|最小值| max|Number|最大值| step|Number|步长 tooltip|Boolean|是否显示文字提示 showInput|Boolean|是否显示输入框

• 示例

  <gv-slider label="透明度" 
      :value.sync="alpha" 
      :min="0" 
      :max="1" 
      :step="0.1">
  </gv-slider>

7. 容器(gv-attr-row)

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px indent|Boolean|是否缩进|false label|String|内容描述|label labelPosition|String|label显示的位置|top|有效值为left或top derection|String|布局方向|h|有效值为h或v

• 示例

  <gv-attr-row label="位置">
      <gv-input label="经度" :value="lon" pad="0">
      <gv-input label="纬度" :value="lat" pad="0">
      <gv-input label="海拔" :value="height" pad="0">
  </gv-attr-row>

8. 颜色(gv-color-picker)

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px label|String|内容描述|label labelPosition|String|label显示的位置|left|有效值为left或top value.sync|String|绑定值

• 示例

  <gv-color-picker label="颜色" :value.sync="color">

9. 分组(gv-group)

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0px 0px 20px 0px accordion|String|手风琴模式|left|false value.sync|Array|绑定值
• gv-item 属性

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- label|String|显示文字|| name|String|名称

• 示例

  <gv-group :value.sync="activeName">
      <gv-item label="外观" name="apperance"></gv-item>
      <gv-item label="文字" name="text"></gv-item>
  </gv-group>

10. 字体(gv-font-family)

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px indent|Boolean|是否缩进|false label|String|内容描述|label value.sync|String|绑定值 icon|Boolean|图标类名||支持element-ui icon appendBody|Boolean|是否插入到body

• 示例

  <gv-font-family :value.sync="fontFamily" label="字体"></gv-font-family>

10. 字号(gv-font-size)

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- labelPosition|String|label显示的位置|top|有效值为left或top pad|String|同style中的padding|0 15px 15px indent|Boolean|是否缩进|false, label|String|内容描述|label value.sync|String|绑定值 icon|Boolean|图标类名||支持element-ui icon appendBody|Boolean|是否插入到body|false

• 示例

  <gv-font-size :value.sync="fontSize" label="字号"></gv-font-size>

11. 文字样式(gv-font-style) 设置文字样式

• 属性 参数|类型|描述|默认值 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px bold|Boolean|是否加粗|false italic|String|是否倾斜|false decoration|Object|文字的decoration属性|{underline:false,delete:false} decoration.underline|Boolean|下划线|false| decoration.delete|Boolean|删除线|false
• 示例

  <gv-font-style :bold="true" :italic="false"></gv-font-style>

12. 图标(gv-icon) 一个下拉选择框，用来选择图标(element ui icon)

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px label|String|内容描述|label value.sync|String|绑定值 placeholder|Boolean|未选择时的提示文字|请选择

13. 图片上传(gv-image) 适用于需要一张图片的属性

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px label|String|内容描述|label url.sync|String|图片url indent|Boolean|是否缩进|false
• 示例

  <gv-image :url.sync="image" label="缩略图"></gv-image>

14. 线型(gv-line) 用于选择边框线的类型，比如solid、dotted、dashed

• 属性 参数|类型|描述|默认值 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px label|String|内容描述|线型 value.sync|String|线型|solid indent|Boolean|是否缩进|false appendBody|Boolean|是否插入到body|false placeholder|Boolean|未选择时的提示文字|
• 示例

  <gv-line :value.sync="outlineType" label="边框类型">
  </gv-line>

15. 文本域(gv-textarea)

• 属性 参数|类型|描述|默认值 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px label|String|内容描述|线型 value.sync|String|绑定值| rows|Boolean|行数|5 placeholder|Boolean|未选择时的提示文字|请输入
• 示例

  <gv-textarea :value.sync="desc" label="描述">
  </gv-textarea>

16. 上传(gv-upload)

• 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px label|String|内容描述|线型 url.sync|String|url| type|String|上传文件的类型|image|有效值为image/audio/video/model/other indent|Boolean|是否缩进|false
• 示例

  <gv-upload :url.sync="desc" label="上传图片">
  </gv-upload>