vue-common-web-ui

ui for web,based vue2.x

Setup

npm i vue-common-web-ui

Use

import commonUI from 'vue-common-web-ui' // 引入组件库

Vue.use(commonUI)

Detail

alert

①<alert :options="alertOptions"></alert>
②<alert :options="alertOptions">
  <p>你好呀</p>
</alert>

let alertOptions = {
  isShow: true,
  type: 'success',
  isAutoDis: true,
  content: 'asdad'
}

| Options | Type | Description | Default | necessary | |-----------------|:--------:|:---------------------------:|:--------:|:--------:| | isShow | boolean | 是否显示弹窗 | false | 是 | | type | string | 弹窗类型(warn，success，error) | warn | 否 | | isAutoDis | boolean | 弹窗是否自动消失 | false | 否 | | content | string或array | 显示内容 | | 否 |

datepicker

<datePicker :options="datePickerOptions"></datePicker>

let datePickerOptions = {
  isRange: true,
  startDate: '',
  endDate: '',
  title: '出发时间',
  success: (val) => {
    console.log(val);
  }
}

| Options | Type | Description | Default | necessary | result | |-----------------|:--------:|:---------------------------:|:--------:|:--------:|:--------:| | isRange | boolean | 是否为时间段选择（为true时显示两个日历供选择时间段， 为false时显示一个日历供选择一个日期） | false | 否 | | | startDate | string | 显示开始时间 | | 否 | | | endDate | string | 显示结束时间（isRange时传送） | | 否 | | | title | string | 用于说明日历的用处 | | 否 | | | success | function | 用于处理返回的时间 （返回时间为标准格式，{sDate: '2018-01-20', sStandard: '2018-01-20 00:00:00', eDate: '2018-01-22', eStandard: '2018-01-22 23:59:59'}，单选日期时只返回sDate）| | 否 | |

dialog

①<dialog :options="dialogOptions"></dialog>
②<dialog :options="dialogOptions">
  <p>确定删除选中的商品？</p>
</dialog>

let dialogOptions = {
  txt: '确定删除该商品吗？',
  isShow: true,
  success: () => {
    console.log('确定');
  },
  cancel: () => {
    console.log('取消');
  }
}

| Options | Type | Description | Default | necessary | result | |-----------------|:--------:|:---------------------------:|:--------:|:--------:|:--------:| | txt | string | 对话框内容 | | 否 | | | isShow | boolean | 用于显示对话框 | 否 | 是 | | | success | function | 用于执行确认后的内容 | | 是 | | | cancel | function | 用于执行取消后的内容 | | 否 | | | bgColor | string | 标题的背景色 | #5cadff | 否 | |

timepicker

<timepicker :options="timePickerOptions"></timepicker>

let timePickerOptions = {
  time: '00:00',
  success: (val) => {
    console.log(val);
  }
}

| Options | Type | Description | Default | necessary | result | |-----------------|:--------:|:---------------------------:|:--------:|:--------:|:--------:| | time | string | 用于显示时间 | | 否 | | | success | function | 用于处理返回的时间 | | 是 | |

upload

<upload :options="uploadOptions"></upload>

let uploadOptions = {
  type: 'file',
  txt: '上传文件',
  onUpload: (val) => {
    console.log(val); 处理返回的上传内容
  },
  onUploadType: (val) => {
    console.log(val); // 处理返回的上传boolean状态
  },
  warnTxt: (val) => {
    console.log(val); // 处理返回的警告提示
  }
}

| Options | Type | Description | Default | necessary | result | |-----------------|:--------:|:---------------------------:|:--------:|:--------:|:--------:| | type | string | 上传类型(img：图片，all：所有，file：文件) | img | 否 | | | txt | string | 上传标题 | | 否 | | | onUpload | function | 处理返回的上传内容 | | 是 | | | onUploadType | function | 处理返回的上传布尔值状态 （false为上传失败，true为上传成功） | | 是 | | | warnTxt | function | 处理返回的警告提示 | | 是 | |

warn

①<warn :options="warnOptions"></warn>
②<warn :options="warnOptions">
  <p>文件警告</p>
</warn>

let warnOptions = {
  content: '文件不存在'
}

| Options | Type | Description | Default | necessary | result | |-----------------|:--------:|:---------------------------:|:--------:|:--------:|:--------:| | content | string | 弹窗内容 | | 否 | |

scroll

<section style="width:300px;height:200px">
<scroll :scrollColor="#fff">
  <p>据新华社电中航工业、国机集团等8家央企6日在京签约，在重要项目、科技转化等相关领域开展重组合作整合，这将成为央企间产业联合协作的新典范，也将开启央企间产业重组合作整合的新阶段。
相关合作内容包括：中航工业和国机集团共同发展八万吨模锻压机项目；中航工业将房地产业务全部划转保利集团，中核建设和中国一重在高温气冷堆主设备制造领域合作，兵器工业、兵器装备、中国国新对北方公司进行股权重组。
国务院国资委主任肖亚庆在6日参加中央企业产业合作座谈会上表示，下一步，国资委政策将加码推动央企产业重组步伐，通过业务整合、资产重组、股权合作、资产置换、无偿划转、协议转让、战略联盟、联合开发等多途径，加快央企间产业重组合作整合。</p>
</scroll>
  <p>文件警告</p>
</section>

| Options | Type | Description | Default | Necessary | |-----------------|:--------:|:---------------------------:|:-------:|:---------:| | scrollColor | string | 滚动条的颜色（#fff，rgb(0,0,0)，rgba(0,0,0,.3)三种格式都可以） | 透明蓝rgba(0,144,255,.3) | 否 |

keep defending