byt-ui

安装

yarn add byt-ui -S

全局引入

import BytUI from "byt-ui"
import 'byt-ui/lib/byt-ui.css'
Vue.use(BytUI, {
  size: 'small',
  //国际化配置
  i18n: (key, value) => i18n.t(key, value)
})

按需引入公用方法 也可全局使用 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小时内不允许重复发布