byt-ui

安装

yarn add byt-ui -S

全局引入

import BytUI from "byt-ui"
import 'byt-ui/lib/byt-ui.css'
Vue.use(BytUI)

按需引入公用方法 也可全局使用this.$byt

import {utils} from "byt-ui"

组件调用示例

  <byt-base-view
    :label-width="100"
    :search-list="searchList"
    :fetch="getTableData"
    :table-data="tableData"
    :columns="columns"
    :pagination="pagination"
    ref="baseView"
  >
    <template #btns>
      <el-button type="primary" icon="el-icon-plus">新增</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="onClear">初始化表单</el-button>
    </template>

    <template #actions>
      <el-button type="text" icon="el-icon-edit">编辑</el-button>
      <el-button type="text" class="el-button-delete" icon="el-icon-delete">删除</el-button>
    </template>
  </byt-base-view>

export default {
  name: 'App',
  data(){
    return{
      searchList: [
        {
          label: '输入框',
          key: 'input',
          type: 'input',
          default:"abc"
        },
        {
          label: '下拉框',
          key: 'select',
          type: 'select',
          default:1,
          options:[
            {label:"a",value:1},
            {label:"b",value:2},
            {label:"c",value:3},
            {label:"d",value:4}
          ]
        },
        {
          label: '级联选择',
          key: 'cascader',
          type: 'cascader',
          default:"yizhi",
          options:[{
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则',
              children: [{
                value: 'yizhi',
                label: '一致'
              }, {
                value: 'fankui',
                label: '反馈'
              }, {
                value: 'xiaolv',
                label: '效率'
              }, {
                value: 'kekong',
                label: '可控'
              }]
            }]
          }]
        },
        {
          label: '年月日',
          key: 'date',
          type: 'datepicker',
          default:moment().format("YYYY-MM-DD")
        },
        {
          label: '年月',
          key: 'month',
          type: 'datepicker',
          fields:"month",
          default:moment().format("YYYY-MM")
        },
        {
          label: '年',
          key: 'year',
          type: 'datepicker',
          fields:"year",
          default:moment().format("YYYY")
        },
        {
          label: '日期区间',
          key: 'daterange',
          type: 'daterange',
          default:["2023-06-05","2023-06-07"]
        }
      ],
      tableData: [],
      columns: [
        { label: '头像', slot: 'avatar', fixed: 'left' },
        { label: '用户名', key: 'username', fixed: 'left' },
        { label: '姓名', key: 'name' },
        { label: '手机号', key: 'phone' },
        { label: '昵称', key: 'nickname' },
        { label: '邮箱', key: 'email' },
        { label: '状态', slot: 'lockFlag' },
        { label: '创建时间', key: 'createTime' },
        { label: '操作', key: 'actions', slot: 'actions', width: 160, fixed: 'right' }
      ],
      loading: false,
      pagination: {
        total: 0
      }
    }
  }
}

npm 发布执行顺序

1. yarn lib
2. 修改package.json  version 版本号
3. npm publish

手动刷新淘宝镜像包：

https://npmmirror.com/sync/byt-ui

升级依赖包

yarn  upgrade byt-ui --latest

删除已发版本,非必要情况，不允许删除包，删除后24小时内无法上传

运行 npm unpublish 包名  --force 命令，即可从npm删除已发布的包。

1、npm unpublish 命令只能删除72小时以内发布的包

2、npm unpublish 删除的包，在24小时内不允许重复发布