自定义一个color指令,实现输入什么颜色(英文名,十六进制,rgb,hsl)字体变什么颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue-2.4.0.js"></script>
</head>
<body>
<div id='app'>
<input v-color="mycolor" type="text" v-model="inpValue" @keyup.enter="keyUp">
</div>
</body>
<script>
Vue.directive('color',{
bind(el,binging){
el.style.fontSize= '20px'
},
inserted(el){
},
update(el,bind) {
console.log(bind);
console.log(this);
el.style.color = bind.value
}
})
const vm = new Vue({
el:'#app',
data:{
mycolor:'',
inpValue:''
},
methods:{
keyUp(){
console.log('回车');
this.mycolor=this.inpValue
}
},
})
</script>
</html>