el-quick-form v0.2.19

todo

2021-10-10

1. 完善演示
2. 组件增强
3. 完善自定义组件
4. 自动创建表单与表格联动
5. 折叠处理

2021-10-06

1. 数据错误和 parentKey 的关系 1005
2. 动态组件
3. fromItem 插入 文案
4. el-select-tree
5. options 数据清空与更新
6. 可视化处理
7. 关联关系 vuale 函数
8. formConfig 配置检查与输出
9. 个性化动态化的数据接口请求

el-quick-form

基于 Vue 2.x 组件库,写一个 Vue 组件库，并为该组件库做一个类似 ElemnetUI 官网的文档。

npm package

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

// 安装
// npm install el-quick-form --save

// main.js
import QuickForm from "el-quick-form";
Vue.use(QuickForm);

CDN

在页面上引入下面两个 js 文件即可开始使用。

<!-- 为减少打包体积，需外部引入echarts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/el-quick-form@latest/lib/el-quick-form.umd.min.js"></script>

组件

my-button

my-button 组件是一个测试按钮组件

<vuep template="#myButton"></vuep>
<script v-pre type="text/x-template" id="myButton">
  <template>
    <my-button>{{ btnName }}</my-button>
  </template>

  <script>
   module.exports = {
      data() {
        return {
          btnName: "我的按钮"
        }
      }
    }
</script>

z-chart

z-chart 组件是基于 echarts 的组件，只需要设置父容器的宽高，再设置 options 值即可。

<vuep template="#basicBar"></vuep>
<script v-pre type="text/x-template" id="basicBar">
  <template>
    <div style="width:100%; height:100%;">
      <z-chart :options="chartData" />
    </div>
  </template>

  <script>
   module.exports = {
      created () {
        this.chartData = {
            title: {
              text: "ECharts 入门示例"
            },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          }
      }
    }
</script>

目录结构

docs # 文档目录
examples # vue测试demo
lib # umd构建生成目录
packages # UI组件源码目录
src # 主入口目录 src/index.js
staticDemo # 静态页面引入测试demo
publish.sh # npm包上传脚本
vue.config.js # vue-cli-service打包配置
# test # TODO 单元测试目录
# types # TODO ts支持目录

examples 处理

# 创建examples vue标准项目
vue create el-quick-form-examples
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n

docs

# 全局安装 docsify-cli
sudo npm i docsify-cli -g
# 创建一个新的项目docs
docsify init ./docs
# 默认会把当前目录的 README.md copy到docs目录，作为主页
# Initialization succeeded! Please run docsify serve ./docs
# 运行
docsify serve ./docs
# Serving /Users/Desktop/gitclone/el-quick-form/docs now.
# Listening at http://localhost:3000