北京网站设计公司wx成都柚米科技15,网站案例代码,网页设计免费素材,手机网站的优缺点1.Vue.extend(options)
参数: {Object} options用法#xff1a; 使用基础Vue构造器#xff0c;创建一个子类。参数是一个包含组件选项的对象。 data选项是特例#xff0c;需要注意#xff0c;在Vue.extend()中它必须是函数。 htmlheadtit…1.Vue.extend(options)
参数: {Object} options用法 使用基础Vue构造器创建一个子类。参数是一个包含组件选项的对象。 data选项是特例需要注意在Vue.extend()中它必须是函数。 htmlheadtitleVue.extend 用法/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script/headbodydiv idmount-point/divscript// 创建构造器var Profile Vue.extend({template: p{{firstName}} {{lastName}} aka {{alias}}/p,data: function () {return {firstName: Walter,lastName: White,alias: Heisenberg}}})// 创建 Profile 实例并挂载到一个元素上。new Profile().$mount(#mount-point)/script/body
/html结果显示如下 可以看到extend 创建的是 Vue 构造器而不是我们平时常写的组件实例所以不可以通过 new Vue({ components: testExtend }) 来直接使用需要通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。 我个人的理解来看extend提供了一个能够构造组件的函数也就是构造器。在一些特定的应用场景如自己构建一个复杂弹窗下我们使用这种函数式的构造组件的方法会更灵活一些。 2.Vue.extend实现加载效果
htmlheadtitleVue.extend 用法2/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptstyle#loading-wrapper {position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: rgba(0,0,0,.7);color: #fff;}/style/headbodydiv idrootbutton clickshowLoading显示Loading/button/divscriptfunction Loading(msg) {const LoadingComponent Vue.extend({template: div idloading-wrapper{{msg}}/div,props: {msg: {type: String,default: msg}},name: LoadingComponent})const div document.createElement(div)div.setAttribute(id, loading-wrapper)document.body.append(div)new LoadingComponent().$mount(#loading-wrapper)return () {document.body.removeChild(document.getElementById(loading-wrapper))}}Vue.prototype.$loading Loadingnew Vue({el: #root,methods: {showLoading() {const hide this.$loading(正在加载请稍等...)setTimeout(() {hide()}, 2000)}}})/script/body
/html
3.Vue.extend()实现MessageBox弹窗
1新建一个messageBox.vue
templatediv idconfirm v-ifflagdiv classcontents div classcontent-top{{text.title}}/divdiv classcontent-center{{text.msg}}/divdiv classcontent-bottombutton typeprimary clickok classleft{{text.btn.ok}}/buttonbutton typeinfo clickno classright{{text.btn.no}}/button/div/div/div
/templatescript
export default {data () {return {flag:true,text:{title:标题,msg:这是一个弹出框组件,btn:{ok:确定,no:取消}}}},methods: {ok(){this.flagfalse;},no(){this.flagfalse;}}
}
/scriptstyle scoped#confirm{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.3); }.contents{width:250px;height:180px;border:1px solid #ccc;border-radius:10px;background-color:#fff;position:fixed;top:50%;left:50%;margin-top:-90px;margin-left:-125px;
}
.content-top{width:100%;height:40px;border-bottom:1px solid #ccc;text-align: center;font-size:20px;font-weight: 700;line-height:40px;
}
.content-center{width:90%;height:80px;margin:5px auto;
}
.content-bottom{width:85%;height:40px;margin:0 auto;/* border:1px solid red; */position:relative;
}
.left{position:absolute;left:0;width:40%;
}
.right{position:absolute;right:0;width:40%;
}
/style
(2) 新建messageBox.js
import Vue from vue
import Confirm from ./MessageBox.vuelet confirmStructorVue.extend(Confirm) //返回一个实例创建的构造器但实例构造器需要进行挂载到页面中let theConfirmfunction(text){return new Promise((res,rej){ //返回一个promise进行异步操作成功时返回失败时返回let confirmDomnew confirmStructor({el:document.createElement(div)})//在body中动态创建一个div元素之后此div将会替换成整个vue文件的内容//此时的confirmDom通俗讲就是相当于是整个组件对象通过对象调用属性的方法来进行组件中数据的使用//可以通过$el属性来访问创建的组件实例document.body.appendChild(confirmDom.$el)//此时进行创建组件的逻辑处理confirmDom.texttext //将需要传入的文本内容传给组件实例confirmDom.ok(){ //箭头函数在和{}之间增加,且去掉functionres() //正确时返回的操作confirmDom.flagfalse;}confirmDom.no(){rej() //失败时返回的操作confirmDom.flagfalse;} })
}//将逻辑函数进行导出和暴露
export default theConfirm
(3)mian.js引入挂载到全局
import Vue from vue;
import store from ./store/index
import App from ./App.vue;
import router from ./router;
import theConfirm from ./components/messageBox.js
Vue.config.productionTip false;Vue.prototype.$MyconfirmtheConfirmnew Vue({router,store,render: h h(App),
}).$mount(#app)
(4)页面使用 this.$Myconfirm({title:标题,msg:内容,btn:{ ok:确定, no:取消}}).then((){console.log(ok)}).catch((){console.log(no)})(5)效果如下:
