cll-vue-components v2.0.0

vue components

• vue 组件

Install

npm install cll-vue-components --save

USE

/** 全部引用 */
import CllVueComponents from 'cll-vue-components'
Vue.use(CllVueComponents[, options])

/** 单个引用 */
// 插件 example:
import Tooltip from 'cll-vue-components/plugins/tooltip'
Vue.use(Tooltip)

// 组件 example:
import Pagination from 'cll-vue-components/lib/pagination'
<pagination />

Plugins

文字提示 demo

import Tooltip from 'cll-vue-components/plugins/tooltip'
Vue.use(Tooltip)
<div v-tooltip.top.click="'top'">top</div>

树形数据 demo

import CZtree from 'cll-vue-components/plugins/ztree'
Vue.use(CZtree)
<c-ztree @click="clickEvent" @select="selectEvent" :d="data" :int="int" select="true" />

提示信息 demo

import Message from 'cll-vue-components/plugins/message'
Vue.use(Message)
this.$message.success('成功的显示一段文字!', 5)
this.$message.error('成功的显示一段文字!', 5)
this.$message.warning('成功的显示一段文字!', 5)
this.$message.info('成功的显示一段文字!', 5)
this.$alert('内容', '标题', () => {this.$message.info('关闭', 2)})
this.$confirm({
  title: '标题',
  message: '<div><i></i>内容 </div>',
  callback: () => this.$message.info('确定', 4),
  cancel: () => this.$message.info('取消', 4),
  close: () => this.$message.info('关闭', 4)
})

加载动画 demo

import Loading from 'cll-vue-components/plugins/loading'
Vue.use(Loading, { skin: 'twopoints' })
this.$loading.show('数据加载中...')
this.$loading.hide()
or
<div loadingText='数据加载中...' v-loading='load'>load</div>

日历 demo

import CDatePicker from 'cll-vue-components/plugins/datePicker'
Vue.use(CDatePicker)

<c-date-picker type="range" startDate="2018/12/31 12:12:13" endDate="2019/01/14 12:13:14" format="yyyy/MM/dd HH:mm:ss" :quickSelection='quickSelection' @change='timeChange' @preOpen='' />
// or
<c-date-picker-calendar :marks='marks' color='#ffffff' backgroundColor='#26374f' size='16' rowHeight='50' :int='int' @change='change' :year='year' :month='month' :day='day' @changePage='changePage' />

下载 demo

import Download from 'cll-vue-components/plugins/download'
Vue.use(Download)
<div class="box" v-download="url" fileName="图片.png" >下载</div>

折叠面板 demo

import Collapse from 'cll-vue-components/plugins/collapse'
Vue.use(Collapse)
<div class="title" @click="collapseState=!collapseState">标题1</div>
<div v-collapse="collapseState" >
  <-- 内容 -->
</div>
<div v-collapse-group='0' >
  <div class="title" @click="r1=!r1">标题1</div>
  <div class="body" v-collapse >
    <-- 内容 -->
  </div>
</div>

components

动画 demo

import CCanvasAnimate from 'cll-vue-components/lib/canvasAnimate'
<c-canvas-animate icon='polygon-3' height=200 width=200 color="#fff000" speed=2000/>

拖拽 demo

import CDragable from 'cll-vue-components/lib/dragable'
<c-dragable :top='top' :left='left'>
  <div class="boxing">
    <div dragalow >拖拽的触发容器</div>
    ...
  </div>
</c-dragable>

简易图片轮播 demo

import CEasyImg from 'cll-vue-components/lib/easyImg'
<c-easy-img :int="int" :d="d" type="real" :speed="speed" :radio="radio" />

图片播放 demo

import CImgPlay from 'cll-vue-components/lib/imgPlay'
<c-img-play :int="int" :d="d" :config="config" />

可操作图片 demo

import CImgShow from 'cll-vue-components/lib/imgShow'
<c-img-show :img="img" :title="title" />

播放轴 demo

import CPlayBar from 'cll-vue-components/lib/playBar'
<c-play-bar :int="playInt" :d="data" :config="playConfig" @change="imgChange" />

概化图 demo

import CEasyMap from 'cll-vue-components/lib/easyMap'
<c-easy-map :d="d" :int="int" :config="config" @click="clickEvent" @hover="hover">
  <div class="legend" slot="bottomRight">图例</div>
</c-easy-map>

表格 demo

import CEasyTable from 'cll-vue-components/lib/easyTable'
<c-easy-table :int="int" :d="d" :config="config" :clickEvent="tableClick" />

步骤 demo

import CStep from 'cll-vue-components/lib/step'
<c-step :steps="steps" v-model="step" height="70" width="800" />

分页 demo

import CPagination from 'cll-vue-components/lib/pagination'
<c-pagination :textAlign='textAlign' :pageSize='pageSize' :current='current' :total='total' @change='change' />

上传 demo

import CUpload from 'cll-vue-components/lib/upload'
<c-upload :url="url" :headers="headers" :success="success" :error="error" multiple='true' />

导航树 demo

import CNavTree from 'cll-vue-components/lib/navTree'
<c-nav-tree @change="确定事件" :d="数据源" :int="int" :current='初始化选中' />

颜色选择器 demo

import CColorPicker from 'cll-vue-components/lib/colorPicker'
<c-color-picker v-model="color" :predefineColors='ColorArray' />

按钮 demo

import CButton from 'cll-vue-components/lib/button'
<c-button disabled type="primary">名称</c-button>

下拉选择 demo

import CSelect from 'cll-vue-components/lib/select'
<c-select v-model="mValue" filter :options="options" placeholder="placeholder" disabled :width='width'>名称</c-select>