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'
}

datepicker

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

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

dialog

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

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

timepicker

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

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

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); // 处理返回的警告提示
  }
}

warn

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

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

scroll

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

keep defending