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

妖狐艹你老母 2022-11-04 00:51 415阅读 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 条评论，415人围观）

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

相关阅读

相关函数定义与调用：如何在Python中创建并使用自定义函数？

在Python中，你可以按照以下步骤创建并使用自定义函数： 1. **定义函数**：使用`def`关键字开始定义函数。函数名应具有描述性，便于理解。 ```p

迈不过友情╰/ 2025年02月16日 05:18/ 0 赞/ 42 阅读

相关 java自定义函数创建

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

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

相关 Oracle自定义函数（UDF）使用

Oracle自定义函数的语法如下： create or replace function 函数名(参数1 模式参数类型) return 返回值类型

￡神魔★判官ぃ/ 2023年07月07日 14:56/ 0 赞/ 18 阅读

相关 vue render函数怎样使用

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

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

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

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

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

相关【基础】自定义函数

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

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

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

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

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

相关 Hive创建自定义函数

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

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

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

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

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

相关 iview,用render函数渲染

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

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