yian

Install

npm install yian -S

Quick Start Vue2.6

//main.js

import yian from 'yian';
import 'yian/packages/theme-chalk/src/yel-ui.scss'
/* import service from 'your interceptor filepath' */

Vue.use(yian);

const $_Y = {
  /* 一些属性 */
  service, //import your axios interceptor 你的axios全局拦截器

  //举例1: ElementUILoading: ture [Element的loading功能(默认为false)，对非get以外的请求开启了本功能，get请求时采用ElementUI官方指令方式按需插入]

  //举例2:  baseVersionApi: 'v2‘ [接口的baseversion预留，如 '/v2' 或者 '/api']
};

Vue.prototype.$yian = yian.content($_Y);

Usage 配置axios拦截器

️ 配置完成后导入 main.js 入口，作为$_Y 属性注入。

// create an axios instance
const service = axios.create({});

// request interceptor
service.interceptors.request.use();

// response interceptor
service.interceptors.response.use();

export default service;

️ Vue 请求规则，支持 axios 原有功能，yian 已添加 axios 在 1000ms 内重复请求限制。

export default {
  methods: {
    getList() {
      //举例1 默认为
      this.$yian
        .axios({ url: 'user/login', method: 'post', params: { username: admin, password: 123456 } })
        .then(/* ... */);
      //举例2
      this.$yian
        .axios({
          url: '/academic/getAcademicField',
          method: 'get',
          params: { currentPage: 1, pageSize: 10 },
        })
        .then(/* ... */);
      //举例3
      this.$yian.axios({
        url: '/v2/qiniu/upload',
        method: 'post',
        params: formData,
        headers: { 'content-type': 'multipart/form-data' },        
      })  
    },
  },
};

隐藏功能 yian还做了axios的深度二封Proxy。支持更简便的请求写法，具体方法可以看一下源代码。

Usage Utils 工具箱

Utils 方法	用法及介绍
deepClone 深拷贝	this.$yian.utils.deepClone(obj)
copyData Vue 源码深拷贝(推荐)	this.$yian.utils.copyData(obj)
unique 字符串、数组去重	this.$yian.utils.unique(params)
mobileCheck 手机号检验	this.$yian.utils.mobileCheck(mobile)
unixDate Unix 时间戳转化日期时间	this.$yian.utils.unixDate(Unixtime)
isExternal 是否为外链	this.$yian.utils.isExternal(link)

Usage v-popup 指令打开 el-dialog 弹窗

//Vue Click事件标签处使用v-popup指令案例
<div v-for="(item, index) in List" :key="index">
  <el-button
    id="`${index}_order_shipping`"
    v-popup.orderShipping="{a:index, b:item}"
    type="primary"
    module="order"
    width="1200"
    >发货</el-button
  >
</div>

标签attribute 属性列表 [相关属性用于 el-dialog，却写在 Click 事件标签上，如上]

属性	可选性	类型	默认值	作用
id	必须necessary	String	——	key值，区别于其他按钮指令控制的el-dialog弹窗
v-popup	必须necessary	Any	——	传入el-dialog组件的值
v-popup.[xxx]	必须necessary	——	——	如 v-popup.orderShipping 中的 orderShipping，和组件注册时所需参数一直，否则会有问题!
module	必须necessary	String	——	el-dialog组件隶属主模块名称，和组件注册时所需参数一直，否则会有问题!
title	非必须unnecessary	String	操作窗口	el-dialog窗口标题
hide_footer	非必须unnecessary	Boolean	false	是否隐藏页脚
hide_cancel	非必须unnecessary	Boolean	false	是否隐藏取消按钮
sure_btn	非必须unnecessary	String	确定	确认按钮文字修改
width	非必须unnecessary	Number	730px	el-dialog宽度
top	非必须unnecessary	String	15vh	el-dialog距顶高度
action	非必须unnecessary	function	——	父组件上的回调事件，如存在，el-dialog组件打开时即调用

el-dialog组件示例

//orderShipping组件内容
<template>
  <div>
    orderShipping主内容块
  </div>
</template>

<script>
  export default {
    //props须写成这样才能传入值
    props: ['value'],
    methods: {
      //affirm事件必须写上，此方法已与确认按钮耦合。
      //handleClosed方法控制el-dialog窗口关闭
      affirm(vlm) {
        vlm.handleClosed();
      },
    },
  };
</script>

️ el-dialog组件注册

• 项目结构目录建议

src
├── layout //公共布局
├── router //vue-router
│   └── index.js
├── store //vuex
│   └── index.js
├── styles //公共样式
│   └── ....scss
├── icons  //icons目录
│   ├── svg
│   │   └── ....svg
│   └── js
│       └── symbolIcon.js
├── components //公用组件
│   └── ....vue
├── views  //页面
│   └── order  //业务模块名
│       ├── components //隶属模块组件
│       │   └── orderShipping.vue
│       └── index.js
├── App.vue
└── main.js

• 建议的目录路径/src/views/[隶属模块名]/index.js 导出组件模块

import yian from 'yian';
import orderShipping from './components/orderShipping.vue';
const modules = {};

modules.install = function() {
  //'order','orderShipping'与attribute 属性列表中v-popup.[xxx] 指令修饰符和module需一致
  yian.component('order', 'orderShipping', orderShipping);
};

export default modules;

• webpack 入口文件中用 Vue.use()使用插件的形式全局注入组件

import order from '@/views/order/index.js';

Vue.use(order);

Usage Icon 组件

• icon 目录参考目录建议
• js 目录中放入 Iconfont Symbol 代码
• svg 目录留作本地 icon 用，使用请在 main.js 中加入下面代码

//注意@别名配置
const req = require.context('@/icons/svg', false, /\.svg$/);
const requireAll = (requireContext) => requireContext.keys().map(requireContext);
requireAll(req);

• 使用

//外链模式和Iconfont模式都支持，Iconfont图标名去掉前半部分'icon-'即可，本地svg输入文件名即可
<svg-icon icon-class="shouye" />
<svg-icon icon-class="https://panjiachen.github.io/vue-element-admin-site/home.png" />

Usage Upload 组件

标签attribute 属性列表

属性	可选性	类型	默认值	作用
action	必须necessary	function(file, fields, [...thumb可选])	———	上传操作钩子，请保证是一个promise，内部有请求体，且保证resolve和reject出结果。file是数组，元素是一个个formData对象，fields是fields属性传入的对象，[thumb可选]Canvas画出的缩略图Base64数据，multiple属性为true时thumb是一个数组，包含base64元素；为false时thumb是一个base64数据。
afterUpload	必须necessary	function(res)	———	文件上传后的钩子，处理结果
multiple	非必须unnecessary	Boolean	false	是否多文件上传
needCanvas	非必须unnecessary	Boolean	false	是否需要截取image、vedio画面第一帧
autoUpload	非必须unnecessary	Boolean	true	是否自动上传。当选择false时，selectX事件会触发，且action钩子、afterUpload钩子、needCanvas属性都会失效!
btn_words	非必须unnecessary	String	上传图片	按钮文字内容
size	非必须unnecessary	String	medium	按钮大小，支持el系 medium / small / mini 三种大小
color_type	非必须unnecessary	String	primary	按钮颜色，支持el系 primary / success / warning / danger / info / text
fields	非必须unnecessary	Object	null	body请求体附带的fields字段

标签Events 事件列表

事件名称	说明	回调参数
selectX	autoUpload属性为false时，此事件存在	上传文件时选中的文件生成的数组，元素是文件formData对象
linkBase64	当needCanvas和multiple属性同时存在时，此事件存在	是一个数组，元素是选中文件的Base64路径

ya-upload组件示例

<ya-upload
  @linkBase64="(val) => (Alinkimg1 = val)"
  :action="uploadNow"
  :afterUpload="uploadAfter"
  :btn_words="multiple ? (needCanvas ? '批量选择' : '批量上传') : '单个上传'"
  size="mini"
  :autoUpload="true"
  :needCanvas="needCanvas"
  :fields="{ type: '1', group_id: '4' }"
  :multiple="multiple"
/>
<script>
  export default {
    methods: {
      uploadNow(file, fields, thumb) {
        return new Promise((resolve, reject) => {
          let formData = new FormData();
          formData.append('thumbnail', thumb);
          formData.append('group_id', fields.group_id);
          formData.append('type', fields.type);
          formData.append('file', file[0]);
          this.$yian
            .axios({
              url: '/v2/qiniu/upload',
              method: 'post',
              params: formData,
              headers: { 'content-type': 'multipart/form-data' },
            })
            .then((res) => {
              resolve(res);
            })
            .catch((err) => {
              reject(err);
            });
        });
      },
      uploadAfter(res) {
        console.log(res);
      }      
    },
  };
</script>  

Usage Checkbox 组件

标签attribute 属性列表

属性	可选性	类型	默认值	作用
selectData	必须	Array	——	已经被选择的内容Selected
options	必须	Object	——	指定input原始标签绑定的value值，且请把图片的文字放入options的name或者title字段
linkSrc	非必须	String	https://kodo.mboke.top/le-icon-folder.png	外链图片地址
width	非必须	Number	84px	主盒子宽度
height	非必须	Number	84px	主盒子长度
srcWidth	非必须	Number	64px	链接图宽度
srcHeight	非必须	Number	64px	链接图长度

标签Events 事件列表

事件名称	说明	回调参数
selectX	当绑定的值value选中或取消发生变化时触发的事件	选中后的value

ya-checkbox组件示例

<ya-checkbox
  @selectX="(val) => (selectMaterials = val)"
  :options="item"
  :selectData="selectMaterials"
  :linkSrc="item.type === '1' ? item.url : item.thumbnail"
  :srcWidth="64"
  :srcHeight="64"
  :width="104"
  :height="104"
></ya-checkbox>

License

MIT

Copyright (c) 2021-present, Marhoo