vue 编辑header组件

女爷i 2021-09-16 13:08 368阅读 0赞

<template>  
  <div>  
    <my-header custom-title="通讯录" custom-fixed >  
      <button @touchstart="backBtn" slot="left">首页</button>  
      <button @touchstart="homeBtn" slot="right">+</button>  
    </my-header>  
  </div>  
</template>

<script>

import Vue from 'vue';    
import Vuex from 'vuex';

Vue.component('my-header',\{  
  template:\`<div id="header" :style="\{'position':customFixed ? 'fixed':'static'\}">  
      <slot name="left"></slot>  
      \{ \{customTitle\}\}  
      <slot name="right"></slot>  
  </div>\`,  
  props:\{  
    'customTitle':\{  
      type:String,  
      default:"标题"  
    \},  
    'customFixed':\{  
      type:Boolean,  
      default:false  
    \}  
  \}  
\})  
export default \{  
  name: "HelloWorld",  
  data() \{  
    return \{  
      \}  
    \},  
    methods:\{  
      backBtn:function()\{  
        alert("123")  
      \},  
      homeBtn:function()\{  
        alert("123")  
      \},  
    \},  
\};  
</script>

<style>  
.page-container \{  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
\}  
button\{background: \#f60; color: \#fff;\}  
\#header\{width: 100%;height:50px; background: \#666;color: \#fff;text-align: center;line-height: 40px;font-size: 20px;\}  
\#header button\{height: 100%;padding: 0 5px\}  
\#header button:nth-of-type(1)\{float: left\}  
\#header button:nth-of-type(2)\{float: right\}  
</style>

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关【vue】vue组件之图文编辑

图文编辑组件 1.代码 2. 引用 3. 页面样式 ps：使用该组件需另外安装vue-quill-editor插件 1.代码 <

悠悠/ 2022年10月09日 06:29/ 0 赞/ 279 阅读

相关 Vue（二）header组件开发

一、 header 组件开发之数据的传递 1. App.vue 引入组件 import header from './components/header/

- 日理万妓/ 2022年06月01日 04:19/ 0 赞/ 295 阅读

相关 Vue 组件

首先，我们还是先创建一个vue实例，很熟练了，没难度。 <div id="app"></div> <script> let vm =

落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 414 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 394 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 436 阅读

相关 VUE组件

介绍几种VUE组件定义方法定义VUE 字符串组件 Vue.component('order-item', { //定义VUE组件的属

ゞ浴缸里的玫瑰/ 2022年03月26日 13:10/ 0 赞/ 422 阅读

相关 VUE组件

VUE Component 一、概述 1. 作用扩展HTML元素，封装可重用的代码。在需要使用的地方引用组件。二、VUE前情回顾使用： 1.

雨点打透心脏的1/2处/ 2022年01月29日 06:19/ 0 赞/ 408 阅读

相关 Vue组件

为什么使用组件 JavaScript能力的复用。Vue.js的组件提高重复性，让代码可以复用。组件的用法组件在使用前先需要注册。注册分为两种方式：全局注册和局

叁歲伎倆/ 2021年09月27日 13:56/ 0 赞/ 510 阅读

相关 vue 编辑header组件

<template> <div> <my-header custom-title="通讯录" custom-fixed > <button

女爷i/ 2021年09月16日 13:08/ 0 赞/ 369 阅读

相关 Vue组件

Vue组件 1. 什么是组件 1. 组件的概念：组件即自定义控件，是Vue.js最强大的功能之一 2. 组件的用途：组件能够封装可重用代码，扩展html标签功能

ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 712 阅读