Vue 사용자 정의 v-has 명령 실행 단추 권한 판단
응용 장면
백그라운드 관리 시스템의 경우 사용자마다 버튼 권한이 다릅니다.관리자가 권한을 설정한 후 사용자가 로그인할 때 인터페이스에서 단추 권한 목록을 가져와 백그라운드 데이터에 따라 어떤 단추를 표시할지 판단한다.
간단히 말하면, 사용자 정의 지령
Vue.js 홈페이지 사용자 정의 지령에 대한 설명
cn.vuejs.org/v2/guide/cu …
기초 개념
Vue는 핵심 기능이 기본적으로 내장된 명령어 (v-model과 v-show) 를 제외하고 사용자 정의 명령어를 등록할 수 있습니다.
Vue2.0에서 코드 복용과 추상적인 주요 형식은 구성 요소이다.그러나 일반 DOM 요소에 대한 기본 작업이 필요한 경우도 있습니다. 이때 사용자 정의 명령이 사용됩니다.
예를 들어 v-focus 명령을 사용자 정의하면 페이지가 불러올 때 입력 상자에 초점을 맞출 수 있습니다
<input v-focus>
전역 사용자 정의
// `v-focus`
Vue.directive('focus', {
// DOM ……
inserted: function (el) {
//
el.focus()
}
})
로컬 사용자 정의
// , directives :
directives: {
focus: {
//
inserted: function (el) {
el.focus()
}
}
}
갈고리 함수명령 정의 대상은 다음과 같은 몇 개의 갈고리 함수를 제공할 수 있습니다 (선택 사항입니다)
bind
한 번만 호출합니다. 명령을 원소에 처음 연결할 때 호출합니다.여기서 일회용 초기화 설정을 할 수 있습니다.
inserted
바인딩 요소가 부모 노드에 삽입될 때 호출됨 (부모 노드만 존재하지만 문서에 삽입된 것은 아님)
update
구성 요소의 VNode가 업데이트될 때 호출되지만 하위 VNode가 업데이트되기 전에 발생할 수 있습니다.명령의 값이 바뀔 수도 있고 없을 수도 있습니다.그러나 업데이트 전후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다.
componentUpdated
명령이 있는 구성 요소의 VNode와 하위 VNode를 모두 업데이트한 후 호출합니다.
unbind
한 번만 호출합니다. 명령과 원소가 묶일 때 호출합니다.
기타
이외에도 기초 개념, 갈고리 함수 파라미터, 동적 지령 파라미터 등이 있다.
cn.vuejs.org/v2/guide/cu …
홈페이지에서 분명하게 말했기 때문에 여기서 더 이상 군더더기를 하지 않겠다.
원리
만약 사용자 정의 지령의 원본에 흥미가 있다면, 블로그원에도 한 편의 문장이 매우 철저하게 이야기할 것이다
https://www.jb51.net/article/209716.htm
원리는 다음과 같다.
사용자 정의 명령 v-has
말은 귀찮게 하지 말고 본론으로 돌아가라.
오늘은 주로 요약: 사용자 정의 지령 v-has, 단추 권한 판단
로그인 인터페이스에서 버튼 권한 목록을 가져와 로컬 캐시 LOGIN_ 저장USER_BUTTON_AUTH 중
데이터 형식은 다음과 같습니다.
[
{
"checked":false,
"component":"",
"createTime":"2019-06-29 18:21:06",
"createUser":"026a564bbfd84861ac4b65393644beef",
"icon":"",
"id":"1503273153861066776",
"name":" ( )",
"open":"true",
"parentId":"2328050996633395469",
"parentName":" ",
"permission":"sys:index:vol",
"sort":103,
"status":"0",
"type":"2",
"updateTime":"2021-01-27 15:51:15",
"updateUser":"026a564bbfd84861ac4b65393644beef",
"url":""
}
]
사용자 정의 v-has 명령 설정utils 폴더 아래에 hasPermission을 새로 만듭니다.js 파일, index에 있습니다.js에서 일괄 내보내기
const hasPermission = {
install (Vue, options) {
Vue.directive('has', {
inserted: (el, binding, vnode)=>{
filterGlobalPermission(el, binding, vnode);
}
});
}
};
/**
*
*/
export const filterGlobalPermission = (el, binding, vnode) => {
let permissionList = [];
let authList = JSON.parse(localStorage.getItem('LOGIN_USER_BUTTON_AUTH') || "[]");
for (let auth of authList) {
permissionList.push(auth);
}
if (!permissionList.length) {
el.parentNode.removeChild(el);
return;
}
let permissions = [];
for (let item of permissionList) {
permissions.push(item.permission);
}
if (!permissions.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}
export default hasPermission;
utils 파일 아래의 index.jsutils 폴더 아래의 다른 js 파일도 index에 통일할 수 있습니다.js에서 내보내기
import hasPermission from './hasPermission'
export { hasPermission }
main.js에서 도입
import { hasPermission } from '@/utils'
Vue.use(hasPermission)
구성 요소에서 v-has를 사용하여 단추 권한에 따라 단추를 표시할지 여부를 판단합니다
<el-button v-has="'sys:arch:add'" type="primary" size="mini" icon="el-icon-plus" @click="add('1')">
</el-button>
총결산
Vue 사용자 정의 v-has 명령어 구현 단추 권한 판단에 관한 이 글은 여기에 소개되었습니다. 더 많은 Vue 사용자 정의 v-has 명령어 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.