更新记录

1.0.0(2021-11-13) 下载此版本

  1. 初次提交

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.2.0 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

项目说明

整理自己封装使用过的一些组件

项目搭建

  1. 配置组件自动注册 在pages.json文件下添加下面代码

    "easycom": {
    "autoscan": true,
    "custom": {
        "m-(.*)": "@/components/my/m-$1/index.vue" ,// 匹配components目录内的vue文件
        "p-(.*)": "@/components/plug/p-$1/index.vue" 
    }
    },
  2. 项目目录说明

components: 公用组件目录 my: 自己封装的目录 plug: 使用别人封装的目录(插件) css: 公用css目录 libs: 公共js方法 pages: 项目目录 static: 静态资源目录(图片,图标等) store: vuex目录

  1. 使用阿里图标库图标
  • 在阿里图标库中新建项目,如图所示 新建项目

  • 复制生成的 Font class 样式到 css-icon.css 文件

  • 在项目 App.vue 中引用 icon.css 文件全局使用

@import url("./css/icon.css");
  1. 公共js方法挂载到全局使用
  • libs 目录新建 index.js 文件,配置 js 文件引用

  • main.js 文件中引用到全局

//混入,全局方法
import {
    mixin,
    $u
} from '@/libs/index.js'

Vue.mixin(mixin)

Vue.prototype.$u = $u
  1. 通用正则
  • 邮箱 ^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+.)+(com|cn|net|org)$
  • 手机号 ^1[0-9]{10,10}$
  1. 展示图

表单界面展示

图片上传展示

递归组件实现树结构展示

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问