网站布局是什么,户外网站做,网络营销策划的方法,织梦模板添加网站地图1、自定义指令 2、v-loading指令封装#xff08;蒙层#xff09; 3、插槽 默认插槽 使用组件时#xff0c;传入具体标签内容
4、插槽 后备内容#xff08;默认值#xff09; 5、具名插槽
6、作用域插槽 7、案例
App.vue#xff1a;
templated…1、自定义指令 2、v-loading指令封装蒙层 3、插槽 默认插槽 使用组件时传入具体标签内容
4、插槽 后备内容默认值 5、具名插槽
6、作用域插槽 7、案例
App.vue
templatediv classtable-caseMyTable :datagoodstemplate #headth编号/thth名称/thth图片/thth width100px标签/th/templatetemplate #body{ item, index }td{{ index 1 }}/tdtd{{ item.name }}/tdtdimg:srcitem.picture//tdtdMyTag v-modelitem.tag/MyTag/td/template/MyTable/div
/templatescript
// my-tag 标签组件的封装
// 1. 创建组件 - 初始化
// 2. 实现功能
// (1) 双击显示并且自动聚焦
// v-if v-else dbclick 操作 isEdit
// 自动聚焦
// 1. $nextTick $refs 获取到dom进行focus获取焦点
// 2. 封装v-focus指令// (2) 失去焦点隐藏输入框
// blur 操作 isEdit 即可// (3) 回显标签信息
// 回显的标签信息是父组件传递过来的
// v-model实现功能 (简化代码) v-model :value 和 input
// 组件内部通过props接收, :value设置给输入框// (4) 内容修改了回车 修改标签信息
// keyup.enter, 触发事件 $emit(input, e.target.value)// ---------------------------------------------------------------------// my-table 表格组件的封装
// 1. 数据不能写死动态传递表格渲染的数据 props
// 2. 结构不能写死 - 多处结构自定义 【具名插槽】
// (1) 表头支持自定义
// (2) 主体支持自定义import MyTag from ./components/MyTag.vue
import MyTable from ./components/MyTable.vue
export default {name: TableCase,components: {MyTag,//es6对象简写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: 儿童服饰 },]}}
}
/scriptstyle langless scoped
.table-case {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}
}/stylemytable.vue
templatetable classmy-tabletheadtrslot namehead/slot/tr/theadtbodytr v-for(item, index) in data :keyitem.idslot namebody :itemitem :indexindex /slot/tr/tbody/table
/templatescript
export default {props: {data: {type: Array,required: true}}
};
/scriptstyle langless 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 .5s;.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}
}/stylemytag.vue
templatediv classmy-taginputv-ifisEditv-focusrefinpclassinputtypetextplaceholder输入标签:valuevalueblurisEdit falsekeyup.enterhandleEnter/div v-elsedblclickhandleClickclasstext{{ value }}/div/div
/templatescript
export default {props: {value: String},data () {return {isEdit: false}},methods: {handleClick () {// 双击后切换到显示状态 (Vue是异步dom更新)this.isEdit true// // 等dom更新完了再获取焦点// this.$nextTick(() {// // 立刻获取焦点// this.$refs.inp.focus()// })},handleEnter (e) {// 非空处理if (e.target.value.trim() ) return alert(标签内容不能为空)// 子传父将回车时[输入框的内容] 提交给父组件更新// 由于父组件是v-model触发事件需要触发 input 事件this.$emit(input, e.target.value)// 提交完成关闭输入状态this.isEdit false}}
}
/scriptstyle langless 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;}}
}
/stylemain.js
import Vue from vue
import App from ./App.vueVue.config.productionTip false// 封装全局指令 focus
Vue.directive(focus, {// 指令所在的dom元素被插入到页面中时触发// el 指令所綁定的元素inserted (el) {el.focus()}
})new Vue({render: h h(App),
}).$mount(#app)8、单页应用程序 9、路由 10、vueRouter使用 一般组件名要两个单词这里没有运行会报错给组件取name可以解决这个错误 11、组件存放目录 .vue文件本质没区别
