vue-common-web-ui

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 0000', eDate: '2018-01-22', eStandard: '2018-01-22 2359'}，单选日期时只返回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