yian v1.1.5

📦 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 工具箱

🚀🚀🚀 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 事件标签上，如上

❤️ 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 属性列表

💥 标签Events 事件列表

❤️ 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 属性列表

💥 标签Events 事件列表

❤️ 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