做公司网站详细步骤,永州网站开发,宁夏省住房城乡建设厅网站,wordpress页面顶部菜单商品列表 文章目录 商品列表核心步骤创建组件 1. MyTag组件详细步骤双击显示#xff0c;自动聚焦失去焦点#xff0c;隐藏输入框回显标签信息回车修修改内容#xff0c;同时隐藏输入框 MyTable组件详细步骤1-动态的设置整个表格的数据 #xff1a; props2-实现自定义结构-插…商品列表 文章目录 商品列表核心步骤创建组件 1. MyTag组件详细步骤双击显示自动聚焦失去焦点隐藏输入框回显标签信息回车修修改内容同时隐藏输入框 MyTable组件详细步骤1-动态的设置整个表格的数据 props2-实现自定义结构-插槽1-表头自定义2-主体定制 完整代码App.vue组件MyTab.vue组件MyTable组件 最终效果图 核心步骤
MyTag 组件的封装 创建组件 → 初始化 实现功能 1双击显示并开启自动聚焦
1. v-if v-else dblclick
2. 通过注册全局的自定义指令获取焦点 focus
2失去焦点的时候隐藏输入框
1. 然后使用blur失去焦点隐藏
3回显标签信息 回显的标签信息是父组件传递过来的 2. 使用 v-model 实现功能简化代码3. v-model value 和 input4内容修改了回车 → 修改标签信息
1. keyup.enter 触发了回车事件 执行 $emit(‘input’,e.target.value)
2. 然后父组件中的 v-model 底层的 input自动帮我们执行数据渲染回显 My-Table 表格组件的封装
数据不能写死需要动态的传递表格渲染数据
使用 props 结构不能写死 → 多处结构实现自定义 → 具名插槽 1 表头需要支持自定义 2 主体支持自定义 创建组件
创建组件 → 初始化 1.导入
import MyTag from ./components/MyTag.vue
import MyTable from ./components./Mytable.vue2. 注册
components: {MyTag,MyTable
}3. 使用
MyTag/MyTag
MyTable/MyTable1. MyTag组件详细步骤
双击显示自动聚焦
1.双击显示
1.双击显示
div v-else dblclickhandleedit classtext{{ value }}/div//提供以下方法handleedit() {// 双击切换到显示状态this.isShow true;},2 自动聚焦
2.自动聚焦
// 封装全局自定义指令实现获取焦点当然可以使用$nextTick解决同步Vue的问题达到异步更新效果
Vue.directive(focus, {// el 是我们指令所在的dom元素inserted (el) {el.focus()}
})失去焦点隐藏输入框 失去焦点隐藏输入框 使用blur事件失去焦点然后将isShow改为false
blurisShow false回显标签信息
在我们双击了触发了编辑功能后显示了输入框然后再自动获得focus。
现在我们需要回显了 使用v-model将父组件的值传递过来 然后子组件使用 props 接受 进行操作 给组件绑定 v-model 指令 MyTag v-modelitem.tag/MyTagprops接收数据并回显渲染 1. props接收数据// 接收父组件传过来的数据 :valueprops: {value: String,},2. 回显渲染//将数据动态的赋值给我们的需要显示的标签:valuevalue回车修修改内容同时隐藏输入框 绑定回车事件 keyup.enter“方法名” keyup.enterhandleEnter提供对应方法 handleEnter 1. 通过$emit(事件名传递的值) 通知父组件
methods: {handleEnter (e) {//子传父将获取到的输入框给父组件通知他修改渲染标签if (e.target.value.trim() ) {alert(修改的内容不能为空)return //通过 input事件 同志父组件监听并修改输入框内容this.$emit(input,e.target.value)}}
}
2. 回车后输入框隐藏
this.isShow false到此我们的编辑功能组件实现完毕
MyTable组件详细步骤
1-动态的设置整个表格的数据 props 数据在App.vue中使用父传子实现 1. 动态的属性传递数据
MyTable :dataitem.goods/MyTable2. 接收数据
props: {data: {type: Array,required: true 控制判断}
}2-实现自定义结构-插槽
表头自定义主体自定义
目的是为了我们能够灵活的实现结构和数据对应 记得在相应的组件中使用 占好位置
1-表头自定义
1.表头自定义切记使用具名插槽因为我们需要在定制的时候用到相互之间的数据。
!-- 使用插槽动态的定制了表头结构 --template #headth编号/thth名称/thth图片/thth width100px标签/th/template 2-主体定制
2. 主体定制同样的使用具名插槽需要制定并且传递该组件的数据
!-- 使用插槽作用域传递值定制主体的内容 --template #body{ item, index }td{{ index 1 }}/tdtd{{ item.name }}/tdtdimg :srcitem.picture //tdtdMyTag v-modelitem.tag/MyTag/td/template 编辑渲染功能和自定义结构功能就实现完毕了 完整代码
App.vue组件
templatediv classtable-caseMyTable :datagoods!-- 使用插槽动态的定制了表头结构 --template #headth编号/thth名称/thth图片/thth width100px标签/th/template!-- 使用插槽作用域传递值定制主体的内容 --template #body{ item, index }td{{ index 1 }}/tdtd{{ item.name }}/tdtdimg :srcitem.picture //tdtdMyTag v-modelitem.tag/MyTag/td/template/MyTable/div
/template--------------------------------------------------------
script
export default{
import MyTag from ./components/MyTag.vue
import MyTable from ./components/MyTable.vue;
export default {// 2.注册组件components: {MyTag,MyTable,},name: TableCase,data() {return {tempText: 水杯,tempText2: 钢笔,goods: [{id: 101,picture:https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg,name: 梨皮朱泥三绝清代小品壶经典款紫砂壶,tag: 茶具,},{id: 102,picture:https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg,name: 全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌,tag: 男鞋,},{id: 103,picture:https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png,name: 毛茸茸小熊出没儿童羊羔绒背心73-90cm,tag: 儿童服饰,},{id: 104,picture:https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg,name: 基础百搭儿童套头针织毛衣1-9岁,tag: 儿童服饰,},],};},
};
/script MyTab.vue组件
templatediv classmy-taginputv-ifisShowv-focusblurisShow false:valuevaluekeyup.enterhandleEnterclassinputtypetextplaceholder输入标签/div v-else dblclickhandleedit classtext{{ value }}/div/div
/template---------------------------------------------------script
export default {// 接收父组件传过来的数据 :valueprops: {value: String,},data() {return {isShow: false,};},methods: {handleedit() {// 双击切换到显示状态this.isShow true},handleEnter(e) {// 子传父将{输入框的内容}传递给我们的父组件通知他叫他渲染// 由于父组件是 v-model 所以触发事件为 inputif (e.target.value.trim() ) return alert(修改内容不能为空)this.$emit(input, e.target.value)// 回车后输入框隐藏this.isShow false},},
};
/script MyTable组件
templatetable classmy-tabletheadtrslot namehead/slot/tr/theadtbodytr v-for(item,index) in data :keyitem.idslot namebody :item item :index index/slot/tr/tbody/table
/template----------------------------------------------------script
export default {props: {data: {type: Array,required: true}}
}
/script最终效果图
