Vue 3 + TypeScript + Vite

申请权限弹窗

给业务方提供的申请权限的弹窗组件

Demo URL

接入文档

Table of Contents

• Installation
  • Install with npm
  • Use inline script directly
• Usage
• Config
• FAQ
• Browser Support
• Acknowledgement

Installation

Install with npm

$ npm install @yqg/permission

Install with yarn

$ yarn add @yqg/permission

Install with install

$ pnpm install @yqg/permission

Usage

step1: 在入口文件(main.js/index.js/app.ts/)引入@yag/permission，并调用start方法注册。 See example

import yqgPermission from './yqg-permission';
yqgPermission.start();
//支持定义组件标签名，默认为‘<yqg-permission></yqg-permission>’
yqgPermission.start({tagName: 'my-element'});

step2: 像原生标签一样进行使用 See example

	<yqg-permission 
		workNumber="05184"
		businessCode="PPDL"
		:permissions="['permissionCode1, permissionCode2']"
		:color="'red'"
		:locale="'zh-CN'"
		@success="() => {console.log('请求成功')}"
		>
	</yqg-permission>

配置说明

支持自定义标签：yqgPermission.start({tagName: 'my-element'});

yqg-permission 组件参数说明

| 参数项 | 是否必传 ｜ 说明 | 类型 | 默认值 | | -------------- | -------- | ------------------ | ------------------ | -------- | | work-number | 是 | 当前登陆人工号 | string | '' | | business-code | 是 | 系统的权限code | string | '' | | permissions | 是 | 当前页面下所有权限点 | string[]或string | [] | | color | 否 | 主题色（同antd） | string | #1677ff | | locale | 否 | 当前语言类型（同i18n） | string | zn-CH | | success | 否 | 申请成功时回调函数(vue)| Function | ()=> {} | | type | 否 | 组件类型 | string | default |

type 参数说明

type = "default": 默认展示图+按钮组件，点击可弹出弹窗 type = "text": 展示‘申请权限’文案，点击可弹出弹窗 type = "custom": 支持自定义组件，以slot的方式添加自定义组件，点击自定义组件可弹出弹窗，例如：

	<yqg-permission 
		workNumber="05184"
		businessCode="PPDL"
		:permissions="['permissionCode1, permissionCode2']"
		:color="'red'"
		:locale="'zh-CN'"
		type="custom"
		@success="() => {console.log('请求成功')}"
		>
		<div>自定义按钮</div>
	</yqg-permission>

Browser Support

因为该npm包底层使用webComponent中customElements.define，所以仅支持customElements.define的浏览器

NPM scripts

• pnpm install: 安装依赖
• pnpm dev: 启动项目
• pnpm build: 编译项目
• npm publish: 发布项目

todo

todo：优化项 react中成功回调、多语言

问题反馈