1、全局注册组件
import vue from 'Vue'
function changeStr(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
const requireComponent = require.context('.', false, /\.vue$/);
console.log(requireComponent.keys())
requireComponent.keys().forEach(fileName => {
const config = requireComponent(fileName);
console.log(config)
const componentName = changeStr(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
console.log('componentName', componentName, config.default)
if (componentName != 'Home') {
vue.component(componentName, config.default || config)
} else {
console.log(fileName, 'ssss')
}
});
2、引入路由
var routerList = []
function importAll(r){
r.keys.forEach(
el => routerList.push(r(key).default)
);
}
importAll(require.context('./router',true,/\.routes\.js/))
3、render方法实现button 选择,v-if v-else-if v-else
<script>
export default {
props: {
type: {
type: String,
default: "normal"
},
text: {
type: String,
default: "normal"
}
},
render(h) {
return h("button", {
class: {
btn: true,
warning: this.type === "warning",
danger: this.type === "danger",
success: this.type === "success"
},
domProps: {
innerText: this.text
},
on: {
click: this.handleClick
}
});
},
methods: {
handleClick() {
this.$emit("myEvent", { type: this.type });
}
}
};
</script>
<style >
.btn {
width: 40px;
height: 30px;
}
.warning {
background: yellow;
}
.danger {
background: red;
}
.success {
background: green;
}
</style>
4 、权限控制
import { hasPromise } from './components/common/array'
export function hasPromise(key) {
var arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(key);
if (index > -1) {
return true;
} else {
return false;
}
}
//main.js
Vue.directive('display-key', {
inserted(el, binding) {
let displayKey = binding.value;
if (!hasPromise(displayKey)) {
el.parentNode && el.parentNode.removeChild(el)
} else {
throw new Error('需要key')
}
}
})
5、watch
watch: {
progress: {
handler(oldVlau, newValu) {
this.$refs.progress.style.width = val * 100 + "%";
},
immediate: true
}
},