vue 组件封装 综合案例1

组件封装 综合案例1"/>

vue 组件封装 综合案例1

vue 组件封装 综合案例

**创建 工程：
H:\java_work\java_springboot\vue_study
ctrl按住不放 右键 悬着 powershell

H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day05\准备代码\11-综合案例-商品列表

vue --version
vue create v-fengzhuang-example-demo
cd v-fengzhuang-example-demo
npm install --save-dev less-loader less
npm run serve

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"><table class="my-table"><thead><tr><th>编号</th><th>名称</th><th>图片</th><th width="100px">标签</th></tr></thead><tbody><tr><td>1</td><td>梨皮朱泥三绝清代小品壶经典款紫砂壶</td><td><imgsrc=".jpg"/></td><td><!-- 标签组件 --><MyTag v-model="tempText"></MyTag></td></tr><tr><td>1</td><td>梨皮朱泥三绝清代小品壶经典款紫砂壶</td><td><imgsrc=".jpg"/></td><td><!-- 标签组件 --><MyTag v-model="tempText2"></MyTag></td></tr></tbody></table></div>
</template><script>
import MyTag from "./components/MyTag.vue";
export default {name: "TableCase",components: { MyTag },data() {return {tempText: "水杯",tempText2: "篮球",goods: [{id: 101,picture:".jpg",name: "梨皮朱泥三绝清代小品壶经典款紫砂壶",tag: "茶具",},{id: 102,picture:".jpg",name: "全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌",tag: "男鞋",},{id: 103,picture:".png",name: "毛茸茸小熊出没，儿童羊羔绒背心73-90cm",tag: "儿童服饰",},{id: 104,picture:".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;}.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>

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>

修改后：
：src是 v-bind:src的简写方式获取data数据函数中的值