准备:
安包 npm less less-loader。拆分:一共分成两个组件部分:
1:My-Tag 标签一个组件。2:My-Table 整体一个组件(表头不固定,内容不固定(插槽))
一,My-Tag 分类标签的功能:
tip:拆分时style要加:<style lang="less" scoped> </style>
在APP.vue中:导入、注册、使用组件
功能:
1 : input修改数据 和 文字互斥
用 布尔数据 isShow:false、input加v-if 、div加v-else
<template>
<div class="my-tag">
<input
class="input"
type="text"
placeholder="输入标签"
v-if="isShow"
/>
<div class="text" v-else>茶具</div>
</div>
</template>
<script>
// My-Tag 分类标签的功能:
// 1 : input修改数据 和 文字互斥 用 布尔数据 v-if v-else
// 2 : 双击文字 div显示input标签→自动获得焦点
// 3 : input要数据回显
// 4 : 用户输入后,回车→把新的内容渲染到页面→数据应该同步
export default {
data(){
return{
isShow:false
}
},
}
</script>
2 :双击显示input+自动获焦和失焦
双击文字 div显示input标签输入框+input输入框自动获得焦点,
光标在输入框中失去焦点时:输入框变成div里的文字
dbl=double
1 div(茶具)添加@dblclick双击 修改isShow:为true
2 main写全局自定义命令,获焦指令,在input身上直接用v-focus
3 input添加 @blur失焦 isShow:修改为true,输入框变成div里的文字
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//自定义命令---获得焦点-----全局-----在main.js
Vue.directive('focus', {
inserted(el) {
el.focus()
}
})
// ---------------------------------
new Vue({
render: h => h(App),
}).$mount('#app')
<template>
<div class="my-tag">
<input
class="input"
type="text"
placeholder="输入标签"
v-if="isShow"
v-focus
@blur="isShow=false"
/>
<!--dbl=double 双击------->
<div class="text" v-else @dblclick="dblfn" >茶具</div>
</div>
</template>
<script>
// My-Tag 分类标签的功能:
// 1 : input修改数据 和 文字互斥 用 布尔数据 v-if v-else
// 2 : 双击文字 div显示input标签→自动获得焦点
// 3 : input要数据回显
// 4 : 用户输入后,回车→把新的内容渲染到页面→数据应该同步
export default {
data(){
return{
isShow:false
}
},
methods:{
dblfn(){
this.isShow=true
}
}
}
</script>
3 : input要数据回显
父传子- 子组件用父组件的数据。父子通信比较繁琐,
所以用v-model双向绑定 化简(V-model=value属性和input事件的缩写)
1 :父APP.vue:假设一个txt="哈哈哈" 字符串数据,
2 :My-Tag挖坑:props:{ value:String },
3:父APP.vue: 使用v-model <MyTag v-model="txt"></MyTag>
4:input添加:value="value"
5 : div里文字用差值表达式代替{{value}}
4 : 用户输入后回车,新内容渲染到页面
用户输入后,回车→把新的内容渲染到页面→数据应该同步
1:在input里添加回车事件 @keyup.enter="enterfn"
2 :写函数enterfn:通知父组件保存用户输入的数据$emit(事件名,用户输入的数据)-语法糖
用户输入的值——借助事件对象获取value的值e.target.value
3 :显示div 隐藏输入框 this.isShow=false
二、My-Table 整体一个组件
1:拆组件
把APP.vue的my-table的结构和css样式剪切到My-Table(拆成组件,好处就是能调用多次)
(tip:拆分时My-Table的style要加:<style lang="less" scoped> </style>)
然后把My-Table在根组件APP.vue导入、注册、使用
tip:把My-Tag的导入注册和使用全部注释(不然会报错,My-Tag被发现但未使用)
2:父传子拿数据(for循环渲染数据)
1 :My-Table挖坑 使用父组件的数据
2:父组件传数据
3:子组件v-for循环替换数据
3:插槽
拆成组件,能调用多次,但因为调用多次,不可能每次调用的表格都一模一样(结构不固定),
所以用插槽(表头和内容分别用插槽)允许根据需要定制
1: My-Table表头和内容slot插槽,
2 : name命名——表头:name="head",内容:name="con" 在APP.vue表头和内容接收一下数据
3:内容的插槽——用作用域插槽
把My-Table作用域的v-for的值(:item="item" :index="index")扔到APP.vue使用
4 : 放开MyTag注释更换MyTag使用时绑定的值
1:把分类标签的My-Tag的引入、注册、使用、的注释放开,
2: 把使用MyTag 组件绑定的v-model的值更换成item.tag
<MyTag v-model="item.tag"></MyTag>