开发网站大概要多少钱,wordpress手机商城,北京信息网,商务网站的推广方法有哪些这是Popup组件基于微博小程序#xff0c;需要改变标签#xff0c;以及一写方法 支持四个方向抽屉#xff0c;以及中间弹出功能 // 用法
templatewbx-view styleheight: 100vh;!-- 对话框组件 --wbx-viewwbx-text click需要改变标签以及一写方法 支持四个方向抽屉以及中间弹出功能 // 用法
templatewbx-view styleheight: 100vh;!-- 对话框组件 --wbx-viewwbx-text clickopenpup()打开/wbx-text/wbx-viewWBXpopuprefpopupRefpositionTypecenterpopupWidth300pxpopupHeight400pxtemplate slotpopupContentwbx-view refdrawer stylepadding: 16px;box-sizing: border-box; display: flex;flex-direction:column;justify-items: center;align-items: center;wbx-text stylefont-size: 18px;height:26px;line-height: 26px;font-weight: 500;color:#000我们仍在生成您的AI新身份/wbx-textwbx-viewclickguan()stylewidth: 70px; height: 70px; border: 2px solid #000/wbx-view/wbx-view/template/WBXpopup/wbx-view
/templatescript
/*** type WBXAppOption*/
import WBXpopup from ../../commpents/wbx-popup/index.vue
const pageOptions {data() {return {};},methods: {openpup() {this.$refs.popupRef.openFn();},guan() {this.$refs.popupRef.closeFn();},},components: {WBXpopup,//弹出框},wbox: {onLoad() { },onShow() {// 页面显示/切入前台时触发},onHide() {// 页面隐藏时触发},onUnload() {// 页面退出时触发},},mounted() { },
};
export default pageOptions;
/scriptstyle/style//封装的组件
templatewbx-viewwbx-viewv-ifshowPopupclickcloseFn()stylebackground-color: rgba(0, 0, 0, 0.5);position: fixed;width: 100vw;height: 100vh;top: 0px;left: 0;display: flex;flex-direction: row;justify-content: center;align-items: center;transition: all 0.5s ease;z-index: 1;wbx-view :style{width:popupWidth,height:popupHeight} style transition: all 0.5s ease;z-index: 2; background-color: #fff; v-ifpositionTypecenter slot namepopupContent/slot/wbx-viewwbx-view :styledrawerStyle v-elseslot namepopupContent/slot/wbx-view/wbx-view/wbx-view
/templatescript
/*openFn() 打开对话框closeFn() 关闭对话框positionType 从那边出来抽屉的方向 left right bottom top center popupWidth 对话框的宽popupHeight 对话框的高
*/
export default {data() {return {showPopup: false,isOpen: false,};},props: {positionType: {type: String,default: right,},popupWidth: {type: String,default: 300px,},popupHeight: {type: String,default: 300px,},},computed: {drawerStyle() {const style {transition: all 0.5s,zIndex: 2,backgroundColor: #fff,position: fixed,};if (this.positionType left || this.positionType right) {style.width this.popupWidth;style.height 100vh;style[this.positionType] this.isOpen ? 0px : -${this.popupWidth};} else {style.width 100vw;style.height this.popupHeight;style[this.positionType] this.isOpen ? 0 : -${this.popupHeight};} return style;},},methods: {openFn() {this.showPopup true;this.$nextTick(() {setTimeout(() {this.isOpen true;}, 50);});},closeFn() {this.isOpen false;setTimeout(() {this.showPopup false;}, 500);},},
};
/script
style/style
