精华内容
下载资源
问答
  • vue 组件标签里面套组件 Vue标签选择器 (vue-tag-selector) A simple tag selector as a vue component. 一个简单的标签选择器作为vue组件。 Vue-tag-selector is a component for vuejs for tag type fields. ...

    vue 组件标签里面套组件

    Vue标签选择器 (vue-tag-selector)

    A simple tag selector as a vue component.

    一个简单的标签选择器作为vue组件。

    Vue-tag-selector is a component for vuejs for tag type fields. Light (6.3kb gzipped) and customizable. Offering regex validation.

    Vue-tag-selector是用于vuejs的标签类型字段的组件。 轻巧(压缩后6.3kb),可自定义。 提供正则表达式验证。

    安装 (Installation)

    # with npm
    npm install --save vue-tag-selector
    # with yarn
    yarn add vue-tag-selector

    用法 (Usage)

    For using the component you just need to import the component and register it:

    为了使用组件,您只需要导入组件并注册它:

    import TagSelector from 'vue-tag-selector'
    export default {
      components: { TagSelector },
      data(){
        return {
          tags: []
        }
      }
    }

    And then use it in your template:

    然后在模板中使用它:

    <template>
      <div class="container">
        <tag-selector name="tags" v-model="tags"/>
      </div>
    </template>

    API文档 (API Documentation)

    Here's a list of the props available:

    以下是可用道具的列表:

    • label: Displays a label, has to be String can be ignored

      label :显示标签,必须为String可以忽略

    • name: Required. usually the field name.

      name必填 。 通常是字段名称。

    • classes: Allows you to add classes to the field. String or Array.

      classes :允许您将类添加到字段。 字符串或数组。

    • regex: A RegExp. Validates every tag and disallow adding if not matching. By default it's alphanumerical only (/^[a-zA-Z0-9]*$/)

      regex :一个RegExp。 验证每个标签,如果不匹配,则不允许添加。 默认情况下,它仅是字母数字( /^[a-zA-Z0-9]*$/ )

    • regexError: The error displayed when the Regex doesn't match

      regexError :当正则表达式不匹配时显示的错误

    样式 (Style)

    The component philosophy is pretty straightforward here: only the mandatory style is bundled. I personally never liked js library that needs too much CSS. Only 26 lines of CSS here 😉. But you can easily stylize the component.

    组件原理在这里非常简单:仅捆绑了强制性样式。 我个人从来都不喜欢需要太多CSS的js库。 26这里只有26行CSS。 但是您可以轻松地对组件进行样式化。

    Have an example template:

    有一个示例模板:

    <div class="field tag-selector">
      <label for="tags">Post tags</label>
      <div class="tag-selector--input">
          <div class="tag-selector--item">
            Dogs <i class="icon tag-selector--remove">delete_icon</i>
          </div>
          <div class="tag-selector--item">
            Cats <i class="icon tag-selector--remove">delete_icon</i>
          </div>
          <div class="tag-selector--item">
            Horses <i class="icon tag-selector--remove">delete_icon</i>
          </div>
        <input type="text" id="tags" name="tags" class="tag-selector-input">
      </div>
      <p class="validation-message">The tag you entered is at the wrong format. Please only use alphanumerical characters.</p>
    </div>

    One rule tho, .tag-selector--input has to be display: flex;.

    一个规则寿, .tag-selector--input 必须display: flex;

    翻译自: https://vuejsexamples.com/a-simple-tag-selector-as-a-vue-component/

    vue 组件标签里面套组件

    展开全文
  • 主要介绍了vue组件中实现嵌套子组件案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 组件 如何使用 父组件 的数据? JavaScript: 1.全局创建父级组件 'Father': Vue.component('Father',{ //父组件名称 template:'#father', //组件配置的id data(){ return{ money:1000,n:100 }} //...

    子组件 如何使用 父组件 的数据?

    JavaScript:
    1.全局创建父级组件 'Father':
    
    Vue.component('Father',{ 			     //父组件名称
        template:'#father',					 //组件配置的id
        data(){ return{ money:1000,n:100 }}	 //组件的数据
     })
    
    2.全局创建子级组价:
    
    Vue.component('Son',{ 						//子组件的名称
         template:'#son',						//子组件配置的id
         props:{                                 /* 2.接收父组件的数据,可以操作数据 */
             'money':Number,
             'n':{ bijiao(val){ return val>300 } },
             'num':{ type:Number,default:200 }
         }
      })
    
    3.注册(必须记住):
    
    		new Vue({
    		    el:'#app'
    		})
    

    html:

    1.vdom作用域:
       <div id="app">
            <Father></Father>			//使用父级组件
        </div>
    
    2.父组件的配置(子级组件标签在这里嵌套使用了)
    
    <template id="father">
    <div>
            <h3> 这里是父组件 </h3>
         					     <!-- 1.嵌套子级组件Son,子组件属性绑定了父级数据 -->
            <Son :money='money' :n='n'></Son> 	
    </div>        
    </template>
    
    3.子组件的配置
    
    <template id="son">
      <div>
          <p>这是子组件信息</p>
        <p>从父组件接收的数据{{ money }}</p>      <!-- 3.输出数据 -->
        <p>自己的数据,初始值{{ num }}</p>
      </div>
    </template>
    

    注意:

    • 全局创建组件时,data为函数,数据要return{ 以一个对象的方式返回 }。
    • 全局创建组件,必须要注册构造函数Vue,标明作用域‘#app’。
    • 子级组件使用父组件的数据,需要使用v-bind:进行对应的属性绑定,
    • 子级组件使用props对象,接收父级组件的数据,用‘ ’单引号区分
    展开全文
  • vue组件中如何嵌套子组件

    万次阅读 2018-12-09 11:10:00
    如何把一个子组件comment.vue放到一个组件中去 1、先创建一个单独的 comment.vue 组件模板 &lt;template&gt;  &lt;div class="cmt-container"&gt;  &lt;h3&gt;发表评论&...

    如何把一个子组件comment.vue放到一个组件中去

    1、先创建一个单独的 comment.vue 组件模板

    <template>
        <div class="cmt-container">
            <h3>发表评论</h3>
            <hr>
            <textarea placeholder="请输入要BB的内容(最多吐槽120字)" maxlength="120"></textarea>
            <mt-button type="primary" size="large">发表评论</mt-button>

            <div class="cmt-list">
                <div class="cmt-item">
                    <div class="cmt-title">
                        第1楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2012-12-12 12:12:12
                    </div>
                    <div class="cmt-body">
                        锄禾日当午 符合
                    </div>
                </div>

                <div class="cmt-item">
                    <div class="cmt-title">
                        第1楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2012-12-12 12:12:12
                    </div>
                    <div class="cmt-body">
                        锄禾日当午 符合
                    </div>
                </div>

                <div class="cmt-item">
                    <div class="cmt-title">
                        第1楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2012-12-12 12:12:12
                    </div>
                    <div class="cmt-body">
                        锄禾日当午 符合
                    </div>
                </div>
            </div>

            <mt-button type="danger" size="large" plain>加载更多</mt-button>
        </div>
    </template>

    <script>
        
    </script>

    <style lang="scss" scoped>

    .cmt-container{
        h3{
            font-size: 18px;
        }
        textarea{
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list{
            margin: 5px 0;
            .cmt-item{
                font-size: 13px;
                .cmt-title{
                    background-color: #ccc;
                }
            }
            .cmt-body{
                line-height: 35px;
                text-indent: 2em; //缩进
            }
        }
    }
        
    </style>

    2、在需要使用组件的 页面中,先手动导入 comment 组件
    + import comment from './comment.vue'

    3、在父组件中,使用'components' 属性,将刚才导入的 comment 组件,注册为自己的 子组件
    4、将注册子组件时候的,注册名称,以 标签形式,在页面中引用即可

     

    展开全文
  • element table组件表格里面表格

    万次阅读 2018-11-29 19:16:39
    -- 展开项表格结束位置 --> align="center" prop="itemDescription" label="物资描述"> <!-- 这里可以继续写大表格中的列 --> header是小表格动态列的数据,是一个数组,小表格的表头和表内容都是...

    在我的项目里面有这样一个需求,表格里面展开项是一个表格,且嵌套的表格头部是动态列。以下是html代码,tableData是外层表格的数据(下面我就将外层表格称为大表格,里面嵌套的表格称为小表格)

    <el-table
        :data="tableData"
        align="center"
        stripe>
      <!-- 展开项表格开始位置 type="expand"必须写-->
        <el-table-colum type="expand">
          <template slot-scope="props">
            <!-- 通过props得到大表格的每一列数据,dataList是小表格的数据,通过props.row.dataList获取 -->
            <el-table
              :data="props.row.dataList"
              align="center"
              stripe>
              <el-table-column
                align="center"
                :prop="'goodsDatas.' + item.propName"
                :label="item.propComments"
                v-for="item in header[props.$index]"
                :key="item.id"> 
              </el-table-column>
              <!-- 如果小表格里面有固定列写法如下 -->
              <el-table-column
                align="center"
                :prop="itemCode"
                :label="物资编码"> 
              </el-table-column>
              <!-- 固定列结束位置 -->
            </el-table>
          </template>
        </el-table-colum>
      <!-- 展开项里表格结束位置 -->
        <el-table-column
          align="center"
          prop="itemDescription"
          label="物资描述">
        </el-table-column>
        <!-- 这里可以继续写大表格中的列 -->
      </el-table>
    

    header是小表格动态列的数据,是一个数组,小表格的表头和表内容都是通过v-for循环header得到的。在data中定义header

    data() {
    	return {
    		header: []
    	}
    }
    

    下面是js代码,获取请求返回的数据data.tableData,展现表格数据

    data.tableData.forEach((v) => {
          v.dataList.forEach((_v) => {
            this.header.push(_v.DataListItems);
            // 这里的DataListItems就是小表格中生成动态列需要的数据
          })
        })
    

    因为大表格可能有很多行,而每一行下面都可能有展开项表格,所以如果直接赋值 this.header = _v.DataListItems 就只能获取最后一次循环的值。

    注意:因为大表格的数据是一个数组,小表格的数据也是一个数组,小表格的动态列数据也是一个数组,所以v-for="item in header[props. i n d e x ] &quot; 在 这 里 用 index]&quot;在这里用 index]"index进行了区分。

    最后实现如下效果
    在这里插入图片描述
    也不知道我描述清楚了没有,如果有不清楚或者错误的地方欢迎小伙伴们来信。

    展开全文
  • 想在一个组件返回另外一个组件,其中另外一个组件的点击事件中,可以触发多个调转页面,如果一个集群下有多个主机,每点击一个主机时就会跳转到这个主机的详细信息 2. 案例 2.1 案例注意 在子组件中必须传入...
  • 该文件为axureapp原型组件,内容包括:基础组件、页头页尾、弹框、输入框、常用页面切换动效,常用交互动效,内容丰富且使用,逼格极高
  • 生命周期流程图 Created with Raphaël 2.2.0父beforeCreate父created父beforeMounted Created with Raphaël 2.2.0子beforeCreate子created子beforeMounted ...子组件更新过程 父beforeUpdate...
  • 前篇:数据可视化 数据可视化看板项目一:(2)搭建组件套- (1)基础说明 为了方便后期的设计标准化,要对可视化的组件套进行一个设计的标准化。 标准化内容: 1.组件套的结构和外框结构 2.背景和组件的效果 3...
  • VMware vSphere v6.7全套组件 服务器应用 虚拟化技术学习
  • 所以才有了这一篇,从什么是组件,到什么是软件中的组件化设计,再到组件设计中有什么优势和挑战,到最后如何构建一套出色的组件系统。每个人的想法都不是一样的,所以这一套组件设计思想,可能也并不完善,仅作为...
  • 很好的支票组件,页面直接调整打印内容,资源内含打印测试页(仅在预览时可见,不输出到打印机的打底图)。
  • Winform开发全套31个UI组件开源共享]

    千次下载 热门讨论 2015-08-09 17:06:05
    [Winform开发全套31个UI组件开源共享]
  • 前台模板 播放音乐组件和全站9在网上搜集,在这里和大家分享
  • 后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板HTML+整套Easyui皮肤组件-后台管理系统模板后台模板...
  • 电信设备-移动终端外接组件及其保护.zip
  • 第二高大上的原型组件库,能辅助原型设计人员高效的工作,辅助项目经理完成漂亮的Axure原型设计页面。
  • easyui皮肤,用了扁平化的设计风格,在easyui官方最新版jQuery EasyUI 1.4.5的基础上重新设计所有组件,与easyui默认皮肤一样,可以很方便的进行替换设置,并且也可以很方便的对本皮肤组件进行颜色和图片的...
  • 电子政务-平板电脑保护套组件.zip
  • 2后台模板HTML+整套Easyui皮肤组件-后台管理系统模板
  • 电子政务-一种电缆夹套组件.zip
  • easyui皮肤,用了扁平化的设计风格,在easyui官方最新版jQuery EasyUI 1.4.5的基础上重新设计所有组件,与easyui默认皮肤一样,可以很方便的进行替换设置,并且也可以很方便的对本皮肤组件进行颜色和图片的...
  • easyui皮肤,用了扁平化的设计风格,在easyui官方最新版jQuery EasyUI 1.4.5的基础上重新设计所有组件,与easyui默认皮肤一样,可以很方便的进行替换设置,并且也可以很方便的对本皮肤组件进行颜色和图片的...
  • 对于上面这块看板而言,它实际上有大致9块组件套组成,超过40个组件构成。 项目SOP的问题: SOP是一种标准的作业程序。所谓标准,在这里有最优化的概念,即不是随便写出来的操作程序都可以称作SOP,而一定是经过...
  • uniapp 子组件向父组件传值

    万次阅读 2019-07-27 12:58:17
    使用组件可以减少代码的重复率,提高写代码的效率,改起来也方便。 最近在使用uni-app做项目,一套代码多端实现,做些简单的项目还是可以的。废话少说,说说子组件向父组件传值。 子组件获取到值的时候,使用$emit...
  • vue组件里面引入highchars

    千次阅读 2017-05-12 16:29:12
    这里讲的主要是想谈谈基于Vue的一个组件开发。不得不说的一点就是,在实际的Vue项目中,页面中每一个小块都是由一个个组件(.vue文件)组成,经过抽离后,然后再合并一起组成一个页面。由于上家公司我负责多的是可视...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 360,549
精华内容 144,219
关键字:

组件里套组件