vue 自定义指令 封装 v

自定义指令 封装 v"/>

vue 自定义指令 封装 v

vue 自定义指令 封装 v-loading指令

**创建 工程：
H:\java_work\java_springboot\vue_study

ctrl按住不放 右键 悬着 powershell

H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day05\准备代码\05-自定义指令-指令的值

vue --version
vue create v-define-loading-cmd-demo
cd v-define-loading-cmd-demo
npm install --save axios
npm run serve

App.vue

<template><div class="main"><div class="box" v-loading="isLoading"><ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt="" /></div></li></ul></div></div>
</template><script>
// 安装axios =>  yarn add axios
import axios from "axios";// 接口地址：
// 请求方式：get
export default {data() {return {list: [],isLoading: true,};},async created() {// 1. 发送请求获取数据const res = await axios.get("");setTimeout(() => {// 2. 更新到 list 中this.list = res.data.data;this.isLoading = false;console.log("this.isLoading = " + this.isLoading);}, 2000);},directives: {loading: {inserted(el, binding) {console.log("binding.value = " + binding.value);binding.value? el.classList.add("loading"): el.classList.remove("loading");},update(el, binding) {binding.value? el.classList.add("loading"): el.classList.remove("loading");},// update(el, binding) {},},},
};
</script><style>
/* 伪类 - 蒙层效果 */
.loading:before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url("./loading.gif") no-repeat center;
}/* .box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
} */.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>