vue的自定义
自定义组件
组件是可以被复用的页面的零件，其实就是一个插件，只是在vue里叫组件
先看看别人的组件
vant
element
Mint
iView
去试试上面的组件，都是有脚手架版和直接引入使用的版本的
脚手架的使用需要先去main.js入口文件引入，还有css也是，查看官方文档都有的
这些组件让vue的开发容易得飞起，这也是为什么说是个人就能做前端，封装得太好了，以前自己写几百行几千行的功能，在组件里主要一个标签一句代码就行，如何封装一个组件，就能理解如何使用一个组件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
<div id="app">
<van-count-down :time="tt" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
tt: 30 * 60 * 60 * 1000
}
})
</script>
上面有个<van-count-down>标签不是vue的内置标签，而是自定义标签，就像路由的<route-view>标签一样，这个标签就是为了在所在位置生成自定义的内容，标签上还能看到一个:time这个自定义的参数
还有就是所有组件都有的弹窗提示功能，这类功能不需要在页面写自定义标签，是怎么实现的
Dialog.alert({
title: '标题',
message: '弹窗内容'
}).then(() => {
// on close
});
除了自定义组件，还有自定义组件的v-model数据双向变化，自定义指令，自定义过滤器，自定义方法，下面会直接上代码，不解释，解释不清楚
标签组件myA
<template>
<div>
<div>{{newNum}}</div>
<div @click="newAdd">点击添加</div>
</div>
</template>
<script>
export default {
name: 'myA',
props: ["num","add"],
data(){
return {
newNum: 0
}
},
watch:{
num(){
this.newNum = this.num
}
},
mounted(){
this.newNum = this.num
setInterval(()=>{
this.newNum--;
},1000)
},
methods:{
newAdd(){
// 因为子组件不能修改来自外来的数据
// 所以应该用this.$emit去执行外来的方法
// 用外来的方法修改外来的数据
this.$emit("add",this.newNum)
}
}
}
</script>
<style scoped>
div{
color: red;
}
</style>
双向绑定数据组件myB
<template>
<div :value="newVal" @input="Input">{{newVal}}{{aa}}</div>
</template>
<script>
export default {
name: 'myB',
props: ["value","aa"],
data(){
return {
newVal: this.value
}
},
mounted(){
setInterval(()=>{
this.Input()
},1000)
},
methods:{
Input(){
this.newVal--;
this.$emit('input',this.newVal)
}
}
}
</script>
<style scoped>
div{
color: blue;
}
</style>
生成型组件myC
<template>
<div @click="bb">{{value}}{{aa}}666</div>
</template>
<script>
export default {
name:'myC'
}
</script>
<style scoped>
div{
color: grey;
}
</style>
封装
import myA from 'myA.vue'
import myB from 'myB.vue'
import myC from 'myC.vue'
export default {
// 固定写法
install: function (Vue, options) {
// 添加的内容写在这个函数里面
console.log(options);
// 注册自定义组件
Vue.component(myA.name,myA)
// 注册自定义组件
Vue.component(myB.name,myB)
// 原型方法生成组件
Vue.prototype.$myC = function(opt){
var cc = Vue.extend(myC)
var component = new cc({
data:{
value:opt.value,
aa:opt.aa
},
methods:{
bb:opt.bb
}
}).$mount()
// 添加到页面上去
document.querySelector('body').appendChild(component.$el)
}
// 自定义过滤器
Vue.filter('formatTime', function (value) {
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
})
// 添加原型方法
Vue.prototype.$service = {
//电话号码合法性检查
telNumberCheck: function (tel) {
var pattern = /123/;
return pattern.test(tel)
}
}
// 自定义指令
// 第一个参数：指令名称
// 第二个参数：配置对象，指定指令的钩子函数
Vue.directive('directiveName', {
// bind中只能对元素自身进行DOM操作，而无法对父级元素操作
// 只调用一次 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
bind( el，binding, vnode ) {
// 参数详解
// el：指令所绑定的元素，可以用来直接操作 DOM 。
// binding：一个对象，包含以下属性：
// name：指令名，不包括 v- 前缀。
// value：指令的绑定值，等号后面的值 。
// oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
// expression：字符串形式的指令表达式 等号后面的字符串 形式
// arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
// modifiers：指令修饰符。例如：v-directive.foo.bar中，修饰符对象为 { foo: true, bar: true }。
// vnode：Vue 编译生成的虚拟节点。。
// oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
},
// inserted这个钩子函数调用的时候，当前元素已经插入页面中了，也就是说可以获取到父级节点了
inserted ( el，binding, vnode ) {},
// DOM重新渲染前
update(el，binding, vnode,oldVnode) {},
// DOM重新渲染后
componentUpdated ( el，binding, vnode,oldVnode ) {},
// 只调用一次，指令与元素解绑时调用
unbind ( el ) {
// 指令所在的元素在页面中消失，触发
}
})
}
}
插件引入
在main.js里
import my from 'my'
Vue.use(my)
使用
<template>
<div>
<my-a :num="num" @add="add"/>
<my-b v-model="value"/>
<div my-directive="{color:'white',text:'hello!'}"></div>
<div>{{ time | formatTime }}</div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'ceshi',
data(){
return {
num:111,
value:222,
time:123153123
}
},
mounted(){
this.$myC({
value:"1111",
aa:"aa",
bb(){
this.$service.telNumberCheck(123456789)
}
})
}
}
</script>
组件的递归，在组件调用自己就行，但是一定要防止死循环
递归组件最常见到就是tree结构
<template>
<div>
{{num}}
<my-num :num="num-1" v-if="num>0"/>
</div>
</template>
<script>
export default {
// name一定要
name: 'myNum',
props: ["num"],
}
</script>
// 使用
<my-num num="3"/>
// 然后会显示
3
2
1
0
组件里的props上面都是用数组去接受，如果写成对象格式，可以做数据校验，能要求必传，还能添加默认值
props:{
title:String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise,
items: { // 必须提供字段
required: true
},
unit: { // 可选字段，有默认值
default: 3
}
}
事件修饰符native
用来注册元素的原生事件而不是组件自定义事件的
<vButton @click="clickHandler" @vclick="vClickHandler">按钮</vButton>
export default {
methods: {
clickHandler () {
alert('onclick') // 此处不会执行 因为组件中未定义 `click` 事件
},
vClickHandler () {
alert('onvclick') // 触发 `vclick` 自定义事件
}
}
}
//如果将上面模版改成如下方式，那么两个事件都会执行。
<vButton @click.native="clickHandler" @vclick="vClickHandler">按钮</vButton>
有个问题
如果组件的渲染报错说运行时什么什么的
在vue.config.js里加上下面这个配置
module.exports = {
runtimeCompiler: true
}
补充一个图片懒加载的自定义指令
// 引入Vue构造函数
import Vue from 'vue'
var lazyload = {
// Vue.use() 默认加载install,并且将Vue当做第一个参数传递过来
install(vue,payload) {
// 数组扩展移除元素
if(!Array.prototype.remove){
Array.prototype.remove = function(item){
if(!this.length) return
var index = this.indexOf(item);
if( index > -1){
this.splice(index,1);
return this
}
}
}
// 默认值图片
var defaultImage = payload.defaultImage || 'xxx.png';
var errorImage = payload.errorImage || 'xxx.png';
// 默认离可视区10px时加载图片
var distanece = payload.scrollDistance || 10;
// 收集未加载的图片元素和资源
var listenList = [];
// 收集已加载的图片元素和资源
var imageCacheList = [];
// 是否已经加载完成的图片
const isAlredyLoad = (imageSrc) => {
if(imageCacheList.indexOf(imageSrc) > -1){
return true;
}else{
return false;
}
}
//检测图片是否可以加载，如果可以则进行加载
const isCanShow = (item) =>{
var ele = item.ele;
var src = item.src;
//图片距离页面顶部的距离
var top = ele.getBoundingClientRect().top;
//页面可视区域的高度
var windowHeight = window.innerHight;
// top - distance 距离可视区域还有distance像素
if(top - distanece < window.innerHeight){
var image = new Image();
image.src = src;
image.onload = function() {
ele.src = src;
imageCacheList.push(src);
listenList.remove(item);
}
image.onerror = function() {
ele.src = errorImage;
imageCacheList.push(src);
listenList.remove(item);
}
return true;
}else{
return false;
}
};
const onListenScroll = () => {
window.addEventListener('scroll',function(){
var length = listenList.length;
for(let i = 0;i<length;i++ ){
isCanShow(listenList[i]);
}
})
}
//Vue 指令最终的方法
const addListener = (ele,binding) =>{
//绑定的图片地址
var imageSrc = binding.value;
// 防止重复加载。如果已经加载过，则无需重新加载，直接将src赋值
if(isAlredyLoad(imageSrc)){
ele.src = imageSrc;
return false;
}
var item = {
ele: ele,
src: imageSrc
}
//图片显示默认的图片
ele.src = defaultImage;
//再看看是否可以显示此图片
if(isCanShow(item)){
return
}
//否则将图片地址和元素均放入监听的lisenList里
listenList.push(item);
//然后开始监听页面scroll事件
onListenScroll();
}
Vue.directive('lazyload',{
inserted: addListener,
updated: addListener
})
}
}
export default lazyload;
// 使用
// 参数均为可选
Vue.use(Lazyload,{
scrollDistance: 15, // 距离可视区还有15px时开发加载资源
defaultImage: '', // 资源图片未加载前的默认图片（绝对路径）
errorImage:'' // 资源图片加载失败时要加载的资源（绝对路径）
})
