gl-element v0.0.3

gl-element

下载

npm install gl-element

导入

import glElement from 'gl-element'
import 'gl-element/dist/gl-element.css'
Vue.use(glElement)

使用

gl-alert 提示信息

用于页面中展示重要的提示信息
<!-- 文字内容 -->
<gl-alert title="自定义文字内容" />
<gl-alert>
  <template slot="title">
    自定义内容
  </template>
</gl-alert>

<!-- 主题风格 -->
<gl-alert type="success" title="成功提示" />
<gl-alert type="info" title="消息提示" />
<gl-alert type="warning" title="警告提示" />
<gl-alert type="error" title="错误提示" />

<!-- 是否关闭 -->
<gl-alert :closable="false" />

<!-- 关闭事件 -->
<gl-alert @close="onClose" />

<!-- 文字居中 -->
<gl-alert center />

gl-link 文字超链接

<!-- 类型 -->
<gl-link type="default">默认链接</gl-link>
<gl-link type="primary">主要链接</gl-link>
<gl-link type="success">成功链接</gl-link>
<gl-link type="warning">警告链接</gl-link>
<gl-link type="danger">危险链接</gl-link>
<gl-link type="info">信息链接</gl-link>

<!-- 是否需要下划线 -->
<gl-link :underline="false">没有下划线</gl-link>

<!-- 是否禁用状态 -->
<gl-link disabled>禁用状态</gl-link>

gl-input 输入框

<!-- 基本用法 -->
<gl-input type="text" placeholder="请输入内容" />
<!-- 双向绑定 -->
<gl-input type="text" v-model="msg" />
data() { return { msg:'' } }
<!-- 事件 -->
<gl-input type="text" @focus="onFocus" @blur="onBlur" />

methods:{ onFocus(){ console.log('获得焦点'); }, onBlur(){
console.log('失去焦点'); } }

gl-switch 开关

<!-- 双向绑定 -->
<gl-switch v-model="isShow" />

data() { return { isShow:false, } }

gl-form 表单

<!-- gl-form -->
<gl-form label-width="100px">
  <!-- gl-formitem -->
  <gl-formitem label="昵称">
    <gl-input type="text" />
  </gl-formitem>
  <gl-formitem label="密码">
    <gl-input type="password" />
  </gl-formitem>
</gl-form>

gl-button 按钮

<!-- 按钮类型 -->
<gl-button>默认按钮</gl-button>
<gl-button type="primary">主要按钮</gl-button>
<gl-button type="success">成功按钮</gl-button>
<gl-button type="info">信息按钮</gl-button>
<gl-button type="warning">警告按钮</gl-button>
<gl-button type="danger">危险按钮</gl-button>

<!-- 朴素按钮 -->
<gl-button type="success" plain>朴素按钮</gl-button>

<!-- 圆角按钮 -->
<gl-button type="success" round>圆角按钮</gl-button>

gl-dialog 对话框

<gl-dialog :visible.sync="showDialog" title="对话框">
  <!-- 内容 -->
  <gl-form label-width="80px">
    <gl-formitem label="昵称">
      <gl-input type="text" />
    </gl-formitem>
    <gl-formitem label="密码">
      <gl-input type="password" />
    </gl-formitem>
  </gl-form>
  <!-- 底部插槽 -->
  <template slot="footer">
    <gl-button type="primary">确定</gl-button>
    <gl-button>取消</gl-button>
  </template>
</gl-dialog>

message 消息框

//默认消息框
this.$message({ message: '这是一个消息框' })
// 成功消息框
this.$message({
  message: '成功消息',
  type: 'success',
  duration: 3000 //消失的时间
})
//警告消息框
this.$message({
  message: '警告消息',
  type: 'warning'
})
//错误消息框
this.$message({
  message: '错误消息',
  type: 'error'
})

说明

简易的饿了么的组件库! ^(*￣(oo)￣)^