公共方法

# 前端插件开发

# 公共方法说明

# 通知弹窗`notification`

通知弹窗notification

用法

import notify from 'gw-base-utils-plus/notification'

notify({
    type: 'success'
    title: '成功',
    message: '',
    customClass: 'successClass'
});

// notify.type(String | {})
notify.success('成功');

notify.success({
    title: '成功',
    message: '',
    customClass: 'customClass'
});

# 表单验证手机、名称`formValidate`

表单验证手机、名称formValidate

el-form具体属性参考 (opens new window)

用法:

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
        <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
    </el-form>
</template>

<script>
  import {validateTel, validateName} from 'gw-base-utils-plus\formValidate.js'
  export default {
    data() {
      return {
        ruleForm: {
          phone: '',
          name: '',
        },
        rules: {
          phone: [
            { validator: validateTel, trigger: 'blur' }
          ],
          name: [
            { validator: validateName, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

# 两个日期相差天数`dateDiff`

两个日期相差天数dateDiff

用法:

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * 两个日期相差天数
 * @param {String} 两个日期相差天数(sDate1, sDate2),时间格式【2020-05-10】
 * @returns {Number}    返回相差天数数值
 */
myUntils.dateDiff('2020-05-10', '2020-05-11');  // 1

# 时间戳转日期`getTimeStampToTime`

时间戳转日期getTimeStampToTime

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * 时间戳转日期 
 * @param {Number} timeStamp 传入的时间戳
 * @returns {string} formatType 'YYYY-MM-DDTHH:mm:ss'
 */
myUntils.getTimeStampToTime(1648103836233); // '2022-03-24T14:37:16'

# 数组去重`unique`

数组去重unique

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * 数组去重 
 * @param   {Array} array
 * @returns {Array} unique
 */
myUntils.unique([1, 1, 2, 2, 3, 4]); // [1, 2, 3, 4]

# 获取当前时间`getCurrentDate`

获取当前时间getCurrentDate

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * 获取当前时间
 * @param   {number} format 1: YYYY-MM-DD HH:mm:ss, 0: YYYY-MM-DD
 * @param   {number} type 年月日分割符
 * @returns {number} date 
 */
myUntils.getCurrentDate(1, '-'); // '2022-03-24'
myUntils.getCurrentDate(0, '-'); // '2022-03-24 15:03:53'

# 下载xlsx文件`downloadFile`

下载xlsx文件downloadFile

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * 文件导出功能
 * @param {ArrayBuffer} data 文件下载接口返回的数据流
 * @param {String} name 导出的文件命名，不传默认为时间命名
 * @returns {obj}
 */
myUntils.downloadFile(data, '1.xlsx');

# 获取当月天数`getCurrentMonthDays`

获取当月天数getCurrentMonthDays

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * 获取当月天数
 * @returns {Number} 天数
 */
myUntils.getCurrentMonthDays();

# 获取随机数`getRandomNumber`

获取随机数getRandomNumber

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * 获取随机数
* @param {number} n 随机数数量
* @returns {Array} 随机数数组
*/
myUntils.getRandomNumber(10);

# 判断字符串是否为空`isNull`

判断字符串是否为空isNull

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * 判断字符串是否为空
* @param {String} str 字符串
* @returns {Boolean} 
*/
myUntils.isNull(''); // true
myUntils.isNull('123'); // false

# 判断是否为身份证号`isIdCard`

判断是否为身份证号isIdCard

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 *
 * @desc  判断是否为身份证号
 * @param  {String|Number} str
 * @return {Boolean}
 */
myUntils.isIdCard(''); // false

# 判断是否为邮箱`emails`

判断是否为邮箱emails

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 *
 * @desc  判断是否为邮箱
 * @param  {String} str
 * @return {Boolean}
 */
myUntils.emails('123131@qq.com'); // true

# 判断是否为手机号`isPhoneNum`

判断是否为手机号isPhoneNum

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 *
 * @desc   判断是否为手机号
 * @param  {String|Number} str
 * @return {Boolean}
 */
myUntils.isPhoneNum('13131313131'); // true

# 生成唯一ID`generateUUID`

生成唯一IDgenerateUUID

import myUntils from 'gw-base-utils-plus\myUtils'

/**
 * @description 生成唯一Id
 *  @return {string}
 */
myUntils.generateUUID(); // '10850499-573c-44d8-b89d-80e544ac4c0b'

# 公共样式包说明

# gw-base-style-plus样式包结构

gw-base-style-plus样式包结构

gw-base-style-plus
    │  index.scss (外框样式)
    │  package.json
    │  README.md
    │  style.scss (样式引入入口文件)
    │  videoPlaybackCom.scss
    │  videoPlayer.scss
    │  VideoSystem.scss
    │
    ├─elementStyleReset
    │  │  index-b.css
    │  │  index.cssE
    │  │  reset.scss (对ElementUI样式重置)
    │  │
    │  └─fonts
    │          element-icons.ttf
    │          element-icons.woff
    │
    ├─Images
    │      connecting.jpg
    │      ...
    │
    └─modular (样式模块)
            alertHandle.scss
            browserScroll.scss
            btnHandle.scss
            containerHandle.scss
            dialogStyle.scss
            equipStatus.scss
            inputStyle.scss
            listHandle.scss
            mobileStyle.scss
            noDataTips.scss
            setTheme.scss   (引用主题颜色方法)
            style-black.scss (黑色主题)
            style-white.scss (白色主题)
            tableHandle.scss
            txtHandle.scss

# 公用样式引入

公用样式引入

重复使用的布局结构样式通常使用modular下的样式：

// a.scss
// @minxin mixin-name
@mixin page-header {
    height: 70px;
    ...
}

用法：

<template>
    <div></div>
</template>

<script></script>

<style lang="scss">
div {
    @include page-header;
}
</style>

# modular公用样式说明

modular公用样式说明

containerHandle.scss

// 左右布局时，右侧布局样式
@mixin main-container {}

// 上中下布局，顶部样式
@mixin page-header {}

// el-tab 自定义样式
@mixin tab-header {}

// el-pagination 底部分页样式
@mixin pagination {}

// 左右布局时，左侧暂无数据样式
@mixin leftNoDataTips {}

// 暂无数据样式
@mixin noDataTips {}

dialogStyle.scss

// el-dialog 自定义样式
@mixin el-dialog {}

inputStyle.scss

// el-input 输入框样式
@mixin searchInput {}

listHandle.scss

// 左右布局时，左侧布局样式
@mixin main-list {}

// list 列表统一高度，字体
@mixin list-height {}

// 左侧列表顶部的标题、icon、搜索框
@mixin list-title {}

tableHandle.scss

// el-table 表格统一样式
@mixin el-table {}

txtHandle.scss

// 文本单行超出省略号
@mixin whiteSpace {}

# 主题切换样式

主题切换样式

在色彩中对标签设置了颜色, 通过以下代码能够切换页面白色（黑色）主题

let style = 'light';    // 或者 'dark'
window.document.documentElement.setAttribute('data-theme', style || 'dark')

# 色彩

色彩

用法：

<template>
    <div></div>
</template>

<script></script>

<style lang="scss">
div {
    @include background_color('nav-bgColor');
}
</style>

在gw-base-style-plus/modular下的style-black.scss和style-white.scss中可添加对应变量颜色并引用

// style-balck.scss
$dark: (
    nav-bgColor: #252833, //左侧导航按整体颜色
    // ...
)

// style-white.scss
$light: (
    nav-bgColor: #0754aa, //左侧导航按整体颜色
    // ...
)

通过setTheme.scss中定义的方法设置对应属性：

$themes: (light: $light, dark: $dark);

@mixin themeify {}

//声明一个根据Key获取颜色的function
@function themed($key) {}

//获取背景颜色
@mixin background_color($color) {
    @include themeify {
        background-color: themed($color) !important;
    }
}

// ...

# 图标 ICONFONT

图标 ICONFONT

用法：

引用gw-base-font-plus/iconfont.css可以使用内置的图标效果

<i class="iconfont icon-gw-icon-tianjiazifenzu"></i>

通过设置标签的类名为指定图标类名(iconfont + iconClass)

具体有哪些图标可以通过查看：

iconfont.json中icon name

// iconfont.json
{
  "id": "3160817",
  "name": "IOT new",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "28210995",
      "name": "gw-icon-tianjiazifenzu",
      "font_class": "gw-icon-tianjiazifenzu",
      "unicode": "e691",
      "unicode_decimal": 59025
    },
    {
      "icon_id": "28210870",
      "name": "gw-icon-shebeixinxilian",
      "font_class": "gw-icon-shebeixinxilian",
      "unicode": "e689",
      "unicode_decimal": 59017
    },
    // ...
  ]
}

或者iconfont.css中的类名

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-gw-icon-tianjiazifenzu:before {
  content: "\e691";
}

.icon-gw-icon-shebeixinxilian:before {
  content: "\e689";
}

# 布局 Layout

布局 Layout

用法：

<template>
    <div>
        <div class="left">
            <div class="left-top"></div>
            <div class="left-content"></div>
        </div>
        <div class="right">
            <div class="right-top"></div>
            <div class="right-content"></div>
        </div>
    </div>
</template>

<script></script>

<style lang="scss">
.left {
    @include main-list;

    .left-top {
        @include list-title;
    }
}

.right {
    @include main-container;
    .right-top {
        @include page-header;
    }
}
</style>

# 标签页 el-tabs

标签页 el-tabs

el-tab具体属性 (opens new window)

用法：

<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="1" name="first"></el-tab-pane>
            <el-tab-pane label="2" name="second"></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'second'
        };
    },
    methods: {
        handleClick(tab, event) {
        
        }
    }
};
</script>

<style lang="scss">
.el-tabs {
    @include tab-header;
}
</style>

# 策略脚本的分页 el-pagination整体结构

策略脚本的分页 el-pagination整体结构

el-pagination具体属性 (opens new window)

用法：

<template>
    <div class="pagination">
        <el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" 
        :pager-count="7" layout="prev, pager, next" :page-size="pageSize" :current-page="pageNo" 
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data () {
        return {
            pageSize: 20,
            pageNo: 1,
            total: 0
        }
    },
    methods: {
        handleSizeChange() {

        },
        handleCurrentChange() {
            
        }
    }
}
</script>

<style lang="scss">
.pagination {
    @include pagination;
}
</style>

# 表格 el-table

表格 el-table

用法：

<template>
    <div id="eqTable">
        <el-table :data="tableData" v-loading="tbLoad" :height="tableHeight" border id="table" ref="multipleTable" style="width: 100%">
            <el-table-column prop="time" label="time" width="200"></el-table-column>
            <el-table-column prop="equip_no" label="equip_no"></el-table-column>
            <template slot="empty">
                <div class="noDataTips" v-if="!tbLoad"></div>
                <div v-else></div>
            </template>
        </el-table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tableData: [],
            tbLoad: false,
            tableHeight: null
        }
    },
    mounted() {
        windowResize();
        window.onresize = windowResize;
    }
    methods: {
        windowResize() {
            let eqTable = document.getElementById('eqTable');
            if (eqTable) {
                thisOne.tableHeight = eqTable.offsetHeight;
            }
        }
    }
}
</script>

<style lang="scss">
.el-table {
    @include el-table;
}
</style>

# 暂无数据 noData

暂无数据 noData

文字版本

<template>
    <div class="container">
        <div class="leftNoDataTips">
            暂无数据
        </div>
    </div>
</template>

<script></script>

<style lang="scss">
.container {
    @include leftNoDataTips;
}
</style>

图文版本

<template>
   <div class="container">
       <div class="noDataTips"></div>
   </div>
</template>

<script></script>

<style lang="scss"></style>

# 对话框 el-dialog

对话框 el-dialog

用法：

<template>
    <el-dialog title="confirmed" class="confirmed" :visible.sync="visible" @close="closeEquipDialog" width="840px" top="10vh" center>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            visible: true,
        }
    },
    methods: {
        closeEquipDialog() {
            this.visible = false;
        }
    }
}
</script>

<style lang="scss">
.el-dialog {
    @include el-dialog;
}
</style>

# 输入框 el-input

输入框 el-input

<template>
   <div class="container">
       <el-input v-model="value"></el-input>
   </div>
</template>

<script>
export default {
   data () {
       return {
           value: ''
       }
   }
}
</script>

<style lang="scss">
.container {
   @include searchInput;
}

</style>

上次更新: 12/14/2022, 4:34:53 PM

← 独立构建开发项目模板引擎→

公共方法

# 前端插件开发

# 公共方法说明

# 通知弹窗notification

# 表单验证手机、名称formValidate

# 两个日期相差天数dateDiff

# 时间戳转日期getTimeStampToTime

# 数组去重unique

# 获取当前时间getCurrentDate

# 下载xlsx文件downloadFile

# 获取当月天数getCurrentMonthDays

# 获取随机数getRandomNumber

# 判断字符串是否为空isNull

# 判断是否为身份证号isIdCard

# 判断是否为邮箱emails

# 判断是否为手机号isPhoneNum

# 生成唯一IDgenerateUUID

# 公共样式包说明

# gw-base-style-plus样式包结构

# 公用样式引入

# modular公用样式说明

# 主题切换样式

# 色彩

# 图标 ICONFONT

# 布局 Layout

# 标签页 el-tabs

# 策略脚本的分页 el-pagination整体结构

# 表格 el-table

# 暂无数据 noData

# 对话框 el-dialog

# 输入框 el-input

# 通知弹窗`notification`

# 表单验证手机、名称`formValidate`

# 两个日期相差天数`dateDiff`

# 时间戳转日期`getTimeStampToTime`

# 数组去重`unique`

# 获取当前时间`getCurrentDate`

# 下载xlsx文件`downloadFile`

# 获取当月天数`getCurrentMonthDays`

# 获取随机数`getRandomNumber`

# 判断字符串是否为空`isNull`

# 判断是否为身份证号`isIdCard`

# 判断是否为邮箱`emails`

# 判断是否为手机号`isPhoneNum`

# 生成唯一ID`generateUUID`