VUE_render渲染函数基础使用，使用render函数创建自定义按钮

妖狐艹你老母 2022-11-04 00:51 371阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

# 创建组件button #

components/button.vue

<script> export default { props:{ type:{ type:String, default:"" }, text:{ type:String, default:"" } }, render(h) { //h：createElement return h('button',{ //v-bind:class class:{ 'btn':true, 'btn-success':this.type === 'success', 'normal':!this.type }, //dom属性 domProps:{ innerText:this.text || '未传入按钮文字' }, //on => v-on }) }, } </script>
    <style scoped> .btn{ width: 200px; height: 50px; line-height: 50px; background: green; border-radius: 7px; border: none; } .btn-success{ background: goldenrod; } .normal{ background: red; } </style>

# 使用 #

<template>
      <div class="home">
        <div>
          <Button :type="'success'" :text="'botton'" />
        </div>
      </div>
    </template>
    
    <script> // @ is an alias to /src import Button from '@/components/button.vue' export default { name: 'Home', components: { Button } } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221023/f7f2ee18c0cf4655a4536e4c6076150c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 java自定义函数创建

自定义函数创建修饰符返回值类型方法名(参数类型参数名){ ... 方法体 ... retu

青旅半醒/ 2024年03月29日 15:11/ 0 赞/ 78 阅读

相关使用Pgsql创建自定义函数，生成uuid或等级

CREATE OR REPLACE FUNCTION uuid() RETURNS varchar AS $uuid_str$ DECL

快来打我*/ 2023年10月04日 17:15/ 0 赞/ 9 阅读

相关 vue render函数怎样使用

一般来说，vue提供了template，让我们写页面的时候非常方便 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

痛定思痛。/ 2023年06月16日 10:41/ 0 赞/ 30 阅读

相关 Vue render 函数中使用this

1.在render中直接使用this,on里面click函数不是箭头函数使用this需要在父级将this保存起来才能使用 render: (h, params)

亦凉/ 2023年06月08日 04:58/ 0 赞/ 21 阅读

相关 VUE_render渲染函数基础使用，使用render函数创建自定义按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2022年11月04日 00:51/ 0 赞/ 372 阅读

相关【基础】自定义函数

前言 Github：[https://github.com/yihonglei/road-of-arch/tree/master/thinking-in-mysql][h

谁践踏了优雅/ 2022年07月17日 00:14/ 0 赞/ 198 阅读

相关 minigui/mgncs:自定义渲染器(renderer)实现透明背景按钮(transparent button)

一般来说，对于`mStatic`,`mImage`这样的控件，只要设置了透明属性(`transparent=true`),就可以实现背景透明，但对于`mButton`按钮却不行

「爱情、让人受尽委屈。」/ 2022年05月13日 23:54/ 0 赞/ 319 阅读

相关 Hive创建自定义函数

一、概述 1. 如果hive的内置函数不够用，用户也可以自己定义函数来使用，这样的函数称为hive的用户自定义函数，简称UDF 2. UDF使得Hive的可扩展性增强

妖狐艹你老母/ 2022年02月27日 15:30/ 0 赞/ 345 阅读

相关 Render渲染函数-深入应用

渲染函数是vue中的一个非常重要的功能。基本在个性化的展示上都会使用到。所以需要对其有较为深入的理解才行。之前写过一篇关于渲染的，算是基础。在随后的使用过程中，发现还需要更

雨点打透心脏的1/2处/ 2021年10月15日 12:21/ 0 赞/ 376 阅读

相关 iview,用render函数渲染

<Table border :columns="discountColumns" :data="discountData.rows"></Table> disc...

红太狼/ 2021年05月02日 14:47/ 0 赞/ 567 阅读