sf-npm-ui-dom

Install

npm install sf-npm-ui-dom -S

Quick Start

import Vue from 'vue'
import Element from 'element-ui'

import SfElement from 'sf-npm-ui-dom'
import 'sf-npm-ui-dom/lib/sf-npm-ui-dom.css'

Vue.use(Element)
Vue.use(SfElement)


// or
import Element from 'element-ui'

import {
  DivisionSelect,//省市区级联，无需调接口直接用。
  MultipleSelect,//多选下拉二次封装,多选时展示样式优化。
  TextArea,//文本域（添加清除按钮）。
  Upload,//上传视频/图片/设置大小/视频图片放大预览。
  XlsxUpload,//上传文件。
  BaseView,//业务需求，基础盒子。
  Pagination,//分页二次封装。
  DataPicker,//时间选择器二次封装，简化，设置了初始默认时间优化。
  SfCascader //级联二次封装，可以设置新的键并放入多个value值，可一次性取到多个值，返回数组结构的数据。
  // ...
} from 'sf-npm-ui-dom'
import 'sf-npm-ui-dom/lib/sf-npm-ui-dom.css'

Vue.use(Element)

Vue.component(DataPicker.name, DataPicker)
Vue.component(BaseView.name, BaseView)

Basic Usage

<div>上传视频/图片</div>
<div style="margin-top: 10px">
  <upload
    v-model="imgList1"
    :max-length="3"
    :token="token"
    :action="appurl + '/work-order/order/uploadFile'"
  />
</div>

<div>上传图片</div>
<div style="margin-top: 10px">
  <upload
    v-model="imgList2"
    :max-length="3"
    :file-type="['image']"
    width="70px"
    height="70px"
    :token="token"
    :action="appurl + '/work-order/order/uploadFile'"
  />
</div>

<div>上传图片(限制1张)</div>
<div style="margin-top: 10px">
  <upload
    v-model="img"
    :max-length="1"
    :file-type="['image']"
    width="70px"
    height="70px"
    :token="token"
    :action="appurl + '/work-order/order/uploadFile'"
  />
</div>

<div>上传文件</div>
<div style="margin-top: 10px">
  <xlsx-upload
    :data="data"
    :loading="uploadLoading"
    file-name="默认为file"
    button-name="默认为选择文件"
    @click="(e) => operateUpload(e)"
  />
</div>

<div>文本域（添加清除按钮）</div>
<div style="margin-top: 10px">
  <text-area v-model="num" placeholder="备注" clearable />
</div>

<div>多选下拉二次封装多选时展示样式优化</div>
<div style="margin-top: 10px">
  <multiple-select v-model="value" placeholder="多选下拉可搜索样式优化">
    <el-option
      v-for="item in ['01', '02', '03']"
      :key="item"
      :label="item"
      :value="item"
    />
  </multiple-select>
</div>

<div>省市区级联/可搜索（公司业务需求）</div>
<div style="margin-top: 10px">
  <division-select v-model="division" />
</div>

<div>基础盒子（公司业务需求）</div>
<div style="margin-top: 10px">
  <base-view final />
</div>
<div>分页器二次封装</div>
<div style="margin-top: 10px">
  <pagination
    :total="total"
    :page.sync="listQuery.current"
    :limit.sync="listQuery.size"
    layout="slot,->,sizes, prev, pager, next, jumper"
    @pagination="(e) => operateEmitModule(4, e)"
  >
    <span class="el-pagination__total" style="float: left">
      共付款{{ total }}笔, 累次￥{{ totalAmount }}
    </span>
  </pagination>
</div>
<div>时间选择器二次封装，简化，设置了初始默认时间优化</div>
<div style="margin-top: 10px">
  <data-picker
    v-model="createData"
    start-placeholder="创建时间-开始时间"
    end-placeholder="创建时间-结束时间"
  />
</div>
<div>级联二次封装，可以设置新的键并放入多个value值，可一次性取到多个值，返回数组结构的数据。</div>
<div style="margin-top: 10px">
  <sf-cascader v-model="division" :options="options" :props="{label:'value',value: {data:['eid','value']}, children: 'childrenNode'}" />
</div>