element-plus-packages

element-plus 二次封装

引入css文件

// main.ts
<script setup lang="ts">
import 'element-plus-packages/dist/style.css'
</script>

切换npm源

npm config set registry https://registry.npmjs.org/

npm config set registry https://registry.npmmirror.com

npm login npm publish

wj-from

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  </header>
  <wj-form
    label-width="150px"
    status-icon
    label-suffix=":"
    :ruleForm="ruleForm"
    :rules="rules"
    :fieldList="fieldList"
    :a="123"
  >
    <template #name-prefix>
      <span>123</span>
    </template>
  </wj-form>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
const rules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
})
const ruleForm = reactive({
  name: ''
})
const handleLogin = () => {
  console.log('ruleForm:', ruleForm)
}
const fieldList = ref([
  {
    formItemAttrs: {
      label: '姓名',
      prop: 'name'
    },
    field: 'name',
    elements: [
      {
        eleAttrs: {
          placeholder: '请输入姓名',
          clearable: true
        },
        type: 'input'
      }
    ]
  },
  {
    elements: [
      {
        eleAttrs: {
          placeholder: '请输入姓名',
          clearable: true,
          onclick: handleLogin
        },
        text: '登录',
        type: 'button'
      }
    ]
  }
])
</script>

wj-table

<template>
  <div class="c-table">
    <WjTable :tableData="tableData" :tablePager="tablePager">
      <el-table-column label="操作">
        <el-button type="danger">删除</el-button>
      </el-table-column>
    </WjTable>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const tableData = reactive({
  attrs: {},
  data: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ],
  cols: [
    {
      attrs: {
        prop: 'date',
        label: '日期'
      }
    },
    {
      attrs: {
        prop: 'name',
        label: '姓名'
      },
      chidldren: []
    },
    {
      attrs: {
        prop: 'address',
        label: '地址'
      }
    }
  ]
})
const tablePager = reactive({
  currentPage: 1,
  pageSize: 10,
  attrs: {
    total: 100
  },
  handleSizeChange: (size: number) => {
    tablePager.pageSize = size
  },
  handleCurrentChange: (current: number) => {
    tablePager.currentPage = current
  }
})
</script>

<style lang="scss" scoped>
.c-table {
  // position: relative;
  height: calc(100vh - 16px);
}
</style>