精华内容
下载资源
问答
  • 使用单文件组件封装model的模板、逻辑和样式,之后就可以在页面中调用此通用组件。 需求 model有两个使用场景: 1、备注/修改密码(简易): 在屏幕中垂直居中 2、添加/修改/展示信息(复杂): 距离屏幕顶部200px,...
  • 封装 Layout.vue组件2. Layout.vue组件使用 Vue封装组件实现响应式布局 主要思路:使用flex布局,左边主体内容区域根据页面宽度自适应,右边侧边栏固定宽度。使用媒体查询,当页面宽度小于768px时,侧边右边侧边栏...

    Vue封装组件实现响应式布局

    主要思路:使用flex布局,左边主体内容区域根据页面宽度自适应,右边侧边栏固定宽度。使用媒体查询,当页面宽度小于768px时,侧边右边侧边栏隐藏。

    1. 封装 Layout.vue组件

    • HTML结构
    <template>
      <div class="layout">
        <!-- 头部 -->
        <header>
          <!-- 放置插槽 -->
          <slot name="header"></slot>
        </header>
        <!-- container容器 -->
        <div class="container" ref="containerRef">
          <!-- 左边主体内容 -->
          <section>
            <slot name="section"></slot>
          </section>
          <!-- 侧边栏 -->
          <aside ref="asideRef">
            <slot name="aside"></slot>
          </aside>
        </div>
      </div>
    </template>
    
    • JS代码
    <script>
    export default {
      // 接收父组件传递的参数
      props: {
        // 版心
        centerWidth: {
          type: String,
          default: "1440",
        },
        // 侧边栏宽度
        asideWidth: {
          type: String,
          default: "350",
        },
      },
      mounted() {
        this.init();
      },
      methods: {
        // 初始化
        init() {
          this.$refs.containerRef.style.maxWidth = this.centerWidth + "px";
          this.$refs.asideRef.style.width = this.asideWidth + "px";
        },
      },
    };
    </script>
    
    • css代码
    <style lang="less" scoped>
    // flex布局实现自适应
    .container {
      display: flex;
      max-width: 1440px;
      width: 95%;
      margin: 0 auto;
    }
    // 左边自适应
    section {
      flex: 1;
      margin-right: 15px;
    }
    // 侧边栏固定宽度
    aside {
      width: 350px;
    }
    
    // 当屏幕宽度小于768px时,侧边栏隐藏
    @media screen and (max-width: 768px) {
      aside {
        display: none;
      }
      section {
        margin-right: 0;
      }
      .container {
        width: 100%;
      }
    }
    </style>
    

    2. Layout.vue组件使用

    • 在App.vue中使用layout组件
    <template>
      <div id="app">
        <my-layout asideWidth="300" centerWidth="1440">
          <!-- 使用插槽 -->
          <template slot="header">
            <div class="header"></div>
          </template>
    
          <template slot="section">
            <div class="banner"></div>
            <div class="card"></div>
            <div class="title"></div>
          </template>
    
          <template slot="aside">
            <div class="aside"></div>
          </template>
        </my-layout>
      </div>
    </template>
    
    <script>
    // 导入Layout.vue组件
    import Layout from "@/components/Layout.vue";
    
    export default {
      name: "app",
      components: {
        // 组件注册
        myLayout: Layout,
      },
    };
    </script>
    
    <style lang="less" scope>
    .header {
      height: 80px;
      background-color: pink;
    }
    
    .banner {
      width: 100%;
      padding-bottom: 40%;
      box-sizing: border-box;
      min-height: 300px;
      background-color: #000;
    }
    .card {
      width: 100%;
      padding-bottom: 40%;
      background-color: #ccc;
    }
    .title {
      width: 100%;
      height: 50px;
      background: blue;
    }
    
    .aside {
      width: 100%;
      height: 500px;
      background-color: skyblue;
    }
    </style>
    
    
    展开全文
  • vue 封装的 echarts 组件

    2019-03-05 17:05:35
    vue 封装的 echarts 组件,主要传递四个参数到组件中,title、legend、series、xAxis,分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用,数据被覆盖问题解决办法。
  • 思路:组件中包括面板整体样式、标题 、按钮、分页组件页面中将搜索条件、th、tr用slot传入组件模板中,形成每页的table。监听面板打开关闭的变量进行重新渲染,点击确定时页面组件监听事件传出选中条目的数组,...

    效果描述:点击输入框弹出table面板,面板包括标题、列表分页、检索条件、确定取消安钮、单选全选框。面板回显已选中条目,切换页时仍能显示。
    思路:组件中包括面板整体样式、标题 、按钮、分页组件;页面中将搜索条件、th、tr用slot传入组件模板中,形成每页的table。监听面板打开关闭的变量进行重新渲染,点击确定时页面父组件监听事件传出选中条目的数组,符合条件则执行面板关闭及后续。点击检索按钮时通过this.$refs.comName.method(‘tag’);调用组件内检索方法、改变组件内检索条件。
    技能点:主要为slot使用方法以及业务梳理,合理提取组件。外表及方法共用,仅传入url和检索条件,确定时传出选定数组。若为多个table且表头不同,则在一个父组件内通过变量控制显示与数组赋值。slot用v-if控制显示(不可v-show,此属性为控制dom元素display属性),不可出现同名slot,但slot内可用template显示不同的html内容。 slot-scope=" " 为vue2.5+中写法。

    <table class="table table-hover table-bordered">
        <tbody>
            <slot name="ths"></slot>
            <slot name="item"
                  v-for="item in items"
                  :item="item">
            </slot>
        </tbody>
    </table>
    
    <tr slot="ths">
        <th>ID</th>
        <th>Project</th>
        <th>Version</th>
    </tr>
    

    html中的组件外框公共模板

    <script type="text/template" id="table-wrapper">
    <!--弹出面板-->
    
    <div class="modal fade" tabindex="-1" style="z-index:99999;" id="modal-table">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-header no-padding">
    				<div class="table-header">
    					<button type="button" class="close" aria-hidden="true" @click="closeAssocModal">
    						<span class="white">&times;</span>
    					</button>
    					{{title}}
    				</div>
    			</div>
    			<div class="modal-body no-padding"style="min-height:445px">
    				<div class="staff-search">
    					<slot name="search-condition"></slot>
    				</div>
    				<table  class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
        				<thead>
          			    	<slot name="ths"></slot>
    					</thead>
    					<tbody>
    						<tr v-for="(item,index) in items"
                  			 	:item="item" :class="{ isSelected: item.isSelected }" @click="pushItem(item,index)">
    							<slot name="item" :item="item"></slot>
    						</tr>   			
       					</tbody>
    			 	</table>
    			</div>
    			
    			<div class="modal-footer no-margin-top">
    				<button class="btn btn-sm btn-danger pull-left" @click="closeAssocModal">
    					<i class="ace-icon fa fa-times"></i>
    					关闭
    				</button>
    				<button class="btn btn-sm btn-success pull-left" @click="addItems()">
    					<i class="ace-icon fa fa-times"></i>
    					确认
    				</button>
    				<ul class="pagination pull-right no-margin">
    					<navigation :pages="employeePages" :current.sync="employeePageNo" @navpage="employeePageList" ref="associNavigation"></navigation>
    				</ul>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    	<loading class="associationLayer" v-show="associationLayer"></loading>	
    </div>
    
    </script>			
    

    页面内代码

    <template>
    	<ttable-wrapper :title="'企业检索'" @add-items="confirmAssociation" @close-asso-modal="closeAssoModal" ref="association" :if-add-employee="ifAddAssociateItems" :selected-items="selectedAssoItems" :url="''">
    	
    			<template slot="search-condition">
    				<div class="form-group col-sm-10">
                      	 <label class="col-sm-4 control-label no-padding-right">企业名称:</label>
                      	 <div class="col-sm-8">
                      	 	 <input type="text" autocomplete="off" maxlength="20" class="col-sm-9" v-model="enterName" @keyup.enter="getEnterList()">
    						 <button @click="getEnterList()" class="btn btn-primary col-sm-2 tbl-search"><i class="ace-icon fa fa-search"></i></button>
                      	 </div>
    				</div>
    			</template>
    			<template slot="ths">
    				<tr>
    				    <th class="center" >
    	                    <label class="position-relative">
    	                        <input type="checkbox" class="ace association-check-all" @click="checkedAllAssoc">
    	                        <span class="lbl"></span>
    	                    </label>
    	                </th>
    	                <th>企业名称</th>
    					<th>负责人</th>
    					<th>联系方式</th>
    				</tr>
    			</template>
    					
    			<template slot="item" scope="scope">
    			     
    				<td class="td-center" style="cursor: pointer;"><label class="position-relative"><input type="checkbox" class="ace" :checked="scope.item.isSelected"> <span class="lbl"></span></label></td>
    				<td>
    					{{scope.item.name}}
    				</td>
    				<td>
    					{{scope.item.leader}}
    				</td>
    				<td>
    					{{scope.item.telephone}}
    				</td>
    			</template>
    	</table-wrapper>	
    </template>	
    

    组件封装

    Vue.component("table-wrapper",{
        data:function(){
            return {
                employeePageNo:1,	//当前页
                employeePages:0,	//总共页数
                employPageSize:10,	
                senddata:{},
                items:[],	//table列表数据
                associationLayer:false,//loading标志
                tempSelectedItems:[], //组件内确定时外传数据
                
            };
        },
        props:["title","ifAddEmployee","url","selectedItems"],//面板标题、监听打开面板、地址、数据、选中项  
        template:'#table-wrapper',
        methods:{
        	//点击分页页码
    	    employeePageList:function(curPage) {
    	    	if(curPage){
    	    		this.employeePageNo = curPage;
    		        this.getEmployeeList();
    	    	}
    	    },
    	    //点击确定按钮 添加
    	    addItems:function(){
    	    	this.$emit("add-items",this.tempSelectedItems);
    	    },
    	    //点击关闭按钮时
    	    closeAssocModal:function(){
    	    	this.$emit("close-asso-modal");// 替换data-dismiss="modal"
    	    },
    	    //获取table列表
    	    getEmployeeList:function(tag){
            	var This = this;
            	var url = This.url;
            	var data = This.senddata;
            	if(tag){
            		data.pageNum = 1;
            		This.employeePageNo = 1;
            	}else{
            		data.pageNum = This.employeePageNo;
            	}
            	data.pageSize = This.employPageSize;
                ajax('post',url,data,function(response){
                    This.associationLayer = false;//关闭等待框
                    if(response.code==1){
                    	var list = response.data.records||response.data;
    	                if(list.length>0){ 
    	                	 $.each(list,function (index,item) {//选中数组渲染与回显
    	                		 item.isSelected = false;
    	                         $.each(This.tempSelectedItems,function(eindex,dispatchItem){
    	                         	if(item.id==dispatchItem.id){
    	                             	item.isSelected = true;
    	                             }
    	                         });
    	                     });
    	                	 This.items = list;
    	                     This.employeePages = response.data.pages || Math.ceil(response.data.totalCount/This.employPageSize) ||Math.ceil(response.totalCount/This.employPageSize);	       
    	                }else{
    	                	var msg = "未检索到相关内容";
    	                	errorMsgTip(msg);
    	                }
    	             }
                });
                if(tag){
                	var pageNum = data.current||data.pageNum;
                	this.$refs.associNavigation.goPage(pageNum);//分页组件首页点击效果
                }
                $(".association-check-all").prop("checked", false);
            },
          //面板中选择 新增或删除
            pushItem:function(item,index){
            	/*添加删除*/
            	event.preventDefault();
            	item.isSelected = !item.isSelected;
            	var This = this;
            	if(item.isSelected){
            		This.tempSelectedItems.push(item);
            	}else{
            		var items = This.tempSelectedItems;
            		for(var i=items.length-1;i>=0;i--){
            			if(item.id === items[i].id){	//索引值为选中数组中的索引值
            				This.tempSelectedItems.splice(i,1);
            			}
            		}
            	}
            },
            //全选  页面传递全选标志  
            checkedAllAssoc:function(event){
            	var ifChecked = event.target.checked;
            	var This = this;
            	if(ifChecked){
            		$.each(This.items,function (index,item) {
            			item.isSelected = true;//显示
            			var flag = false;
            			$.each(This.tempSelectedItems,function(indexSelected,itemSelected){
            				if(itemSelected.id == item.id){
            					flag = true;//已选定数组中已存在
            					return false;
                			}
            			});
            			if(!flag){//未存在则存入
            				This.tempSelectedItems.push(item);
            			}
                    });
            	}else{
            		$.each(this.items,function (index,item) {
            			item.isSelected = false;
            			$.each(This.tempSelectedItems,function(indexSelected,itemSelected){
            				if(itemSelected.id == item.id){
            					This.tempSelectedItems.splice(i,1);
            					return false;
                			}
            			});
            			
                    });
            	}
            }
        },
        watch: {
        	ifAddEmployee:function(curVal,oldVal){
        		if(curVal){
        			var This = this;
        			this.senddata = {};
        			this.getEmployeeList('search');//初始搜索 条件空、页码1
        			this.associationLayer = true;
        			this.tempSelectedItems = [];
        			$.each(this.selectedItems,function(index,item){
        				This.tempSelectedItems.push(item);
        			});
        		}
           }
        }
    })
    

    参考:Vue实战(六)通用Table组件

    展开全文
  • 标题组件基础使用以及脚手架安装 1.组件 特点:一组可复用的vue实例 组件化和模块化的区别? 组件化:组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程,有多种属性、状态反映其内部特性 特点:一个具有...

    标题组件基础使用以及脚手架安装

    1.组件
    特点:一组可复用的vue实例

    组件化和模块化的区别?

    组件化:组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程,有多种属性、状态反映其内部特性

    特点:一个具有html+css+js的页面

    模块化:侧重的功能的封装,主要是针对Javascript代码,隔离、组织复制的javascript代码,将它封装成一个个具有特定功能的的模块。

    Document
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        Vue.component('vOne',{
            template:'<div>我是第一个组件</div>'
        });
        let vm = new Vue({
            el:'#app',
            data:{},
            methods:{}
        });
    </script>
    

    2.命名规则
    1.不能以标签起名,包含大写
    2.建议用驼峰起名
    3.首字母大写,后面直接写名字。如果后面有大写需要转换为驼峰

    Document
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
    
            },
            methods: {
    
            },
            components: {
                vTwo: {
                    template: '<div>我是第二个模板对象<div>abc</div></div>'
                },
                vThree: {
                    template: `<div>我是第三个模板对象
                <h2>我是标题三</h2>
              </div>`
                }
            }
        });
    </script>
    

    3.template模板

    Document
    <template id="temp1">
        <div>
            <h2>我是标题2</h2>
            <p>我是标签</p>
            <div>我是div</div>
        </div>
    </template>
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
    
            },
            methods: {
    
            },
            components: {
                vOne: {
                    template: '#temp1'
                },
                vtwo: {
                    template: '<div>我是检测命名的</div>'
                },
                Vthree: {
                    template: '<div>我是检测命名的three</div>'
                },
                VthreeInfo: {
                    template: '<div>我是检测命名的info</div>'
                }
            }
        });
    </script>
    

    4、组件嵌套

    Document
    {{msg}}
    <template id="temp1">
        <div>
            <h2>我是模板一</h2>
            {{name}}
        </div>
    </template>
    
    <template id="temp2">
        <div>
            <h2>我是模板二</h2>
        </div>
    </template>
    
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            methods:{
    
            },
            components:{
                vOne:{
                    template:'#temp1',
                    components:{
                        vInner:{
                            template:'<div>我是里层嵌套的模板<v-three></v-three></div>',
                            components:{
                                vThree:{
                                    template:'#temp2'
                                }
                            }
                        }
                    },
                    data() {
                        return {
                            name:'张三'
                        }
                    }
                }
            }
        });
    </script>
    

    5.data使用

    重点:组件中定义data为函数,原因是:为了共享数据但是又互相不干扰.

    Document

    6.后台管理页面实现

    注意:1.外层嵌套大盒子(container) 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式

    Document
    <template id="container">
        <div class="container">
            container
            <v-header></v-header>
            <v-body></v-body>
            <v-footer></v-footer>
        </div>
    </template>
    
    <template id="header">
        <div class="header">
            header
        </div>
    </template>
    
    <template id="body">
        <div class="body">
            body
            <v-left></v-left>
            <v-right></v-right>
        </div>
    </template>
    
    <template id="footer">
        <div class="footer">
            footer
        </div>
    </template>
    
    <template id="left">
        <div class="left">
            left
        </div>
    </template>
    
    <template id="right">
        <div class="right">
            right
        </div>
    </template>
    
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        let vLeft = {
            template: '#left'
        }
    
        let vRight = {
            template: '#right'
        }
    
        let vBody = {
            template: '#body',
            components: {
                vLeft,
                vRight
            }
        }
    
        let vHeader = {
            template: '#header'
        }
    
        let vFooter = {
            template: '#footer'
        }
    
        let vContainer = {
            template: '#container',
            components: {
                vHeader,
                vBody,
                vFooter
            }
        }
    
        let vm = new Vue({
            el: '#app',
            data: {
    
            },
            methods: {
    
            },
            components: {
                vContainer
            }
        });
    </script>
    

    8.生命周期 --8个钩子函数 mounted 是最常用的

    v-if 会引起生命周期的改变

    v-show 不会引起

    Document
    {{msg}}

    上述案例生命周期的执行过程为:

    首先是vm实例的生命周期执行beforeCreate,created,beforeMount,之后是到组件走生命周期beforeCreate,created,beforeMount,mounted,最后是走vm的mounted。

    9.脚手架

    步骤:

    //全局安装webpack
    npm i webpack -g

    //查看版本
    webpack -v

    //全局安装vue脚手架 2.x
    npm i vue-cli -g

    //查看版本
    vue -V

    以上操作只需要操作一次
    //创建项目
    vue init webpack demo

    //进入项目
    cd demo

    //启动
    npm run dev //localhost:8080

    注意: 安装cnpm方法 淘宝镜像
    npm i -g cnpm --registry=https://registry.npm.taobao.org

    注意:
    1.名字:不能带大写
    2.全选n
    3.在当前文件夹中不能有vue.js这个文件

    1.index.html ->页面的入口文件
    2.main.js->程序的入口文件
    3.App.vue ->组件–>类似上午的containter

    总结:

    后台项目:

    1.划分组件

    App.vue->container 整个容器

    header,footer,main,left,right 都是单独的组件 需要用谁直接 import导入就行

    //点击弹框

    局部定义弹框 首先要有弹框组件 alertbtn.vue 哪用在哪里引入

    展开全文
  • 一个基于 ElementPlus 封装的 table 列表页组件,将包含搜索、列表、分页等功能的页面封装成一个组件 特性 将搜索、列表、分页三者的交互逻辑封装组件中,节省开发者代码量 配置化的请求函数,自动发送请求,自动...
  • vue中我们经常见的是随着切换不同的页面可以修改页面上的meta.title,但是还有另一种情况是我们要在组件内部改动他的提示信息,比如:我们封装了一个详情组件,然后需要每次进来的时候获取后台数据,然后根据数据来...

    前言:

           vue中我们经常见的是随着切换不同的页面可以修改页面上的meta.title,但是还有另一种情况是我们要在组件内部改动他的提示信息,比如:我们封装了一个详情组件,然后需要每次进来的时候获取后台数据,然后根据数据来修改我们页面上的标题信息

    实现方法:

    1 核心代码:修改+刷新

             // 动态改title
                this.$route.meta.title = datas.name
                //刷新
                let query = this.$route.query
                this.$router.replace({
                  query: {
                    temp: Date.now(), //必有,必须第一个
                    audio_id: query.audio_id,//其他参数
                  }
                })

    2 全部代码:放在请求后台成功以后来修改

    this.$api.homeWork.getArticleDetail(id, str).then(res => {
              if (res.data.code === 13200) {
                let datas = res.data.data
                // 动态改title
                this.$route.meta.title = datas.name
                //刷新
                let query = this.$route.query
                this.$router.replace({
                  query: {
                    temp: Date.now(), //必有
                    audio_id: query.audio_id,
                    source: 'homework',
                    subjectAlias: query.subjectAlias,
                    articleTit: query.articleTit
                  }
                })
                this.showAudio = false
                this.$nextTick(() => {
                  this.mindDetail = datas
    
                  this.songInfo.title = datas.audios[0].name
                  this.songInfo.src = datas.audios[0].file_url
                  this.showAudio = true
                })
              }
    
            })

     

    展开全文
  • 详情页面 01 - 完成静态页面 ...2.0 在 com 添加一个comment.vue 组件 3.0 在 detail 页面中使用这个组件 4.0 完成静态的结构 & 样式 评论书写区域 将评论书写区域封装为一个组件 步骤 1.0 在
  • vue-admin(3.0) 项目脚手架,没有UI,方便些项目时候直接使用 分支包含元素UI后台管理系统演示 分支包含Iview UI后台管理系统demo 分支包含vux wechat项目demo 建议使用master分支(将拆成三个admin),一些工具类...
  • 只要是项目,绕不开的就是组件的封装和复用,虽然现在有很多前端的UI库,比如Element等等,但是这些UI库很多是基于最小颗粒度做的组件,实际项目中往往需要将多个基础组件封装在一个大组件里,举个例子,标题栏,在...
  • 此时,可以将自定义导航栏封装成uniapp插件,并在每个页面中使用该插件。下面将该自定义导航栏封装成插件。 插件封装 插件名为:imgNavBar。 在项目目录/components 目录下添加imgNavBar插件。 imgNavBar.vue 代码...
  • 1.0创建卡片组件(标题仅为步骤顺序) 注:数字1开头的为卡片组件的页面内容 此文档为...注:使用的时候用双标签,方便后面插槽 (用于vue组件的html中,作为标签使用) 1.01在卡片组件中创建具名插槽 2.03引入具名插槽 ...
  • my-code 简介 这里记录了我的一些日常代码库,一些编程小技巧,包含Html/css/Vue/React/Node/Js技术栈/小程序/微信开发的代码 ps 每个文件夹对应一个项目技巧 ,...:open_book: 1、微信H5页面前端开发,大多数人都
  • Vue

    2020-07-03 18:08:33
    这里写目录标题lazyVue代码的执行过程Vue数据驱动MVVM框架基本属性方法cli2,cli3安装路由懒加载routerrouter跳转子页面父子组件路由跳转携带参数$elaxios封装axios跨域封装vue跳转携带参数什么是虚拟DOM路由守卫...
  • 这里写目录标题1、Vue 高级使用1.1、自定义组件1.2、Vue的生命周期1.3、Vue异步操作1.4、小结2、综合案例 学生管理系统2.1、效果环境的介绍2.2、登录功能的实现2.3、分页查询功能的实现2.4、添加功能的实现2.5、修改...
  • 1.封装一个breadcrumb组件 <template> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item>{{firstTitle}}</el-breadcrumb-item> //有三级标题,三级标题变色...
  • :high_voltage: elsa(eleme simple admin)基于 element-ui 封装 el-form,el-table 等组件,适用于快速开发后台管理项目。 用法示例,见: Quickstart npm i elsa-vue -S // vue main.js import Vue from 'vue' ...
  • 业务场景:自己在x-header的基础上再封装了一下,要求根据父页面传来的参数设置x-header的标题背景色、标题字色和返回颜色 动态修改背景色比较简单 &lt;template&gt; &lt;x-header :style='...
  • 我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取 这里写图片描述 疑惑解答: 点击父(也就是折叠菜单)为什么会跑到子菜单第一个 因为我第一个子路由是空路径,也就是...
  • header头部文件夹放一些头部常用组件,如首页的banner切换封装一个swiper组件,tab切换封装一个tab组件,头部的标题封装一个vHeader组件 footer底部文件加放一些页面底部常用组件,如首页的菜单menu组件,列表页的...
  • 页面标题 自动注册:自动注册路由表/自动注册Vuex/svg图标引入 mock server axios封装、api管理 用户鉴权 vuex-loading vo-pages/dayjs/vconsole 生产环境优化 常用目录别名 Vant/Rem适配 按照Vant官网推荐自动按需...
  • 页面标题 自动注册:自动注册路由表/自动注册Vuex/svg图标引入 mock server axios封装、api管理 用户鉴权 vuex-loading vo-pages/dayjs/vconsole 生产环境优化 Vant/Rem适配 按照Vant官网推荐自动按需引入组件,...
  • 各项配置都好了,就可以开始写静态页面了,先别急着写,看一下页面又哪些公用的...头部的标题封装一个vHeader组件footer底部文件加放一些页面底部常用组件,如首页的菜单menu组件,列表页的筛选filter组件另外,注...
  • 在我们写后台管理的时候难免要自定义一些校验的规则,比如说标题必须是中文的,组件名必须是英文的。而如果这个时候,输入框已经是封装好的,我们该咋样去修改实现呢? 今天小编也是搞了一个下午出来了代码分享给 ...
  • 文章目录类别修改一 绘制页面二 模拟接口设置2.1 id查询分类2.2 提交修改三 接口封装四 方法定义4.1 对话框弹出4.2 数据提交 类别修改 点击编辑按钮,弹出对话框,修改类别相关信息,点击确认键提交。 观察到,类别...
  • 比如使用 uni-ui 的navbar标题栏、收藏、购物车等组件,均可实现自动打点,统计页面标题等各种行为数据。 当然你也可以关闭uni统计,这不是强制的。 4. 主题扩展 uni-ui 支持uni.scss,可以方便的切换App的风格。 ...
  • 第5章 歌手页面开发

    2019-06-17 08:34:20
    包括歌手数据的抓取和处理、Singer 类的封装、类通讯录组件 listview开发和应用。 5-1 歌手页面布局和设计讲解 做一个类似于通讯录的功能,当滑动左边的列表,右侧的相应的字母分类加上选中的样式,当点击右侧的字母...
  • (2)用vue组件封装标题栏,减少了标题代码的重复率。 (3)登录注册功能。 (4)仿segmengfault的上传头像功能。 (5)使用amazeui重构页面,完成markdown编辑器的增删改查,存草稿待完成。(2018-04-03) (6)完成后台登录...
  • 4、编写前端页面Vue组件 5、编写跳转到组件的路由(router/index.js) 6、如果需要从后端获取数据,使用Axios异步通信,默认框架中使用了request封装请求 BASE_API:'"http://localhost:8120' 7、编写处理后端接口的...

空空如也

空空如也

1 2
收藏数 37
精华内容 14
关键字:

vue组件封装页面标题

vue 订阅