精华内容
下载资源
问答
  • 1. 自定义组件标签(如在主页插入顶栏/侧边栏等)   比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue: import vHead from "./Header.vue"; #导入Header....
  • 自定义组件在script标签中定义 使用Vue.component来定义 它有两个参数,第一个是自定义组件的名字,第二种是一个对象 里面存放一些自定义组件的信息 这个对象中有一些属性 常用的有 : template属性 它表示自定义...

    Vue可以自定义组件 在组件中自己设置组件内容

    注意 :自定义组件的名字不能有大写字母 否则无效!!!

    自定义组件在script标签中定义 使用Vue.component来定义 它有两个参数,第一个是自定义组件的名字,第二种是一个对象 里面存放一些自定义组件的信息 这个对象中有一些属性 常用的有 : template属性 它表示自定义组件中的内容(HTML代码). props属性 代表接受的数据 因为要实现数据的双向绑定 它无法直接访问到我们new Vue中定义的 data中的变量值 而前端可以拿到 new Vue’中 data的值 所以需要通过前端来向它传递这些值 (听起来很拗口 仔细理解一下 就是 你Vue.component中 无法获取 new Vue中的变量值 而前前端HTML可以获取到 所以需要通过前端绑定一个属性 将这个属性值传递给自定义组件中去 仔细看一下下面这个例子 理解一下)

    <div id='d2'>
    			<myconponent v-for="book in bookList" v-bind:field='book'></myconponent>
    		</div>
    		<script>
    			//自定义组件的名字不能有大写字母  否则无效!!!
    			Vue.component('myconponent',{
    				props : ['field'],
    				template : '<li>{{field}}</li>'
    			});
    			var v = new Vue({
    				el : '#d2',
    				data : {
    					bookList : ['数据库基础','Linux','数据结构与算法','Hadoop']
    				}
    			})
    </script>
    
    展开全文
  • vue 自定义标签

    千次阅读 2018-12-19 19:46:29
    首先我们创建一个基于vue的项目,我用的IDE是webstorm。 创建好的工程目录结构: 我们先来分析一下我们需要做哪些工作,常见的标签页就像下面的图片: 大家可以看到标签页的最上边是我们的标题区域,而下面则是...

    本篇文章我们通过以前学习过的知识来构建一个自己的标签页组件。
    首先我们创建一个基于vue的项目,我用的IDE是webstorm。
    在这里插入图片描述

    创建好的工程目录结构:
    在这里插入图片描述

    我们先来分析一下我们需要做哪些工作,常见的标签页就像下面的图片:
    在这里插入图片描述

    大家可以看到标签页的最上边是我们的标题区域,而下面则是我们对应的内容区域。

    第一眼看到这个布局,我就在想这个好像没有什么难度的,标题栏我用v-for渲染出来,下面的内容有几个标签我就用几个div来展示,无非控制一下显示和隐藏就好了。这么设计没有任何的毛病,不过这样的话我们就显示不出来我们组件的价值了。难道加一个标签,我还要修改里面的代码?

    我们在仔细分析一下,不管有几个标签,我们都能正确的渲染出来,而不是和第一个设计一样,我在加个div来实现。那么下面的内容区域必然要和我们的组件抽离,也就是说我们要实现的tabs标签页内部应该是嵌套的。那么在最外层的组件tabs就应该有标题栏和一个slot用来展示对应的内容。而slot中的内容就是具体的要展示的内容,由于这部分也是动态的,可想而知应该也是一个组件内部预留slot来实现的。那么,就按照这个思路我们来看下能不能实现这样的功能。

    我们这里就将这两部分分别命名为:tabs和panel组件,我们在工程中首先创建这两个文件。

    在这里插入图片描述

    在创建好的工程基础上,我们将HelloWorld的文件内容清除,暂时不展示任何东西,方便我们待会使用我们的组件tabs。

    接下来,我们就定制一下我们tabs和panel的代码。

    Tabs:

    <template>
      <div class="tabs">
        <div class="tabs-bar">
          <!--标签页标题,我们使用v-for进行渲染-->
        </div>
        <div class="tabs-content">
          <!--使用slot来进行panel嵌套-->
          <slot></slot>
        </div>
      </div>
    </template>
    

    Panel:

    <template>
      <div class="tabs-panel">
        <slot></slot>
      </div>
    </template>
    

    我们使用Tabs组件的姿势应该是这样子的:

    <template>
      <Tabs>
        <Panel></Panel>
        <Panel></Panel>
        <Panel></Panel>
      </Tabs>
    </template>
    <script>
      import Tabs from "@/components/Tabs";
      import Panel from "@/components/Panel";
    
      export default {
        name: 'HelloWorld',
        components: {Panel, Tabs},
        comments: {
          'Tabs': Tabs,
          'Panel': Panel,
        }
      }
    </script>
    

    然后运行程序:yarn run dev 或者 npm run dev
    在这里插入图片描述

    大家可以从右边的源码可以看到,我们想要的结构已经渲染出来了,那么接下来就是为我们的组件填充内容和控制逻辑了。

    首先我们要显示的就是标题了,每个标签页都有自己的标题,而这个标题应该在Panel组件中定义,Tabs组件的初始化的时候获取然后显示。

    我们在Panel组件中首先定义标签页的标题,显然这是一个props,用户可以动态设置的。

    另外我们还需要给panel指定一个唯一标识和控制panel显示隐藏的变量。随大流,我们分别将这几个变量命名为:label,name,visible。其中name可以由用户指定,如果没有指定那么我们可以按照从0开始指定。这些操作都是由Tabs完成。

    <template>
      <div class="tabs-panel" v-show="visible">
        <slot></slot>
      </div>
    </template>
    <script>
      export default {
        name: 'Panel',
        data() {
          return {
            visible: true,
          }
        },
        props: {
          name: {
            type: String
          },
          label: {
            type: String,
            default: ''
          }
        },
      }
    </script>
    
    <style scoped>
    
    </style>
    
    

    那么这应该就是panel修改后的代码了。

    我们先不考虑Tabs怎么处理这些东西,我们先将Tabs使用Panel的格式写出来:

    <Tabs>
        <Panel label="标签1">
          我是标签1
        </Panel>
        <Panel label="标签2">
          我是标签2
        </Panel>
        <Panel label="标签3">
          我是标签3
        </Panel>
      </Tabs>
    

    这里我们不指定name值,最终的样子应该如上。此时运行程序的结果是:
    在这里插入图片描述

    这里和我们看的标签页有哪些不同呢?
    1.标签页标题栏没有展示
    2.标签页的内容全部显示出来了

    在处理Tabs的工作之前,我们在想一下Panel组件还有什么需要处理的。

    大家回想一下,Panel中的label是用户动态设置的,如果label在初始化或者发生变化的时候是不是应该通知父组件也就是Tabs组件来更新标签页的标题?

     mounted() {
          this.updateNav()
        },
        watch: {
          label() {
            this.updateNav()
          }
        },
        methods: {
          updateNav() {
            this.$parent.updateNav()
          },
        }
    

    我们添加相应的方法,暂时我们就取名叫updateNav。其中Tabs和Panel是两个独立的组件,我们要访问父组件,就必须通过父链来操作也就是 this.$parent。
    在这里我们在初始化和label内容发生变化的时候通知父组件来更新标签页标题。

    接下来的工作应该是Tabs的实现了。我们首先要实现的是,在Tabs初始化的时候获取所有的Panel子组件并且渲染内容。

    那么我们就首先来获取Tabs下的子组件:

     methods:{
          getTabs(){
            console.log(this.$children)
          }
        }
    

    这些我们先定义一个方法getTabs用来获取子组件。大家应该还记得在vue中可以通过this.$children来获取下面的子组件。我们先来看下输出结果:
    在这里插入图片描述
    大家可以看到返回的是一个数组对象,那么我们在仔细看下里面的内容:
    在这里插入图片描述

    这里我们需要用到的是options的数据,先来看下官方文档中对于它的解释:
    在这里插入图片描述

    也就是说我们可以通过vm.$options的形式获取到我们的自定义属性,这里就是:label和name。

    那么我们就知道该怎么从Panel组件获取我们想要的数据了:

    getTabs() {
            return this.$children.filter(item=>{
              return item.$options.name == 'Panel'
            })
          },
    

    首先对getTabs进行改造,这里我们需要的是Panel组件,其他的不是我们Tabs的有效子组件,所以进行一下数据过滤。

    接下来我们考虑一下我们还需要什么?

    首先,我们在Panel初始化完成后,会调用Tabs组件的updateNav方法,在这个方法中我们需要获取子组件的label和name信息来初始化标签页标题,然后我们应该还有一个变量来存储这些数据以便Tabs来渲染标题。

    其次,我们需要知道哪个Panel或者是标签处于选中状态,这一点我们可以定义一个变量标识当前操作的Panel,显然这个值是Panel的name属性。

    在知道当前是哪个标签页后,我们需要给标签页的标签动态增加一个类比如给这个标签添加一个边框等等来区分未选中的标签,同时我们还需要控制对应的Panel内容的显示隐藏。

    我们按照上面的思路最终写出的代码如下:

    <template>
      <div class="tabs">
        <div class="tabs-bar">
          <!--标签页标题,我们使用v-for进行渲染-->
          <div :class="tabCls(item)"
               v-for="(item,index) in navList"
               :key="index"
               @click="handleChanged(index)">
            {{item.label}}
          </div>
        </div>
        <div class="tabs-content">
          <!--使用slot来进行panel嵌套-->
          <slot></slot>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Tabs',
        data() {
          return {
            current: this.value || 0,
            navList: [],
          }
        },
        props: {
          value: [String, Number]
        },
        mounted() {
          console.log(this.getTabs())
        },
    
        watch: {
          value(val) {
            this.current = val
          },
    
          current(val) {
            // 当前tab发生变化时,更新panel的显示状态
            this.updateStatus()
          }
        },
        methods: {
          // 当tab选中时,动态添加样式
          tabCls(item) {
            return [
              'tabs-tab',
              {'tabs-tab-active': item.name === this.current}
            ]
          },
    
          // 获取panel子组件
          getTabs() {
            return this.$children.filter(item => {
              return item.$options.name == 'Panel'
            })
          },
    
          // 显示对应的panel组件内容,并隐藏未被选中的panel
          updateStatus() {
            this.getTabs().forEach(panel => {
              panel.visible = panel.name === this.current
            })
          },
    
          // 更新tabs
          updateNav() {
            this.navList = []
    
            this.getTabs().forEach((panel, index) => {
              this.navList.push({
                label: panel.label,
                name: panel.name || index
              })
              // 如果panel没有定义name属性,那么使用index作为panel标识
              if (!panel.name) {
                panel.name = index
              }
              // 设置第一个panel为当前活动panel
              if (index === 0) {
                if (!this.current) {
                  this.current = panel.name || index
                }
              }
              this.updateStatus()
            })
          },
          // 点击标签页标题时触发
          handleChanged(index) {
    
            // 修改当前选中tab
            this.current = this.navList[index].name
    
            // 更新value
            this.$emit('input', this.current)
    
            // 触发自定义事件,供父级使用
            this.$emit('on-click', this.current)
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    

    这里我们使用value用来指定当前活动的tab,其中 this.$emit(‘input’, this.current)是为了实现v-model这个相关的知识大家应该都了解。

    另外一个注意点就是,动态添加类的时候,应为计算属性是无法接受参数的,所以我们不知道哪个tab处于选中状态,所以这里使用methods,methods是不缓存的,每次发生变化都会重新调用的。

     current: this.value || 0,
    

    这句代码主要是为了,如果我们没有使用v-model,仍然可以让Tabs保持第一个选中,当然了,还是有小问题的,如果Panel设置name属性会怎么样,这里就不说了,大伙可以试试。这是我们没有添加样式的结果:
    在这里插入图片描述

    好了,最后当然是给它一个像样子的样式,至少能达到能看的地步:
    在这里插入图片描述

    完整代码:https://download.csdn.net/download/qingyulove/10862445

    展开全文
  • 、1、app.config.ts:自定义TabBar就必须将custom设为true 2、 定义TabBar组件: customTabBar.vue <template> <view class='bottom-tab'> <view class='bottom-tab-item' v-for="(tabItem...

    、1、app.config.ts:自定义TabBar就必须将custom设为true

    2、 定义TabBar组件:

     customTabBar.vue

    <template>
      <view class='bottom-tab'>
        <view class='bottom-tab-item' v-for="(tabItem, index) in list" :key="tabItem.key"  @tap="switchTab(tabItem.pagePath, index)">
            <image class='bottom-tab-item-img' :src="selected == index ? tabItem.selectedIconPath : tabItem.iconPath " />
            <view class='bottom-tab-item-text' :style="{color:(selected==index?selectedColor:color)}" >
              {{tabItem.text}}
            </view>
        </view>
      </view>
    </template>
    <script>
    import './customTabBar.scss'
    import Taro from '@tarojs/taro'
    import commonUtil from "../../utils/util.ts"
    import {
    } from "taro-ui-vue3"
    export default {
      components: {
      },
      data () {
        return {
          selected: 0,
          color: 'rgba(68, 68, 68, 1)',
          selectedColor: 'rgba(68, 68, 68, 1)',
          list: [
            {
              "pagePath": "pages/tabBarPackages/home/home",
              "iconPath": "../../../images/foot_1.png",
              "selectedIconPath": "../../../images/foot_1.png",
              "text": "首页",
            },
            {
              "pagePath": "pages/tabBarPackages/userList/userList",
              "text": "用户",
              "iconPath": "../../../images/foot_2.png",
              "selectedIconPath": "../../../images/foot_2.png"
            },
            {
              "pagePath": "pages/tabBarPackages/userAdd/userAdd",
              "text": "",
              "iconPath": "../../../images/foot_3.png",
              "selectedIconPath": "../../../images/foot_3.png"
            },
            {
              "pagePath": "pages/tabBarPackages/teamList/teamList",
              "text": "小组",
              "iconPath": "../../../images/foot_4.png",
              "selectedIconPath": "../../../images/foot_4.png"
            },
            {
              "pagePath": "pages/tabBarPackages/personal/personal",
              "text": "我的",
              "iconPath": "../../../images/foot_5.png",
              "selectedIconPath": "../../../images/foot_5.png"
            }
          ]
        }
      },
      created () {
      },
      methods: {
        switchTab(pagePath, index){
          this.selected = index
          Taro.switchTab({
              url: '../../../' + pagePath
          })
        }
      },
    }
    </script>

    customTabBar.scss(这段css样式完全copy的这篇文章https://www.jianshu.com/p/ba33d0be8f03/)

    .bottom-tab {
      position: fixed;
      display: flex;
      width: 100%;
      height: 49PX;
      background: white;
      box-shadow: 0PX -5PX 10PX 0PX rgba(0, 0, 0, 0.03);
      bottom: 0;
      &-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &-img {
          margin: 5PX auto 0;
          width: 24PX;
          height: 24PX;
        }
        &-text {
          height: 14PX;
          line-height: 14PX;
          font-size: 10PX;
          font-family: PingFangSC-Light, PingFang SC;
          font-weight: 300;
          color: rgba(68, 68, 68, 1);
        }
      }
    }

    3、tab页面调用组件

    例:home页面

    home.config.ts

    export default {
      navigationBarTitleText: '用户管理平台',
      "usingComponents": {
        'customTabBar': '../../../components/custom-tab-bar/customTabBar'
      },
    }
    

    home.vue

    <template>
        ......
        <customTabBar></customTabBar>
    </template>
    <script>
    import "./home.scss";
    import Taro, { getCurrentInstance } from "@tarojs/taro";
    import { AtGrid, AtButton, AtNoticebar, AtIcon, AtToast } from "taro-ui-vue3";
    import commonUtil from "../../../utils/util.ts";
    import customTabBar from "../../../components/custom-tab-bar/customTabBar.vue";
    
    export default {
        components: {
            AtGrid,
            AtButton,
            AtNoticebar,
            AtIcon,
            AtToast,
            customTabBar
        },
        data() {
            ......
    };
    </script>
    
    展开全文
  • 主要介绍了Vue 自定义标签的src属性不能使用相对路径的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue自定义标签页example

    2018-12-19 19:45:26
    使用vue简单实现一个自定义的Tabs标签页组件,主要功能具备,细节需要大家按需修改。
  • Vue自定义标签及其使用

    千次阅读 2020-07-20 18:14:20
    Vue自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果 问题 我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的组件库,但是我们想过它是怎么实现的吗?是否...

    问题

    • 我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的组件库,但是我们想过它是怎么实现的吗?是否我们也可以自己编写并且调用呢?
    • 这里我将要讲解我在自定义标签方面的使用。

    需求

    • 这里我想要建一个名叫:<test>的组件。
    • 功能是:组成两个按钮,且两个按钮颜色不同。

    注意:这里的组件名、功能都是可以自定义的,按自己需求来取舍。

    自定义

    创建组件的vue文件

    • 我们更目录设置为src
    • 创建调用文件src/view/test/main.vue,用来运行自己定义的组件。
    • 创建自定义组件文件src/view/components/test.vue,我们将要编辑的组件。

    编辑组件

    src/view/components/test.vue

    // 这里的组成按照自己需求来
    <template>
      <div>
        <van-button slot="button" color="red">btn1</van-button>
        <van-button slot="button" color="blue">btn2</van-button>
      </div>
    </template>
    
    <script>
    	import { Button } from 'vant';	// 使用到vant的Button
    	export default {
            name: 'test',	// 组件使用空间
            components: {
                [Button.name]: Button,
            },
        }
    </script>
    

    使用

    src/view/test/main.vue

    导入

    import Test from './../components/test.vue'; 
    

    申明使用

    export default {
        components: {
          Test,
        },
    }
    

    使用

    <template>
    	<test></test>
    </template>
    

    整个代码

    <template>
    	<test></test>
    </template>
    
    <script>
    	export default {
        components: {
          Test,
        },
    }
    </script>
    

    效果

    效果


    目前还不能够实现传递参数,等学会之后会继续更新


    本人学历有限,有问题的地方希望诸位给出指导,谢谢


    展开全文
  • vue 自定义添加标签的组件

    千次阅读 2019-12-16 11:12:50
    在输入框中输入信息,回车添加到标签框中, 在标签框中点击删除该标签 3. 点击标签可以重新编辑 效果图 代码 <!-- 添加关键字 --> (item, index) in pags" :key="index" @click=...
  • <...查阅vue官方文档,得知click事件作用于组件内部,如果组件内没有写click事件,便会无响应。 解决办法:加上 .native原生修饰符 <myheader :title="Position.name" ref="myh" @click.na...
  • 使用vue2.0实现自定义弹窗指令,当标签有该指令时,点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识,感兴趣的朋友一起看看吧
  • 如图所示,要完成类似的一个底部导航切换。 首先。...然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 !bol'> <slot name='normalImg'></slot> <slot n
  • vue自定义time标签

    2018-05-28 22:16:11
    使用vue实现时间显示刚刚、几分钟前、几小时前、时间的日期格式
  • vue标签自定义属性的使用

    万次阅读 2019-08-23 18:12:29
    vue获取dom元素可以使用 ref 要想获得自定义属性,可以通过设置 ref 实现 <span data-num="21" ref="dataNum" @click="getData">55</span> getData:function () { console.log(thi...
  • vue.js自定义标签(自定义组件)

    万次阅读 2018-06-24 18:48:47
    2.vue.js的js操作: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Vue.component('todo-form',{   template:'#todo-form-template',   props:['todos'],   data(){   return {   newtodo:{id:null,title:'',...
  • 打开 File -> Settings -> File Types 在右侧的窗口中找到Vue.js Template 并选中,在下面的窗口中添加 *.vue 即可解决问题。 修改后 转载于:https://www.cnblogs.com/Jimc/p/11124457.html...
  • 主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话,此篇文章会对你有所帮助的,需要的朋友可以参考下
  • 自定义了一个标签menu_item ``` Vue.component('menu_item',{ props:['todo'], //template:'()">{{todo.text}}</li>', template:'()">{{todo.text}}</li>', }) var menu = new Vue({ el:"#vue_...
  • 不知道有没有和我一样项目中用的到Ant Design of Vue的Tabs组件在测试环境上打包时是无效的,于是手写个组件 我会写在src的componets下 我所用到的传值都是用类型1或2来判断或者中英文 父组件 <template> <...
  • 1、效果说明图; 2、完整的代码实现及注释; 3、轻松易懂
  • 主要介绍了vue中的v-model原理,与组件自定义v-model详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue自定义指令实现按钮权限管理

    千次阅读 2020-10-27 20:04:00
    1. 前言在 《从头再学 Vue 的指令》介绍了什么是 Vue 指令,以及如何实现自定义指令。接下来我们通过使用自定义指令来解决一个开发过程中的实际需求:按钮权限管理。2. 分析在管理系...
  • vue获取自定义属性的值,标签的值

    千次阅读 2020-10-23 11:32:15
    vue中尽量减少dom操作。 方式一:不推荐使用 自定义属性为data-val,通过e.target.getAttribute()获取。 <span data-val="0" @click="getVal0">点我</span> getVal0(e){ console.log(e....
  • Vue自定义组件传值

    千次阅读 2019-05-29 20:15:51
    Vue 自定义组件 简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 功能 组件 (Component) 是 Vue...
  • 标签拖拽、改变宽度
  • ​ 在使用Vue自定义组件的功能时,出现了一个错误 ​ vue.js:634 [Vue warn]: Unknown custom element: <student> - did you register the component correctly? For recursive components, make sure to ...
  • 主要介绍了使用Vue 自定义文件选择器组件的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vscode vue 开发使用tab补全自定义标签

    千次阅读 2020-09-03 10:59:52
    打开vscode设置 打开setting.json文件 在setting.json中添加"emmet.triggerExpansionOnTab": true,保存即可
  • Vue自定义组件不显示

    千次阅读 2020-01-11 10:42:41
    问题: 从Vue官网教程找copy的例子,但发现浏览器中却不显示,代码如下: <... <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ...a-test post-title="hello!...--自定义组件--&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,703
精华内容 16,281
关键字:

vue自定义标签

vue 订阅