介绍

terse-ui是一个基于vue的开源ui个人项目,提供了一些常用的组件,适合在桌面端使用。

安装

npm 安装

npm install terse-ui

yarn安装

推荐使用yarn安装。

yarn add terse-ui

引入

完整引入 在 main.js 中写入以下内容,而后即可使用。

import Vue from 'vue';
import terse from 'terse-ui';
import 'terse-ui/lib/terse-ui.css'
import App from './App.vue';

Vue.use(terse-ui);

new Vue({
  el: '#app',
  render: h => h(App)
});

组件

图标-Icon

非常感谢阿里iconfont开源库，给我们提供了很多优质的图标。这里提供了一些图标，如果您觉得不满足您的需求，你可以 直接导入您自身项目的iconfont.css,而后给 terse-icon组件添加相对应的name属性即可使用。

基本用法

<template>
  <ul>
    <li v-for="name of iconList" :key="name">
      <terse-icon :name="name"></terse-icon>
    </li>
  </ul>
</template>

<script>

  export default {
    data() {
      return {
        iconList: ['icon-warn-line', 'icon-Userpersonavtar', 'icon-shop',
          'icon-cross', 'icon-right', 'icon-left']
      }
    }
  }
</script>

<style scoped>
  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
  }

  ul > li {
    width: 30%;
    text-align: center;
    border: 1px solid #ccc;
    line-height: 25px;
  }
</style>

显示代码

给图标添加颜色和设置尺寸

<template>
  <div>
    <terse-icon name="icon-shop" color="red"></terse-icon>
    <terse-icon name="icon-shop" :size="24"></terse-icon>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>

</style>

显示代码

相关参数

参数	说明	类型	默认值
name	图标的类名	string	——
color	图标的颜色	string	#000
size	图标的尺寸	number	16(单位:px)

布局容器

用于布局的容器组件，方便快速搭建页面的基本结构： 外层容器。当子元素中包含顶栏容器或者底栏容器时，全部子元素会垂直上下排列，否则会水平左右排列。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容

常见页面布局

Header

Main

Header

Main

Footer

Aside

Main

Header

Aside

Main

Header

Aside

Main

Footer

Aside

Header

Main

Aside

Header

Main

Footer

<template>
    <div id="app">
        <terse-container>
            <terse-header>Header</terse-header>
            <terse-main>Main</terse-main>
        </terse-container>

        <terse-container>
            <terse-header>Header</terse-header>
            <terse-main>Main</terse-main>
            <terse-footer>Footer</terse-footer>
        </terse-container>

        <terse-container>
            <terse-aside :width="200">Aside</terse-aside>
            <terse-main>Main</terse-main>
        </terse-container>

        <terse-container>
            <terse-header>Header</terse-header>
            <terse-container>
                <terse-aside :width="200">Aside</terse-aside>
                <terse-main>Main</terse-main>
            </terse-container>
        </terse-container>

        <terse-container>
            <terse-header>Header</terse-header>
            <terse-container>
                <terse-aside :width="200">Aside</terse-aside>
                <terse-container>
                    <terse-main>Main</terse-main>
                    <terse-footer>Footer</terse-footer>
                </terse-container>
            </terse-container>
        </terse-container>

        <terse-container>
            <terse-aside :width="200">Aside</terse-aside>
            <terse-container>
                <terse-header>Header</terse-header>
                <terse-main>Main</terse-main>
            </terse-container>
        </terse-container>

        <terse-container>
            <terse-aside :width="200">Aside</terse-aside>
            <terse-container>
                <terse-header>Header</terse-header>
                <terse-main>Main</terse-main>
                <terse-footer>Footer</terse-footer>
            </terse-container>
        </terse-container>
    </div>
</template>
<script>
  export default {}
</script>

<style>
    .terse-header, .terse-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .terse-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .terse-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    #app > .terse-container {
        margin-bottom: 40px;
    }

    .terse-container:nth-child(5) .terse-aside,
    .terse-container:nth-child(6) .terse-aside {
        line-height: 260px;
    }

    .terse-container:nth-child(7) .terse-aside {
        line-height: 320px;
    }
</style>

显示代码

布局-Layout

通过基础的 24 分栏，迅速简便地创建布局。

基础布局

<template>
    <div id="app">
        <terse-row>
            <terse-col :span="24">
                <div class="wrapper bg-dark"></div>
            </terse-col>
        </terse-row>
        <terse-row>
            <terse-col :span="6">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="6">
                <div class="wrapper bg-light"></div>
            </terse-col>
            <terse-col :span="6">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="6">
                <div class="wrapper bg-light"></div>
            </terse-col>
        </terse-row>
        <terse-row>
            <terse-col :span="4">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="4">
                <div class="wrapper bg-light"></div>
            </terse-col>
            <terse-col :span="4">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="4">
                <div class="wrapper bg-light"></div>
            </terse-col>
            <terse-col :span="4">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="4">
                <div class="wrapper bg-light"></div>
            </terse-col>
        </terse-row>
    </div>
</template>
<script>
  export default {
    name: 'app'
  }
</script>

<style>
    #app > .terse-row {
        margin-bottom: 20px;
    }

    .wrapper {
        min-height: 50px;
    }

    .bg-dark {
        background: #99a9bf;
    }

    .bg-light {
        background: #e5e9f2;
    }
</style>

显示代码

分栏间隔

分栏之间存在间隔。可以通过给terse-row该组件设置gutter值来设置分割。推荐设置20

<template>
    <div id="app">
        <terse-row :gutter="20">
            <terse-col :span="6">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="6">
                <div class="wrapper bg-light"></div>
            </terse-col>
            <terse-col :span="6">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="6">
                <div class="wrapper bg-light"></div>
            </terse-col>
        </terse-row>
    </div>
</template>
<script>
  export default {
    name: 'app'
  }
</script>

<style>
    #app {
        overflow-x: hidden;
    }

    .wrapper {
        min-height: 50px;
    }

    .bg-dark {
        background: #99a9bf;
    }

    .bg-light {
        background: #e5e9f2;
    }
</style>

显示代码

分栏偏移

通过设置offset来指定偏移的栏数

<template>
    <div id="app">
        <terse-row >
            <terse-col :span="4" :offset="2">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="2" :offset="4">
                <div class="wrapper bg-light"></div>
            </terse-col>
            <terse-col :span="5" :offset="1">
                <div class="wrapper bg-dark"></div>
            </terse-col>
            <terse-col :span="6">
                <div class="wrapper bg-light"></div>
            </terse-col>
        </terse-row>
    </div>
</template>
<script>
  export default {
    name: 'app'
  }
</script>

<style>
    .wrapper {
        min-height: 50px;
    }

    .bg-dark {
        background: #99a9bf;
    }

    .bg-light {
        background: #e5e9f2;
    }
</style>

显示代码

row相关参数

参数	说明	类型	默认值
gutter	栅栏间隔(单位:px)	Number	0

col相关参数

参数	说明	类型	默认值
span	栅格占据的列数	Number	24
offset	栅格左侧的间隔格数	Number	0

按钮-Button

常用的操作按钮

基本用法

基础的按钮用法

<template>
  <div>
    <terse-button>默认按钮</terse-button>
    <terse-button type="primary">普通按钮</terse-button>
    <terse-button type="success">成功按钮</terse-button>
    <terse-button type="danger">危险按钮</terse-button>
    <terse-button type="warning">警告按钮</terse-button>
    <terse-button type="info">信息按钮</terse-button>

  </div>
</template>

<script>

  export default {}
</script>

<style scoped>
  div > .terse-btn {
    margin-right: 10px;
  }
</style>

显示代码

带图标的按钮

<template>
  <div>
    <terse-button type="danger" icon="icon-cross">删除</terse-button>
    <terse-button type="success" icon="icon-shop">购物车</terse-button>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>
  div > .terse-btn {
    margin-right: 10px;
  }
</style>

显示代码

加载状态的按钮

<template>
  <div>
    <terse-button type="danger" loading>加载中的按钮</terse-button>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>
</style>

显示代码

按钮组

<template>
  <terse-button-group>
    <terse-button icon="icon-left">上一页</terse-button>
    <terse-button>
      <terse-icon name="icon-right"/>
      下一页
    </terse-button>
  </terse-button-group>
</template>

<script>

  export default {}
</script>

<style scoped>
</style>

显示代码

参数说明

参数	说明	类型	默认值	可选择
icon	图标的类名	string	——	——
type	按钮的颜色	string	——	primary/danger/success/info/warning
loading	正在加载中的按钮	boolean	false	true/false

事件

事件名称	说明	回调参数
click	按钮被点击时触发	e

文字链接-Link

文字超链接

基本用法

默认链接 普通链接 成功链接 危险链接 警告链接 信息链接

<template>
  <div>
    <terse-link>默认链接</terse-link>
    <terse-link type="primary">普通链接</terse-link>
    <terse-link type="success">成功链接</terse-link>
    <terse-link type="danger">危险链接</terse-link>
    <terse-link type="warning">警告链接</terse-link>
    <terse-link type="info">信息链接</terse-link>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>
  div > .terse-link {
    margin: 0 5px;
  }
</style>

显示代码

禁用状态

文字链接处于不可用状态

默认链接 普通链接 成功链接 危险链接 警告链接 信息链接

<template>
  <div>
    <terse-link disabled>默认链接</terse-link>
    <terse-link type="primary" disabled>普通链接</terse-link>
    <terse-link type="success" disabled>成功链接</terse-link>
    <terse-link type="danger" disabled>危险链接</terse-link>
    <terse-link type="warning" disabled>警告链接</terse-link>
    <terse-link type="info" disabled>信息链接</terse-link>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>
  div > .terse-link {
    margin: 0 5px;
  }
</style>

显示代码

参数说明

参数	说明	类型	默认值	可选择
href	原生href属性	string	——	——
type	链接的颜色	string	——	primary/danger/success/info/warning
disabled	链接是否被禁用	boolean	false	true/false
underline	链接被hover时是否有下划线	boolean	true	true/false

事件

当没有原生href属性并且没有被禁用时触发

事件名称	说明	回调参数
click	按钮被点击时触发	e

单选框-Radio

基本用法

男 女

您选择的是male

<template>
  <div>
    <terse-radio v-model="sex" label="male">男</terse-radio>
    <terse-radio v-model="sex" label="female">女</terse-radio>
    <div class="result">您选择的是{{sex}}</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        sex: 'male'
      }
    }
  }
</script>

<style scoped>
  .result {
    margin-top: 10px;
  }
</style>

显示代码

禁用状态下的单选框

男 女

您选择的是male

<template>
  <div>
    <terse-radio v-model="sex" label="male">男</terse-radio>
    <terse-radio v-model="sex" label="female" disabled>女</terse-radio>
    <div class="result">您选择的是{{sex}}</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        sex: 'male'
      }
    }
  }
</script>

<style scoped>
  .result {
    margin-top: 10px;
  }
</style>

显示代码

单选框组

当选完一个选项时，会向外触发change事件

男 女

<template>
  <div>
    <terse-radio-group v-model="sex" @change="handleChange">
      <terse-radio label="male">男</terse-radio>
      <terse-radio label="female">女</terse-radio>
    </terse-radio-group>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        sex: 'male'
      }
    },
    methods: {
      handleChange(value) {
        this.$message({message: '您的选择是' + value, type: 'success'})
      }
    }
  }
</script>

<style scoped>

</style>

显示代码

按钮样式

按钮样式的单选组合

男 女

<template>
  <div>
    <terse-radio-group v-model="sex" @change="handleChange">
      <terse-radio-button label="male">男</terse-radio-button>
      <terse-radio-button label="female">女</terse-radio-button>
    </terse-radio-group>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        sex: 'male'
      }
    },
    methods: {
      handleChange(value) {
        this.$message({message: '您的选择是' + value, type: 'success'})
      }
    }
  }
</script>

<style scoped>

</style>

显示代码

Radio参数说明

参数	说明	类型	默认值	可选择
v-model	绑定值	string/number/boolean	——	——
label	自身值	string/number/boolean	——	——
disabled	是否被禁用	boolean	false	true/false

Radio事件

事件名称	说明	回调参数
change	被选中时触发	自身的值(即是被选中的Radio值)

RadioButton参数说明

参数	说明	类型	默认值	可选择
label	自身值	string/number/boolean	——	——
disabled	是否被禁用	boolean	false	true/false

RadioGroup参数说明

参数	说明	类型	默认值	可选择
v-model	绑定值	string/number/boolean	——	——
disabled	是否被禁用	boolean	false	true/false

RadioGroup事件

事件名称	说明	回调参数
change	单个单选框被选中时触发	被选中的Radio值

多选框-checkBox

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍,当没有在标签中注入
内容时也可以使用label属性

当状态切换之后，可向外界触发change事件

基本使用

单选框

选中状态:true

<template>
  <div>
    <terse-checkbox v-model="active" :label="label" @change="handleChange"></terse-checkbox>
    <div class="result">选中状态:{{active}}</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        active: true,
        label: '单选框'
      }
    },
    methods: {
      handleChange(value) {
        this.$message({message: '您的选择是' + value, type: 'success'})
      }
    }
  }
</script>

<style scoped>
  .result {
    margin-top: 10px;
  }
</style>

显示代码

禁用状态

多选框处于不可用状态

单选框

<template>
  <terse-checkbox disabled v-model="active" :label="label"/>
</template>

<script>

  export default {
    data() {
      return {
        active: false,
        label: '单选框'
      }
    },
  }
</script>

<style scoped>

</style>

显示代码

多选框组

适用于多个多选框绑定到一个数组的场景,通过是否勾选来表示是否选中这一项,当任意一个被选中时，向外触发change事件。

足球 羽毛球 篮球 乒乓球

选中的有： 羽毛球

<template>
  <div>
    <terse-checkbox-group v-model="list">
      <terse-checkbox label="足球"></terse-checkbox>
      <terse-checkbox label="羽毛球"></terse-checkbox>
      <terse-checkbox label="篮球"></terse-checkbox>
      <terse-checkbox label="乒乓球"></terse-checkbox>
    </terse-checkbox-group>
    <div>选中的有： <span v-for="item of list" :key="item" class="checked">{{item}}</span></div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        list: ['羽毛球']
      }
    },
  }
</script>

<style scoped>
  .checked {
    padding: 0 5px;
  }
</style>

显示代码

checkbox参数说明

参数	说明	类型	默认值	可选择
v-model	绑定值(单独使用)	boolean	——	——
label	标签的内容(单独使用),与多选框组一起使用，可作为被选中时的值，也可作为标签的内容	string/number/	——	——
disabled	是否被禁用	boolean	false	true/false

checkbox事件

事件名称	说明	回调参数
change	被选中时触发	对应的状态值(true/false)

checkboxGroup参数说明

参数	说明	类型	默认值	可选择
v-model	绑定值	Array	——	——
disabled	是否被禁用	boolean	false	true/false

checkboxGroup事件

事件名称	说明	回调参数
change	任意多选框被选中时触发	更新后的值

开关-Switch

表示两种相互对立的状态间的切换，多用于触发「开/关」。

基本用法

当进行状态切换时,可向外触发change事件。

<template>
    <terse-switch v-model="active"></terse-switch>
</template>

<script>
  export default {
    data() {
      return {
        active: true
      }
    }

  }
</script>

<style scoped>

</style>

显示代码

文字描述

关开

<template>
    <terse-switch v-model="active" active-text="开" inactive-text="关"></terse-switch>
</template>

<script>
  export default {
    data() {
      return {
        active: true
      }
    }

  }
</script>

<style scoped>

</style>

显示代码

禁用状态

<template>
    <terse-switch v-model="active" disabled></terse-switch>
</template>

<script>
  export default {
    data() {
      return {
        active: true
      }
    }

  }
</script>

<style scoped>

</style>

显示代码

Switch参数说明

参数	说明	类型	默认值	可选择
v-model	绑定值	Boolean	false	——
disabled	是否被禁用	boolean	false	——
inactive-text	关闭时的文字描述	String	——	——
active-text	打开时的文字描述	String	——	——
active-color	打开时的背景色	String	#409EFF	——
inactive-color	关闭时的背景色	String	#C0CCDA	——
width	Switch的宽度(单位：px)	Number	40	——

Switch事件

事件名称	说明	回调参数
change	切换状态后触发	更新后的值

日期选择器-datePicker

用于选择日期

基本用法

<<<2020年2月>>>

日一二三四五六

26 27 28 29 30 31 1

2 3 4 5 6 7 8

9 10 11 12 13 14 15

16 17 18 19 20 21 22

23 24 25 26 27 28 29

1 2 3 4 5 6 7

您选中的日期是:2020/02/03

<template>
  <div>
    <terse-date-picker v-model="active"></terse-date-picker>
    <div class="result">您选中的日期是:{{active}}</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        active: '2020/02/03'
      }
    },
  }
</script>

<style scoped>
  .result {
    margin-top: 10px;
  }
</style>

显示代码

datePicker参数说明

参数	说明	类型	默认值	可选择
v-model	绑定值	Number/String/Date	当前日期	——

datePicker事件

事件名称	说明	回调参数
change	某个日期被选中时触发	选中的日期值

标签-tag

用于标记

基本用法

标签一 标签二 标签三 标签四 标签五

<template>
  <div>
    <terse-tag>标签一</terse-tag>
    <terse-tag type="success">标签二</terse-tag>
    <terse-tag type="warning">标签三</terse-tag>
    <terse-tag type="danger">标签四</terse-tag>
    <terse-tag type="info">标签五</terse-tag>
  </div>
</template>

<script>

  export default {
    
  }
</script>

<style scoped>
  div > .terse-tag {
    margin: 0 5px;
  }
</style>

显示代码

可移除标签

标签一 标签二 标签三 标签四 标签五

<template>
  <div>
    <terse-tag closed>标签一</terse-tag>
    <terse-tag type="success" show-close>标签二</terse-tag>
    <terse-tag type="warning" show-close>标签三</terse-tag>
    <terse-tag type="danger" show-close>标签四</terse-tag>
    <terse-tag type="info" show-close>标签五</terse-tag>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>
  div > .terse-tag {
    margin: 0 5px;
  }
</style>

显示代码

不同主题的标签

tag组件提供了两种主题dark,plain

dark: 标签一 标签二 标签三 标签四 标签五

plain: 标签一 标签二 标签三 标签四 标签五

<template>
  <div>
    <div>
      <span>dark:</span>
      <terse-tag theme="dark">标签一</terse-tag>
      <terse-tag type="success" theme="dark">标签二</terse-tag>
      <terse-tag type="warning" theme="dark">标签三</terse-tag>
      <terse-tag type="danger" theme="dark">标签四</terse-tag>
      <terse-tag type="info" theme="dark">标签五</terse-tag>
    </div>
    <div>
      <span>plain:</span>
      <terse-tag theme="plain">标签一</terse-tag>
      <terse-tag type="success" theme="plain">标签二</terse-tag>
      <terse-tag type="warning" theme="plain">标签三</terse-tag>
      <terse-tag type="danger" theme="plain">标签四</terse-tag>
      <terse-tag type="info" theme="plain">标签五</terse-tag>
    </div>
  </div>
</template>

<script>

  export default {
    
  }
</script>

<style scoped>
  div {
    margin-bottom: 10px;
  }

  div > .terse-tag {
    margin: 0 5px;
  }
</style>

显示代码

tag参数说明

参数	说明	类型	默认值	可选择
type	标签的类型	String	primary	primary/danger/success/warning/info
showClose	标签是否可以被移除	boolean	false	——
theme	标签的样式主题	String	——	dark/plain

tag事件

事件名称	说明	回调参数
close	标签被移除时触发	——

标记-badge

状态标记

基本用法

评论¹⁰ 回复²⁰ 消息³⁰

<template>
  <div>
    <terse-badge :value="10">评论</terse-badge>
    <terse-badge type="success" :value="20">回复</terse-badge>
    <terse-badge type="warning" :value="30">消息</terse-badge>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>

  div > .terse-badge {
    margin: 0 20px;
  }
</style>

最大值

评论⁹⁹⁺ 回复²⁰⁺

<template>
  <div>
    <terse-badge :value="99" :max="20">评论</terse-badge>
    <terse-badge type="success" :value="20" :max="10">回复</terse-badge>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>

  div > .terse-badge {
    margin: 0 20px;
  }
</style>

显示代码

显示代码

自定义消息

可以显示非数字的文本

评论^new 回复^hot

<template>
  <div>
    <terse-badge value="new">评论</terse-badge>
    <terse-badge type="success" value="hot">回复</terse-badge>
  </div>
</template>

<script>

  export default {}
</script>

<style scoped>

  div > .terse-badge {
    margin: 0 20px;
  }
</style>

显示代码

显示小红点

评论

<template>
  <terse-badge :is-dot="true">评论</terse-badge>
</template>

<script>

  export default {
    
  }
</script>

<style scoped>

</style>

显示代码

badge参数说明

参数	说明	类型	默认值	可选择
type	角标的类型	String	primary	primary/danger/success/warning
value	角标显示的值	String/Number	——	——
max	最大值，要求value是Number类型	Number	Infinity	——
show	是否显示角标	Boolean	true	——
isDot	是否显示红点	Boolean	false	——

警告-alert

用于页面中展示重要的提示信息

基本用法

成功提示的文案

成功提示的文案

警告提示的文案

危险提示的文案

<template>
  <div>
    <terse-alert title="成功提示的文案" type="success"></terse-alert>
    <terse-alert title="成功提示的文案" type="info"></terse-alert>
    <terse-alert title="警告提示的文案" type="warning"></terse-alert>
    <terse-alert title="危险提示的文案" type="danger"></terse-alert>
  </div>
</template>

<script>

  export default {
    
  }
</script>

<style scoped>
  div > .terse-alert {
    margin-bottom: 10px;
  }
</style>

显示代码

自定义关闭为文字或图标 或可选择是否需要被关闭

成功提示的文案

成功提示的文案

明白

警告提示的文案

收到

危险提示的文案

<template>
  <div>
    <terse-alert title="成功提示的文案" type="success"></terse-alert>
    <terse-alert title="成功提示的文案" type="info" close-text="明白"></terse-alert>
    <terse-alert title="警告提示的文案" type="warning" close-text="收到"></terse-alert>
    <terse-alert title="危险提示的文案" type="danger" :show-close="false"></terse-alert>
  </div>
</template>

<script>

  export default {
    
  }
</script>

<style scoped>
  div > .terse-alert {
    margin-bottom: 10px;
  }
</style>

显示代码

带有辅助性文字

辅助性文字

这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为

<template>
  <div>
    <terse-alert title="辅助性文字" type="success" :description="description"/>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        description: '这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为'
      }
    }
  }
</script>

<style scoped>
  div > .terse-alert {
    margin-bottom: 10px;
  }
</style>

显示代码

alert 参数说明

参数	说明	类型	默认值	可选择
type	主题类型	String	info	info/danger/success/warning
title	标题	String	——	——
description	辅助性文字	String	——	——
showClose	是否显示关闭按钮	Boolean	true	——
closeText	自定义关闭按钮文字	String	——	——

slot

Name	说明
——	描述
title	标题

alert事件

事件名称	说明	回调参数
closed	被移除时触发	——

加载-loading

加载数据时显示动效

基本用法

当某个元素需要设置loading效果，请为该元素设置成为定位元素

我是内容

<template>
  <div>
    <terse-switch v-model="loading"></terse-switch>
    <div class="test" v-loading="loading">
      我是内容
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        loading: true
      }
    }
  }
</script>

<style scoped>
  .test {
    height: 300px;
    position: relative;
  }
</style>

显示代码

消息提示-message

常用于主动操作后的反馈提示。

基本用法

消息提示框从屏幕顶部出现,默认3秒钟之后消失,当设置durantion为0时,消息提示框不会自动关闭，
需要手动按下delete或esc键关闭,也可设置显示关闭按钮，showClose:true,按下关闭按钮时，关闭消息提示

<template>
  <terse-button @click="handleClick">打开消息提示</terse-button>
</template>

<script>

  export default {
    methods: {
      handleClick() {
        this.$message('这是一条消息提示')
      }
    }
  }
</script>

<style scoped>
  
</style>

显示代码

不同状态下的消息提示

<template>
  <div>
    <terse-button @click="handleInfo">消息</terse-button>
    <terse-button @click="handleSuccess">成功</terse-button>
    <terse-button @click="handleDanger">危险</terse-button>
    <terse-button @click="handleWarn">警告</terse-button>
  </div>
</template>

<script>

  export default {
    methods: {
      handleInfo() {
        this.$message({type: 'info', message: '这是一条消息提示'})
      },
      handleSuccess() {
        this.$message({type: 'success', message: '这是一条成功的消息提示'})
      },
      handleDanger() {
        this.$message({type: 'danger', message: '这是一条危险的消息提示'})
      },
      handleWarn() {
        this.$message({type: 'warning', message: '这是一条警告的消息提示'})
      }

    }
  }
</script>

<style scoped>
  div > .terse-btn {
    margin: 0 10px;
  }
</style>

可以添加关闭按钮

<template>
  <div>
    <terse-button @click="handleInfo">消息</terse-button>
    <terse-button @click="handleSuccess">成功</terse-button>
    <terse-button @click="handleDanger">危险</terse-button>
    <terse-button @click="handleWarn">警告</terse-button>
  </div>
</template>

<script>

  export default {
    methods: {
      handleInfo() {
        this.$message({type: 'info', message: '这是一条消息提示', showClose: true})
      },
      handleSuccess() {
        this.$message({type: 'success', message: '这是一条成功的消息提示', showClose: true})
      },
      handleDanger() {
        this.$message({type: 'danger', message: '这是一条危险的消息提示', showClose: true})
      },
      handleWarn() {
        this.$message({type: 'warning', message: '这是一条警告的消息提示', showClose: true})
      }

    }
  }
</script>

<style scoped>
  div > .terse-btn {
    margin: 0 10px;
  }
</style>

显示代码

显示代码

全局方法

terse-ui为Vue.prototype添加了全局方法$message,您可以使用this.$message.closeAll()关闭页面上的所有的消息提示框。

message相关参数说明

参数	说明	类型	默认值	可选择
type	主题类型	String	info	info/danger/success/warning
message	消息文字	String	——	——
duration	消息提示框关闭的时间,单位毫秒,设置为0，不会自动关闭	Number	3000	——
showClose	是否显示关闭按钮	Boolean	false	——
offset	消息提示框距离顶部的距离 (单位：px)	Number	20	——
onClose	关闭时的回调函数	Function	——	——

通知-notification

悬浮出现在页面角落，显示全局的通知提醒消息。

基本用法

通知提示框默认从屏幕右上角出现,默认3秒钟之后消失,当设置durantion为0时,通知提示框不会自动关闭，
但可设置显示关闭按钮，showClose:true,按下关闭按钮时，关闭通知提示

<template>
  <div>
    <terse-button @click="open1">可自动关闭</terse-button>
    <terse-button @click="open2">不会自动关闭</terse-button>
  </div>
</template>

<script>

  export default {
    methods: {
      open1() {
        this.$notification({
          title: '提示',
          message: '这是一条会自动关闭的消息'
        })
      },
      open2() {
        this.$notification({
          title: '提示',
          message: '这是一条不会自动关闭的消息',
          duration: 0
        })

      }

    }
  }
</script>

<style scoped>
  div > .terse-btn {
    margin: 0 10px;
  }
</style>

显示代码

不同状态下的通知提示

<template>
  <div>
    <terse-button @click="open1">消息</terse-button>
    <terse-button @click="open2">成功</terse-button>
    <terse-button @click="open3">警告</terse-button>
    <terse-button @click="open4">错误</terse-button>
  </div>
</template>

<script>

  export default {
    methods: {
      open1() {
        this.$notification({
          title: '提示',
          message: '这是一条消息通知',
          type: 'info'
        })
      },
      open2() {
        this.$notification({
          title: '提示',
          message: '这是一条成功的消息通知',
          type: 'success'
        })
      },
      open3() {
        this.$notification({
          title: '提示',
          message: '这是一条警告的消息通知',
          type: 'warning'
        })
      },
      open4() {
        this.$notification({
          title: '提示',
          message: '这是一条危险的消息通知',
          type: 'danger'
        })
      },

    }
  }
</script>

<style scoped>
  div > .terse-btn {
    margin: 0 10px;
  }
</style>

显示代码

通知提示框出现的不同位置

<template>
  <div class="result">
    <terse-button @click="open1">右上角</terse-button>
    <terse-button @click="open2">右下角</terse-button>
    <terse-button @click="open3">左上角</terse-button>
    <terse-button @click="open4">左下角</terse-button>
  </div>
</template>

<script>

  export default {
    methods: {
      open1() {
        this.$notification({
          title: '提示',
          message: '右上角的消息',
          position: 'top-right'
        })
      },
      open2() {
        this.$notification({
          title: '提示',
          message: '右下角的消息',
          position: 'bottom-right'
        })
      },
      open3() {
        this.$notification({
          title: '提示',
          message: '左上角的信息',
          position: 'top-left'
        })
      },
      open4() {
        this.$notification({
          title: '提示',
          message: '左下角的信息2222',
          position: 'bottom-left',
        })
      },

    }
  }
</script>

<style scoped>
  .result {
    text-align: center;
  }

  .result > .terse-btn {
    margin: 0 10px;
  }
</style>

显示代码

全局方法

terse-ui为Vue.prototype添加了全局方法$notification,您可以使用this.$notification.closeAll()关闭页面上的所有的消息提示框。

message相关参数说明

参数	说明	类型	默认值	可选择
type	主题类型	String	——	info/danger/success/warning
title	标题	String	——	——
message	说明文字	String	——	——
duration	通知提示框关闭的时间,单位毫秒,设置为0，不会自动关闭	Number	3000	——
showClose	是否显示关闭按钮	Boolean	true	——
offset	通知提示框距离顶部的距离 (单位：px)	Number	20	——
onClose	关闭时的回调函数	Function	——	——
position	通知提示框出现的位置	String	top-right	top-left/top-left/bottom-left/bottom-right

面包屑-breadcrumb

显示当前页面的路径，快速返回之前的任意页面。

基本用法

首页 活动列表 活动详情

<template>
  <terse-breadcrumb>
    <terse-breadcrumb-item to="/">首页</terse-breadcrumb-item>
    <terse-breadcrumb-item>活动列表</terse-breadcrumb-item>
    <terse-breadcrumb-item>活动详情</terse-breadcrumb-item>
  </terse-breadcrumb>
</template>

<script>

  export default {}
</script>

<style scoped>

</style>

显示代码

图标分隔符

首页 活动列表 活动详情

<template>
  <terse-breadcrumb separator=">">
    <terse-breadcrumb-item to="/">首页</terse-breadcrumb-item>
    <terse-breadcrumb-item>活动列表</terse-breadcrumb-item>
    <terse-breadcrumb-item>活动详情</terse-breadcrumb-item>
  </terse-breadcrumb>
</template>

<script>

  export default {}
</script>

<style scoped>

</style>

显示代码

breadcrumb相关参数说明

参数	说明	类型	默认值	可选择
separator	分隔符	String	/	——

breadcrumbItem相关参数说明

参数	说明	类型	默认值	可选择
to	路由跳转对象，同 vue-router 的 to	String/Object	——	——
replace	在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录	Boolean	false	——

对话框-dialog

在保留当前页面状态的情况下，告知用户并承载相关操作

基本用法

提示

这是一段内容

<template>
  <div>
    <terse-button type="primary" @click="handleClick">打开dialog</terse-button>
    <terse-dialog width="30%" title="提示" :visiable.sync="visiable">
      <template #default>
        这是一段内容
      </template>
      <template #footer>
        <div class="dialog__footer">
          <terse-button @click="visiable=false">取消</terse-button>
          <terse-button type="primary" @click="visiable=false">确定</terse-button>
        </div>
      </template>
    </terse-dialog>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        visiable: false
      }
    },
    methods: {
      handleClick() {
        this.visiable = true
      }
    }
  }
</script>

<style scoped>
  .dialog__footer {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }

  .dialog__footer .terse-btn {
    margin: 0 10px;
  }
</style>

显示代码

dialog相关参数说明

参数	说明	类型	默认值	可选择
visiable	是否显示 Dialog，支持 .sync 修饰符	Boolean	false	——
title	Dialog的标题	String	——	——
width	Dialog内容宽度	String	50%	——
show-close	是否显示关闭按钮	Boolean	true	——
before-close	关闭前的回调，会暂停Dialog的回调	Function(done) done为函数,关闭Dialog需要被调用,当参数传入false时,此时Dialog不会被关闭	——	——

slot

参数	说明
——	Dialog的内容
title	Dialog的标题内容
footer	Dialog的底部内容

dialog事件

事件名称	说明	回调参数
open	Dialog被打开时触发	——
opend	Dialog打开动画结束时触发	——
close	Dialog被关闭时触发	——
closed	Dialog关闭动画结束时触发	——

卡片-card

将信息聚合在卡片容器中展示。

基本用法：

卡片名称

列表内容1

列表内容2

列表内容3

列表内容4

列表内容5

列表内容6

<template>
  <terse-card>
    <template #title>
      <div class="card_header">
        <span>卡片名称</span>
        <terse-button type="primary">操作</terse-button>
      </div>
    </template>
    <template #default>
      <div v-for="item of 6" :key="item" class="card__body__item">
        <span>列表内容{{item}}</span>
      </div>
    </template>
  </terse-card>
</template>

<script>

  export default {
    
  }
</script>

<style scoped>
  .card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card__body__item {
    margin-bottom: 10px;
  }
</style>

显示代码

卡片的阴影

通过设置shadow的值来配置卡片阴影的显示

总是显示阴影

不显示阴影

hover时才显示阴影

<template>
  <div class="wrapper">
    <terse-card shadow="always">总是显示阴影</terse-card>
    <terse-card shadow="never">不显示阴影</terse-card>
    <terse-card shadow="hover">hover时才显示阴影</terse-card>
  </div>
</template>

<script>

  export default {
    
  }
</script>

<style scoped>
  .wrapper {
    display: flex;
  }

  .wrapper > .terse-card {
    margin: 0 20px;
  }
</style>

显示代码

card相关参数说明

参数	说明	类型	默认值	可选择
title	card的标题	String	——	——
shadow	配置卡片的阴影	String	always	always/never/hover

slot

参数	说明
——	Card的内容
title	Card的标题内容

标签页-tab

分隔内容上有关联但属于不同类别的数据集合。

基本用法

用户管理的内容

配置管理的内容

角色管理的内容

<template>
    <terse-tabs v-model="active">
        <terse-tab-pane name="1" label="用户管理">用户管理的内容</terse-tab-pane>
        <terse-tab-pane name="2" label="配置管理">配置管理的内容</terse-tab-pane>
        <terse-tab-pane name="3" label="角色管理">角色管理的内容</terse-tab-pane>
    </terse-tabs>
</template>

<script>
  export default {
    data() {
      return {
        active: '1'
      }
    },
  }
</script>

<style scoped>

</style>

显示代码

禁用选项卡

用户管理的内容

配置管理的内容

角色管理的内容

<template>
    <terse-tabs v-model="active">
      <terse-tab-pane name="1" label="用户管理">
        用户管理的内容
      </terse-tab-pane>
      <terse-tab-pane name="2" label="配置管理">
        配置管理的内容
      </terse-tab-pane>
      <terse-tab-pane name="3" label="角色管理" disabled>
        角色管理的内容
      </terse-tab-pane>
    </terse-tabs>
</template>

<script>

  export default {
    data() {
      return {
        active: '1'
      }
    }
  }
</script>

<style scoped>

</style>

显示代码

设置选项卡的位置

通过设置direction的值来改变选项卡的位置,可选值有vertical,horizontal,默认为vertical

用户管理的内容

配置管理的内容

角色管理的内容

用户管理的内容

配置管理的内容

角色管理的内容

<template>
  <div class="wrapper">
    <terse-tabs v-model="active" direction="vertical" class="first">
      <terse-tab-pane name="1" label="用户管理">
        用户管理的内容
      </terse-tab-pane>
      <terse-tab-pane name="2" label="配置管理">
        配置管理的内容
      </terse-tab-pane>
      <terse-tab-pane name="3" label="角色管理">
        角色管理的内容
      </terse-tab-pane>
    </terse-tabs>
    <terse-tabs v-model="activeName" direction="horizontal">
      <terse-tab-pane name="1" label="用户管理">
        用户管理的内容
      </terse-tab-pane>
      <terse-tab-pane name="2" label="配置管理">
        配置管理的内容
      </terse-tab-pane>
      <terse-tab-pane name="3" label="角色管理">
        角色管理的内容
      </terse-tab-pane>
    </terse-tabs>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        active: '1',
        activeName: '1'
      }
    },
  }
</script>

<style scoped>
  .first {
    margin-bottom: 50px;
  }
</style>

显示代码

设置选项卡可被删除

通过设置 showDelete:true 使得选项卡激活删除状态

用户管理的内容

配置管理的内容

角色管理的内容

<template>
  <div class="wrapper">
    <terse-tabs v-model="active"  show-delete>
      <terse-tab-pane name="1" label="用户管理">
        用户管理的内容
      </terse-tab-pane>
      <terse-tab-pane name="2" label="配置管理">
        配置管理的内容
      </terse-tab-pane>
      <terse-tab-pane name="3" label="角色管理">
        角色管理的内容
      </terse-tab-pane>
    </terse-tabs>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        active: '1',
      }
    },
  }
</script>

<style scoped>

</style>

显示代码

tabs相关参数说明

参数	说明	类型	默认值	可选择
v-model	绑定值,选中选项卡的name	String	——	——
showDelete	选项卡是否可以被删除	Boolean	false	——
direction	选项卡显示的方向	String	vertical	vertical/horizontal

tabPane相关参数说明

参数	说明	类型	默认值	可选择
name	与选项卡绑定值 value 对应的标识符，表示选项卡别名	String	——	——
label	选项卡的标题	String	——	——
disabled	选项卡是否被禁用	Boolean	false	——

slot -- tabPane

参数	说明
——	选项卡的具体内容

tabs事件

事件名称	说明	回调参数
change	任意tab被选中时触发	被选中选项卡的标示符

分割线-divider

区隔内容的分割线。

基础用法

对不同章节的文本段落进行分割。

青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪

少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉

<template>
    <div>
        <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
        <terse-divider></terse-divider>
        <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
    </div>
</template>

<script>
  export default {
    
  }
</script>

<style scoped>

</style>

显示代码

设置文案

可以在分割线上自定义文案内容,并可以设置显示的位置

青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪

青春

少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉

品质

头上一片晴天，心中一个想念

少年包青天

<template>
    <div>
        <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
        <terse-divider position="center">青春</terse-divider>
        <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
        <terse-divider position="left">品质</terse-divider>
        <span>头上一片晴天，心中一个想念</span>
        <terse-divider position="right">少年包青天</terse-divider>
    </div>
</template>

<script>
  export default {
    
  }
</script>

<style scoped>

</style>

显示代码

垂直分割

夜来风雨声

花落知多少

<template>
    <div>
        <span>夜来风雨声</span>
        <terse-divider direction="vertical"></terse-divider>
        <span>花落知多少</span>
    </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>

</style>

显示代码

divider相关参数说明

参数	说明	类型	默认值	可选择
position	设置分割线文案的位置	String	center	center/left/right
direction	设置分割线的方向	String	horizontal	horizontal / vertical

抽屉-drawer

Drawer 抽屉 有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验.

基本用法

呼出一个临时的侧边栏, 可以从多个方向呼出

标题

我来了

<template>
    <div class="wrapper">
        <terse-button @click="open1">右边</terse-button>
        <terse-button @click="open2">左边</terse-button>
        <terse-button @click="open3">上边</terse-button>
        <terse-button @click="open4">下边</terse-button>
        <terse-drawer :visiable.sync="visiable" :direction="direction" title="标题">
            <div>我来了</div>
        </terse-drawer>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        visiable: false,
        direction: 'right'
      }
    },
    methods: {
      open1() {
        this.visiable = true
        this.direction = "right"
      },
      open2() {
        this.visiable = true
        this.direction = "left"
      },
      open3() {
        this.visiable = true
        this.direction = 'top'
      },
      open4() {
        this.visiable = true
        this.direction = 'bottom'
      },
    }

  }
</script>

<style scoped>
    .wrapper > .terse-btn {
        margin: 0 10px;
    }
</style>

显示代码

drawer相关参数说明

参数	说明	类型	默认值	可选择
visiable	是否显示 Drawer，支持 .sync 修饰符	Boolean	false	——
title	Drawer的标题	String	——	——
width	Drawer内容宽度	String/Number	30%	——
show-close	是否显示关闭按钮	Boolean	true	——
before-close	关闭前的回调，会暂停Drawer的回调	Function(done) done为函数,关闭Dialog需要被调用,当参数传入false时,此时Drawer不会被关闭	——	——
direction	Drawer出现的位置	String	right	right/left/top/bottom

slot

参数	说明
——	Drawer的主体内容
title	Drawer的标题内容

dialog事件

事件名称	说明	回调参数
open	Drawer被打开时触发	——
opend	Drawer打开动画结束时触发	——
close	Drawer被关闭时触发	——
closed	Drawer关闭动画结束时触发	——