vue 组件封装 综合案例2

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//封装全局指令 focus
Vue.directive('focus', {// 指令所在的dom元素，被插入到页面中时触发inserted(el) {el.focus();}
})new Vue({render: h => h(App),
}).$mount('#app')

App.vue

<template><div class="table-case"><MyTable :data="goods"><template #head><th>编号</th><th>名称</th><th>图片</th><th width="100px">标签</th></template><template #body="{ item, index }"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td><img :src="item.picture" /></td><td><MyTag v-model="item.tag"></MyTag></td></template></MyTable></div>
</template><script>
import MyTag from "./components/MyTag.vue";
import MyTable from "./components/MyTable.vue";
export default {name: "TableCase",components: {MyTag,MyTable,},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><style lang="less" scoped>
.table-case {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}
}
</style>

MyTag.vue

<template><div class="my-tag"><inputv-if="isEdit"class="input"type="text"placeholder="输入标签"ref="inp"v-focus@blur="isEdit = false":value="value"@keyup.enter="handleEnter"/><div v-else @dblclick="handleClick" class="text">{{ value }}</div></div>
</template><script>
export default {data() {return {isEdit: false,};},props: {value: String,},methods: {handleClick() {this.isEdit = true;// this.$nextTick(() => {//   this.$refs.inp.focus();// });},handleEnter(e) {if (e.target.value.trim() === "") return alert("标签内容不能为空");console.log("回车了");console.log(e.target.value);this.$emit("input", e.target.value);this.isEdit = false;},},
};
</script><style lang="less" scoped>
.my-tag {cursor: pointer;.input {appearance: none;outline: none;border: 1px solid #ccc;width: 100px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;&::placeholder {color: #666;}}
}
</style>

MyTable.vue

<template><table class="my-table"><thead><tr><slot name="head"></slot></tr></thead><tbody><tr v-for="(item, index) in data" :key="item.id"><slot name="body" :item="item" :index="index"></slot></tr></tbody></table>
</template><script>
export default {props: {data: {type: Array,required: true,},},
};
</script><style lang="less" scoped>
.my-table {width: 100%;border-spacing: 0;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}th {background: #f5f5f5;border-bottom: 2px solid #069;}td {border-bottom: 1px dashed #ccc;}td,th {text-align: center;padding: 10px;transition: all 0.5s;&.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}
}
</style>