整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

纯CSS 实现格子背景（国际象棋棋盘） - 掘金

纯CSS 实现格子背景（国际象棋棋盘） - 掘金

文简介

点赞 + 收藏 + 关注=学会了

这次会使用css画出一个格子背景。并且一步步分析如何实现~

思路

直接给答案：通过2个相等的直角三角形拼接，形成一个正方形。

三角形可以使用 background-image 的渐变来实现。

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
body {
  background-image: linear-gradient(45deg, #000 25%, transparent 0);
}

此时出来的效果如上图所示。

做一个45度的线性渐变，第一个颜色是#000（黑色），占整个背景贴片的25%，其余部分都是红色。

在上面的基础上，用 background-size 来控制背景贴片的大小。

body {
  background-image: linear-gradient(45deg, #000 25%, transparent 0);
  background-size: 200px 200px;
}

开始有点想法了吗？

此时如果我们再画多一个反过来的黑色的直角三角形，拼在一起不就成了正方形了吗？

反过来的三角形怎么画呢？我尝试将黑色从 25% 改成 75%，会得到以下效果

body {
  background-image: linear-gradient(45deg, #000 75%, transparent 0);
  background-size: 200px 200px;
}

可以看到红色的三角形就是原本黑色三角形反过来的样子。

把上图的“白色三角形”变成黑色，原本的黑色三角形（25%）继续保留。

于是我又加多层渐变~

body {
  background-image:
    linear-gradient(45deg, #000 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #000 0);
  background-size: 200px 200px;
}

简化一下代码：

body {
  background-image: linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
  background-size: 200px 200px;   
}

最后再做多一层上面的效果，然后移动一下其中一层的位置，就可以合并成一个黑色正方形。

body {
  background-image:
    linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),
    linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
  background-position: 0 0, 100px 100px;
  background-size: 200px 200px;
}

大功告成。

最后需要提醒的是，在本例中 background-position 第二个渐变的位移是 background-size 的一半，这样就能实现这种格子背景了~

完整代码

<style>
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  body {
    background-image:
      linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),
      linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
    background-position: 0 0, 100px 100px;
    background-size: 200px 200px;
  }
</style>

这是做成背景的完整代码。

单实现2048小游戏

想实现2048游戏书写代码时可以分为三个步骤

一、HTML部分

先书写HTML把游戏结构搭建出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!--最外部的大框-->
<div class="outermost"> //包裹游戏全局的大盒子
    <!--title-->
    <span class="top"><b>SCORE:<span id="score01"></span></b></span>//顶部实时显示的游戏分数
    <!--游戏大框框-->
    <div class="big">//2048游戏为四行四列因此需要16个div盒子
        <div class="cell" id="c00"></div>
        <div class="cell" id="c01"></div>
        <div class="cell" id="c02"></div>
        <div class="cell" id="c03"></div>
 
        <div class="cell" id="c10"></div>
        <div class="cell" id="c11"></div>
        <div class="cell" id="c12"></div>
        <div class="cell" id="c13"></div>
 
        <div class="cell" id="c20"></div>
        <div class="cell" id="c21"></div>
        <div class="cell" id="c22"></div>
        <div class="cell" id="c23"></div>
 
        <div class="cell" id="c30"></div>
        <div class="cell" id="c31"></div>
        <div class="cell" id="c32"></div>
        <div class="cell" id="c33"></div>
    //游戏结束时会弹出的提示框
    </div>
    <!--提示框-->
    <div class="tips" id="gameover">
       <p>GAME OVER!!! <br>
           SCORE: <span id="score02">0</span><br>
           <button class="startbtn">重新开始</button>
       </p>
    </div>
    <!--重玩一遍-->
    <div class="foot">
        <button class="replay"><a>重玩一遍</a></button>
    </div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

二、css部分

经过了第一步的搭建游戏框架，第二部就是给游戏添加样式，使它能显示出来

*{
    padding: 0px;
    margin: 0px auto;
    font-family: Arial;
 
}
/*最外部的大框*/
.outermost{
    width: 480px;
    height: 600px;
    font-size: 40px;
    margin-top: 120px;
}
/*title*/
<!--顶部显示分数的样式-->
.top{
    margin: auto;
}
.top span{
    color: red;
}
/*游戏大框框*/
.big{
    width: 480px;
    height: 480px;
    background:pink;
    border-radius: 8px;
}
<!--给每一个盒子包裹的小框子添加样式-->
.cell{
    list-style: none;
    float: left;
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #fbf8cd;
    margin-left: 16px;
    margin-top: 16px;
    border-radius: 6px;
}
<!--提前把出现的数2、4、8、16等的数所在的格子给添加好样式增加游戏体验感-->
.n2{background-color:#f65e3b;color:#776e65}
.n4{background-color:#33b5e5;color:#776e65}
.n8{background-color:#f2b179;color:#776e65}
.n16{background-color:#f59563;color:#776e65}
.n32{background-color:#f67c5f;color:#776e65}
.n64{background-color:#f65e3b;color:#776e65}
.n128{background-color:#edcf72;color:#776e65}
.n256{background-color:#edcc61;color:#776e65}
.n512{background-color:#9c0;color:#776e65}
.n1024{background-color:#33b5e5;color:#776e65;font-size:40px}
.n2048{background-color:#09c;color:#776e65;font-size:40px}
/*提示框样式*/
.tips{
    border: 1px solid #cccccc;
    background: #FFFFFF;
    width: 400px;
    height: 200px;
    border-radius: 10px;
    color: #ff4456;
    text-align: center;
    line-height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -100px;
    display: none;
}
.tips .startbtn{
    height: 50px;
    width: 200px;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 50px;
    border-radius: 10px;
    background: cornflowerblue;
    border: none;
}
/*重玩一遍*/
.foot{
    width: 200px;
    height: 50px;
}
.foot>.replay{
    width: 200px;
    height: 50px;
    background: aquamarine;
    margin-top: 60px;
    color: lightpink;
    border:0;
    font-size: 24px;
    font-weight: bold;
    border-radius: 6px;
}

书写好了HTML+CSS部分游戏的模样也就出来了，如下图所示：

三、JS部分

下面就到了最后也是最关键的一步----添加行为，也就是JS部分的书写，给其添加效果

//创建一个对象,里面存储所有的游戏数据及游戏方法
var game={
	data : [],   //定义一个数组，用来存所有的游戏的数据
	score : 0,   //定义一个分数的属性
	gamerunning : 1,   //定义一个游戏运行的状态，将其设置为1与其他状态区分开
	gameover : 0,     //定义一个游戏结束的状态
	status : 0,      //这个是目前游戏的状态，时刻的跟上面两个状态做比较，确定游戏处于运行或者结束
	start : function(){   //游戏开始时候的方法
//		游戏开始的时候肯定是要把游戏的状态设置成游戏运行的状态
//		this==game
		this.status=this.gamerunning;
//		游戏开始的时候分数清空
		this.score=0;
//		数组中的所有元素全部设置成0
		this.data=[
			[0,0,0,0],
			[0,0,0,0],
			[0,0,0,0],
			[0,0,0,0]
		];
		this.randomNum();//调用下面自定义的随机函数，可以在移动和开始的时候随机出来一个数
		this.randomNum();//调用两次是因为这是游戏开始时的方法，开局随机出现两个数和位置，因此需要调用两次
		this.dataView();//调用下面所写的更新视图的方法
	},
//	随机数的函数，开始的时候随机生成，移动的时候随机生成
	randomNum: function(){
		while(true){
			//		随机生成行和列 0 - 3随机整数
			var r=Math.floor( Math.random() * 4 );   //随机生成一个行
			var c=Math.floor( Math.random() * 4 );   //随机生成一个列
			
			if(this.data[r][c]==0){
				var num=Math.random() > 0.5 ? 2 : 4;//随机出现2或4
				this.data[r][c]=num;
				break;
			}
		}
	},
//	更新试图的方法
	dataView: function(){
//		大的循环,然后把所有的元素全部遍历一遍
		for(var r=0; r < 4; r++){
			for(var c=0; c < 4; c++){
//				找到对应的div
				var div=document.getElementById("c" + r + c);  //字符串拼接
				if(this.data[r][c] !=0){
//					数组中对应的内容放到格子上面去
					div.innerHTML=this.data[r][c];
//					样式也写成对应的
					div.className="cell n" + this.data[r][c];
				}else{
					div.innerHTML="";
					div.className="cell"
				}
			}
		}
//		更新分数
		document.getElementById("score01").innerHTML=this.score;
		//游戏没有结束的时候 弹出层时刻都是隐藏的
		if(this.status==this.gamerunning){
			document.getElementById("gameover").style.display="none";
		}else{
			document.getElementById("gameover").style.display="block";
			document.getElementById("score02").innerHTML=this.score;
		}
	},
//	判断游戏是否结束的方法
	isgameover: function(){
		for(var r=0; r < 4; r++){
			for(var c=0; c < 4; c++){
				if(this.data[r][c]==0){  //里面有空格子的时候，游戏还是可以运行
					return false;   //表示游戏还没有结束
				}
				if(c < 3){//判断左右是否有相同的
					if(this.data[r][c]==this.data[r][c+1]){
						return false;
					}
				}
				if(r < 3){
					if(this.data[r][c]==this.data[r+1][c]){
						return false;
					}
				}
			}
		}
		return true;
	},

//移动的方法，左 右 上 下四个部分

//	左 右 上 下
//	左移的方法
	moveLeft: function(){
		var before=String(this.data);   //之前做一次转换
//		具体的移动需要处理的逻辑，直接处理好每一行即可
		for(var r=0;r < 4;r ++){
			this.moveLeftInRow(r);
		}
		var after=String(this.data);  //移动之后再做一次转换
//		如果说移动之前不等于移动之后,肯定是发生了移动
		if(before !=after){
			this.randomNum();   //生成随机数
//			生成的随机数可能会造成游戏的gameover
			if(this.isgameover()){
//				改变游戏的状态
				this.status=this.gameover
			}
//			更新视图
			this.dataView();
		}
	},
	moveLeftInRow: function(r){   //只去做处理每一行的逻辑
		for(var c=0; c < 3; c++){
			var nextc=this.getNextinRow(r,c);
			if(nextc !=-1){
				if(this.data[r][c]==0){
//					如果等于0,直接替换
					this.data[r][c]=this.data[r][nextc];
					this.data[r][nextc]=0;  //位置恢复成0
					c --;   //要让位置恢复到原地
				}else if(this.data[r][c]==this.data[r][nextc]){
					this.data[r][c] *=2;   //位置直接翻一倍
					this.data[r][nextc]=0;
					this.score +=this.data[r][c];  //更新分数
				}
			}else{   //没有找到
				break;   //直接退出循环
			}
		}
	},
	getNextinRow: function(r,c){
		for(var i=c + 1; i < 4; i++){
			if(this.data[r][i] !=0){
				return i;    //表示已经找到位置，并且把位置返回出来
			}
		}
		return -1;   //返回一个标识符
	},
//	右移的方法
	moveRight: function(){
		var before=String(this.data);
		for(var r=0; r < 4; r++){
			this.moveRightInRow(r);
		}
		var after=String(this.data);
		if(before !=after){
			this.randomNum();
			if(this.isgameover()){
				this.status=this.gameover;
			}
			this.dataView();
		}
	},
	moveRightInRow: function(r){
		for(var c=4; c > 0; c--){
			var prevc=this.getPrevInRow(r,c);
			if(prevc !=-1){
				if(this.data[r][c]==0){
					this.data[r][c]=this.data[r][prevc];
					this.data[r][prevc]=0;
					c ++
				}else if(this.data[r][c]==this.data[r][prevc]){
					this.data[r][c] *=2;
					this.data[r][prevc]=0;
					this.score +=this.data[r][c];
				}
			}else{
				break;
			}
		}
	},
	getPrevInRow: function(r,c){
		for(var i=c - 1; i >=0; i--){
			if(this.data[r][i] !=0){
				return i;
			}
		}
		return -1;
	},
//	上移
	moveUp: function(){
		var before=String(this.data);
		for(var c=0; c < 4; c++){
			this.moveUpInCol(c);
		}
		var after=String(this.data);
		if(before !=after){
			this.randomNum();
			if(this.isgameover()){
				this.status=this.gameover;
			}
			this.dataView();
		}
	},
	moveUpInCol: function(c){
		for(var r=0;r < 4; r++){
			var nextr=this.getNextInCol(r,c);
			if(nextr !=-1){
				if(this.data[r][c]==0){
					this.data[r][c]=this.data[nextr][c];
					this.data[nextr][c]=0;
					r -- ;
				}else if(this.data[r][c]==this.data[nextr][c]){
					this.data[r][c] *=2;
					this.data[nextr][c]=0;
					this.score +=this.data[r][c];
				}
			}else{
				break;
			}
		}
	},
	getNextInCol: function(r,c){
		for(var i=r + 1; i < 4; i++){
			if(this.data[i][c] !=0){
				return i;
			}
		}
		return -1;
	},
//	下移的方法
	moveDown: function(){
		var before=String(this.data);
		for(var c=0;c < 4; c++){
			this.moveDownInCol(c);
		}
		var after=String(this.data);
		if(before !=after){
			this.randomNum();
			if(this.isgameover()){
				this.status=this.gameover;
			}
			this.dataView();
		}
	},
	moveDownInCol: function(c){
		for(var r=3; r > 0; r--){
			var prev=this.getPrevIncol(r,c);
			if(prev !=-1){
				if(this.data[r][c]==0){
					this.data[r][c]=this.data[prev][c];
					this.data[prev][c]=0;
					r -- ;
				}else if(this.data[r][c]==this.data[prev][c]){
					this.data[r][c] *=2;
					this.data[prev][c]=0;
					this.score +=this.data[r][c];
				}
			}else{
				break;
			}
		}
	},
	getPrevIncol: function(r,c){
		for(var i=r - 1; i >=0; i--){
			if(this.data[i][c] !=0){
				return i;
			}
		}
		return -1;
	},
}
game.start();
console.log(game.data)
console.log(game.status);
console.log(game.score);
//键盘事件
document.onkeydown=function(){
	if(event.keyCode==37){
		//console.log("左")
		game.moveLeft();
	}else if(event.keyCode==38){
		//console.log("上")
		game.moveUp()
	}else if(event.keyCode==39){
		//console.log("右")
		game.moveRight()
	}else if(event.keyCode==40){
		//console.log("下")
		game.moveDown()
	}
}
//touch事件
//手指按下
var startX;//设定开始起始位置的x坐标
var startY;//设定开始起始位置的y坐标
var endX;//设定结束滑动位置的x坐标
var endY;//设定结束滑动位置的y坐标
document.addEventListener('touchstart',function(){
//	console.log("手指按下了屏幕")
	console.log(event);
	startX=event.touches[0].pageX;
	startY=event.touches[0].pageY;
})
//手指移动
//document.addEventListener('touchmove',function(){
//	console.log("手指的移动")
//})
//手指松开
document.addEventListener("touchend",function(){
//	console.log("手指松开")
	console.log(event);
	endX=event.changedTouches[0].pageX;//如何获取结束时的位置x
	endY=event.changedTouches[0].pageY;
	var X=endX - startX;
	var Y=endY - startY
	var absX=Math.abs(X) > Math.abs(Y);
	var absY=Math.abs(Y) > Math.abs(X);
	if(X > 0 && absX){
		console.log("右滑动")
		game.moveRight()
	}else if(X < 0 && absX){
		console.log("左滑动")
		game.moveLeft()
	}if(Y > 0 && absY){
		console.log("下滑动")
		game.moveDown()
	}if(Y < 0 && absY){
		console.log("上滑动")
		game.moveUp()
	}
})

如下为游戏效果图

就这样一个简单的2048游戏就完成啦~


最后

非常感谢您能看到这里~

关注我~带给你更多惊喜~

简单介绍下自定义指令

在介绍 Permission 指令之前，我们先来简单了解一下自定义指令是什么。

Vue的自定义指令通过Vue.directive方法来创建。

  • bind：指令第一次绑定到元素时调用。在这里可以执行一次性的初始化设置。
  • inserted：被绑定元素插入父元素时调用。注意，父元素可能还未存在，所以不能进行DOM操作。
  • update：被绑定元素所在的组件更新时调用，但是可能发生在其子组件更新之前。可以比较更新前后的值，执行相应的操作。
  • componentUpdated：被绑定元素所在的组件及其子组件全部更新后调用。可以执行操作，例如更新DOM。
  • unbind：指令与元素解绑时调用。可以执行清理操作。

除了上述的钩子函数外，还可以在指令对象中定义其他属性和方法：

  • name：指令的名称，用于在模板中绑定指令。
  • value：指令的绑定值，可以是一个表达式或变量。
  • arg：指令的参数，用于传递额外的信息。
  • modifiers：修饰符对象，可以用于传递额外的标记信息。
  • el：指令所绑定的元素。
  • vm：指令所属的Vue实例。
  • expression：指令的表达式。
  • context：指令所在上下文的Vue实例。

下面是一个简单的自定义指令示例：

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 初始化设置
  },
  inserted(el, binding, vnode) {
    // 元素插入父元素时调用
  },
  update(el, binding, vnode) {
    // 组件更新时调用
  },
  componentUpdated(el, binding, vnode) {
    // 组件及子组件更新后调用
  },
  unbind(el, binding, vnode) {
    // 解绑时调用
  }
});


在模板中使用自定义指令：

<div v-my-directive="value"></div>


内置指令与自定义指令

常用的内置指令有 v-if、v-show、v-bind、v-for等等，大家都用过，也就不在过多赘述了。

先问一个问题

Q: Vue 自定义指令在什么时机执行？

A: 是在运行时解析并执行的

从内置到自定义指令中间到底发生了什么？

可能是由于之前没有深入了解，一直认为内置指令和自定义指令都在编译时解析。

从下图中可以编译时内置指令在到 Render 时已经执行完成，然而到了运行时之后才开始自定义指令的解析工作。

简单举个例子

常常碰到的面试题，“v-if 和 v-show有什么区别”，区别可不是简简单单的一个前者是直接删除DOM，后者是改变display属性。

v-if 在生成 VNode 前就已经在模板编译阶段进行了判断，而 v-show 也是在编译时解析，只不过在 v-if 在编译时就确定了渲染元素，而v-show在运行时根据条件进行显示和隐藏。

如下摘抄 《深入浅出Vue.js》中 15.1.1 中 v-if 指令的原理概述 的部分代码

v-if

<!-- 模板 -->
<li v-if="has">if</li>
<li v-else>else</li>



// 编译后
(has)
    ? _c('li',[_v("if")])
    : _c('li',[_v("else")])


当 has 为 true，就会将第一个 li 元素创建 VNode。

  • _c 指的是 createElement，用于创建组件节点。
  • _v 是用来创建文本 VNode

v-show

我们再看看 v-show, 很明显是一个指令，与我们在render 函数中写指令是一样的，但是这样来看 v-if 肯定是一个语法糖，因为它并不是真正意义上的指令。

也就是说自定义指令时机不可能在内置指令之前解析（当然，如果你要是通过 vue-template-compiler 直接修改编译时或者其他骚操作，就当俺没说）。

感兴趣的朋友可以去 vue-template-explorer.netlify.app/ 上试试

在真正了解了内置指令的执行时机，之后我们接下来写一个自定义的指令

写一个的 Permission 指令

常见的权限颗粒度

在实现 Permission 指令之前，我们需要先了解一下常见的权限颗粒度。下面是一些常见的方案。

一般常见的方案有

  • 将按钮封装成组件，然后通过 props 传递参数，来控制是否显示or可操作
  • 封装一个组件，通过插槽形式传递按钮，再通过prop传值控制
  • 写一个自定义指令，通过 value 控制元素是否显示

相比 v-if 的好处有以下几点

  1. 可以轻松地扩展权限控制功能。
  2. 支持多个权限码、支持异步获取权限等。
  3. 语义化效果更加明显。

如何实现

先写一个简单的显示隐藏控制，可以通过响应式数据控制。

// 全局自定义指令
Vue.directive("permission", {
  // 在元素被插入到 DOM 中时触发
  inserted(el, binding) {
    // 如果绑定值为 false，则从父节点中移除元素
    if (!binding.value) {
      el.parentNode.removeChild(el); // 移除元素
    }
  },
  // 在元素更新时触发
  update(el, binding) {
    // 如果绑定值为 true
    if (binding.value) {
      // 如果元素没有父节点（即之前被移除了）
      if (!el.parentNode) {
        // 将元素插入到原来的位置
        el.__v_originalParent.insertBefore(el, el.__v_anchor || null);
      }
    } else {
      // 如果元素有父节点
      if (el.parentNode) {
        // 创建一个注释节点作为替换元素的占位符
        el.__v_anchor=document.createComment("");
        el.__v_originalParent=el.parentNode;
        // 用注释节点替换原来的元素
        el.parentNode.replaceChild(el.__v_anchor, el); 
      }
    }
  },
});


在 inserted 钩子中，当元素被插入到 DOM 中时，根据绑定值的状态，如果为 false，则从父节点中移除该元素，实现隐藏的效果。

在 update 钩子中，当元素更新时，根据绑定值的状态，如果为 true，并且元素之前被移除了（没有父节点），则将元素插入到原来的位置，实现显示的效果。如果绑定值为 false，并且元素当前有父节点，则创建一个注释节点作为替换元素的占位符，并将注释节点替换掉原来的元素，实现隐藏的效果。

使用方式

使用方式很简单，在指令中传入需要的值即可。

<template>
  <div id="app">
    isVisible: {{ isVisible }}
    <button v-permission="isVisible">自定义指令</button>
    <button @click="isVisible=!isVisible">Toggle</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>


效果

可以看到效果基本上与 v-if 一致，当然这个是运行时的操作，在原理上来说还是有区别的。

但是如果只是一个简单的变量的话，我们的这个 v-permission 没有太大意义。真的可以直接通过 v-if 控制即可，因为我们需要异步请求，并且实现统一管理。接下来会加强一下这个指令。

强化一下功能

在常见中后台中表格页出现4个以上的按钮，如下图，有新增、删除、编辑、查询。从业务中来，又从业务中走出去。

一般需要在某个模块、功能又或者某个路由下的add|delete|update|query进行权限控制，又或者其他的一些操作。

所以我们一个按钮权限应该是 页面::新增，接下来就需要一个checkPermission 方法来提供支撑。

假设现在在某个API中能够拿到所有按钮级别的权限，并且与服务端同学约定的格式一致。

{
    "orders": [
        "add",
        "update",
        "delete",
        "query",
        "detail",
        "enable",
        "disable"
    ]
}


如上JSON，orders 作为订单页面，而对应能够操作 Actions 放在数组内，若不存在则认定为没有此权限。

消费方

消费方传入orders::update 则代表需要获取到订单的编辑权限

<button v-permission="'orders::update'">Update</button>


指令

在指令区域，我们需要将指令的钩子（这里的示例只在inserted中调整了）改为异步等待，刚进入 inserted钩子时需要将 display 设置为 none，或者在 bind 钩子里面去做这个事情，不然会出现一闪而过的效果。

然后在这里面去调用checkPermission传入 binding.value 也就是 orders::update 然后在这里等待 checkPermission 的返回值然后判断是否需要删除此元素。

Vue.directive("permission", {
  async inserted(el, binding) {
    // 默认先改为 none，等数据回来之后再进行操作，你通过class来控制
    el.style.display="none";
    const hasPermission=await checkPermission(binding.value);
    el.style.display="";
    if (!hasPermission) {
      el.parentNode?.removeChild(el); // 移除元素
    }
  },
  ...
});


checkPermission 校验权限

接收 orders::update，通过splitPermissionString分割成orders和update。

然后再去发送请求，但是如果一个页面有多处同时调用v-permission，可能会存在重复请求的问题。

所以通过 controller.hasRequested 和 controller.task 来控制请求的重复性。这个是有必要的，目前JavaScript中没发现类似与Java中的wait/notify（锁机制）。所以只是一个仿造Java的锁机制

const controller={
  // 是否发过请求
  hasRequested: false,
  // 权限集合
  permissionList: [],
  // 真正的请求任务
  task: null,
};

const checkPermission=async (value=null)=> {
  // 截取对应的模块和操作
  const [module=null, operate=null]=splitPermissionString(value) ?? [];

  // 判断模块和操作是否存在
  if (!module || !operate) return false;

  // 判断是否发送过请求
  if (!controller.hasRequested) {
    controller.hasRequested=true;
    controller.task=getPermissionsApi();
  }

  // 获取权限数据，进行赋值
  controller.permissionList=await controller.task ?? [];

  // 判断是否有权限
  return controller.permissionList[module]?.includes(operate) ?? false;
};


看看效果

可以看到在发送请求前默认先隐藏，而后等待接口数据回来，重新判定哪些没有权限，然后控制显示或者删除元素节点。

补充其他辅助性方法

// 模拟请求
const getPermissionsApi=async ()=>
  fetch(`/api.json?t=${new Date().getTime()}`).then((res)=> res.json());

// 分割字符串
const splitPermissionString=(str)=> {
  try {
    if (typeof str==="string" && str.includes("::")) {
      const [firstPart, secondPart]=str.split("::");
      return [firstPart.trim(), secondPart.trim()];
    } else {
      throw new Error("Invalid permission string or delimiter not found");
    }
  } catch (error) {
    console.error(error.message);
    return [];
  }
};



作者：严老湿
链接：https://juejin.cn/post/7259356504758779965


在线咨询
上一篇：html5背景音乐不自动播放解密（原创）
下一篇：正则匹配所有url

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 广昌县 阿合奇县 鹤岗 佳县 文水县 博乐市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服