❤
npm
Sign UpSign In

vdrag-ui

1.0.2 • Public • Published

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>
  1. 输入框组件(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>
  1. 按钮(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>
  1. 单选(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>
  1. 复选框(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>
  1. 下拉框(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>
  1. 滑块(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>
  1. 容器(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>
  1. 颜色(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">
  1. 分组(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>
  1. 字体(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>
  1. 字号(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>
  1. 文字样式(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>
  1. 图标(gv-icon) 一个下拉选择框，用来选择图标(element ui icon)
  • 属性 参数|类型|描述|默认值|备注 --|--|--|--|--|-- pad|String|同style中的padding|0 15px 15px label|String|内容描述|label value.sync|String|绑定值 placeholder|Boolean|未选择时的提示文字|请选择
  1. 图片上传(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>
  1. 线型(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>
  1. 文本域(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>
  1. 上传(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>

Readme

Keywords

none

Package Sidebar

Install

npm i vdrag-ui

Weekly Downloads

1

Version

1.0.2

License

none

Unpacked Size

3.39 MB

Total Files

12

Last publish

Collaborators

  • xtfge
Try on RunKit
Report malware